Page builder general

This section details the main elements and aspects of Viva’s unique application of the WPBakery Page Builder. Discovering the different areas, icons, and tools we have included will enable you to build beautiful pages quickly.

How to use the page builder

In this overview, you will find everything you need to know about Visual Composer page builder; starting with how the most commonly used interface elements work. Visual Composer has everything you need to manage content elements with a single click: add, edit, duplicate, remove or create element presets, etc. You can also find some interesting video tutorials with VC Video Academy here: https://wpbakery.com/video-tutorials/

1) Add elements

KeyDesign Elements gives you instant access to 30+ built-in content elements. Each element has been carefully crafted and offers multiple options. Simply insert elements into your page, click on the Add Element link, and you’ll see an overlay window containing all the available modules. Select the one you want, and it will be inserted onto the page.

2) Add blocks

With over 200 original designed template blocks that you can browse through and import directly onto your page, Viva allows you to design stunning pages on the front-end of your website in real-time.

The template blocks can be further customized and arranged in any number of ways. Each shortcode comes with its own settings tab where you can easily customize the content and design without having to touch a single line of code. Also, you can get a live preview of changes you are making right inside the front-end editor.

More info on the Template Block manager here.

3) Undo/Redo buttons

You can undo/redo your most recent changes the same way as you do with the classic WordPress text editor.

4) Custom CSS code

If you need to insert custom CSS code for use on a single page only, you can easily do so. The custom code will be stamped only for the page in question, and will not appear on any other page. At the top right corner, you will see a Gear icon. Click on it to open a code editor window and insert your custom code.

5) Drag and drop elements

With the intuitive drag and drop interface, you can quickly change your layout or reorder elements. Simply drag elements or modules using the Drag Arrows Icon.

6) Open Settings

You can modify rows, columns, and module presets in seconds, and build complex layouts without using a single line of code. Simply open the setting from the Pen Icons. This will open a different overlay window for every module category with your options organized in convenient tabs.

7) Copy, paste, and clone elements

One way to make page building proceed more efficiently is to go to use the copy, paste, and close functionalities.

Was this article helpful?

Related Articles