Experiencing an issue?

Adding Sections

Section Components are the building blocks of your website. For both templates and custom builds, sections create the structure that gives webpages shape. They hold the content that gives your website meaning.

In this article, you learn how to:

  • place a Section Component on a webpage
  • open the Section Component toolbar
  • set universal default styles
  • configure custom settings

See Also

 

Analysing a section

Here is an example of how content can sit inside a section. This example comes from the Voyager landing page template.

Section and Column Components create structure and workspaces. Placing a Column Component above another Column Component is an easy way to create evenly structured workspaces that hold content. In this example, content is added with:

Simple design elements add a bit of style. In this example, a Spacer Component and Divider Component add white space which improves the visual impact of a dense block of content.

 

section-anal-1a.png

 

 

1  Placing a Section Component on a page

  1. Click WEBSITE on the top menu bar. 
  2. On the left side menu, select the CONTENT folder and then click Manage. The Website Content page displays. 
  3. Hover your mouse pointer on a page.
  4. Click the Edit button. The Edit Content area opens.
  5. Drag a Section Component from the Drag and Drop panel from the left side of the screen to the page.
  6. Place the Section Component wherever you want to display content. Now you have an empty workspace.

section-comp-1a.png

 

2  Styling a Section Component

You can style a Section Component by changing its appearance and behaviour. There are 2 ways to style Section Components. 

a. Set Default Styles

Set default styles for all Section Components. These universal settings configure every new Section Component you add to a website page.

Default styles for core features are set in the Style Editor. For more information, see:

b. Customise Style 

You can override default settings and customise one Section Component by modifying style elements in its Settings panel.

For more information about the Settings panel, see:

If you find this article useful, you may also be interested in the following: 

Related articles