{"id":63,"date":"2020-01-28T09:40:12","date_gmt":"2020-01-28T09:40:12","guid":{"rendered":"https:\/\/www.oxilabdemos.com\/image-hover\/docs\/integrate-with-page-builder\/wpbakery-page-builder\/"},"modified":"2020-11-16T14:14:09","modified_gmt":"2020-11-16T14:14:09","slug":"wpbakery-page-builder","status":"publish","type":"docs","link":"https:\/\/www.oxilabdemos.com\/image-hover\/docs\/integrate-with-page-builder\/wpbakery-page-builder\/","title":{"rendered":"WPBakery Page Builder"},"content":{"rendered":"

WPBakery is the top-ranked page builder in WordPress. It is a very flexible plugin that allows you building pages within minutes. Now our plugin, Image Hover Effects Ultimate works perfectly within this awesome page builder. In this tutorial, you’re gonna explore the use of our Image Hover Shortcode within WPBakery Page Builder. So let’s get started…<\/strong><\/em><\/p>\n

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

<\/h1>\n

Working with WPBakery<\/h1>\n
\n

Working with WPBakery is very easy while using the shortcodes of the Image Hover Effects. So, let’s see how to put Shortcodes within this powerful 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 ‘WPBakery Page Builder’<\/strong> Button to Switch to the editor page.<\/p>\n

\u21d2You can either work with Backend Editor or Frontend Editor. Here, we’re gonna work with the frontend. So click on the Frontend Editor<\/strong> button.<\/p>\n

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

\u21d2A new page will appear as the Frontend WPBakery Page Builder page.<\/p>\n

\u21d2Now, select your structure containing single or multiple columns & rows as per your need.<\/p>\n

Here, we select a single column row for a header section. And as default, a single row containing a single column is added to the page.’<\/p>\n

 <\/p>\n

Each layout in WPBakery consists of rows and columns. The row is a base that defines the logical structure of the page. Each row consists of columns and you can actually control the number of columns you want in a single row. You can also customize the row interface like below:<\/strong><\/em><\/p>\n

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

\u21d2Now, you can put your Image Hover Ultimate shortcode into the pages\/posts in two ways.<\/p>\n

Number 1,<\/strong> you can directly select the Image Hover Ultimate Element from the WPBakery element list. Our plugin is one of their widget lists now. But to be able to use it, you need to install<\/a> the plugin first.<\/p>\n

You need to just select the element and select the shortcode ID you want to add to your page.<\/p>\n

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

 <\/p>\n

And Number 2,<\/strong> You can select a text block within a row and put your shortcode within it. Or alternatively, you can directly add elements or text block if you just create a fresh new page using the builder.<\/p>\n

\"\"<\/a>\u21d2Navigate to Image Hover> Shortcode<\/strong> page or directly go to an effect page.<\/p>\n

\u21d2Copy the Shortcode of an element item you want to add & Paste it into the text block.<\/p>\n

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

Now, build the page by adding more shortcode and Update 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 WPBakery. For more help, don’t hesitate to ask us.<\/strong><\/em><\/p>\n

\n