Split Screen

Lightning storm

Split Screen

Split Screen page elements combine content and visual imagery to split the screen in half. You can customize the ordering of the content, the background color, as well as select whether you want your Split Screen to span the full width of the page or match the width of standard content within the page.

Saguaro at sunset

Using the Split Screen element is a good way to add variety to your content, and to tell your story and drive desired actions.

Example Call to Action

How to Create a Split Screen

Note: An administrator must enable the "Quickstart Paragraphs - Split Screen" module on your site in order for the page element to be available for use.

  1. Create a page or edit an existing one.
  2. Scroll to the bottom of the page and select Add Split Screen.
  3. Customize the appearance and text box color of the Split Screen page element.
    • Full Width: Makes the page element the width of the page if checked.
    • Image Order: Determine which side of the screen you want the image to display.
    • Background Color: Determine which color you want behind your textual content of the Split Screen.
  4. Insert media by selecting the gray Add Media button. Media is necessary to create this element.
  5. Add your desired text in the Text field.
  6. Select Additional Options for any further customization.
    • Bottom Spacing: Select the desired amount of space at the bottom of the Text on Media page element before the next element displays.
  7. Save.


  • Any full width element will push down sidebar menus to below the content. If you would like to use the full width option on a page that uses sidebar menus or blocks, it is best to use this on the top of the page.

Useful Links

Editor Toolbar


Split Screen, Full Width