Adding Columns / Alternating Columns in Page Editor

Columns are commonly used to organise content efficiently on a page, providing a clean, structured layout that improves readability and visual appeal. By dividing the content into multiple sections, you can maximise the use of space and make it easier for users to digest information.

Columns vs Alternating Columns:

Columns are used to organise content side by side in a structured layout to create a clean, organised page design. This is useful for displaying content like product details, testimonials, or service information in a simple, linear format.

Alternating Columns, on the other hand, centre the content vertically to give you more flexibility with positioning and allow you to alternate the placement of text and images. This layout is ideal for creating a dynamic, engaging flow that draws attention to different elements of the page.

Follow the steps below to add columns or alternating columns to your page:

Finding the Page Editor

Step 1: On the Dealership Dashboard, select Websites

Step 2: Select the desired website to edit

Step 3: Once on the Website Dashboard, select Pages

Step 4: Select the website you want to edit

How to Add Columns

1. Navigate to the desired area of the page. Hover your mouse over the left-hand side until the + icon appears. Click on the icon, then scroll down and select the Columns button.

2. Two lots of text with Heading... and Text block... will appear. Hover your mouse over the left-hand side of the page where this text is until the 6 dots icon appears. Click on the icon, then select the Edit Settings button.

3. A box will open to customise your columns. To add text, simply highlight the Heading or Text block... and begin typing.

To add features such as images, lists, buttons, tables or FAQs, select the plus icon next to the text block.

To adjust the font, alignment, colour, margins or other features, select the 6 dots icon next to the text block.

To add further columns (maximum 3), select the green + button to the right of the blue bar.

How to Add Alternating Columns

1. Navigate to the desired area of the page. Hover your mouse over the left-hand side until the + icon appears. Click on the icon, then scroll down and select the Alternating Columns button.

2. Text with Heading... and Text block... will appear. Hover your mouse over the left-hand side of the page where this text is until the 6 dots icon appears. Click on the icon, then select the Edit Settings button.

3. A box will open to customise your columns.

• Reverse: This will reverse the ordering of the alternating columns.
• Variant: This will change your alternating columns to the variant version. With this version, each row is wrapped in an alternating background (i.e. grey, white, grey, white, and so on).

To add rows, select the green + icon. Alternating columns allow you to add as many rows as needed to create a seamless flow of text and images.

4. Below adding rows, you can switch between the text column and the image column. If each row includes both an image and text, ensure you add the content to the appropriate column to maintain the alternating layout between rows.

The text column will display editable text, while the image column won’t—but you can still add text to the image column if desired.

Text Column:

Under the content tab, to add text simply highlight the Heading or Text block... and begin typing.

To add features such as images, lists, buttons, tables or FAQs, select the plus icon next to the text block.

Under Desktop Customisations, you can amend the following:

• Top Padding: Adjusts space between the top of the content and the container’s edge.
• Bottom Padding: Controls space between the bottom of the content and the container’s edge.
• Left Padding: Sets space between the content and the left side of the container.
• Right Padding: Adjusts space between the content and the right side of the container.
• Background Colour: Changes the background colour of the content or section.
• Text Colour: Alters the colour of the text within the section.
• Vertical Alignment: Positions content vertically within its container (top, centre, or bottom).

Under Mobile Customisations, you can amend the following:

Under Tablet Customisations, you can amend the following:

Image Column:

To add content in the image column, find the + button and select either text or image.

You can amend custom desktop, mobile and tablet customisations in the same way as the text column.