Working With Page Builder
21 Mar 2019 in: Video Tutorials
Click on content, then pages to access page section.
Edit one of the pages.
From page edit mode, click "Live Editor" button, to access page builder.
At first, Page Builder might seem a bit confusing, but dont worry, you will be building pages in just a minute.
Lets take a look at toolbar first.
Design and Details are 2 main modes in page builder.
Design mode is used to move sections or blocks around, and to insert new sections or blocks, while Details mode is used for editing objects, such as text, images,icons etc.
Next set of buttons are for responsive mode preview, language change, exit from page builder, and save.
If your site is multilingual, you might want to toggle "All Language" slider, to save page content for all languages, then you can come back and translate content accordingly.
Page Builder structure is based on Sections and Blocks.
Sections are blue, while blocks are cyan.
In order to insert a block, you will first need to create a new section.
Click on section add button, to insert a new section.
You can insert a blank section with custom grid.
Or one of predefined section layouts. We have included 100 ready to use designs.
Plug-ins and modules are also available for insert.
You can filter sections based on type, to easily locate what you need.
To insert element, just click on it, and it will be placed right below of adjacent section.
To insert a new block, click on a plus icon, located in block toolbar.
From here we can now insert plug-ins, modules and basic elements such as image, video, text or horizontal dividers.
Now, lets edit few elements. Click on details switch, to access edit mode.
To edit text, double click or select portion of the text you want to edit.
A simple text editor tool bar will appear. You can then perform basic text formating.
Now, lets edit an icon button. Click on it to access element editor.
Here we can modify, button properties such as, size, color, style, or just to replace an icon.
Lets edit our image. Click on it to access element editor.
Here we can change, image title and description, apply image filters, change image style, or replace an existing image.
Moving blocks around is as simple as dragging them with your mouse.
An empty block will be outlined. Click on it to insert block content.