This article will explain how to create a simple two-column layout, for your page's content.

To begin, we will assume your page contains multiple Content Elements, taking up the full width of your page, as shown below:

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

A two-column layout will reduce the amount of verticle space on your page, and align your content into equal columns, as shown below:

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

The following steps outline how two create a two-column layout:

  1. After logging into The Digital Bell, click the link labeled "Pages" in the menu at the top of your Dashboard.
  2. Locate the page you wish to edit, then click the properties button (gear icon) to the left of the title.
  3. Scroll down the Properties editor, and locate the "Page Layout" section.
  4. Click the "Add a row" drop-down menu, and select the "50 / 50" option. This will create your columns.
  5. Scroll to the bottom of the page, and click the "Submit" button to add the columns to your page.
  6. Return to your list of pages, then locate the page you have added the columns to, and click the Edit button (pencil icon) to the left of the title.
  7. In the page content editor, you will notice a new icon in each content group, directly under the "Remove" button, which resembles two boxes.
  8. Click the new icon to expand the "Layout Placement" section. This section allows you to assign your Content Element to either of the two columns you have just created. 
  9. Click column "1" or "2" to assign the Content Element to the respective column, then click the "Submit" button to finalize the assignment. Repeat steps 8 and 9 for each element you would like to place within the columns.
  10. To remove an element from a column, expand the "Layout Placement" section, and click the column the element had previously been assigned, to remove it. Then click the "Submit" button to return the element to full width.

    Note: You can select any of the other options from the drop-down menu listed in step 4, to create a multi-column layout for your page. Additional rows can also be added, allowing you to further customize the layout of your page.