Adding your Instagram widget to your Nicepage 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.
Nicepage can be run in two ways, i.e. web option (https://nicepage.com/) or as a standalone application after downloading the Nicepage installation package.
For this tutorial we will use the desktop version with a two-page website to discuss the Grid and the Slideshow display. As we go along, we will explain the differences.
Nicepage uses an HTML element inside a Block to allow adding your code snippet. This tutorial doesn’t strive to provide a tutorial on Nicepage but it is necessary to display certain stages we went through to create this tutorial.
A. Start
Log in to Nicepage, go to your dashboard and select the site you are working on under MY SITES.
Select the page you want to add your widget to on the PAGES page. For the first part of this tutorial we have selected a page to display the Grid Display widget.
The page editor will open allowing you to add the Custom HTML element to your page.
To add the Custom HTML element to your page, click on the + New Block button.
This will open up a dropdown in the left side-bar. Select the </> HTML element.
This will add the HTML element to your page.
You can resize the provided area by using the handles to resize width as well as height.
Note: You will also notice that the editor will provide a 3-tab editor in the right side-bar, allowing you to set parameters for the element, the block and also the page. You can also use the justification (Vertical and Horizontal), width and height settings as well as the Top, Left, Bottom and Right margins for the element.
On the HTML tab, insert your snippet code into the Code text box (overwrite the existing sample code).
Note: For this part of the tutorial we have added the snippet code for a Pro Grid Responsive widget. The default iframe width setting is 100%, meaning that it will fill the entire provided HTML element area. Take note that it is also left justified but you won’t see this now due to the 100% width setting of the iframe. We will look at the difference just now.
Using the Preview option, you can perform a Quick Preview to see how the page will be displayed on your website.
You can also use the media selector to see how your page will display on various displays, i.e. PC monitor, tablet as well as smart phone.
If you want to change the iframe width to e.g. 75% then the widget will be displayed as follows:
If you want to center justify the widget, use the setting in the right side-bar Block tab.
Clicking on any of the items in the Grid Display will display the item in a lightbox.
B. Adding your Slideshow Display widget
In the above we added the Grid Display widget code. Adding your Slideshow Display widget code follows the same procedure with a few possible changes which we will explain as we go along.
If you added the Pro Slideshow Responsive widget (with the default iframe width set at 100%), it will be displayed as follows:
You will notice that the widget does not fill the HTML element area width and is displayed left justified.
If you change the width of the iframe to e.g. 50% it will be displayed as follows (size stays the same and it will ‘move’ towards the center).
Using the Block justification setting to set the widget to center justified has no effect.
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:
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: 35%; margin: 0 auto;”> (this sets the Wrapper to 35% 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. Any width < 35% will be too small.
<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.
The widget is also responsive.