You can add multiple sections to your Pages or Course Pages, and each section can vary in some Layout Settings dynamically or statically.
Dynamic sections are special sections that retrieve information regarding your school and display this information in real time. Some examples are Courses sections, which you can use to display your courses, or "community posts” sections, which retrieve and present recent posts on your community page.
Static sections are building blocks that you can use to display information, such as your school’s pricing, information about the authors of your school’s courses, or even a gallery with the most important work from your portfolio.
In this article, we will refer to the common features that all sections have.
After adding a section to your page, you may want to make alterations to the section's General Settings, Actions, Layout, and Effects settings:
Section (Sideform Tab)
You can choose the section's layout, as shown here.
Each section can have a background, which can either be only a simple Color, or even an Image, a Video, an Embed Code, or an SVG.
You can either use your Theme Explorer's main colors, or you can also add custom ones.
You can use a personal image for your Section and adjust its position either as Stretched, Centered, Repeated, or auto-repeated. If you pick dimensions that leave blank spaces in the section, you can also add a background color. You can find more information in our Media Library article.
You can upload a video from your Video Library or add the video ID from Vimeo or Wistia.
You have the following options to configure in the Video Background:
- Autoplay video
- Mute sound
- Loop video (automatic replay)
- Popup the video on click
- Choose a video preview
- Hide video on some devices
- Insert a Thumbnail
- Insert a Fallback Image
You can add an embed code as well for your Section Background and then click Update to save the changes.
Similar to the Image option, you can add an SVG file by clicking on Change, to display vector images on your website. Or you can choose one from the default templates:
Background Scrolling Effects
By adding the parallax scrolling effect in Image or Video Section Backgrounds, an illusion of depth is created when the user scrolls down the page by making the page elements or the background images move more slowly than the foreground images. You can find more information here.
Section Dividers & Overlays
For more information on how to divide your sections and add overlays, click here.
Layout (Sideform Tab)
When editing a section, in the Layout panel, you can edit the Alignment of the Section, the height, and the width. Apart from the alignment and size of an element, you can also edit the Box Model, Box Shadow, and Box Appearance.
Alignment: This setting controls the alignment of all the section's widgets and columns (Left - Center - Right).
Height: It determines the height of this specific section, namely the top and bottom paddings. There are four types: Small, Normal, Large, and Extra Large. The paddings of these types are controlled from the Layout option in the Theme Explorer, or you can adjust it on a section-specific level via Box Model → Padding.
Width: The width determines the right and left paddings. You can adjust them on a section-specific level via Box Model → Padding, or you can choose from the Default: Full - Normal - Wide ebook/post - Narrow ebook/post.
Manage section options on top of the sideform (up, down, copy, paste, duplicate, HTML code, delete)
Each section has the following general settings:
- Move the section upwards.
- Move the section downwards.
- Copy the section.
Note: You cannot copy sections such as the "For this course Page" section, as they include information attached to that specific course.
- Paste the section (once copied).
- Duplicate the section right below. Afterward, it can be moved with the arrows upwards or downwards.
- If you are familiar with HTML, you can further customize the HMTL code of a specific section using Custom Code. Don't forget to click update after changing the HTML code:
- Delete the section by clicking on the Trash Bin
Note: You can find more information on the Box model, Box Shadow, and Box appearance settings, in our respective article.