{"id":61,"date":"2020-01-28T09:39:12","date_gmt":"2020-01-28T09:39:12","guid":{"rendered":"https:\/\/www.oxilabdemos.com\/image-hover\/docs\/integrate-with-page-builder\/themify-builder\/"},"modified":"2020-11-16T14:17:50","modified_gmt":"2020-11-16T14:17:50","slug":"themify-builder","status":"publish","type":"docs","link":"https:\/\/www.oxilabdemos.com\/image-hover\/docs\/integrate-with-page-builder\/themify-builder\/","title":{"rendered":"Themify Builder"},"content":{"rendered":"

Now our plugin, Image Hover Effects Ultimate works perfectly within the Themify builder as well. The elements and extensions of the Image Hover Effects Ultimate work seamlessly within this builder. 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

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

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

 <\/p>\n

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

\u21d2First, Go to the WP Dashboard<\/strong> and create a New Post<\/strong>.<\/p>\n

Here you’ll find the panels of different builders that you have installed in your WordPress. In the below, you’ll find the Themify Back-end<\/strong> panel.<\/p>\n

 <\/p>\n

\u21d2Now, you can either work with the back-end editor or switch to the front-end to build the page visually.<\/p>\n

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

\u21d2To work with the front-end Themify builder, first, Save<\/strong> the post through the Themify Builder.<\/p>\n

\u21d2Then, Publish<\/strong> the post and click on the Frontend<\/strong> button on the Themify Builder panel.<\/p>\n

 <\/p>\n

Your new post page will appear with the Themify Builder Menu<\/strong> on the top of the page. Here you can now add elements, put shortcodes and edit the page.<\/p>\n

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

\u21d2Now, click on the + symbol<\/strong> in the middle of the page for Adding a New Section<\/strong> or Import Layout<\/strong>.<\/p>\n

 <\/p>\n

Each Structure in Themify builder <\/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 this builder, 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

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

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

 <\/p>\n

 <\/p>\n

\u21d2Now, from the Themify menu, click on the + symbol<\/strong> to add a new widget. Then, drag the element and drop it inside the section. Here, we select the Text<\/strong> widget to put our Shortcode in it.<\/p>\n

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

 <\/p>\n

\u21d2After getting the text box to put the shortcode in, Navigate to Image Hover> Shortcode<\/strong> page to copy the desired shortcode from the Image Hover Effects Ultimate.<\/p>\n

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

 <\/p>\n

\u21d2Now, Copy the Shortcode of an element item you want to add & Paste it into the Text Box on the Themify post page.<\/p>\n

\u21d2Then, Save<\/strong> the edit and Reload<\/strong> the page to see the Image Hover Effects in action like below,<\/p>\n

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

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

 <\/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 Themify. For more help, don’t hesitate to ask us.<\/strong><\/em><\/p>\n

\n