Adding your Instagram widget to your Elementor 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.
Elementor is the leading website builder platform for professionals on WordPress. Elementor serves web professionals, including developers, designers and marketers, and boasts a new website created every 10 seconds on its platform.
Please Note!!
The free option of Elementor allows adding HTML code via the HTML element but it strips the CSS information and therefore the Lightbox and any other way of displaying your image when clicking on an item in the widget won’t work. You will need a paid plan for this with the minimum of the Essential plan.
In this tutorial we will discuss the Grid and the Slideshow display. As we go along, we will explain the differences. For this purpose we have created 2 pages to allow us to add our snippet. The pages only contain a heading.
Before we start, make sure you have the Elementor plug-in installed on your WordPress dashboard and duly activated.
A. Adding your widget snippet to a page.
Go to your WordPress dashboard and select the page you want to add your widget to.
Click on Edit to open the WordPress editor. As soon as the editor opens it will display the option to edit the page with Elementor.
Click on the Elementor option to open the page in Elementor.
Scroll down on the Elements list in the left sidebar and select HTML under General.
Drag the HTML element onto the Drag widget here area.
The section where the HTML element is placed will be shown as follows. It is quite thin and can be difficult to click on.
Right-click on the right-hand edge of the blue area to display the Edit HTML option.
The HTML Code editor will now be displayed in the left sidebar. You can make the Code editor a bit larger and wider by dragging the corner handle at the right-bottom and the vertical divider. This will assist when entering the snippet code.
Insert your snippet in the HTML Code text box.
Being a Visual Editor, Elementor will display the widget as a preview of how it will display on your live website.
Click on UPDATE at the bottom of the page to update your live website.
Your live website page will be displayed as follows.
In this part of the tutorial we have used the Grid Display widget to indicate how to enter the HTML code.
Due to the fixed settings of the available area that is provided by Elementor (and by most other website builders) some changes will have to be made to the provided widget’s HTML code if you want to change the size and justification.
B. Grid Display
As seen above (if you entered the standard responsive pro grid widget with an iframe width set at 100%), the widget will be displayed filling the whole available width.
If you change the width to e.g. 50%, it will display as follows.
It displays smaller, but left-justified. If you want to set the justification of the widget to centered you will have to add some additional HTML code.
Add a <div> block encapsulating the iframe code. The “width: 50%; margin: auto” setting of the <div> style will set the width of the <div> block to 50% and centered on the page. With this setting we will leave the iframe width set to 100%. This will set the width of the iframe to 100% of the width of the <div> block.
Please note - if you make the width too small then you won’t be able to click on an item in the grid and your social media buttons will also not be displayed properly.
This will then display the widget as follows.
C. Slideshow Display
As mentioned above, the process for adding the snippets is the same for both widget types.
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.
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: 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).
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.
<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 will then also be responsive.