GabrielSoft - Examples of different Section Types and how to use them

Once you configure your site (or a single page) with a sections layout, it's time to design your page with individual sections! Here's a breakdown of each section type and examples of how each can be used to achieve a beautiful, balanced page design.

1

Headline

The Headline section is an intuitive feature that helps you build a section that compliments any of your existing images. After you create a Headline section, the new (empty) section will be added to the page. To begin editing the Headline section, simply drag and drop a photo inside the dotted box and the Headline section will choose which layout fits best around your image. After you choose a photo, use the Side Panel Editor to adjust other settings, like text and image justification, image size, and section styling.

Here's a breakdown of the settings (located in the Side Panel Editor) used for the example Headline section pictured above:

• Image: Black Overlay at 50% opacity.
• Text + Buttons: Text right-justified and center-aligned; title, caption, and buttons all toggled to "on."
• Layout: Edge-to-edge, full-width layout.
• Design: Small section height; default section styling.

PRO TIP: For a more complete explanation of the Headline section, read the following help articles:

1. How It Works: The Headline Section
2. The Side Panel Editor Explained

2

Row

A row is a section with one row of modules of equal widths. The section layout you choose will determine the exact number of modules you can add to the section. (e.g., You can add exactly one module to the One Module layout; you can add exactly three modules to the Three Module layout, etc.)

After you 1) create a row section and 2) choose a layout, the new (empty) section will be added to the page. Click + Add Content to drag and drop modules into each content area within the empty section.

Here's a breakdown of the settings used for the example row section pictured above:

• Section Type: Row
• Section Layout: Three Modules
• Content Modules: 1) Image module, 2) News module, 3) Events module
• Design: Uploaded background image, selected Light Grey Background styling (in San Juan free theme)

PRO TIP: Combine a custom background image with a section background color from the Styling menu to achieve a colored overlay for your image. 

3

Columns

A columns section contains vertically expanding columns that can each contain multiple modules. This section allows you to stack columns of modules on top of one another.

After you 1) create a columns section and 2) choose a layout, the new (empty) section will be added to the page. Click  + Add Content to drag and drop modules into each content area within the empty section.

Here's a breakdown of the settings used for the example columns section pictured above:

• Section Type: Columns
• Section Layout: Duo
• Content Modules:
  • Left column - 1) Text module, 2) Image module
  • Right column - 1) Links module, 2) Progress Bar module
• Design: Selected Neutral styling (in Olivet, Lake free theme)

NOTE: You cannot upload a background image in a Columns section.

4

Buttons

A buttons section contains one or more rows of buttons.

After you 1) create a buttons section and 2) choose a layout, the new section will be added to the page  pre-populated with empty buttons. To create a button, hover your cursor over an empty button region and click the settings icon that appears. You can then select one of the built-in button types or create a custom button by uploading an image and adding a button label. Additionally, you can choose to place a Text/HTML module above the buttons.

Here's a breakdown of the settings used for the example buttons section pictured above:

• Section Type: Buttons with Additional Text module turned on
• Section Layout: One Row of Three
• Button Type: Custom
• Design: Selected Primary Color Background styling (in San Juan, Teal free theme)

5

Grid

A grid section contains a specific number of modules arranged in a uniquely fixed pattern.

After you 1) create a grid section and 2) choose a layout, the new (empty) section will be added to the page.  Click + Add Content to drag and drop modules into each content area within the empty section.

Here's a breakdown of the settings used for the example buttons section pictured above:

• Section Type: Grid
• Content Modules: 1) Image module, 2) Image module, 3) Image module, 4) Text/HTML module
• Design: Uploaded background image, selected Blue Background styling (in Santiago free theme)

6

Side-by-Side

A side-by-side section contains one row of two modules of proportionally balanced widths.

After you 1) create a side-by-side section and 2) choose a layout, the new section will be added to the page pre-populated with suggested content (i.e., An Image or Video module alongside a Text/HTML module). As a result, you can either:

• Click to add text in the Text/HTML module, then hover your cursor over the pre-populated Image or Video module and click the settings icon to add an image or video, or
• Delete the suggested modules and click + Add Content to drag and drop new modules into each content area within the empty section.

Here's a breakdown of the settings used for the example side-by-side section pictured above:

• Section Type: Side-by-Side
• Section Layout: Reverse Third 
• Content Modules: 1) Text/HTML module, 2) YouTube module
• Design: Selected Dark background styling (in Olivet free theme)

7

News

A news section contains uniquely styled and arranged news items (added via the News module).

After you 1) create a news section and 2) choose a layout, the section will be added to the page pre-populated with news items (only if you've previously created news items and tagged them to appear on the homepage); otherwise, the new section will be blank. To add a news item to the section, hover your cursor over the section and click the + icon in the top right corner.

Here's a breakdown of the settings used for the example news section pictured above:

• Section Type: News
• Section Layout: List View
• Design: Uploaded background image, selected Grey Background styling (in Santiago free theme)

8

Events

An events section contains uniquely styled and arranged calendar items (added via the Events module).

After you 1) create an events section and 2) choose a layout, the section will be added to the page  pre-populated with calendar items (only if you've previously created calendar items and tagged them to appear on the homepage); otherwise, the new section will be blank. To add a calendar item to the section, hover your cursor over the section and click the + icon in the top right corner.

Here's a breakdown of the settings used for the example events section pictured above:

• Section Type: Events
• Section Layout: List View
• Design: Selected Dark Blue Background styling (in Verona free theme)

9

Tabs

A tabs section allows content to be “stacked” for quick referencing and shorter page lengths. The section layout allows you to organize your content into categories so that site visitors can simply click the topic of information they want to view.

After you 1) create a tabs section and 2) choose a layout, you’ll enter the name of your first tab. Add more tabs by selecting the + in the upper right corner of the section. Click + Add Content to drag and drop modules into each tab’s content area. Tabs can also be selected and dragged to change their order.

Here's a breakdown of the settings used for the example tabs section pictured above:

• Section Type: Tabs
• Section Layout: Top
• Content Modules: Ticket Information Tab - Text module with picture
• Design: Dark Grey Background styling (in Loyola free theme)

NOTE: You  cannot upload a background image in a Tabs section.

Additionally, the 5th option in the tabs section is the Accordion. This will create bars that you can click on to expand to show more information. This is great for condensing information that would be used in FAQs.

A finished sections layout on your homepage

You can use a sections layout on your homepage to create a beautifully balanced design that presents information in clean, digestible chunks. Here's a finished example of a sections layout using eCatholic's Xavier free theme.