Skip to main content

Quick overview

We have prepared a longer video version of "Getting started with Builderius".

This page also contains a short text-based overview of how to use the plugin, the basic concepts that will help users to use Builderius more efficiently.

Creating template#

Create a new template#

Immediately after plugin activation we are ready to create our first template. Templates are the main bricks of the site builder.

In order to create a new template we go to Templates page (1), then click on "Add new" button (2), write a name, choose type and technology and click "Create" button (3):

Builderius templates table overview

Later, when we will have more templates, all of them are inside the table of the Template page in the admin area.

Set Apply Rules#

tip

Apply rules are essential for two things: displaying templates on proper pages and using dynamic data specific for certain pages (like post meta on post page etc)!

For a template to be visible on the site it has to be applied for certain pages. We do this by setting proper "apply rules" (according to our needs).

Apply rules example

For this example we choose to apply the template to a specific page only.

The last step in the template configuration process is saving changes. We have to click on "Save changes" button to do that:

Save changes btn

Now we are ready to proceed to the builder mode. We should hover over the row in the table of templates and click on "Edit template" button:

Save changes btn

Editing template, working in the builder#

Add modules/layouts#

There are buttons + Module/+ Layout in the builder panel that opens a new panel page with modules/layouts that can be added to the page.

There are modules-containers, e.g. Generic Block, Form, which can host other modules. Hovering over the item in the Tree reveals additional management buttons:

  • + for adding modules/layouts as a child for the targeted module
  • hamburger icon gives access to actions: edit settings, duplicate
  • trash bin icon gives access to action: delete the module

Edit modules#

Hover over a Module's Tree item, then hover over the hamburger icon to open a small overlay with two links Settings and Duplicate. Click on the Settings link to enter the chosen module's settings tab of the Panel.

Alternatively, we can double-click on the module name to open the module's settings.

Nest modules#

In terms of nesting possibility, there are two types of modules: containers and simple modules. We can add children modules in two ways:

  1. by creating a new module inside module-container;
  2. by drag and drop operation, so existing module becomes children for module-container;

Nesting modules: method 1#

  • hover over a Module's Tree item, then hover over + icon and choose what to add: module or layout; the click on either choice opens the panel page with all the things available of the selected type;
  • pick a particular item from the list and click on it;

The chosen module/layout will be added to the targeted module.

Nesting modules: method 2#

  • hover over a Module's Tree item, precisely hover over vertical lines handler and start dragging the item;
  • drag the item over another tree item: if it is a simple type of module, the sort operation will be performed (the overlay below the item will tip if the dragging module will be added before or after the targeted one); to move a module inside another parent, this parent must be opened in advance; hovering over an empty module-container reveals small overlay that says move;
  • release the hovered module, and it will be moved;

Edit CSS, layout styles#

Each module has a set of settings, and most of them are CSS related. These settings generate CSS styles which are applied to modules.

Additionally, template and global settings also include CSS related ones. These settings also generate CSS style which are applied to .builderiusContent root element.

In conclusion, creating and editing layout in Builderius means adding modules and editing their settings.

Save changes, create commits#

We have two methods of saving changes in the builder. These methods have different purposes.

The first method creates "uncommitted changes". It means our work is saved and secure, but such changes cannot be published later. In order to save uncommitted changes, we click on the green diskette icon on the Panel. It is a shortcut to quickly save all possible changes (in modules and template, global settings).

We also can click on the VCS icon and open "Version Control System" (VCS) panel page where we can save only specific types of settings (only template or global) as uncommitted changes.

VCS - git graph items

But here we also can commit them. Creating commits is the second method of saving changes in Builderius. Commits are helpful when we want to save any significant progress made. Also, we can checkout into any commit and create a new branch from the commit, which would be like an alternative version of our design. Finally, commits can be tagged and published later!

tip

Creating commits and tagging them is required to create a release and publish changes!

Publishing#

Builderius uses a unique Continuous Delivery System for publishing sites. As one of Builderius deliverables - Release can be created and many templates can be published/unpublished at once. Such approach has many advantages:

  1. Releases cannot be modified, we are always sure that site will look the same with a certain release.
  2. Releases can be published and unpublished any time. Found a bug in the new version? Quickly rollback to the previous one until fixed!
  3. Releases are consistent, they include many templates as well as global settings. It is very convenient!

Creating a release is a three steps process, we just have to follow the form wizard. After the release is created, we click on Publish icon and that's all! Our templates are visible for all users.