Using WPBakery Page Builder
Page Builder Overview
Below is a guide of the various sections of the interface, hover over the hotspots to get familiar with where things are located.
Pencil icon: Brings up all element configuration options.
Clone icon: Allows you to clone the element.
Delete: Will delete the element.
Plus icon: Allows you to add more elements into the column.
Pencil icon: Will bring up all column configuration options.
Delete: Will delete the column.
Pencil icon: Will bring up all row configuration options.
Clone icon: Allows you to clone the row.
Delete: Will delete the row.
Content Elements
This is a list of 40+ available content elements that can be placed on the working canvas or inside of the columns. Think of them as bricks. With those bricks, you are building your layout. Most of the content elements have options, to edit them click the pencil icon. To save changes click the ‘Save Changes’ button
Click the ‘Add element’ button or the ‘+’ buttons to show the content element selection menu. Content blocks are divided into categories (All, Nectar Elements, Structure, Content, WooCommerce).
Rows
Rows are the bread and butter of WPBakery Page Builder. All Elements must be contained within a column and all columns within a row. Rows are used to divide your page into the logic blocks. Your page can have an unlimited number of rows.
Pencil icon: Will bring up all row configuration options.
Clone icon: Allows you to clone the row.
Delete icon: Will delete the row.
Columns
‘Columns’ are part of the row and they hold your content elements inside them. Columns can be reordered. Click and drag column around (horizontal axis). That way you can group elements in logical groups and then drag them around with your mouse to re-position.
You can edit the column options by clicking the Pencil button. To save changes click ‘Save Changes’
Pencil icon: Will bring up all column configuration options. Delete icon: Will delete the column.
Text Block
Text block allows you to insert paragraph type text and format it using WYSIWYG editor. Moreover text block also allows adding media (images and videos).
Buttons
Buttons can be used to direct people to different pages on your website, other websites or to link a file.
Button Styles
There are multiple styling options available, we recommend using one style of button throughout your website.
Single Image
Media Library
To visit the Media Library, expand the ‘Media’ menu from the WordPress Dashboard. The Media Library page will show all of the media items you currently have in your media library.
To add a new media item to your library, click the ‘Add New’ button. From here, you can upload a new image or file. Once uploaded, you’ll see it has been added to the library.
Add a Link
To link a PDF, upload the file to the Media Library, select the file and copy the URL.
Highlight the text you want to link then click the ‘Link’ button.
Paste the URL here and click the ‘Enter’ button. If you want to open the URL in a new window, click on the ‘Settings’ icon and tick the ‘Open link in new tab’ option.
Edit the Link
Click on the Pencil icon to edit the link.
Remove the link
While the text is highlighted, click the broken link icon to remove it.
Templates
Templates allow you to save predefined sets of elements as a template and then reuse it when you’ll need it next time. By using templates you will be able to save tons of time in case you need to create a specific layout on and on – all you have to do is create your layout and save it, after that, you will be able to reuse it whenever you need it.
Creating a new template
A template can either be created of an entire page or an individual row/section.
Save a template of the entire page
Once you have completed building the page layout, click on the ‘My Templates’ button, within the panel of available templates, there is also an input field where you can enter a name for your new template.
The template name should be entered in the prompt window, then click ‘Save Template’.
Your template will now appear within the available template list.
Save an individual row/section as a template
Click on the rows edit button to open the row param window, click on the settings button in the top right corner. Click ‘Save as Template’ and name your new template.
Ensure to click ‘Save Changes’ or your new template won’t save.
Your template will now appear within the available templates list.
Add an existing template
Clicking the ‘My Templates’ button will open a panel with a list of available templates. Simply click the template’s title to load the template to the page.
To delete a template, click on the recycle bin icon next to the template’s name.
Templatera
Templatera allows you to create and manage templates from one place and instantly see changes without digging into each individual piece of layout. The Templatera element allows you to place pre-built templates as independent blocks on your pages. When you modify your template, all pages that use Templatera block will be populated with new content automatically.
Let’s say you created a block with contact details eg. Phone, Address, Email, Contact Form and used that block on multiple pages across your site, then you decided to change Phone or Email address. All you have to do is edit your original template and all Templatera blocks will be updated automatically across your site.
The Templatera element can be found in the element menu.
Select from the dropdown which template you wish to show.
To edit a template, navigate to ‘WPBakery Page Builder’ in the left-column menu and select ‘Templates’.