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.

IN THIS ARTICLE:

  1. Row section
  2. Columns section
  3. Buttons section
  4. Text + Buttons section
  5. Grid section
  6. Side-by-Side section
  7. News section
  8. Events section

>> See a finished example of a homepage sections layout

1

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) Daily Readings module, 2) National Catholic Register module, 3) Image module
  • Design: Uploaded background image, selected Grey Patterned Background styling (in Xavier 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. 

2

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 Grey Background + Section Shadow styling (in Bethany free theme)
NOTE: You cannot upload a background image in a Columns section.
3

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.

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

  • Section Type: Buttons
  • Section Layout: One Row of Two
  • Button Type: Custom
  • Design: Selected Light Grey Background styling (in Verona free theme) 
4

Text + Buttons

text + buttons section contains a full width Text/HTML module followed by one or more rows of buttons.

After you 1) create a text + buttons section and 2) choose a layout, the new section will be added to the page  pre-populated with empty buttons + an empty Text/HTML module. Simply click into the Text/HTML module to add text. 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.

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

  • Section Type: Text + Buttons
  • Section Layout: One Row of Three
  • Button Type: Custom
  • Design: Default styling (in Xavier 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) Vimeo module
  • Design: Selected White Patterned Background styling (in Bethany 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. Too 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. Too 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)

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.

Still need help? Contact Us Contact Us