Submit a ticket My Tickets
Welcome
Login  Sign up
Open navigation

How to Use the Section/Layout Settings in Sections' Sideform

Our Knowledge Base Center articles are being updated for our new platform design. Need assistance? Reach out to support@learnworlds.com


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)

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 add an embed code as well 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 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 side form (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

Did you find it helpful? Yes No

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