Skip to main content

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. Switch between full opaque/semi transparent mode
  3. Move the panel left/right
  4. Open WP admin dasboard
  5. Open interactive tour modal window
  6. Open Inspector window
  7. Open Dynamic Data modal window
  8. Open Template settings panel page
  9. Open "Global settings for specific type of template" panel page
  10. Open "Global settings for all templates" panel page
  11. Open template preview
  12. Open Version control system panel page
  13. Save all changes as uncommitted
  14. Delete all modules and template settings
  15. Select an applicant
  16. Open "Add module" panel page
  17. Open "Add layout" panel page

Adding a module

Adding a module

  1. Click on + Module to open "Adding modules" panel page.
  2. 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:

  1. Double click on the module name in the module's tree.
  2. Click on Module's settings context menu item:

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. Under "Advanced" tab there are the rest of available settings (CSS related, custom id/class, custom HTML attributes).

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 (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.