Skip to content

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.

Just a 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 Getting started page.

  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.