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#

Adding a module

  1. Switch between day/night mode
  2. Move the panel left/right
  3. Open Template Settings panel page
  4. Open Global Settings panel page
  5. Link to Templates Table WP admin page
  6. Start an interactive tour
  7. Update data variables
  8. Open Version Control System panel page
  9. Delete all the builder content and template settings
  10. Quick selection of the applicant preview
  11. Open Add module panel page
  12. Open Add layout panel page
  13. The modules' tree. Each element here is called "the tree item".

Adding a module#

Adding a module

  1. Click on + Module to open "Adding modules" panel page.
  2. Click on the module you wish to add to the page.

Module's settings#

Opening module's settings#

Opening module settings

  1. Hover over the tree item.
  2. Hover over the hamburger icon.
  3. Click on Settings menu item to open Module'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. All other settings are under the "Advanced" tab.

Module's settings panel page overview#

Module settings UI

  1. Cancel changes button.
  2. Save changes button.
  3. Label (click on it to edit; click outside to finish editing).
  4. Duplicate module.
  5. Delete module.
  6. The breadcrumbs. Use them to access any parent module quickly.
  7. Select for media queries
  8. Select for CSS selectors
  9. Quick search for a setting within the current tab
  10. Settings' category

Re-ordering modules#

Module settings UI

Adding a layout#

  1. Click on + Layout to open "Adding layouts" panel page.
  2. Click on Open Library button.
  3. 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 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>
<-- 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">
<-- 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 he builds, and confidence in the same page appearance after the template is published.