{"id":57,"date":"2020-01-28T09:37:34","date_gmt":"2020-01-28T09:37:34","guid":{"rendered":"https:\/\/www.oxilabdemos.com\/image-hover\/docs\/integrate-with-page-builder\/elementor-page-builder\/"},"modified":"2020-11-16T14:08:21","modified_gmt":"2020-11-16T14:08:21","slug":"elementor-page-builder","status":"publish","type":"docs","link":"https:\/\/www.oxilabdemos.com\/image-hover\/docs\/integrate-with-page-builder\/elementor-page-builder\/","title":{"rendered":"Elementor Page Builder"},"content":{"rendered":"

Elementor is one of the most advanced frontend drag & drop WordPress Page Builders. Now our plugin, Image Hover Effects Ultimate works perfectly within Elementor as well. The elements and extensions of the Image Hover Effects Ultimate work seamlessly within Elementor. <\/strong><\/em><\/p>\n

With the ease of its functionality and Image Hover’s versatility, now you can create high-end professional designs in no time and without any touch of complex coding!<\/strong><\/em><\/p>\n

 <\/p>\n

 <\/p>\n

Working with the Elementor<\/h1>\n
\n

Working with the Elementor is very simple while using the Shortcodes of the Image Hover plugin. So, let’s see how to put the Shortcodes within this powerful drag & drop visual page builder and get the work done:<\/em><\/p>\n

 <\/p>\n

\u21d2First, Go to the WP dashboard and create a new page\"\"<\/a><\/p>\n

\u21d2Now, Add the page Title & Click on the ‘Edit With Elementor’<\/strong> Button to Switch to the editor page.<\/p>\n

A new page will appear as the Elementor Dashboard with the editing screen\u00a0on the right, and the Elementor Panel on the left.<\/p>\n

\"\"<\/a><\/p>\n

\u21d2Click on the + symbol<\/strong> in the middle of the page for Adding a New Section.<\/p>\n

 <\/p>\n

Each Structure in Elementor <\/strong><\/em>consists of rows and columns. The row is a base that defines the logical structure of the page. Each row consists of columns and with Elementor, you have full control of them. You can select the number of columns you want in a single row from the multiple structure option.<\/strong><\/em><\/p>\n

 <\/p>\n

\u21d2Now, select your structure containing single or multiple columns & rows as per your need. Here, we select a single column row for a header section.<\/p>\n

\"\"<\/a><\/p>\n

 <\/p>\n

 <\/p>\n

\u21d2Inside the section, click on the + symbol. You’ll find the list of Elementor widget. Now, drag the Shortcode <\/strong>element and drop it inside the section like below,<\/p>\n

\"\"<\/a><\/p>\n

\u21d2Now, Navigate to Image Hover> Shortcode<\/strong> page like below<\/p>\n

\"\"<\/a><\/p>\n

\u21d2Copy the Shortcode<\/a> of an element item you want to add & Paste it into the Shortcode Box on the left side.<\/p>\n

 <\/p>\n

You can see the preview of the page by clicking the eye symbol at the bottom of the panel or you can just click to hide the panel for a full-screen instant page preview.<\/strong><\/em><\/p>\n

 <\/p>\n

\"\"<\/a><\/p>\n

Now, build the page by adding more Shortcodes and Publish the page.<\/p>\n

 <\/p>\n

That’s all! You can easily embed beautiful image hover effects like that by using our Image Hover Effects Ultimate plugin within a Page Builder like Elementor. For more help, don’t hesitate to ask us.<\/strong><\/em><\/p>\n

\n