Adding your Instagram, Facebook or Twitter widget to your SitePad Builder 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.
SitePad Builder helps users to build their website with amazing Drag & Drop functionality, less time consuming with fully responsive pre-designed templates. Some knowledge of HTML, CSS will be to your advantage when adding your widget but all steps are explained in detail so you can don’t need to be an HTML boffin.
SitePad Builder provides a variety of templates to use when creating your website. For a quick overview of how to create your website have a look at the SitePad Builder docs page. We won’t go into these details as it is beyond the scope of this tutorial.
The process for inserting your SnapWidget snippet does not depend on the template you have chosen. The only difference is the way the background and other elements are displayed.
Adding your widget to your SitePad Builder website is achieved by adding custom HTML to pages on your website. The snippet must be added to each page where you want it to be displayed. For this tutorial we have created two (2) pages, i.e. the Grid Display page and the Slideshow Display page. We added a title to both these pages. The process is the same for both pages but the area where you want to display it could be different depending on current content on your page.
In this tutorial we will discuss the Grid and the Slideshow display. As we go along, we will explain the difference.
A. Adding your snippet to your webpage.
Log in to your SitePad Builder website and on your dashboard select Pages in the left sidebar menu.
Select All Pages on the dropdown menu to display a list of the pages in your website.
Click on the Edit this item icon for the page you want to add your widget to.
This will display the selected page in edit mode.
On the Edit Page Settings left sidebar click on X to close the menu.
This will now display a full menu of all available widgets.
We are going to use the </> Embed widget to add our SnapWidget code snippet. Scroll down on the widget list till you find the OTHER group.
Drag the </> Embed widget on to the Add New Section / Add New Row area of your page.
This will show the area where the widget will be displayed.
On the left sidebar the editor will display the Edit Embed dialogue. Select the Settings tab. This will then display the text box allowing you to enter your snippet.
Overwrite the current line with your snippet code. You can enlarge the text box by dragging the handle in the right bottom corner. Unfortunately you can’t make the text box wider.
As soon as you have added your snippet it will display your widget in preview mode. This is exactly as it will be displayed on your live website.
To save the changes to your website click on the Update button on the top right menu.
The editor also allows you to check what your page will look like on different screen sizes, i.e. monitor, tablet or smart phone by using the media selection icon.
To preview your changes on your live website, you can click on the Preview Changes button.
B. Adding a Grid Display widget.
If you have added your standard unmodified responsive Grid Display widget code to your webpage then your widget will now be displayed as follows on your web page.
The widget is displayed to fill the available area 100%. To change the displayed width you can change the iframe width of your snippet, e.g. change the width to 50%.
Please note - if you reduce the size too much you won’t be able to click on the images and your social media buttons will also not be displayed properly.
The widget will now be displayed at 50% but it will be left-justified. To center-justify it (or even right-justify if you want to) we will encapsulate the widget in a
<div>area. Note that the widget stays responsive. Make the following changes to your snippet. Leave the iframe width at 100%, the widget width will now be set by the width setting of the<div style=”width:50%;margin:auto”>inline CSS setting. The margin option will set the widget to center-justified.
This will now display your widget as follows.
If you click on any of the images in the grid it will be displayed as follows in a Lightbox.
The process for adding your grid widget to any other page (or sub-page) or to a blog post is exactly the same.
The above tutorial is for adding your Grid Display widget to a page. The next part will cover the process to add a Slideshow Display widget to your page.
C. Adding a Slideshow Display widget.
If you have added your standard responsive Slideshow Display widget code to your webpage then your widget will now be displayed as follows on your web page.
You will notice that the widget does not fill the HTML element area width and is displayed left justified.
Changing the width of the iframe to e.g. 50% will make no difference to the way the widget is displayed.
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: 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.
If you click on any of the Slideshow images it will be displayed as follows in a Lightbox.
