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.

tickyblog

This blog helps you level up in graphic design, branding, web design all tech with fun posts. 

Facebook
Twitter
LinkedIn

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!

Share this article
Facebook
Twitter
LinkedIn
Pinterest
Comments

Leave a Comment