Skip Navigation

Split Section

The Split Section snippet allows you to place content laid over a large background image. The content can be on either the left or right side, over a white or black gradient, with an inset box.

IMPORTANT: This is a full-width Promo Section snippet, not to be used in a Main Content Area.


How to Use

1. Click on the snippet button in the toolbar, and in the Page Layouts category, scroll to the bottom where you will see the Split Section option.

Select and click Insert.

You can edit the 2 Section Options area:

split section options

2. Most of the section options can be left to the default settings, but you will want to either select a background image or a background color:

  • For background image, click in the field and then click on the insert/edit image button in the toolbar. Click the browse icon and use the breadcrumbs to navigate to an approved background image or pattern,
  • For the background color, enter the hex code into the field.

3. You can select your Split Section gradient, content placement and text color in the final options dropdown.


split section options

4.The first dropdown under the 2nd Section Options is Layout Type. This determines what percentage of space is alotted to the left and right columns of the snippet. The options are:

One quarter / three quarter (left side one quarter)
Three quarter / one quarter
One third / two third
Two third / one third
One half / one half

The examples in the Demo link above all use the one half / one half type.

5. Depending on the snippet you chose (left or right), there will be placeholder content in either column 1 or column 2. Replace that content with the content you want to use.

6. Save the page and preview. Publish when ready.