Adding your Instagram, Facebook or Twitter widget to your Jimdo 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.
In this tutorial we will discuss the Grid and the Slideshow display. As we go along we will explain the difference.
Jimdo uses elements to add content to the website. For the purpose of adding your SnapWidget widget we are going to use the </> Widget HTML element. For more info regarding elements as well as other Jimdo features have a look at Jimdo - Working with Elements.
For this tutorial we have used the Lille template with the leers variation. The process for adding your widget with a different template selected is the same, the main difference is the areas available for adding your widget which would mean some are narrower than other.
A. Start
Log in to your Jimdo website.
On your Dashboard select the website you want to add your widget to and click on Edit Website.
While in edit mode, select the page you want to add your widget to on the Navigation menu. Your menu could look different based on the template used.
The editor will display your page as follows.
Ignore the + Add Element at the bottom. This is for adding content to the footer of your page. Whatever you add in the Footer will be displayed on all pages in your website.
The pages we have created for this tutorial only contain a Heading (inserted by making use of the Heading element) but this is up to you.
Move your mouse over the top area on your page and you will find a new + Add Element option appearing. In our case it appears just under the Horizontal line we have added to our page (to separate the Heading and the widget) but it could be different on your page, it all depends what you have as content on your page already.
Click on the + Add Element option and select the </> Widget / HTML element under *** More Elements and Add-ons.
Insert your snippet in the text box part of the HTML widget and click on Save.
Your widget will now be displayed in Preview mode which is exactly as it will be displayed on your live website except for the + Add Element option at the bottom and the View Mode at Right Top.
If you click on the View Mode button (Top Right), you will be presented with an option to check how your page acts responsively for 3 screen types, i.e. Desktop Preview, Portrait Mobile Preview and Horizontal Mobile Preview.
Click on Go back to editing to return to the editor.
If you want to make changes to your snippet, just click on the Widget element to display the HTML editor. After you have made changes, click on Save and your Preview will be updated with the new contents.
The process for adding your Slideshow Display widget is exactly the same, but the way the widget will be displayed differs and we will go through those changes in the next parts of this tutorial.
B. Displaying your Grid Display widget.
If you added your standard responsive unmodified Grid widget your live webpage will be displayed as follows.
The widget uses 100% of the available space. If this is what you want to see, skip the next part of the tutorial, else read how we can change the way it is displayed. Note that the widget is responsive (will change size on smaller displays).
We can change the width of the displayed widget by changing the iframe width to e.g. 75%:
The widget will now be displayed at 75% 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 with the text-align attribute set to center (or right). Note that the widget stays responsive.
In the above we worked with the Grid Display widget. Adding the Slideshow widget is the same procedure but the way the widget displays on the website differs (width, height as well as justification).
C. Displaying your Slideshow Display widget.
If you added your responsive Slideshow snippet to your page it will be displayed as follows:
The widget will be displayed left-justified. The width of the responsive Slideshow widget as well as the justification cannot be changed. As with the Grid display, if this is what you want just 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 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:
And displays as follows on your web page.
Make the following changes to the snippet.
Add 2 <div> areas with the following styles (the id’s 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: 30%; margin: 0 auto;”>(this sets the Wrapper to 30% of available width and center-justified. With this width setting we can change the width of the widget to any width we want).<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.
The same procedure applies when you add your snippet(s) to a blog post.
