Shape Dividers

If you are running on multiple sections, you can try and add dividers, they are cool, eye-catching lines that draw the section's border. To add a shape divider, look for it in the left panel, where all elements are present. Either search for it via the search bar or scroll down until you locate it. Drag the elements and place it under the section. Or you an alternative method to add Shape Dividers is if you add a new Section, got to the Style Tab and find the Shape Dividers section 

  1. Type - Choose the type of the Shape Divider from the dropdown menu 
  2. Color - Select a color for your Shape Divider 
  3. Width - Set the width of your Shape Divider Height - Set the height of your Shape Divider 
  4. Flip - Change the direction of your Shape Divider 
  5. Bring to Front - Enable the Switch to bring the Shape Divider in front of other objects

Shape Divider Options

Content Tab

  1. Style - Choose from the large list of shape dividers 
  2. Width - Decide the width of the shape divider 
  3. Alignment - Choose for the shape divider to be aligned to the Left, Right or Center 
  4. Add an element - You can add Text or and Icon on the shape divider 

Style Tab

  1. Color - Choose the color of the divider 
  2. Weight - Pick the weight for the divider 
  3. Gap - Decide on the gap between the divider and the section 
  4. Color - If you choose to add a text to the divider you can select the color of it 
  5. Typography - Set the typography options for the text 
  6. Position - Decide whether the text will be positioned on the Right Center or Left 
  7. Spacing - Set the spacing between the text and the divider 
  8. View - If you choose to add an icon to the text choose to have it Stacked, Frame, or None 
  9. Size - Decide the size of the icon 
  10. Padding - Add padding to the icon 
  11. Primary color - Select the color of the icon 
  12. Secondary Color - Select the color of the icon's frame 
  13. Position - Choose the positioning of the icon 
  14. Spacing - Choose the spacing between the icon and the divider 
  15. Rotate - Spin the icon to a preferred angle 
  16. Border Width - Select the width of the frame's border 
  17. Border Radius - Chose to have your icon's frame circular  

Advanced Tab


  1. Margins - Margin adds spacing outside the element borders.
  2. Padding - Padding adds spacing inside the element borders.
  3. Z Index- This property allows you to precisely place elements on your page in a stack order of elements
  4. CSS ID - You set CSS ID for your section, a customs selector which can find many uses
  5. CSS Classes - Add your custom CSS class with a specific class attribute

Motion Effects 

  1. Scrolling Effect - Enable to have the scrolling effect on your section and choose from the list of effects available and adjust their settings as well
  2. Sticky - You can set the section to be sticky at the Top or at the Bottom of the page 
  3. Entrance Animations - Decide how your section will enter when visiting the website from the drop-down list of animations provided. Also, change animation duration and delay to add more movement to your website. 


  1. Choose the background to be Normal or Hover
  2. Have the background be Classic where you create a one-color background or add an image or either Gradient to have two colors blended together. 


  1. Choose a Border to be Normal or Hover 
  2. Decide to have a Border Type: Solid, Double, Dotted, Dashed, or Groove 
  3. Set the Border Radius 
  4. And add Box Shadow for the column 


  1. Choose the column's width, it can be Default, Full Width, Inline, or Custom 
  2. Set the Positioning > Absolut, choose the Horizontal and Vertical Orientation either Left or Right and slide the Offset handler for both Vertical and Horizontal Orientation. 
  3. Set the Positioning > Fixed, choose the Horizontal and Vertical Orientation either Left or Right and slide the Offset handler for both Vertical and Horizontal Orientation. Or you can even grab the widget and drag it across the working page to set it to a preferred place. 


  1. Visibility - Choose to Hide or Show section on different devices: on Desktop, Tablet or Mobile


  1. Set Custom Attributes for the wrapper elements, each attribute should be written in a separate line

Custom CSS

  1. Add your own Custom CSS in the editor below.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.