Submit a ticket My Tickets
Welcome
Login  Sign up
Open navigation

How to Use and Edit the Section/Layout Settings of Page Sections

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.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.