While editing your pages, you can add multiple sections. Each section can adjust its layout settings dynamically or statically, allowing for versatile customization.
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 delve into the fundamental characteristics 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)
Section Layout
You can choose the section's layout, as shown here.
Section Background
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.
1. Color
You can either use your Theme Explorer's main colors or you can also add custom ones.
2. Image
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.
3. Video
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
4. Embed
You can also add an embed code for your Section Background and then click Update to save the changes.
5. SVG
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 its alignment, height, and width. In addition to an element's alignment and size, 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 (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. 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.