Log in to your SnapPages website, go to your Dashboard and click on Pages.

Click on the ellipsis menu next to the page you want to add the widget to.

Select Edit to open the page in the editor.

The selected page will be displayed in editor mode with items on the left sidebar allowing you to add sections and blocks to the page. In the main section we have added 2 text box blocks and a divider.

We will add the Code block beneath the last text box. You can of course add more sections and add the Code block in any section.

Click on Blocks in the left sidebar menu to add a new block to the section.

Select the Code block and drag it on the section.

SnapPages allows you to create named code snippets, i.e. you can store all your code snippets with a Title to be used elsewhere on your website.

In the Add Custom Code dialog box, select the option you want to use.

If you haven’t created a code snippet yet, choose the Create New option. Using this option allows you to name the code snippet for later reference. You don’t have to enter a name but then only the last one created will be stored with a Title “New Code Snippet”.

When the Code Editor opens up, enter your snippet into the Code box.

When done, click on Save at the bottom of the page.

This will save the contents of the Code Editor box and return to the Page editor and indicate that a Code Snippet was entered.

You can click on Preview to see what the widget will look like on your page.

This will indicate that you need to save the changes you made. If you want to continue previewing just click on Save and Preview.

Your widget will fill the available area, set by the iframe width in your snippet.

You can change this to e.g. 50%.

This will then display the widget smaller. If you make the iframe width too small, thus making the actual width of the images too small, you won’t be able to click on an image to display it in a lightbox and you will also not be able to click on the social media buttons if you had them set up in your widget on your SnapWidget dashboard. Try to keep the width > 35%.

The following is done with a width of 35%.

Clicking on an image will display it in a lightbox.

On the Preview page you will be also able see what your page will look like in the different formats (responsiveness), i.e. Desktop, Tablet and Mobile. This also applies when you work with your Slideshow Widget.

The process of adding the Slideshow Display widget is the same as the Grid Display widget. The major difference that could be addressed is the fact that the grid contains more than one static image and the Slideshow Display displays only one image at a time. The factors mentioned for the Grid Display such as size and justification need a different set of modifications.

Select the Slideshow Display page to open in the Page Editor.

Insert your Responsive Slideshow Display widget snippet the same way we added our Grid Display widget snippet.

This will display the widget as follows on your website page.

The widget is displayed with an iframe width of 100% but it is left justified. You can’t change the width nor the justification with the standard Responsive Slideshow widget. If this layout suits you, skip the next steps.

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 e.g. 200px each. Although the thumbnail size (in px) is important because it will be used in the iframe width and height setting in your snippet, you can change this in the code snippet when entered in the Code box. This change will then only be applicable to this SnapPages instance of your widget. If you use your widget on any other website (CMS, E-Commerce or Blog) it will still utilize the Thumbnail setting as set up on your SnapWidget dashboard.

We are 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:

With the iframe width and height setting to 200px, your widget will be displayed as follows.

At first glance this looks fine, but it is too small. Even if you increase the height and width, the widget won’t be responsive.

Make the following changes to the snippet.

This will then display the widget as follows with the ‘Wrapper’ width set to 20%. The widget will also be responsive.

Clicking on one of the images displayed in the SlideShow will display that specific image in a Lightbox display.