Would you like to improve your blog posts? Divi by adding a Hero section to it?
Full-screen Hero sections look great on any webpage, but they're especially great on blog posts.
Even though the featured image is full screen, there are plenty of design options for placing the title and meta text. It's easy to do with the Divi Theme Builder .
In this article, we'll see several ways to add a full-screen Hero section to your blog post template. Divi.
Let's start.
Preview
Here's a preview of what we'll be designing in this tutorial.
Read also: Divi: How to use the "Gradient Builder" to beautify your images
Hero section with Post Title Desktop version module
Hero section with Post Title mobile version module
Alternate Hero section layout with Post Title desktop version module
Download DIVI now!!!
Alternate Hero section layout with mobile Post Title module
Hero section with metadata Desktop version
Hero section with metadata mobile version
Download DIVI now!!!
Blog Post Templates for Your Fullscreen Hero Section
You can create the blog posts template in Divi Theme Builder from scratch or download a template from the Elegant Themes blog. To find them, search the blog “free blog post template”. If you download a template, be sure to unzip it.
For our examples, we will use the free Blog Post Template for Divi's Fashion Designer Layout Pack . We also use the layout pack free Header and Footer Fashion Designer .
Download or create your blog post template for your fullscreen Hero section
You can download your blog post template or create one from scratch. We'll upload one, but the process for creating a full-screen Hero section is the same.
See also: Divi: How to Use Masks and Background Patterns for a Hero Section
Method 1: Fullscreen Post Title module
This method will use the PostTitle module . It is a good choice if you want to display all the information together. Once you have your template, select the edit icon to open it.
The template we uploaded has a section with the featured image. We will remove this section and add a Fullwidth section in its place.
Select Fullwidth Post Title in the list of full-width modules.
All items are selected by default. Leave them enabled. Scroll to Featured Image Placement and select Above Title.
- Featured Image Placement: Above Title
Scroll to Background Color and set the color to #fff9f2
- Background: #fff9f2
Title text
Select the tab Design. For title text, keep H1 and choose Playfair Display. Set it to Left Justified and choose #34332e for the color.
- Title:
- Heading level: H1
- Font: Playfair Display
- Text Alignment: left justified
- Text Color: #34332e
For text size , set the desktop version to 65px, the mobile version to 42px, and the row height to 1,2em.
- Title Text Size (Desktop): 65px (Desktop), 42px (Phone)
- Title Line Height: 1,2 em
Meta text
Scroll to Meta Text. Select Montserrat for the font and set it to medium, uppercase, right alignment for the desktop version and left alignment for the mobile version. Choose #7b7975 for color.
- MetaFont:
- Font: Montserrat
- Weight: Medium
- Style: TT
- Metatext:
- Alignment: right (Desktop), left (Phone)
- Color: #7b7975
Define the font size for the desktop version at 14 px, for the mobile version at 10 px, the letter spacing at 1 px and the line height at 1,6 em. Close your settings and save your template.
- Metatext:
- Size (Desktop): 14px
- Size (Phone): 10px
- Letter Spacing: 1px
- Line Height: 1,6 em
Title on background image
If you decide you want the title to appear on the featured image, use the same design settings and go back to the tab Content.
Select Title/Meta Background Image for Featured Image Placement.
- Featured Image Placement: Title/Meta Background Image
Scroll to background and select Background Gradient. Set left color to #fff9f2, right color to rgba(255,255,255,0), direction to 90 degrees, start position to 30% and choose yes to place the gradient above the image of background. Close and save your settings.
- Gradient Stops:
- 30%: #fff9f2
- 100%: rgba(255,255,255,0)
- Gradient Direction: 90 deg
- Square Gradient Above Background Image : YES
Method 2: Full Screen Hero Section with Metadata
This method will use Text modules with dynamic content for the information. This is a good option if you want to display all items in different places.
First, download the template and delete the first section. We'll recreate the modules and their settings in the left column, but we'll walk through them so you can configure them.
Fullscreen Hero Section Settings with Metadata
Open the settings of the section and scroll to background Image. Select Background Gradient and change the settings as follows:
- Gradient Stops:
- 30%: #fff9f2
- 100%: rgba(255,255,255,0)
- Gradient Direction: 90 degrees
- Square Gradient Above Background Image : YES
Select background Image and choose the option Use Dynamic Content.
Choose Featured Image in the options.
Select the tab Designand scroll to sizing. Add 100vh to minimum height. Close the section settings.
- Min Height: 100vh
Fullscreen Hero Section Settings with Metadata
Next, add a double column row to the section.
Add a Text module in the right column.
For his contents, select Use Dynamic Content.
Choose Post/Archive Title in the list of options.
- Dynamic Content: Post/Archive Title
Go to tab Design.
- Heading:
- Text: H1
- Font: Playfair Display
- Text Alignment: left justified
- Text Color: #34332e
For the size of texts , set for desktop version to 65px, for mobile version to 42px and row height to 1,2em.
- Heading:
- Text Size: 65px(Desktop), 42px(Phone)
- Line Height: 1,2 em
Scroll to Spacing and enter 50% for top padding. Close Settings.
- Padding: 50% (Top)
You can also read this article on: How to Create a Hero Section with Divi's Fullwidth Header Module
Hero section with metadata category
Add a new section regular under the Hero section.
Open its settings and set the color background on #fff9f2. Close Settings.
- Background Color: #fff9f2
Then add a line of 4 columns to the new section.
Full screen hero with metadata category text
Add a Text module dans la colonne de gauche.
Open the module settings and select Use Dynamic Content for the body of the text.
Select Past Categories in the list.
- Dynamic Content: Post Categories
Select the tab Design and scroll down to Heading Text. Select H4. Choose Playfair Display for the font and set it to medium, uppercase, right alignment for the desktop version and left alignment for the phone version. Choose #7b7975 for color.
- Heading:
- TextDisplay
- Font: Playfair Display
- Font Weight: Medium
- Style: TT
- Text Alignment: Center
- Text Color: #7b7975
Set the font size for the desktop version to 14 px, for the mobile version to 10 px, letter spacing to 1 px and line height to 1,6 em. Close your settings and save your template.
- Heading 4:
- Size (Desktop): 14px
- Size (Phone): 10px
- Letter Spacing: 1px
- Line Height: 1,6 em
Scroll to Spacing and add 0px to the bottom margin. Close Settings.
- Margin (Bottom): 0px
Fullscreen Hero section with Meta Text metadata
Next, copy the Category module and drag it to the next column. Each of the Meta modules has the same settings. We will show how to create the first module and then copy it twice to create the other modules.
Author
Open settings and delete the contents dynamic.
Click on Use Dynamic Content and choose Post-Author.
- Dynamic Content: Post Author
In the tab Design, Change the following settings.
- Heading 4:
- Font: Montserrat
- Font Weight: Medium
- Style: TT
- Text Alignment (Desktop): Center
- Text Alignment (Phone): Left
- Color: #7b7975
The parameters of font size include:
- Text Size: 14px (Desktop), 10px (Phone)
- Letter Spacing: 1px
- Line Height: 1,6 em
La bottom margin must have 0px.
- Margin (Bottom): 0px
Date:
Copy the Author module and drag it to the next column.
Delete it contents dynamic current, choose Use Dynamic Content and select Post Publish Date. Close Settings.
- Dynamic Content: Post Publish Date
Comments
copy the Post Publish Date module and drag it to the last column.
As with other modules, remove the dynamic content and select Use Dynamic Content .
Choose Post Comment Count from your choices.
- Dynamic Content: Post Comment Count
This time add a space and the word Comments in the field After . Close the little modal then close the settings. Save your work.
- After: Comments
Read also: Divi: How to display the Fullwidth Header module in full screen
Results
Hero section with Post Title Desktop version module
Hero section with Post Title mobile version module
Alternate Hero section layout with Post Title desktop version module
Alternate Hero section layout with mobile Post Title module
Hero section with metadata Desktop version
Hero section with mobile version metadata
Download DIVI now!!!
Conclusion
That's it that's all ! This is our look at how to add a fullscreen Hero section to your blog post template. Divi.
Modules Divi and Theme Builder offer several options for creating full-screen Hero sections. All methods work very well and all have their advantages.
Using these methods, you can add a full-screen Hero section to any Divi blog post template.
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.
...
