How can we help?

How to use the Row Builder

In it’s simplest terms, a Row Builder allows you to completely customise the content and layout of the page. You can add as many or as little rows as you wish, and re-order them as required.¬†We build the rows of the Row Builder according to your approved website design.

The wording / structure of the Row Builder will depend on the developer that built it, but the general concept will be the same.

Create a new Page

The Row Builder will generally be used on the Pages section of WordPress, but can be used elsewhere on the site depending on the content structure. Head to Pages > Add new to create a new page, enter the Page Title in the field at the top.

WordPress - Add Page Title

Then head to the Page Attributes section on the right hand side of the editor, and in the Page Template dropdown, select the page template for the Row Builder from the dropdown list – this will typically be named ‘Row Builder’.

WordPress - Set Row Builder Page Template

Adding Rows

A section of the page editor will then show a dotted line box and a button to add new rows.

WordPress - Empty Row Builder Field

Clicking the button will show a popup containing a list of all of the layouts that have been built.

WordPress - Add a New Row Builder Row

Select a row to add, and the dotted line will be replaced by the new field.

WordPress - One Row Added to Row Builder

Repeat the process to add new rows to the page.

WordPress - Two Rows added to Row Builder

Re-Ordering Rows

Depending on the setup of the website admin, the rows will either be displayed open or closed. Clicking on a row will open the content (either in-line or in a popup) or collapse it.

WordPress - Row Builder row 2 open

Dragging the row header bar (the top section before the line) will allow you to re-order the content – this can often be easier to do if all of the rows are collapsed.

WordPress - Row Builder rows re-ordered

Removing Rows

To remove a row, hover on the header bar, and click the minus icon on the right hand side.

WordPress - Remove Row step 1

Click it again, or the red ‘Remove’ text to remove the row from the page.

WordPress - Remove Row step 2

Remember to save the page using the update button at the top of the right hand sidebar once you have finished making your changes.