Hero Page Header
Text box beneath Hero Page Header
You can do a lot with the free version of Beaver Builder. Today I’m making a Hero Page Header.
If you’re new to Beaver builder see this starter tutorial.
What is PowerPack Lite?
The free version of Beaver Builder enables you to build basic web page layouts. But most of the modules that enable you to add content to your page are missing in the free version.
PowerPack Lite is a plugin that extends the power of Beaver Builder. PowerPack Lite has two modules that we’ll make use of when we add our hero page header in these videos.
- The Smart Headings module and…
- The Info Box module
Smart Headings
The smart headings module enables us to style headlines in our hero page header using our own choice of font family etc.
Do not confuse the smart headings module with the Fancy Heading module! They’re two completely different modules.
Info Box
The Info Box module is very similar to the smart heading module. However, you can add buttons using the Info Box module.
The plugins I’m using…
When you become an expert you may choose to invest in the premium version of Beaver builder 🙂
What I do in this Hero Page Header video
In the General tab of the Smart Heading module I…
- Make a row
- Add the mac mouse background image
- Add background overlay if necessary
- Drag in: PowerPack > Smart Headings
- Duel Heading: NO
- Type your title…
- Tag size: h1
- Alignment: Centre
- In the Description box type: Button
- Make button text into a link, then add a class of button
I showed what our new hero page header looked like so far…
Then click the Typography tab
- Font family: Lora
- Font size: 72px
- Weight: Normal
- Line Height: 1.2
I saved my work then…
Click the Style tab
- Title Colour: #3a3a3a
The Responsive tab…
- In the: Smart Headings Settings dialogue, click the Responsive tab
- Tablet > Title font size: 50px
- Mobile > Title font size: 30px
I tested my hero page header layout in Chrome , I can go back and fine tune it if necessary.
We’ve just built the hero page header section of our page, but there’s more to do. So let’s move on to the next video.
