Skip to content

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

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 page in Brix documentation.