Adding your Instagram widget to your PageCloud website is easy. Follow these steps to create your widget. Once you've created your widget, follow the appropriate steps below to add it to your website.
In this tutorial we will discuss the Grid and the Slideshow display. As we go along, we will explain the differences.
PageCloud uses the EMBED App inside a Section to allow adding your code snippet. This tutorial doesn’t strive to provide a tutorial on PageCloud but it is necessary to display certain stages we went through to create this tutorial.
Please Note - the free option of PageCloud (PageCloud Start) only allows adding a single website page. To allow adding multiple pages, you will need to upgrade to one of the Premium plans.
For this tutorial we are using a single website page to display both the Grid Display and the Slideshow Display widgets in separate Sections. The process that we follow is also applicable to a website with multiple pages.
A. Let's start
Go to your PageCloud dashboard and click on Pages.
Click on Your Pages.
Select the page you want to add your widget to under Your Pages (in this case there will only be 1 page).
For this tutorial we have added 2 Sections each with a Header. We will add the respective widget snippet code to these Sections. If you don’t have a Section added for this purpose, click on the “+” to add one. This allows you to add a Section as available in your selected template or a blank one.
When the page opens in the editor, move you mouse over the left vertical menu and select the Apps item.
Scroll down on the list of Apps available and select the EMBED App under Generic at the bottom of the list.
B. Adding your Grid Display widget
Drag the EMBED App onto your page in the Section provided (for this part we will show the Grid Display widget, in the next part we will cover the Slideshow Display widget).
As soon as you have added the EMBED App, an Embed code editor will open allowing you to add your snippet. After adding your snippet, click on OK to save it.
It will then provide a preview in the editor where you can change the width and height of the widget by using the handles as provided.
You can also use the Object editor menu (right side) to change the Style, etc. of the Object.
Click on Save (top right Menu) to save your page with the changes you have made.
Please note! If you have to make changes afterwards to the snippet contents, you will have to click on the ‘Click to replace’ button.
This will unfortunately clear the contents of the Embed code. This means that if you want to make a change to the snippet, prepare the code in a normal text editor so that you can copy and paste it from there.
After you have saved your webpage, you can preview it by selecting ‘View live’ from the Save dropdown list.
Your widget will then be displayed as follows on your live website.
Please note - if you make the width too small then you won’t be able to click on an item in the grid and your social media buttons will also not be displayed properly.
Use the handles as described above to adjust to the appropriate size. The following should be a better arrangement.
C. Adding your Slideshow Display widget
As mentioned above, the process for adding the snippets is the same for both widget types.
If you added your responsive Slideshow snippet to your page it will be displayed as follows in the preview after you saved the entry in the code editor. Using the handles as explained for the Grid Display has no effect here.
It will also be displayed like this on your live website.
The widget will be displayed left-justified (as also shown in the preview). The width of the responsive Slideshow widget as well as the justification cannot be changed. If this is what you wanted then you should skip the next part.
To enable us to change the width (and height to keep it at a 1:1 ratio) we will have to make some changes to our widget.
Create a non-responsive widget on your SnapWidget dashboard. The width and height are not important, you can set them to 200px each.
We are now going to add some HTML and CSS code to our snippet to create an area where the snippet will be displayed. The area will be basically as follows:
This gives us control over the width, height and the justification of the widget. It also causes the non-responsive widget to become responsive.
The standard non-responsive widget snippet contains the following:
Make the following changes to the snippet.
Add 2 <div> blocks with the following styles (the ids are just for explanatory purposes for this tutorial, they are not used for any other purpose so you actually leave them out).
div id=”Wrapper” style=”width: 70%; margin: 0 auto;”> (this sets the wrapper to 70% of available width and center-justified. With this width setting we can change the width of the widget to any width we want).
Please Note - As with the Grid display, if you make the width too small, you will have difficulty to click on the item to display it in a lightbox. Your Social Media buttons will also not be displayed properly. For PageCloud using this setting for the Slideshow display the minimum width is 70%.
<div id="container" style="top: 0; height: 0; width: 100%; padding-bottom: 100%; overflow: hidden; position: relative; margin: 0 auto;"> (this sets the area used to display the iframe to 100% of the wrapper width as well as height = 100% of the width).
Remove the width and height attributes of the style part of the iframe and replace them with the indicated attributes (left: 0; width: 100%; height: 100%; position: absolute;).
This will then display the widget as follows:
Clicking on an item will display it in a Lightbox.
The widget is also responsive.