CIBDWBB #2: Elementor Homepage Hero Section

How to create a center aligned text block. How to create a video modal. How to use negative margins well.

Subscribe to us on Youtube

This weeks episode is about recreating Elementor’s homepage hero section with Beaver Builder. There is a little spice here with an overlapping video modal section that we can achieve easily with Beaver Builder.

What we will learn in this video:

• Center aligning headline, copy, and a button.
• Using a background image for a column.
• Using negative margins for overlapping spicy-ness.
• Using a CSS class to target a column and give it a drop shadow.
• Implementing a modal, and activating via an icon overlay on top of the column.

The tools we used?

  • Fontanello: Chrome Extension that grabs font styles with a right-click
  • Pixelsnap: Measure anything on the screen!
  • Sip App: Color picker and palette builder
  • Beaver Builder: WordPress Page Builder
  • Ultimate Add-Ons: Add-ons for Beaver Builder. A silver bullet in your building tools arsenal.

We hope this episode helps you find better ways to build with Beaver Builder, and not be afraid of making spicy layouts. Here is to building beautiful designs that give joy to the user!

Next Up:

Thanks For Sharing

Share on facebook
Share on pinterest
Share on twitter
Share on reddit
Share on linkedin
Share on whatsapp
Share on email
Email Friend
Share on telegram