Fancy Post Header
Walkthrough
If you want to add some style to your blog posts, try a full-width header. Fancy!
Create the Post Structure
Start by creating a new blog post. Switch over and use the Divi builder on the back end. Add a standard section and choose the Post Title module.
Change Page Settings
The default setting on this module are generic. Let’s change them so the title looks a little better.
First, we need to change some page settings, NOT the module but the page.
Change Module Settings
Next, we’ll change some settings on the Post Title module. On the Content tab, make these changes:
Show Post Categories: NO
Show Comments Count: NO
Show Featured Image: YES
Featured Image Placement: Title/Meta Background Image
On the Design tab, do this:
Text Orientation: center
Text Color: Light
Use Text Background Color: YES
Text Background Color: choose a color and change the transparency
Choose a font and size to your liking.
Title Letter Spacing: 2px
Title Line Height: 1em
Choose Meta Fonts and size.
Change Row Settings
On the Design tab of the row settings, make the row display as full-width. Also change the custom gutter width to 1.
Change the Padding to Zero
For the row settings, change the top and bottom custom padding to zero. You’ll find these fields on the Design tab under Spacing. This will tighten the space all around these elements.
Check Responsive Look
Don’t forget to toggle between various devices to make sure all of your formatting choices look good on all sizes of screens.
Save It to Your Library
If you like the results, consider saving this section to your library for future use. Then when you’re ready to use it as part of a future post, you can load it from your library. To add some textual content to your blog, just add another section with a Text module.