Add Bricks Builder Shape Dividers to your Sections

Bringing a unique flair to your website’s design can be as simple as adding Bricks Builder Shape Dividers to your sections. This tutorial guides you through the process, using Elementor as a resource, to create a visually appealing flow in your web design.

Prerequisites

Please make sure you have the following installed and activated:

• Bricks Builder
• Elementor

What Are Shape Dividers?

Shape dividers in web design serve as more than just aesthetic enhancements. They help in creating a visual hierarchy, guiding the user’s eye through the content effectively. Understanding the interplay between different elements on a page, such as color contrasts and shapes, is crucial for effective web design.

Instructions to Add Bricks Builder Shape Dividers

1. Create a new section in Bricks Builder and give it a background color.
   
2. Insert a container inside the section and populate it, e.g. with a headline and text.
   
3. Duplicate this container a couple of times, ensuring diversity in content.
   
4. Change the background color of the middle container to white for contrast.
   
5. Select your top section and navigate to Settings > Style > Shape Dividers and add a triangle shape divider.
   • Set its color to white.
   • Adjust the height to 7VH.
   • Align this divider to the bottom.
   • Tweak its bottom position slightly (e.g., -1px) to remove the line.
     
6. Select your bottom section and navigate to Settings > Style > Shape Dividers and add a triangle shape divider again.
   • Match the height setting (7VH) as before.
   • Adjust its top setting to -7VH, effectively hiding it initially.
   • Turn off the ‘Hide Overflow’ option to make the divider visible.
   • Change the color of the bottom shape divider to blend seamlessly with the section’s background color.
     
7. Apply a CSS tweak if a thin line appears at the bottom.
   • Target the shape divider wrapper.
     
   • Add custom CSS to set the top position slightly (1px) lower to eliminate this line.

     .bricks-shape-divider {
     top: 1px:
     }

     

8. Add additional padding via Settings > Style > Padding to the middle section, to ensure uniform spacing and aesthetic appeal.
   

Official Documentation

• Bricks Builder Documentation

Bricks Builder Shape Dividers – Conclusion

By following these steps, you can effectively add Bricks Builder Shape Dividers to your sections, creating a polished and professional look for your website. Experiment with different shapes and colors to find the style that best suits your site’s design.