Now Loading:
Elementor Homepage Hero Section

Elementor Homepage Hero Section

Posted July 18, 2018
, by tickyboom
This week's 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.
🦁 Sections

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!

Thanks for reading, wanna share with your friends?

Get infrequent design email updates!