GabrielSoft - How to set up and design a page with a Sections layout

With GabrielSoft, you can easily use Sections layouts to design pages that contain a variety of individual content sections. Here's how to set up and design a page with a Sections layout!

Example: Finished section (Side-by-Side)

Configure your site for sections-based editing

Before you actually design a page with a Sections layout, you must first configure the page to allow for sections-based editing.


Choose a compatible theme

Sections layouts are currently available in the following free themes: 

  1. Eden
  2. Olivet
  3. San Juan
  4. Cyprus
  5. Damascus
  6. Lucca
  7. Tabor
  8. Moser
  9. Cascia
  10. Turin
  11. Lorenzo
  12. Verona
  13. Santiago
  14. Xavier
  15. Bethany
  16. Lourdes
  17. Loyola
  18. Porres
  19. Krakow

You must use one of the free themes listed above to create a page with a Sections layout.

Learn more: Use these instructions to select one of the compatible themes listed above in the Design Studio: Change your theme and color palette


Select a Sections layout

Once you've selected a compatible theme, next you must select a Sections layout. You can create a Sections layout in three different places: 1) on your homepage, 2) on a specific interior page, and 3) as the default layout for all interior pages on your website. Here's a breakdown for each of these options:

  • Select a Sections layout on your homepage 
    1. Go to the Design Studio.
    2. Click the Layouts button to browse all homepage layout options.
    3. Select a Sections layout.
    4. Learn more: Change your homepage layout

  • Select a Sections layout on an interior page 
    1. Click Edit Website to access your site in edit mode.
    2. Navigate to the page on which you'd like to use a Sections layout. 
    3. Click the Page Settings icon (located at the bottom left-hand side of the page next to the trash can button), then go to the Page Layout tab (pictured below).
    4. Select a Sections layout.
    5. Learn more: Change the layout of an interior page

  • Select a Sections layout as your site's default layout for interior pages
    1. Go to the Design Studio.
    2. Click the Interior Page Layouts button to browse all page layout options.
    3. Select a Sections layout.
    4. Learn more: Change the default interior page layout for your entire site

Now that you've chosen a compatible theme and layout, it's time to actually design the page using sections.

Design a page using sections

Once you've selected a compatible theme and a Sections layout as described above, you can begin to create sections (an example section is pictured below).

Example: Finished section (News)

Navigate to the page you'd like to design. Then, use these instructions to build your page with sections:


Click on the + to add your first section

To begin, click on the  + icon in the center of the page to add the first section to the page. This will open the Add Section dialog.

What is a section? A section is a horizontal region into which you can add modules (content) with unique layouts and design.


Select the Section Type

Once the Add Section dialog appears, select the section type you'd like to add. (e.g., Row, Columns, Buttons, etc.)

What are section types? For a detailed description of the different section types available, refer to Examples of different section types and how to use them.


Select the Section Layout

Each section type includes a variety of layout options. Click on the layout you would like to use for the selected Section Type. Then click Save to add the section to the page. 


Add modules (content) to your section

When you return to the page, you'll either see 1) the empty section or 2) the section with pre-populated (i.e., suggested) content modules. The next step is to add content to the section.

    • Adding content to an empty section

    Click + Add Content to drag and drop modules into the empty content areas marked with a dashed outline (pictured below).

    • Adding content to a section with pre-populated (suggested) content

    Some section types (such as the Buttons and Side-by-Side section types, for example) are pre-populated with modules. For these section types, you'll add content to the modules as you normally would. (i.e., Click the Settings icon to create a button (pictured below) or insert a video; click inside a Text/HTML module to add/format text.)


Edit the section settings: Design & layout

Each section type includes editable design and layout options. To access these settings, hover your cursor over the section and click the Settings icon in the top right of the section (pictured below). This will open the Section Settings dialog.

    • Edit section design

    Once the Section Settings dialog appears, use the Design tab to control the appearance of the section. Note that the available design options depend on the section type and the theme you are using. Here are a few of the most common section design options:

    • Styling - Choose a section background color, module background color, section shadow, and other styling options.
    • Background Image - Click + Add Image to add a Background Image for the entire section.
    • Section Height - Select Fixed to set a fixed section height. Select Auto to allow the section to automatically expand based on the contents of the modules you add to the section.

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

    • Edit section layout

    Use the Layout tab to adjust your previously selected Section Layout.

Once you have edited your section settings, click Save.


Add more sections to the page

To add an additional section to the page, hover your cursor over an existing section, then:

  1. Click the + icon on the top left to add a new section above the current section, or
  2. Click the + icon on the bottom left to add a new section below the current section.

Arrange sections on the page

To arrange the order of sections on your page, hover your cursor over an existing section, then:

  1. Click the up arrow icon on the top right to move the section up one spot, or
  2. Click the down arrow icon on the bottom right to move the section down one spot, or
  3. Use the orange handle on the right edge of the section to drag and drop the section to a different location on the page.

Example: Finished section (Row)

Next step: View examples of different section types

See a breakdown of each section type and examples of how each can be used to achieve a beautiful, balanced page design. Go to Examples of different section types and how to use them.