Brix documentation

What is a page builder

Page or Layout builders are tools that allow you to visually design a page for your website. Brix is a plugin for WordPress that integrates with any theme available that follows the WordPress developer guidelines for themes, and that can supercharge it with an almost infinite variety of layout options, over which you have complete creative and editorial control.

Installing WordPress

In order to be installed, the plugin requires that you have a working WordPress installation, locally or on you web space.

If you need help installing WordPress, you can head over to the official WordPress documentation page to get started.

If this is your first time using WordPress, you can also take a look at a few other pages that might help you understand the basics:

• First steps with WordPress
• FAQ: New to WordPress

Technical requirements

To use the plugin, the minimum WordPress version required is 4.4. From the technical point of view, your host must support at least the following:

• PHP 5.2+
• MySQL 5+

Concerning PHP, even if the minimum version required is 5.2, we strongly encourage that you use a newer version, such as 5.5 or 5.6, both for performance and security reasons. If you’re not yet on those, talk to your host and enquire about the possibility of activating one of those versions on your account.

Suggested PHP configuration settings

Every once in a while, you might encounter a problem that is somehow related to the configuration of the PHP that’s running on your host. In order to try to prevent those errors from happening, we suggest that you make sure that you have the following settings in place:

• max_execution_time: 180
• memory_limit: 96M
• post_max_size: 32M
• upload_max_filesize: 32M

Suggested WordPress configuration settings

In order to increase the memory allocated to your WordPress installation, you also need to follow these steps to set a specific memory limit.

How to update

Brix is updated regularly, bringing in new features, providing security enhancements, fixing bugs, and generally be compatible with the latest and greatest WordPress version available.

As soon as a new update comes out, a notice will be displayed in the admin area of your WordPress installation.

You are entitled to Brix updates if you have a valid support account over at Evolve Shop. If your support account expires, you can renew your plan with additional months of support, re-gaining the ability to download updates.

There are two ways to keep the plugin up to date:

1. Log into your account over at Evolve Shop and download the latest version available. Backup the brix folder in your wp-content/plugins directory of your WordPress installation. Unpack the archive you’ve downloaded to a folder called brix in the plugins directory of your installation, or use the WordPress uploader, by clicking on Plugins > Add New.
2. Use the automatic plugin update system provided by WordPress.

Concerning the management of plugins, from installation to update, please refer to the official documentation provided by WordPress.

Getting started

By default, Brix is enabled for Pages in your WordPress installation.

When editing or creating a new page, you’ll find a big blue button on top of the editor that essentially toggles the use of Brix for that page.

If it’s the first time that you’re choosing to use Brix, your existing content you’ve written with the WordPress editor will be brought over to Brix.

Installing Brix

Keep in mind that if you had activated the Lite version of the plugin, you’ll need to disable it in order to unlock premium functionality.

Enabling Brix for other Post Types

Since Brix 1.0.1, if you want to enable Brix for a specific Post Type you can use the specific option located under Brix > Configuration > Post Types in the main options page.

Brix can be activated on any Post Type declared by any plugin you might have installed, but keep in mind that Brix will only be displayed in Post Types that use the the_content WordPress function on frontend.

If you don’t want to operate through the backend option, you can also use the snippet below. In the following example, we’d be enabling Brix for Posts:

function your_prefix_add_post_type_to_brix( $post_types ) {
    $post_types[] = 'post';
    return $post_types;
}
add_filter( 'brix_post_types', 'your_prefix_add_post_type_to_brix' );

Structure

Layout composed with Brix follow a strict and semantic structure: a page is composed by multiple horizontal containers called sections. Rows can be added do each section, rows are subsequently split in columns and content blocks are then added to columns.

Since Brix layouts are a replacement for the regular page content, the markup that’s generated by Brix is displayed where the the_content function call is placed in your theme’s markup.

Sections

When adding a new section, it will automatically occupy as much space is available. When going over a section with your mouse, you’ll see a pencil icon appear in the upper left hand corner of the section. By clicking that icon, you’ll access the visual preferences of the section, from dimensions, to spacing, background etc.

Selecting a “stretched” Width will make the section extend for the full width of the screen, regardless of other content that might be in the page.

Different Content layouts are available for each section. By selecting a specific content layout, the section can be split in multiple content areas. “Special” content areas are marked in yellow, and their peculiarity resides in the fact that they stretch for the whole height of the section (in that sense, they’re useful to create sidebars).

Sections can be moved up and down the page, and their template can be saved by interacting with the disk icon in the upper left hand corner.

Rows

When you create a section, you’ll have to choose what column layout will have its first row. Rows are just that: column containers. They can be dragged, even from one section to another, and they can be duplicated.

Click on the pencil icon in the upper right hand corner of the bar that pops up when going over a row with your mouse to edit the row settings.

From that panel you’ll be able to change the row layout without losing your content, you’ll be able to individually specify the vertical alignment for each column, as well as their responsive behavior (read more about responsive behavior).

Note: you can create layout grids up to 12 colums, and you can regard 12 as the basis for your grid.

Columns

Columns are containers for content blocks, which can be dragged horizontally within the row they belong to.

By going over a column with your mouse, you’ll notice a little drawer coming up above the column itself: click on the pencil icon to edit the column settings, or click on the scissors icon on its left to split the column in two (if possible).

Content blocks can be added to a column and stacked one on top of the other by clicking on the “+” icon in the middle of the column area.

Blocks

Blocks are the individual bits of content that end up composing your page. Content blocks are differentiated by their type, and each one has a variety of options associated to it that are specific for that type.

Blocks can be dragged between columns, even between columns that belong to different rows and sections, and they can be cloned.

For more information about the types of content blocks available, please refer to the relative documentation section.

Common attributes of sections, columns and blocks

In the editing modal of a section, column or block, there are a few controls whose usage is the same for the three of them.

Spacing

In the Spacing tab you will find spacing controls that allow you to modify the margins and paddings of the element you’re editing.

Margins and paddings are relative to each visual breakpoint that has been defined. To learn more about breakpoints, head over to the “Options” page of this documentation.

For the single breakpoint, by default you can edit two margin values and two padding values: up/down and left/right. For example, writing a value in the up/down field for the margin column, will apply both a top and bottom margin to the element with the specified value.

Switching to advanced controls for that breakpoint using the Advanced toggle on the right will activate individual inputs to control the bottom and right values of margins and paddings.

Note: you can use units in the spacing fields. Inserting a purely numeric value (20), will result in the value being converted automatically to pixels (20px).

Columns

You can attempt to stretch the column background to the edges of its section, if the column is the first or last of its row, and the containing section width is stretched.

To stretch a column background, make sure to check the Stretch background option in the Spacing tab of the column editing modal.

Blocks

You can force a content block to be bottom aligned inside its column, if it’s the last block in that column, if the columns are equal in height and there is enough space at the bottom.

To bottom align a block, make sure to check the Attemp to align bottom option in the Spacing tab of the content block editing modal.

Note: when the row’s vertical aligment is set to middle, this option will not be applied.

Effects

In the Effects tab you will be able to add an entrance effect to the block as soon as it becomes visible in the browser’s viewport area.

After selecting the particular effect you’d like to use, a set of specific options will be presented to you, that will allow you to control the transition speed and delay (how fast the entrance animation is, and how much it has to wait before kicking in), and the easing of the transition effect (learn more about easings here).

Background

Sections and Columns support custom backgrounds. Custom backgrounds controls can be found in the Background tab of the respective editing screens.

Backgrounds can either be a color, a gradient, an image or a custom uploaded video from the WordPress Media Library.

When selecting “Color and image” or “Video” from the Background select, two different sets of options will be displayed allowing you to control different aspects of the background.

A common trait of both picture and video backgrounds is the Motion setting.

By default backgrounds will scroll along with the page; picture backgrounds have an option to stay fixed in their position relative to the screen while the rest of the page is scrolling normally; both picture and video backgrounds also have the option to have a parallax effect applied to them, which means that they will move at a different speed compared to the rest of the page.

If you select a Parallax background, you’ll see a new setting appear that allows you to choose how big the parallax movement should be.

Concerning background images, you are able to customize the background behavior for different media queries by activating the responsive mode: in order to do so, click on the Change for different screen sizes switch.

Video background, on the other end, have the option to be entirely disabled on true mobile devices.

Learn more about backgrounds following this video tutorial.

Advanced

In the Advanced tab, sections, columns and blocks have an option to specify a CSS class name to the relative markup element.

It is important to note that only the class name must be inserted here, not the actual style you might want to associate to the class via CSS: to do that, the best option is to write such style in a separate stylesheet that targets the CSS class name you’ve chosen.

Section, columns and blocks can also be hidden from display, while still maintaining their complete editability.

Being the main containers in the page, Sections can also have custom IDs attributes associated to their markup. As for CSS classes, only the name of the ID must be inserted.

After associating a particular ID to a section, you’ll be able to jump directly to the section element by adding #your-id to the window address.

Sections also have an option that determines what HTML tag is used for their markup. By default, Sections are marked with divs, which means that you’ll probably end up writing headings in your document following the HTML4 standard, from h1 to h6.

If you check the Section option, a section tag will be used instead, meaning that you can use an h1 tag again in that section, without impacting the document outline.

Please note that marking a section with a section tag instead of div will not alter the page appearance but will affect the document structure and the page SEO.

Column carousels

Content inside columns can be displayed as a carousel: each block contained in the column is considered a carousel item, and you’ll be able to control how many of them to display at a time, what’s the timing of the carousel, and even its responsive behavior for every media query you’ve defined.

In order to set a column as a carousel, click on the column’s Edit icon, navigate to the Carousel tab and enable it by checking the Show as carousel option.

Backend vs. frontend editing

There are two ways of editing pages in Brix. When you open your page editing screen in the WordPress admin, what you see is what we call the “Backend editing” interface.

When editing stuff backend, all of the controls blend seamlessly with the WordPress native interface.

In the top right corner of the backend editing interface, you’ll notice a button labelled “Frontend editing”. By clicking this button, you will access the “Frontend editing” interface, which is Brix’s way of showing you a live and high fidelity preview of the changes you’re making to the page layout and content.

Please note that in order to be able to click the “Frontend editing” button your page but have been already saved once, even in Draft mode, otherwise we woudln’t be able to generate its preview.

To know more about Frontend editing, please refer to its specific section in Brix documentation.

Blocks

Blocks are the individual bits of content that end up composing your page. Content blocks are differentiated by their type, and each one has a variety of options associated to it that are specific for that type.

Common settings

Each block has a set of options that are common for every other block type:

• Spacing: alters the spacing of the block in terms of margins and paddings.
• Effects: add an entrance effect to the block as soon as it becomes visible in the browser’s viewport area.
• Advanced: add a CSS class (not the style, just the class) to the block element, or choose to hide it from being displayed, while maintaining its editability in the backend.

Read more about common settings in the “Common attributes of sections, columns and blocks” section of this document.

Available blocks

Here’s a list of available blocks.

Text

A rich text area that supports embeds and shortcodes, this block pretty much replicates the regular WordPress editor. It’s good to write, embed content from external providers, and also make use of the shortcodes other plugins might put at your disposal.

The Fit embeds option in the Style tab will make embedded contents take the whole horizontal space available.

Divider

An horizontal spacer element. Being essentially an horizontal line that visually divides content, it can either be invisible or have a solid appearance: in the latter case, you’ll be able to control both its height and its color.

Blog

Display a list of blog posts. You can select how many posts to load, optionally including or exluding specific categories or tags, and you can also choose to paginate the results. Pagination options are:

• Do not paginate: only the first page of the results will be displayed,
• Regular pagination: navigation will be placed at the bottom of the blog posts list,
• Reload block content: pagination is accomplished via AJAX reloading the entire block content,
• Append new content: pagination is accomplished via AJAX appending the subsequent page’s results to the block content.

Tabs

Display tabbed content. Tabs can either be horizontal or vertical, and each tab is composed by a title, a content area that uses the regular WordPress editor, and a decoration element that can either be an icon or an image.

Post

Display a single blog post.

Widget area

Display contents from a registere Widget area.

Team member (premium version only)

Display information about a person/team member. The information that can be displayed are:

• Name of the person,
• Picture,
• Role,
• Biography (uses the regular WordPress editor).

Additional display settings can be found the Style tab of the block editing screen:

• Alignment will make the entire block align left, center or right,
• Image shape will alter the shape of the person’s picture.

Accordion

Accordions are a set of grouped toggles. Each toggle is composed by a title, a content area that uses the regular WordPress editor, and a decoration element that can either be an icon or an image.

Accordions have an option to choose which element should be open by default (Expanded index setting), and can work in two ways: either only one toggle can be open at a time, or multiple toggles can be open at the same time.

Progress bar (premium version only)

Display numeric values as multiple progress bars. Each value can be given a Label, a numeric Value and a specific Color.

Bars can be dragged one on top of the other to rearrange their order.

Feature box

Similar to regular text blocks, feature boxes offer the option to be decorated with an icon or picture, choosing from a variety of layouts available.

Counter (premium version only)

Display an animated counter. The numeric value is required, while other options are optional.

List (premium version only)

Display a list of items. Items support both links and icons.

Icon

Display an icon. Icons can be either chosen from the available icon libraries, or an image from the Media Library or an external URL can be fetched. Icons inserted with this block can also support hyperlinks.

In the Style tab of the block editing modal screen, you can select the alignment of the icon within its column.

Button

Display a call to action button control, that allows you to link to a different page or website.

There are a variety of visual controls that are available under the Style tab in the block editing modal screen.

HTML

With this block you can either output HTML markup or import a specific template.

The HTML markup imported can be written directly in the block editing modal screen, and supports shortcodes.

If you have more detailed needs, you can include a template file from the theme you’re using: to do so, fill the Template path field with the path to the file you want to load, relative to the current theme, or its parent.

WordPress default widgets

Brix supports the WordPress default widgets as regular content blocks, with the exception of the text widget.

The editing screen of a widget content block that’s being added to the page replicates completely the editing form you’d use in the Widgets screen in your WordPress admin.

The output of the widget content block replicates exactly the output of the single widget, with the widget CSS class applied to the block itself.

Please note that, due to how each and every theme might be implemented, the appearance of a widget content block might differ a little from its regular widget counterpart, since it’s placed in the content of the page, rather than its sidebar.

Here are the widgets available as content blocks:

• Recent Posts widget: Your site’s most recent Posts.
• Calendar widget: A calendar of your site’s Posts.
• Custom menu widget: Add a custom menu.
• Meta widget: Login, RSS, & WordPress.org links.
• Search widget: A search form for your site.
• Recent comments widget: Your site’s most recent comments.
• Archives widget: A monthly archive of your site’s Posts.
• Categories widget: A list or dropdown of categories.
• Pages widget: A list of your site’s Pages.
• RSS widget: Entries from any RSS or Atom feed.
• Tag Cloud widget: A cloud of your most used tags.

WooCommerce widgets and shortcodes (premium version only)

Brix supports the widgets and shortcodes defined by WooCommerce as regular content blocks.

Concerning blocks based on widgets, the editing screen of a widget content block that’s being added to the page replicates completely the editing form you’d use in the Widgets screen in your WordPress admin.

For shortcodes, instead, the options provided in the content block editing screen are based on the shortcode’s input parameters.

The output of the widget content block replicates exactly the output of the single widget, with the woocommerce CSS class applied to the block itself, along with a class that identifies the type of the block.

Please note that, due to how each and every theme might be implemented, the appearance of a widget content block might differ a little from its regular widget counterpart, since it’s placed in the content of the page, rather than its sidebar.

Here are the WooCommerce widgets and shortcodes available as content blocks:

• WooCommerce Cart widget: Display the user’s Cart.
• WooCommerce Product Search widget: A Search box for products only.
• WooCommerce Recently Viewed widget: Display a list of recently viewed products.
• WooCommerce Top Rated Products widget: Display a list of your top rated products on your site.
• WooCommerce Recent Reviews widget: Display a list of your most recent reviews on your site.
• WooCommerce Product Categories widget: A list or dropdown of product categories.
• WooCommerce Products widget: Display a list of your products on your site.
• WooCommerce Product Tags widget: Your most used product tags in cloud format.
• WooCommerce Page: Display a WooCommerce page.
• WooCommerce products list: Display a list of WooCommerce products.
• WooCommerce Product: Show a single product by ID or SKU.
• WooCommerce Add to cart button: Show the price and add to cart button of a single product by ID or SKU.
• WooCommerce product category: Show multiple products in a category by slug.
• WooCommerce product categories: Display product categories loop.
• WooCommerce product attribute: List products with an attribute shortcode.

Responsive behavior

Handling how a layout responds to different browser widths is a core feature of Brix.

Spacing and dimensions options can be found in the Brix options page in the WordPress admin, under the Options tab.

The Container width dictates the width of the elements that contains the markup generated by Brix. Being attached to the regular content of the page, when left empty this option will make the Brix container extend as much as it can, depending on the theme layout.

The Gutter is the horizontal space between columns. Please note that it is not recommended to express the gutter value in percentage, and it’s better to rely on pixel values, since they won’t break the layout.

Insering a purely numeric value here will be automatically converted to pixels.

The Baseline represents the vertical space between rows.

Breakpoints

We call a breakpoint a particular screen width; for that screen width, a set of rules can be applied until another breakpoint takes precedence.

You can learn more about breakpoints and CSS media queries here.

By default the plugin defines two breakpoints, whose parameters can be tweaked but that cannot be deleted:

• Tablet: targets devices whose screen width is between 1024px and 768px,
• Mobile: targets devices with screen width under 768px

You can define a new custom breakpoint by clicking on the “Define a new breakpoint” button, and you’ll be asked to add a “Label” for it (advice: be brief yet descriptive), a “Context” (doesn’t affect the breakpoint, it’s just for categorization), the corresponding “Media query” and specific values for the “Gutter” and “Baseline” settings (see above).

The typical and most easy way to accomplish a responsive grid layout is making every column go full width under a certain screen width.

You can accomplish that automatically using the “Sections and columns go full width under this breakpoint” option, which allows you to select a specific breakpoint.

Column management

When editing a section row, clicking on the pencil icon in the upper right hand corner of the bar that pops up when going over it with your mouse will edit the row settings.

Clicking on the second icon from the left in the row editing panel, will make you edit the responsive behavior for that column. By default, columns won’t change their width when resizing down the browser width.

At some point, columns might go full width if a breakpoint was selected in the “Sections and columns go full width under this breakpoint” option, under Brix > Configuration > Global options.

Regardless, each column’s width can be redefined for each breakpoint currently defined for your installation. Simply select the breakpoint you’d like to edit, and for each column in the current row click on the big blue button that is displayed, selecting how the column should behave under that breakpoint:

• Default: doesn’t alter its original width,
• 1/1: the column goes full width,
• 1/2: the column will take half the screen width,
• Hide: hide the column from display.

Note: keep in mind that when changing the row columns layout, each responsive rule applied to the columns is canceled and must be set again for the new layout.

Frontend editing

There are two ways of editing pages in Brix. When you open your page editing screen in the WordPress admin, what you see is what we call the “Backend editing” interface.

When editing stuff backend, all of the controls blend seamlessly with the WordPress native interface.

In the top right corner of the backend editing interface, you’ll notice a button labelled “Frontend editing”. By clicking this button, you will access the “Frontend editing” interface, which is Brix’s way of showing you a live and high fidelity preview of the changes you’re making to the page layout and content, displaying it exactly how a visitor would see it.

Please note that in order to be able to click the “Frontend editing” button your page but have been already saved once, even in Draft mode, otherwise we woudln’t be able to generate its preview.

Preview

If you decide to edit things visually using the Frontend editing interface, be aware that all of your changes aren’t final: you’re going to see a live preview of each one of them, but nothing is really saved until you decide your work is done.

To permanently save your modifications, you can either hit the “Update” button of the Frontend editing interface, or you can go back to Backend editing and save your page like you always do in WordPress.

Please note that hitting the “Update” button in the Frontend editing interface means that only the content generated with Brix will be saved, and such action won’t alter the Status of your page/post.

For this reason, you can switch back and forth from backend to frontend and viceversa without losing any of your work.

Orientation

The Frontend editing interface is composed by five main areas of interest:

1. The preview area, which is where your modifications to the page are displayed live. In the preview area you can select elements, add content, drag content blocks around, and generally have a precise indication of you page’s structure and dimensions. To get rid of in-page controls, you can use the arrow corner button in the top left of the viewport, that will also maximize the preview.
2. In the top bar area you have templates controls, undo/redo buttons, a control to go back to the standard backend editing, and a button to permanently save the modifications you’ve made.
3. The bottom bar is where most of your editing happens: you can highlight elements in your page by going over them, and you click on them to select them. Once you’ve selected an editable element, the appropriate controls will be displayed in the bottom bar.

This means that if you select a content block, you’ll have not only direct access to its controls (that use the same icon symbols you’re likely already accustomed to from your backend editing experience), but also it’s column, row, and section ancestor elements.

To know more about Brix grid structure, please refer to the Structure section of this document.

1. The left bar, which features utility controls, as well as quick shortcuts to preview your page at different screen widths.

Adding content

To add a new section, look for the big blue button with a “+” icon symbol in the preview area. Adding a section will make you immediately select what its first row should look like, exactly like you’d expect from adding a section in backend mode.

Adding a new section this way automatically appends the newly created area to the bottom of Brix content.

You can also add a new section by selecting another section (or selecting a sub-element first, and then go and select its section in the bottom bar), and hit the respective “+” control: doing this will insert a new section after the one you’ve selected.

The same goes for rows as well: directly select a row inside a section, or select a sub-element first and then select its parent row, and hit the row “+” control to have a new row inserted right after the one you’ve selected.

To add a new content block, look for the blue circle icons with a “+” symbol in them that appear when going over columns or other content blocks: in the first case, newly created blocks will be appended to columns, while in the latter case the new content will be inserted after the block you’ve highlighted.

Editing and rearranging content

After having selected an element by clicking on its area, a red rectangle will be drawn to better highlight it. With the element selected, look for the expanded item in the bottom bar area, and click on the pencil icon to edit its properties.

After clicking on the editing icon, you’ll access the elements properties, just like you’d do on backend, and upon saving the respective popup window/bottom drawer, the page content will be refreshed to reflect the changes you’ve made.

You can duplicate content blocks, rows and sections by clicking on the “Duplicate” icon symbols in the respective toolbars and, in case of sections, you can also choose to replace it with a template loaded from the collection available from the Template Manager.

Content blocks can also be rearranged by dragging them across the page: after you’re done draggin an element, the preview will be refreshed accordingly.

Removing content

After having selected an element by clicking on its area, a red rectangle will be drawn to better highlight it. With the element selected, look for the expanded item in the bottom bar area, and click on the “x” icon to remove it from the page.

Revisions

Brix uses its own internal revision system. This means that, while not being linked in any way to the standard WordPress revision system, every time you save a page, provided you actually changed something in Brix, a snapshot is saved as backup.

Whether you’re editing your page using the frontend live editor or in the WordPress admin, you’ll see a clock icon up top. By clicking on it, a screen will pop up listing all the versions of the page that have been created through time.

Click on one of them to restore it, and keep in mind that the page has to be saved one more time in order to make the change permanent.

You can enable or disable revisions from the Brix global options panel, and also specify how many revisions would you like to keep besides the current version of the document.

You can batch delete all the revisions for the current document by clicking the Delete all revisions button at the bottom of the revisions screen.

Shared templates

Shared Templates are Brix way to solve the problem of having the very same piece of content spread out through the website, without duplicating it every time and losing its editability in the process.

Sure, you can save a section of content in your templates library, and pick it up at a later time from the Templates Manager, but by doing so you’d essentially create a copy of it, which means that, should you change something in the template, you’d also probably have to repeat the change in any page that template had been used.

Not ideal, right? Especially for sections that you know are going to change, but whose purpose is pretty well defined, such as contact sections, or footers.

With Shared Templates you can create a template, reference it in multiple pages, edit it in one single place, and then see the change reflect automatically wherever you’ve used it.

If you’re a designer, and you’re maybe familiar with the Symbol concept in apps like Sketch or Figma, this is practically the same thing.

How to share a template across pages

In the WordPress admin, go to Brix > Shared templates and create a new template. It’s essentially like creating a page, with the only difference being that it won’t be displayed publicly.

After you’ve created your template (which can be composed by more than one section of content), go to a page you had previously created.

Whether you choose to use a specific template when adding or replacing a section, or replace the entire page content completely, when you open the Templates Manager window, you’ll notice a “Shared templates” tab on top.

Select the template you wish to use and import it in the page.

From this moment on, after saving the page, the referenced shared template will be displayed in the page, in the position you’ve placed it at the time of the import and every time you’re going to modify its contents from its editing screen, the pages that use it will be updated as well.