{"id":60,"date":"2020-01-28T09:39:03","date_gmt":"2020-01-28T09:39:03","guid":{"rendered":"https:\/\/www.oxilabdemos.com\/image-hover\/docs\/integrate-with-page-builder\/visual-composer\/"},"modified":"2020-11-16T14:15:58","modified_gmt":"2020-11-16T14:15:58","slug":"visual-composer","status":"publish","type":"docs","link":"https:\/\/www.oxilabdemos.com\/image-hover\/docs\/integrate-with-page-builder\/visual-composer\/","title":{"rendered":"Visual Composer"},"content":{"rendered":"

Visual Composer 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 Visual Composer. In this tutorial, you’re gonna explore the use of our Image Hover Shortcode within Visual Composer Page Builder. So let’s get started…<\/strong><\/em><\/p>\n

\"\"<\/a><\/h1>\n

<\/h1>\n

Working with Visual Composer<\/h1>\n
\n

Working with Visual Composer 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.<\/p>\n

\u21d2Or you can directly navigate to Pages> Add New with Visual Composer <\/strong>to create a new page with the Visual Composer.<\/p>\n

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

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

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

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

\u21d2A new page will appear as the Frontend Visual Composer page builder page.<\/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

 <\/p>\n

Each layout in Visual Composer 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

 <\/p>\n

\u21d2Here, inside the section, click on the + symbol<\/strong>. You’ll find the list of the visual composer widget. Now, click on the Shortcode <\/strong>element and the editing panel of this element will appear like below,<\/p>\n

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

 <\/p>\n

\u21d2Now, Navigate to Image Hover> Shortcode<\/strong> page or go to an effect page. Copy the Shortcode of an element item you want to add & Paste it into the Shortcode<\/strong> widget box in the Shortcode panel.<\/p>\n

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

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

\n