Submit a ticket My Tickets
Welcome
Login  Sign up
Open navigation

Section Dividers & Overlays

Dividers 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. 

Keep in mind that dividers can be added to any section on the page, allowing for the creation of unexpected and impressive page designs. 


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. 

It’s amazing what you can create using the new Site Builder. Here are a few examples you can use when designing your page! 

Wanna learn how to create custom layout zones for your online school website? Check the related article here. 

Did you find it helpful? Yes No

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