Do you want to improve your blog posts with Divi by adding a hero section?
Fullscreen hero sections look great on any web page, but they work especially well in blog posts.
Even though the featured image is full screen, there are plenty of design options for placing titles and meta text. This is easy to do with the Divi Theme Builder .
In this article, we’ll look at several ways to add a fullscreen hero section to your blog post templates using Divi.
Let's begin.
Overview
This is a preview of what we will be designing in this tutorial.
See Also: Divi: How to Beautify Your Images with the Gradient Generator
Hero section desktop module with post title
Improve your Divi blog posts by adding a hero section
Hero section with post title mobile module
Improve your Divi blog posts by adding a hero section
Alternate hero section layout with post title module for desktop
Improve your Divi blog posts by adding a hero section
DOWNLOAD DIVI NOW!!!
Alternate hero section layout with mobile post title module
Improve your Divi blog posts by adding a hero section
Desktop version of hero section with metadata
Improve your Divi blog posts by adding a hero section
Hero section with mobile version of metadata
Improve your Divi blog posts by adding a hero section
DOWNLOAD DIVI NOW!!!
Blog post template with full screen hero section
You can create a blog post template from scratch in the Divi Theme Builder or download a template from the Elegant Themes blog. To find them, search the blog for “free taiwan phone number lookup blog post template” . If you downloaded the template, be sure to unzip it.
For our example, we will use Free Blog Post Templates from Divi Fashion Designer Layout Pack We also use the layout packagefreeHeader and Footer Fashion Designer .
Download or create a blog post template for a 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 fullscreen hero section is the same.
See also: Divi: How to Use Masks and Background Patterns for Hero Sections
Method 1: Fullscreen Post Title Module
This method will use the Post Title module . This is a good choice if you want to display all your information together. Once you have the template, select the edit icon to open it.
The template we uploaded has a section that contains a featured image. We will remove this section and add a full-width section in its place.
Select Full Width Post Title in the list of full width modules.
All items are selected by default. Enable them. Scroll to Featured Image Placement and select Above Title .
Featured Image Placement: Above the Header
Scroll to Background Color and set the color to #fff9f2
Background: #fff9f2
Title Text
Select the label design. For the Title text, keep H1 and choose Playfair Display. Set it to Left Alignment and choose #34332e as the color.
title:
Heading level: H1
Font: Playfair Display
Text alignment: Left
Text color: #34332e
For the font size , set 65px for desktop and 42px for mobile, and the line height to 1,2em.
Title text size (desktop): 65px (desktop), 42px (mobile)
Heading row height: 1,2 em