Using editor
Builderius visual editor is the tool where we create a template and instantly preview the changes. The whole editor consists of two parts: the builder panel and the builder content window.
The builder panel
Overview
- Switch between day/night mode
- Switch between full opaque/semi transparent mode
- Move the panel left/right
- Open WP admin dasboard
- Open interactive tour modal window
- Open Inspector window
- Open Dynamic Data modal window
- Open Template settings panel page
- Open "Global settings for specific type of template" panel page
- Open "Global settings for all templates" panel page
- Open template preview
- Open Version control system panel page
- Save all changes as uncommitted
- Delete all modules and template settings
- Select an applicant
- Open "Add module" panel page
- Open "Add layout" panel page
Adding a module
- Click on
+ Module
to open "Adding modules" panel page. - Click on the specific item from the list to add it to the page.
Module's settings
Opening module's settings
There are two methods to open module's settings:
- Double click on the module name in the module's tree.
- Click on
Module's settings
context menu item:
- Hover over the tree item.
- Hover over the
hamburger
icon. - Click on
Settings
menu item to openModule's settings
panel page
All the module's settings are divided between "Primary" and "Advanced" tabs. Module's content setting (if available) and any specific settings are under the "Primary" tab. Under "Advanced" tab there are the rest of available settings (CSS related, custom id/class, custom HTML attributes).
Module's settings panel page overview
- Cancel changes button.
- Save changes button.
- Label (click on it to edit; click outside to finish editing).
- Duplicate module.
- Delete module.
- The breadcrumbs. Use them to access any parent module quickly.
- Select for media queries
- Select for CSS selectors
- Quick search for a setting within the current tab
- Settings' category
Re-ordering modules
Adding a layout
- Click on
+ Layout
to open "Adding layouts" panel page. - Click on
Open Library
button. - Click on specific layout thumbnail to select it and then click on
Insert
button to add this layout to the panel tree.
The builder content
The builder content is the page itself. Builderius adds one div
tag that serves as a parent (or root) HTML tag for all modules we create inside the builder. It looks like this on the front end (of course, there will be some WP specific classes for the body
tag and the div
tag):
<body>
<div class="builderiusContent">
<-- our HTML content is rendered here -->
</div>
</body>
It looks like this in the builder mode (of course, there will be some WP specific classes for the body
tag and the div
tag):
<body>
<div id="builderiusBuilder" class="builderiusContent">
<-- our HTML content is rendered here -->
</div>
</body>
We designed the builder to work in that way, so it is always the same HTML structure of the page both in the builder mode and in the front end. A site builder user has complete control of what their builds, and confidence in the fact that the page appears the same after the template is published.