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
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.
1 Placing a Section Component on a page
- Click WEBSITE on the top menu bar.
- On the left side menu, select the CONTENT folder and then click Manage. The Website Content page displays.
- Hover your mouse pointer on a page.
- Click the Edit button. The Edit Content area opens.
- Drag a Section Component from the Drag and Drop panel from the left side of the screen to the page.
- Place the Section Component wherever you want to display content. Now you have an empty workspace.
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:
Please sign in to leave a comment.