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 actually 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:
START: No HTML Code Object is available but you can enter HTML code into a Text Object with limited functions. You can enter your snippet code but you can’t place it on your website the way an HTML Code Object allows you to. The same also applies when adding your widget to a blog post in any of the versions (a blog post doesn’t provide the HTML Code Object).
EVOLUTION: HTML Code Object available.
PROFESSIONAL: HTML Code Object available.
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. We will also add posts to a blog. The process is the same for both display types with a few subtle differences to make the widget appear as you need. For the blog post we will explain the limitations and possible work-arounds. 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.
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.
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 application.
- 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.
- Select 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.
- 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 Enable Automatic Height is selected.
- 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, Border and Alignment and Margin settings. On the Alignment dropdown list select how you want your widget to be displayed (this adds CSS to the created page applicable to your widget).
- We will select 5 - Center to keep our widget always centered on the page irrespective of the width we set in our snippet code. This only applies to the Grid widget, we will explain center justifying your Slideshow widget in the Slideshow specific part of this tutorial.
- On the Text tab you can add a title to the displayed widget.
- 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 webpage 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.
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 but 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 center justifying of the widget is handled by the Alignment setting you did on the Style tab for the Object style (see above).
- 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.
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 on your web page.
- Due to the setup of your widget on your SnapWidget dashboard, the widget will be displayed small as well as left justified. 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 utilise the Thumbnail setting as setup on your SnapWidget dashboard.
- If you did set the Object style to 5 - Center on the Style tab (see above) then your widget will be displayed as follows. The size will be as setup on your SnapWidget dashboard.
- 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).
- 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 setup 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.
- On the HTML Code tab modify your snippet code to the following. Add the two <div> areas with their classes and remove the width and height settings in the iframe Style (this will be replaced by CSS code percentage values).
- You will notice the two <div> areas, 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 atrribute 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.
- 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 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 size of the Wrapper area (the wrapper class) in the CSS code.
- Change the width of the wrapper class. 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.
- 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 35% is about the minimum we could go. The buttons do however still display in the Lightbox (for PRO widget users).
- The above tutorial applies to the EVOLUTION as well as the PROFESSIONAL versions of WebSite X5.
- In the following part we will show you how to add your widget to a blog post (START, EVOLUTION and PROFESSIONAL) as well as on a webpage (START only) by using the Text Object. The principle is the same for all versions.
Adding your widget by using the Text Object
- When using the Text Object there are some limitations to what you can do with the HTML code you enter.
NB When entering your snippet in a Text Object make sure Enable HTML Code is selected. This must be selected during your HTML code entry and also when saving your code.
- No center justification 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.
- The Slideshow widget cannot be set to be responsive. The Grid widget is still responsive.
- Only the size of the widget can be changed.
- Change the iframe width to a lower percentage. Please note that if you make it lower than 60% (as indicated earlier in this tutorial for the Grid display) you won’t be able to click on the thumbnail to display it in the Lightbox.
- If you use your responsive widget you cannot change the size of your widget.
- If you use your non-responsive widget you can change the size of the widget by increasing or decreasing the iframe width and height values (in pixels).