In this tutorial, we’re going to show you how to use the Row element inside OptimizeBuilder.
A row is a container that sits inside a section and provides the ability to insert the many different elements that exist inside OptimizeBuilder.
Adding a Row
To add a row, head over to the Element Listings menu and under Layout Elements, select the Row element.
Drag the element to the page to add a new row. A small lightbox will appear with different layout options to choose from. Don’t worry about selecting the right one at present as we will be able to customize this later.
For this example, we’ve selected the single-columned layout option.
Adding Columns to a Row
You can also add extra columns to a row for better organisation and layout flexibility.
To do this, go to the Element Listings menu and under Layout Elements, locate the Column element.
Clicking and dragging the column to the row will highlight the place the column will be created with a verticle blue line. Letting go of the mouse click will add a new column.
Another way, which is an easier option, is to click on the column in the row, which we created earlier, then clicking on the duplicate icon in the column settings.
Clicking on this will add a new column.
Adjusting the Row Sizing Options
To change the sizing and dimensions of your row, click on the small cogwheel icon in the row settings area.
Column Gutter: Use this to set the spacing between the columns.
The Equalize Columns button will evenly organise each of your columns.
Space Above Element: This is the spacing above the row to allow you to control the spacing between the rows above.
Space Below Element: This is the spacing below the row to allow you to control the spacing between the rows below.
Width: You can adjust or set how wide your row is to be on the page and will be able to set this as pixels or as a percentage.
Alignment: Here, you can align your row to the left of the page, centered or to the right of your page.
Clicking on the Advanced Options button will take you to more advanced controls for more granular control of your row spacing.
Adding an Image or a Background Colour
Clicking on the Picture icon in the row settings will allow you to set a background colour, an image or an overlay to your row, allowing you even more customizability.
The Colour tab will give you the option to set the background colour and can select from 3 different Types: Background Colour, Linear Gradient or Radial Gradient.
Clicking on the Image tab will allow you to add a background image to your row.
Adding an image will give you a list of options.
Opacity: Here, you can set the opacity of the image.
Image Properties: Here, you will be given different tabs to change the position and sizing of your image that is displayed in the row. We recommend experimenting with different settings until you find one that best fits your brand.
Clicking on the Overlay tab will allow you to add an additional Overlay colour to your image, which you can customize.
Styling the Row Border
To add a border colour or a shadow to give your rows or columns a 3-dimensional appearance, you can do this by clicking on the Border icon in the Row Options bar.
Please Note: You can also adjust these settings for Sections and Columns independently.
The Borders tab will show you a list of options to add a border and colour to your row.
You can choose to apply the border on all sides of your row or select independent sides using the Border Active section toggles.
You can also set the roundness of your row edges by using the Border Radius settings.
If you would like a more styled and 3D look of your rows, you can add a shadow style by clicking on the Shadow tab.
Here, you will be able to select from a range of shadow presets.
Lastly, the Shadow Styling tab will provide you with the ability to customize the look of your shadows using the different controls provided.
