Adding your Instagram, Facebook or Twitter widget to your WebSite X5 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.
WebSite X5 Overview (applicable to SnapWidget)
WebSite X5 is an all-in-one solution packed with tools to create and publish professional websites, online shops and blogs in just 5 easy steps. WebSite X5 is designed to work like a wizard, visually guiding users through the steps to create and publish a complete, functional and professional website. No programming skills required!
WebSite X5 is available in three (3) versions, i.e. START, EVOLUTION and PROFESSIONAL. We won’t go into all the detail but the part concerning SnapWidget (adding Custom HTML) is done as follows in the different versions:
The START version - The Start version is a bit more than a demo version but there is no HTML Code Object available. You can enter HTML code into a Text Object with limited functions meaning you can enter your snippet code but you can’t place it on your website or change the size the way an HTML Code Object allows you to.
The EVOLUTION version - HTML Code Object available.
The PROFESSIONAL version - HTML Code Object available.
Please note: When adding your snippet to a Blog Post (in any version) it is also done via a normal Text Object because there is no HTML Code Object available for Blog Posts.
Some knowledge of HTML, CSS will be to your advantage when adding your widget but all steps are explained in detail so you don’t need to be an HTML or CSS boffin.
Adding your widget to your WebSite X5 website is achieved by adding a HTML Code Object 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. a page demonstrating the Grid Display and a page demonstrating the Slideshow Display.
During editing you can use the Preview option to preview changes you make but to have it displayed on your live hosted website you will have to upload your contents to your webhost (via the built-in FTP option under Export or via your own FTP program). This is beyond the scope of this tutorial but feel free to contact the friendly guys at WebSite X5 for assistance. They also have an on-line Help system available.
Adding your snippet to your web page.
For this tutorial we will use the PROFESSIONAL version but indicate where the other versions differ.
Start your WebSite X5 Pro application and click on Open Project
On your dashboard select the project you want to add your snippet to.
On the left sidebar select Map to display a list of all pages available on your website.
Double-click on the page you want to add your widget to. The Page Creation form will now be displayed with the Page Content Object categories displayed in the right sidebar.
As mentioned in the Overview, WebSite X5 utilises HTML Code Objects to allow you to add your snippet (or any other Custom HTML code).
Drag the HTML Code Object on the unused row on the page. If there is no unused row, click on the Insert Row button at the top of the page.
Double-click on the newly added Object to start entering your snippet. For this part of the tutorial we will add the Grid Display widget to show how a widget is added. More details regarding the other widgets will follow.
At the bottom of the page make sure Height is not checked (this will set Height to auto).
You can set the width to any value that you want to display your widget. The minimum width is 50%. The actual displayed width will be the result of the width selected here and the width setting of the iframe in your SnapWidget snippet.
Click on the OK button to apply your changes. The Page Creation page will return to the Add Object part.
While the row is still selected click on the Set the Object style button.
·You will see three (3) tab pages allowing you to add styles to your newly added widget.
On the Style tab you can set the Background and Border settings.
On the Text tab you can add a title to the displayed widget. You can select the font type and size as well as the alignment of your title.
On the Library tab you can select a layout style to apply to your widget. If the layout includes a border, you must also set the Border Style on the Style tab.
Click on the OK button to apply your changes. The Page Creation page will return to the Add Object part.
To preview your page, click on the Preview button.
This displays your web page exactly as it will be featured on your live published website.
By using the buttons on the Viewport selection, you can see how your page will display on different media types, i.e. Smartphone (lower than 480px), Viewport 2 (between 719px and 480px), Viewport 1 (between 1149px and 720px) and Desktop (greater than or equal to 1150px). This indicates if the widget displays responsive or not.
The widget takes up all the space allowed in the main content column of your webpage due to the 100% width setting in the snippet for the iframe. Changing this is different for the Grid and the Slideshow display as we will see in the following steps.
By selecting the Preview the WebSite on another Browser option (top right-hand) you can preview your page on any of the web browsers installed on your computer.
This is an excellent feature of WebSite X5 to allow you to see if there are any differences when your audience will view your live website on different browsers.
The above steps are the same for adding a Grid widget as well as a Slideshow widget to your page. For the purpose of this tutorial we have used the Grid widget. In the following parts we will show the specific steps for displaying and modifying the appearance of the 2 types of widget.
Adding your Grid Display widget.
If you added your standard unmodified Grid Display widget code to your webpage then your widget will now be displayed as shown below, fully covering the available area and responsive.
To change the displayed width you can change the iframe width of your snippet, e.g. change the width to 75%.
Your widget will now be displayed as follows on your web page. The widget is center-justified by default.
If you reduce the displayed width too much you won’t be able to click on the thumbnails to display the pictures in the Lightbox, only the Sharing buttons (Facebook, Twitter and Pinterest) will be available. This you can test by trial and error but we found that with the iframe width set to 60% this is about the smallest you can go. This also depends on how you did set up your widget on your SnapWidget dashboard on snapwidget.com.
Adding your Slideshow Display widget.
If you added your standard unmodified responsive Slideshow Display widget code to your webpage then your widget will now be displayed as follows.
The above is with an iframe width setting of 100%. The size is very small and it is left-justified. If you change the iframe width setting to e.g. 50% the widget width will stay the same but moved towards the center of the page. If you increase the iframe width there is no change in size or justification.
Not very practical I should think. To change the appearance of your Slideshow widget we will be making some changes to the contents of your snippet.
Create a non-responsive Slideshow widget on your SnapWidget dashboard. Although the thumbnail size (in px) is important because it will be used in the iframe width and height setting in you snippet, you can change this in the snippet itself. This change will then only be applicable to this WebSite X5 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.
With the iframe width and height setting to 200px, your widget will be displayed as follows.
To change the size, we can change the width and height in the iframe style attribute in your snippet. Always set the width and the height to the same setting to keep the widget being displayed with a 1:1 ratio (a square). Thus, with a setting of 100px for width and height the page will display as follows (50% smaller and still center-justified):
Looking at the different media sizes you will see that the widget is non-responsive (the size stays the same irrespective of the display size).
To make the widget responsive (thus bypassing or working around the setting as set up on your SnapWidget dashboard) we will add some code to the snippet. We will encapsulate the snippet in two (2) wrappers (<div>…</div> areas) to allow this. We will also add some CSS code to the snippet. This can be done as in-line CSS (the Style attribute) or with the WebSite X5 Expert feature allowing you to create classes containing CSS code that can be called in your HTML code. We will only show the Expert mode.
If you have a look at the HTML Code Object page where you entered your snippet code you will see that it consists of two (2) tabs, i.e. HTML Code and Expert.
Please note that I have added indenting to all code shown here to make the code easier to display in the tutorial. WebSite X5 does not add indenting to code.
On the HTML Code tab modify your snippet code as follows.
Remove the width and height settings in the iframe Style (this will be replaced by CSS code percentage values).
and add the two <div> areas with their classes, the first one with the class wrapper and the second with the class container. These classes will be set up in the next step.
Click on the Expert tab and add the following CSS code. We start out with all width values set to 100%. The height of the container is set to 0% but it’s value will be set to the same value as the width with the padding-bottom:100% attribute. The margin:0 auto attribute will center justify the widget. The iframe width and height are set to 100% to always fill the container.
This will create the following areas where the iframe will be displayed in. The iframe area is the actual snippet.
Your widget will now be displayed as follows on your webpage, the size will be 100% of the available display area as set up by the wrapper class, 100% of the Wrapper area as set up by the container class and 100% of the Container area as set up by the container iframe class.
By using the buttons on the Viewport selection while previewing your page, you can see how your page will display on different media types, i.e. Smartphone (lower than 480px), Viewport 2 (between 719px and 480px), Viewport 1 (between 1149px and 720px) and Desktop (greater than or equal to 1150px). This indicates that the widget displays responsive with the changes we have made.
To change the size of the widget, we will only change the width of the Wrapper area (the wrapper class) in the CSS code. The margin:0 auto attribute ensures that the Wrapper area will be horizontally centered on the page.
The Container area (keep it set as width:100% and padding-bottom:100%) will follow the width of the Wrapper area thus acting responsive.
The iframe (keep it set as width:100% and height:100%) will follow the width of the Container area and will therefore also act responsive.
To test the setting, change the width of the wrapper class to 30%. Your widget will now be displayed as follows.
With this display size you will see that the Sharing buttons (Facebook, Twitter and Pinterest) won’t display properly on the thumbnail. We found that the size set to 40% is about the minimum we could go. The buttons do however still display in the Lightbox (for PRO widget users).
Adding your widget by using the Text Object.
The above tutorial (using the HTML Code Object) applies to the EVOLUTION as well as the PROFESSIONAL versions of WebSite X5. To add your widget to a blog post (START, EVOLUTION and PROFESSIONAL) as well as on a webpage (START only) you can only use the Text Object. The principle is the same for all versions.
NB!!! When entering your snippet in a Text Object make sure the Enable HTML Code option is selected. This must be selected during your HTML code entry as well as when saving your code.
When using the Text Object, you are limited to what you can do with the HTML code you enter. No changes to justification or the widget size can be done (you don’t have an Object Style setting available as for the HTML Code Object). Adding <div> areas as wrappers don’t have any effect either. You can make use of the non-responsive widget and change the width and height of the iframe but it will always display left-justified.