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

info

The builder panel is inside the template and may overlap the content of the template. We do not use an iframe for the builder content, so its size equals to the size of the window.

Main panel actions

Let's review the two lines of the builder panel actions.

Main panel actions

  1. Switch between day/night mode
  2. Switch between full opaque/semi transparent mode
  3. Move the panel left/right
  4. Make the panel wider/narrower
  5. Open WP admin dashboard, more specifically the Templates admin page
  6. Open Inspector window
  7. Open Template settings panel page
  8. Open "Global settings" panel page
  9. Open Dynamic data modal window
  10. Open Revisions panel page

Save/preview actions

Now let's review actions related to the saving and previewing the changes made in the builder.

Save/preview actions

  1. The green "Save" button means there are changes which are not saved yet; the "eye" icon is semitransparent, it is disabled
  2. The grey "Save" button means all the changes has been saved; the "eye" icon is active, we can preview the template on the front end

On the left of the "eye" icon there is a dropdown with all template applicants available. Changing the applicant instantly reloads the dynamic data and also JS/CSS assets in the builder mode. It is very useful when we need the preview of the template inside the builder mode. Basically, most of teh time this is what we ever need. The preview inside the builder mode is precise!

Adding a module

Adding a module actions

  1. The name of the panel page
  2. "Add module" icon
  3. "Add layout" icon
  4. "Clear" icon - it removes all the modules from the structure
  5. Just an example of two modules added

This animated GIF shows how we add modules in Builderius, it shows exactly how it works:

Adding a module

  1. Open the builder panel
  2. Click on + Module to open "Adding modules" panel page
  3. 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. Click on the module name in the module's tree
  2. Click on Settings context menu of the structure item; this is how it works 👇

Opening module settings

  1. Hover over the structure item.
  2. Hover over the hamburger icon.
  3. Click on Settings menu item to open Module's settings panel page

Module's settings overview

All the module's settings are divided between "Data" and "CSS" tabs. Module's content setting (if available), also custom id/class and custom HTML attributes are under the "Data" tab. Under "CSS" tab there are the rest of the available settings (all CSS related).

Module settings UI

  1. "Close" icon - closes modules settings
  2. Module label (click on it to edit; click outside to finish editing)
  3. Parent modules "breadcrumbs"; a quick way to navigate to the one of parent modules
  4. "Duplicate" icon - duplicates this module
  5. "Delete" icon - deletes this module
  6. Data/CSS settings tabs
  7. Select media query selector or create a new one
  8. Select a CSS selector or create new one
  9. Quick search for settings within the current tab
  10. Settings' category

Re-ordering modules

We can sort modules:

Module settings UI

And we can move modules and make them nested:

Module settings UI

These operations are drag and drop actions. Hover over the three vertical dots icon, hold the left mouse button and start dragging the item inside the structure.

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

This is the major area of the editor. It contains all the modules added with all their content. We interact with these elements in real time by selecting them, moving and/or changing their settings inside the builder panel.

info

The builder content is a blank canvas, and we are free to create whatever we like and in the way we like it.

How does it work in general?

Each module of the builder creates one HTML tag. Adding modules is like writing HTML code manually but in visual way by clicking, dragging and changing some settings. For instance, if we add Heading module we will instantly see an example of <h1> tag added with a simple content (since it is an inline element). Another example would be adding a Form module that represents <form> HTML tag. It is a typical block element, it does not have any content inside. Builderius does not add any paddings or similar to make this element somehow visible visually. Why? Because this is not how it usually works when we write HTML tags manually.

The place of the builder content in the HTML page

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.