November 30, 2023

Add Bricks Builder Shape Dividers to your Sections

Play Video

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.

Bricks Builder Shape Dividers Preview
Bricks Builder Shape Dividers Preview

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.
    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.
    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.
    Duplicate this container a couple of times, ensuring diversity in content
  4. Change the background color of the middle container to white for contrast.
    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.
      Navigate to your top section Settings Style Shape Dividers and add a triangle shape divider
  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.
      Select your bottom section and navigate to Settings > Style > Shape Dividers and add a triangle shape divider again
  7. Apply a CSS tweak if a thin line appears at the bottom.
    • Target the shape divider wrapper.
      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:
      }

      Add custom CSS to set the top position slightly (1px) lower to eliminate this line

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

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

Required Resources

Bricks Builder Logo
Payment required
Credit to WP Easy
WP Easy simplifies complex WordPress topics, helping both beginners and advanced users master the platform. Committed to empowering website creators, WP Easy delivers practical, easy-to-follow content for enhancing your WordPress skills.
Visit
Add Bricks Builder Shape Dividers to your Sections
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Menu
Give Feedback
Describe your feedback *
Rate Helwp
Share
Facebook
Twitter
LinkedIn
Reddit
Email
WhatsApp
Telegram
Pocket
Report
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.