Would you like to create a Hero Divi section with the Fullwidth Header module or design one yourself?
Build a hero section of Website from scratch or using the Divi Fullwidth Header module are the two ways to create an eye-catching design for your website.
In this article, we'll look at the pros and cons of using a Fullwidth Header module versus creating your own Hero section with Divi.
Let's go!
The Importance of Website Hero Sections
A Hero section is the very first section that your visiteurs see when they arrive on your Website. This is often a full-width banner and may also be called a Hero Header. It’s a prominent place on your website because it has the power to leave a lasting first impression.
Read also: Divi: How to display the Fullwidth Header module in full screen
It is therefore important that it is designed in such a way that it is easy to read while still being eye-catching and compelling. Website Hero sections are important because they can grab the attention of potential customers, quickly describe a page, and lead to additional engagement and potential leads. Hero sections should be branded, include an H1 title and CTA.
Create a Hero section from scratch
Designing a Hero section from scratch allows you to have complete control over the design and contents. Depending on your situation and needs, this could be a great solution for your website.
Let's take a look at the pros and cons of this approach.
Benefits of this approach
First, let's look at the benefits of building a website Hero section from scratch using Divi.
- Full design control
- Use any Divi module
Disadvantages of this approach
Now let's look at the downsides of creating a hero section from scratch.
- You have to build from scratch
- Requires multiple mods
Create a Hero section with the Divi Fullwidth Header module
Creating a hero section using the Divi Fullwidth Header module makes it easy to create an eye-catching, mobile responsive design in just minutes.
Let's take a look at the pros and cons of this approach.
Benefits of this approach
Let's take a look at the benefits of building a Hero section with the Divi Fullwidth Header module.
- All your contents is in a single module
- Design already optimized
Disadvantages of this approach
Now let's evaluate the disadvantages of designing a Hero section with the Divi Fullwidth Header module.
- Less flexibility with design
The Divi Fullwidth Header module comes with options for contents predefined, while many can be limited if you are looking to add a piece of content that is not available in the module. This means you will have less flexibility with the overall design.
Construction of the two Hero sections step by step
Now that you understand the pros and cons of both approaches, let's build out each Hero section so you can see exactly how each approach works.
Create a new page with Divi Builder
To get started, you will need to do the following:
- Install Divi on your WordPress website.
- Add a page and give it a title.
- Enable visual builder
Create your Hero section from scratch
Now that our page is set up, let's start creating a hero section from scratch.
Download DIVI now!!!
Activate "Divi Builder"
In order to use Divi's drag and drop builder, we will need to activate the Visual Builder by clicking on the button “Use DiviBuilder”. This will reload the page using the Divi Visual Builder.
Select: Build from scratch
Now that your page has reloaded with the visual builder enabled, click on the options “ BUILD FROM SCRATCH so that we have a blank page to work with when designing.
Add row and configure columns
Create a row with the following column structure.
Add mods
Now let's add the content modules we will need.
- 2 Text Modules, divider, a button in the left column
- 1 Image Module in the middle column
- 1 Image Module in the right column
Style section
Now let's configure the section settings.
Add a section, then configure the following settings:
- Background: #1d1d25
Header text style
Customize header text:
- Heading 1:
- Font Weight: Semi Bold
- Text Color: #ffffff
- Text Size: 90px
- Line Height: 1,1 em
Separator
Configure the divider settings:
- Line Color: rgba(255,255,255,0.3)
- Divider Weight: 10px
- Max Width: 260 pixels
Body of text
Customize body text:
- Text Color: rgba(255,255,255,0.7)
- Text Size: 13px
- Line Height: 1,8 em
Button
Now let's customize the button.
In the Button tab:
- Use Custom Styles For Button: Yes
- Button Text Size: 14px
- Text Color: #ffffff
- Button Background:
- Border Width: 0 pixels
- Border Radius: 0 pixels
In the Spacing tab:
- Top and Bottom: 40px
- Left and Right: 20px
Add images
Add the images to the image modules.
Adjust line settings
In line parameters:
- Margin (Left): 15vw
Adjust 2nd column
In the second column, configure these settings:
Custom CSS
Paste the following code into the code section of the main element:
argin-right: -15vw!important;
z-index: 100!important;Spacing
Add 100 pixels of top padding.
So ! You now have a fully designed custom Hero section.
Download DIVI now!!!
Create your Hero section with Divi's Fullwidth Header module
Now let's see how to recreate this Hero section using Divi's Fullwidth Header module.
Download DIVI now!!!
Add a page and select Build From Scratch
Add a new page, give it a title, then click on “Use Divi Builder” then select Build From Scratch.
Insert a fullwidth section and a fullwidth header
Insert section Fullwidth, then select FullwidthHeader in the module library.
Contents
Add the textual content to the module in the Text tab.
Pictures
Add the images in the image tab.
Change background color
In the background tab, configure the following setting:
- Background: #1D1D25
Header Text
Configure header text settings:
- Title Font Weight: Bold
- Text Size: 90px
Body of text
Configure body text settings:
- Body Text Color: rgba(255,255,255,0.55)
Subtitle text
Configure the caption text settings:
- Subtitle Font Weight: Bold
- Text Color: #4C594C
- Letter Spacing: 3px
Buttons
Now let's customize the two buttons.
button one
On the Button One tab, configure the following settings:
- Use Custom Styles For Button One: Yes
- ButtonOne
- Background: #4c594c
- Border Width: 0 pixels
- Border Radius: 0px
- Show Icon : YES
- Only Show Icon On Hover: No
- Padding: 25 pixels (Top and Bottom); 25px(Left), 50px(Right)
Button Two
On the Button Two tab, configure the following settings:
- Use Custom Styles For Button Two: YES
- Button Two Border Width: 0 pixels
- Border Radius: 0px
- Padding: 25px (Top, Bottom, Left and Right)
- Button Box Shadow: Choose the 4th
- Box Shadow Horizontal Position: 0px
- Box Shadow Vertical Position: 2px
- Shadow Color: #ffffff
So ! You now have a fully designed Hero section using the Divi Fullwidth Header module.
See also: Divi: How to create background transitions between elements
Download DIVI now!!!
Conclusion
Building a Hero section with Divi is easy, whether you're building from scratch or using the Fullwidth Header module. Both options allow you to create stunning header designs that capture the interest of your visiteurs.
Depending on your unique needs, either option is a great option to consider when styling your Hero section.
After reading the pros and cons of both, how would you design your Hero section?
We hope this tutorial will inspire you for your next Divi projects. If you have any concerns or suggestions, find us in the comments section to talk about it.
You can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites.
Do not hesitate to also consult our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
