Dividers are beautiful graphical shapes ideal for segmenting sections on a page. These design elements can be positioned at the top or bottom of a section to enhance visual organization. Overlays are designed to make your backgrounds more stylish and less obstructive by matching your videos and images to your page's color scheme.
In this article, we will learn how to create eye-catching web pages using Dividers and Overlays.
Section Dividers
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, and selecting different dividers allows 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. To locate the section ID, click on the section → choose the edit HTML icon → to detect the section ID within the custom code editor.
Overlays
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 overlay by selecting one of the colors in 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.