Our Knowledge Base Center articles are being updated for our new platform design. Need assistance? Reach out to support@learnworlds.comDividers are beautiful graphical shapes that can be used to separate sections on a page. These design elements can be placed on the top or bottom of a section.
To add a divider, click on a section to open the sideform on the right, scroll down, and select a top or bottom divider from the menu. LearnWorlds offers a variety of dividers to choose from and, selecting different dividers, will allow you to preview how they will be displayed within a section.
Each divider has 5 properties that can be used to configure its appearance:
1. Fill Color allows us to choose a color for the divider, matching a divider with the previous or following section will help create a smooth transition between zones.
2. Width is used to adjust the density of a divider.
3. Height determines how far the divider will expand into a section.
4. Stacking order allows us to control the position of a divider within a section. Setting this to "back" will send the divider behind all widgets of the section while setting it to front will bring it in front of the section's widgets.
5. Horizontal Flip will change the divider's orientation.
Dividers can be added to any section on the page, allowing for the creation of unexpected and impressive page designs.Best Practice
In case you would like to make the height and width of the divider smaller than 60%, you can add the following snippet of code. Navigate to Website → Design → Edit Website → Custom Code → Page → Custom code → <style> logged in (css) or <style> logged out (css) option and add the code snippet below:
#section_1600345755901_25 .on-top {
height: 30px;
}
Make sure to replace section_1600345755901_25 with the id of the specific section. In order to find the section id, you need to click on the section→ choose the edit HTML icon → to detect the section id within the custom code editor.
Overlays are designed to make your backgrounds more stylish and less obstructive by matching your videos and images to your page's color scheme.
To add an overlay:
1. Click on a page Section to open the properties menu on the right.
2. Under the Sections Tab scroll the menu down to access the Overlay option.
3. Click on the switch to toggle the overlay on/off.
4. Selecting Overlay Color will allow you to change the color of the divider either by selecting one of the colors of your school's palette, or any other color you wish.
5. Use the Slide Bar to adjust the overlay’s Transparency.
If you want to learn how to create custom layout zones for your online school website, check the related article here.