Working with Sections

This guide talks about working with Sections to arrange content on your page.

This guide is relevant to the following content types:

• Basic Page
• Event
• News
• Person
• Publication

Section Layout Options

A Section is part of your page that divides the content area into columns. You have five Layout choices to choose from:

• 1 Column. Paragraphs placed in a section with this layout will appear in a single column on desktop and mobile and will span the width of the content area.
• 2 Column > Equal Columns. Paragraphs placed in a section with this layout will appear in two columns of equal width on the desktop. At smaller screen sizes, the two columns will stack into a single column that spans the width of the content area.
• 2 Column > Larger Right Column. Paragraphs placed in the right section of this layout will take up two-thirds (67%) of the content area. Paragraphs placed in the left section of this layout will take up one-third (33%) of the content area. At smaller screen sizes, the two columns will stack into a single column that spans the width of the content area.
• 2 Column > Larger Left Column. Paragraphs placed in the right section of this layout will take up one-third (33%) of the content area. Paragraphs placed in the left section of this layout will take up two-thirds (67%) of the content area. At smaller screen sizes, the two columns will stack into a single column that spans the width of the content area.
• 3 Column. Paragraphs placed in a section with this layout will appear in three columns of equal width. At smaller screen sizes, the three columns will stack into a single column that spans the width of the content area.

When you create a new Section you will be given the option to select the Layout. If you select the 2 Column option, you will be presented with choices for choosing between the column width options described above.

Editing a Section Layout

If you place your mouse over a Section, a Section Layout toolbar will appear in the upper right corner of the section. These tools provide you with the following options:

Moving a Section

You can move your section above or below another section in one of three ways:

• When you hover over the section, you will see the hand cursor appear. Drag and drop the section where you would like it to go. 
• You can click the six-dot icon and then use the arrow keys to move the section up or down. Use the Return key on your keyboard when you are done moving the section.
• You can use the up and down arrows to move the section up or down on the page.

Changing the Section Layout

You can change the Layout of a Section by following these steps:

1. Click on the pencil icon
2. Choose a different layout and/or different layout options
3. If you have content in your Section and you are moving to a smaller number of columns, you will need to select where the "orphaned" items go. 
4. Click Save

Cloning a Section

Click on the copy icon (two squares on top of each other) to clone the section and all content in that section. The clone will be placed directly below the section you cloned.

Deleting a Section

Click on the trash can icon to delete a section.

Working with Paragraphs within a Section

Many pages will need only a single section for containing your content. If you want to create a simple page with a single Text Area, follow the directions on Adding Content to Your Page. If not, read on!

You can add one or more Paragraphs to each column in your Section Layout. For example, to create an area with two Cards and a Text Area, you could choose the 3 Column Layout, and then use the + icon to add a paragraph in each column. The result might look like this:

Moving Paragraphs Between Columns

If you want to reorder your content, you can move an individual Paragraph by dragging and dropping the Paragraph to a new destination. To achieve the change in the image below, Card 1 was dragged into the middle column and Card 2 into the first column.

 

Moving Paragraphs Within Columns

Paragraphs can also be moved within columns. In the following example, we are starting with two Cards in the left column and a Text Area in the right column.

To move Card 2 above Card 1, drag and drop the cards into the desired order OR access the Card Toolbar by hovering over the Card and using the arrows to move the Card. The arrows will move the Paragraph down one space at a time. If you are reordering a column with many Paragraphs, click the arrow until the desired location is reached.

You can also use the six-dot Move tool and use the arrow keys.

Important Note: When stacking Paragraphs in a single column, it is usually necessary to place a Spacer between them to create sufficient visual space. Learn more about the Spacer Paragraph

Working with Multiple Sections

Sections can be stacked on a page. This allows you to have a 1 column layout on top of a 2 column layout, etc.

 

At the top and bottom of all sections, you will always have the option to add a new Section.

 

---

Important Notes

• Content previews are a new feature and still being adjusted. Your editing preview may not match the final display. For best results, save your page to see your final edits.

---