5 Stunning Examples of Divi’s Post Title Module & How to Achieve Them

How to Add User Ratings to Your WordPress Website
August 29, 2016
How to Create Temporary Login for WordPress (No Passwords)
August 29, 2016
Show all

Welcome to Day 90 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!


When it comes to content marketing, we’re all looking to engage people with our blog posts. The first step is hooking your site visitors with a creative image and great title. While Divi will not write your headlines for you, the Post Title Module provides a near infinite variety of styling options to make sure your article looks amazing–and hook’s your potential readers–from the first glimpse. That’s why in today’s post I’m going to be showing you five stunning ways that you can style Divi’s Post Title Module to help pull your readers in.

Let’s get into it!

The Default Post Title Module

Before we get started, let’s take a look at what the Divi Post Title Module looks like by default. This is the starting point we’re using in each example below. To get the same results that we’ve achieved simply follow the instructions under each example.

default-post-title

Default Post Title Module

We’re going to be making most customizations in the 3 main areas of the Post Title Module. In some of these examples, we’ll make some adjustments in the row that holds the module but overall, we’ll try to spice these up without getting too involved with much custom CSS.

The 3 areas we’ll be customizing in the Post Title Module are:

  1. General Settings
  2. Advanced Design Settings
  3. Custom CSS
Areas we'll customize.

Areas we’ll customize

Some things to note:

  • Whatever your blog title is will display in the Post Title Module. That cannot be adjusted within the module itself.
  • To set the featured image, go to “Set featured image” in the Featured Image box at the bottom right of your wordpress dashboard.
  • These examples should layout nicely on tablet and mobile views but depending on the length of your title, you may need to tweak the title font size and in some cases, the padding and CSS options.

Ok – now that we’re all set up, let’s do this!

1. Title With Background Featured Image

example-1

Example 1

In this first example, we’re going to avoid any CSS and just make some changes to the module settings. The goal here is to lay the text on top of the featured image and give it a nice streamlined look. I’ve checked off some of the meta data options to simplify the look a bit, but you may choose to keep your categories and comments on. You’ll see that with just a few tweaks to the General Settings and Advanced Design Settings, we can create a very custom look here!

Here's what this will look like when scrolling down.

Here’s what this will look like when scrolling down.

To create this look, I did the following:

General Settings:

  • Show Post Categories: NO
  • Show Comments Count: NO
  • Featured Image Placement:Title/Meta Background Image
  • Use Parallax Effect: YES
  • Parallax Method: CSS
  • Text Orientation: Center
  • Use Text Background Color: YES
  • Text Background Color: rgba(255,253,250,0.79)

Advanced Design Settings:

  • Title Font: Oswald
  • Title Font Size: 30px
  • Title Text Color: #41596b
  • Meta Text Color: #7d797b

Save & Exit

Here’s what the backend General Settings and Advanced Design Settings will look like.

General Settings

General Settings

Advanced Design Settings

Advanced Design Settings

And that’s it! With just a handful of tweaks and setting changes we have completely new look. And another benefit to this example – no custom CSS needed!! 😉

2. Featured Image Above Title

Example 2

Example 2

As we see in the default look, the title will automatically be above the featured image, but in this example we’re going to reverse that. We’re all very visual now in the digital age so a very useful way to draw someone in is with a strong featured image as the first thing they see. The Post Title Module is really all about a strong first impression so that’s our goal here.

To create this look, I did the following:

General Settings:

  • Show Post Categories: NO
  • Show Comments Count: NO
  • Featured Image Placement: Above Title
  • Text Orientation: Center
  • Text Color: Light
  • Use Text Background Color: YES
  • Text Background Color: #5574c7

Advanced Design Settings:

  • Title Font: Raleway  (Bold)
  • Title Font Size: 25px
  • Meta Text Color: #9ab0ea

Custom CSS:

Meta: (this will reduce the amount of space at the bottom of the Author, Date, etc)

padding-bottom: 0px;

Save & Exit

As you can see in this example, with just another round of basic setting changes and one line of CSS, we can create an entirely custom look with the Divi Post Title Module. Let’s press on and see if we can get a little more creative!

3. Title & Featured Image in Box

Example 3

Example 3

This design is a great way to tie your title and image in with the branding of your site. If your site has a nice accent shade of blue for example, you could use that instead of the brown that I’m using. You can also match the background color to colors of the image which can lead to a pretty slick look as well. We’re going to add a border line above the meta data to give a little separation between that and the title. You’ll see that in the CSS below.

To create this look, I did the following:

General Settings:

  • Featured Image Placement: Below Title
  • Text Orientation: Center
  • Text Color: Light
  • Use Text Background Color: YES
  • Text Background Color: #7c6b6d

Advanced Design Settings:

  • Background Color: #7c6b6d
  • Title Font: Georgia
  • Title Font Size: 30px
  • Title Text Color: #fff2e1
  • Meta Text Color: #fff2e1

Custom CSS:

Meta:

border-top: 1px solid #fff2e1;
padding-top: 5px;
padding-bottom: 0px;

This will add the border line above the meta text and adjust the padding to fit nicely.

Featured Image:

margin-top: -20px!important;
padding: 20px;

This will element some extra space between the text and image and add some padding around the image for the background color to pull through and blend with the title background color.

Save & Exit

This is another example of how versatile we’re able to get with the Divi Post Title Module! With just a handful of setting changes and a few lines of CSS, our blog header can look quite classy and modern.

4. Title Popping Out Below Featured Image

Example 4

Example 4

One great way to bring extra attention to your post is to make the title “pop.” In this case, we’re going to create a look that makes it look like the title is sitting on top of the featured image. And depending on what image you use, this can lead to a very eye grabbing look.

To create this, I did the following:

General Settings:

  • Show Post Categories: NO
  • Show Comments Count: NO
  • Featured Image Placement: Above Title
  • Text Orientation: Center
  • Text Color: Light
  • Use Text Background Color: YES
  • Text Background Color: #313a54

Advanced Design Settings:

  • Title Font: Rokkitt (Bold)
  • Title Font Size: 34px
  • Title Text Color: #e6e5e9
  • Meta Text Color: #727c86

Custom CSS:

Featured Image: (this will move the title box on top of the featured image and give some padding space around the image to make it feel like the title box is popping out)

margin-bottom: -15px;
padding: 0% 3%!important;

Save & Exit

5. Color Overlay on Featured Image

Example 5

Example 5

My personal favorite, this one will take some work in the Row Module and will require some CSS. But don’t worry, it’ll all be laid out nicely for you to use!

You can change the overlay color on this example to match your site. That’s a great way to seamlessly blend your article image in with your branding without having to go into Photoshop or any design programs. I’m also going to add a border which gives the image some separation from the title and creates a nice, classy look. I’ve also tweaked the meta data in this one just to give it that extra sleek look.

Here's what this will look like when scrolling down.

Here’s what this will look like when scrolling down.

To create this look, I did the following:

First, the Row Module

Open Row Module

Row Module

Row Module

General Settings:

Custom Padding: Top 100px, Right 75px, Bottom 100px, Left 75px

Row module general settings.

Row module general settings.

Custom CSS:

Mail Element: (this will contain the background featured image, the background color overlay and the line that borders the background)

Add this CSS to make sure the background image fits in frame,

background-repeat: no-repeat !important;
background-attachment: fixed;
background-position: top center !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
background-size: cover !important;

Add this CSS for the color overlay on the background image. Notice the image URL – you will copy your featured image URL here.

background-image:
linear-gradient(rgba(39, 63, 107, 0.86), rgba(39, 63, 107, 0.86)),
url('/wp-content/uploads/2016/08/bg.jpg');

 

Add this CSS for the line that borders the title and background image.

outline: solid 1px #fff;
outline-offset: -20px;
Here's what the CSS will look like.

Here’s what the CSS will look like.

Save & Exit

Second, the Post Title Module

General Settings:

  • Text Orientation: Center
  • Text Color: Light

Advanced Design Settings:

  • Title Font: Lora
  • Title Font Size: 26px
  • Meta Font: Abel
  • Meta Text Color: #e8e4dc

Save & Exit

And there you go! As you can see with this example, there’s a bit of work that goes into the the row module but not too many changes in the actual Post Title Module. With Divi, we have the flexibility to customize the rows that hold our module to create a very custom look.

Get the Most Out of The Post Title Module with these Additional Free Resources

I hope these design examples have inspired you to take charge of the Divi Post Title Module! Again, the goal here is to captivate our readers with a strong featured image/title design. We want to engage them and pull them in with a strong first impression and Divi can make that easy for us. But a great design is really just the beginning when it comes to this particular module.

Let Nick teach you how you can save each of these designs as a global library element for maximum efficiency.

See how our lead designer Mario Maruffi used this module in his beautiful (and free) Blog Post Layout Pack.

And finally, take a trip back to the very first episode of Divi Nation where Nathan B. Weller taught us how to incorporate the Post Title Module into a blog post template that can be used over and over again.

Tomorrow: The Last Full Week of the Divi 100 Marathon Begins!

Tomorrow we’re kicking off the last full week of the Divi 100 Marathon with another free layout pack. This one, however, will come with a unique tutorial. We’re going to be showing you how to achieve the same type of results that Geno was able to produce yesterday with his crossfit layout pack. Not to mention all of the layouts Mario has created using the Divi Wireframe Kit as well.

If you’re interested in how to take advantage of one of our most powerful and flexibile resources far into the future, you won’t want to miss it.

See you there!

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

divi-2-6-logo

Divi 100 Day 90

The Countdown To Divi 3.0

This post is part of our Divi 100 marathon. Follow along as we post free Divi resources for 100 days in a row! This 100-day countdown will end with the game-changing release of Divi 3.0, including our brand new visual editor built from the ground up using React. Divi 3.0 will change the way you build websites with the Divi Builder forever!
Let the countdown begin.

jQuery(document).ready(function(){jQuery(“#DIV_TO_PLACE_COUNTDOWN”).jCountdown({timeText:”2016/9/7 7:00:00″,timeZone:-8,style:”slide”,color:”black”,width:0,textGroupSpace:15,textSpace:0,reflection:false,reflectionOpacity:10,reflectionBlur:0,dayTextNumber:1,displayDay:true,displayHour:true,displayMinute:true,displaySecond:true,displayLabel:true});});Learn More About Divi 3.0

.section-header{width: 520px; padding: 50px 40px 20px; margin: 100px 0; text-align: center; color: #fff !important; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #6c2eb9; background-image: url(https://cdn.elegantthemes.com/blog/wp-content/uploads/2016/04/divi-100.jpg); background-repeat: no-repeat;}.section-header h2{margin-top: 0 !important; color: #fff;}.section-header strong{color:#fff;}.section-header img{margin-bottom: 10px;}.section-header:after{position: absolute; bottom: -16px; left: 50%; margin-left: -16px; width: 32px; height: 32px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); content:”; background: #6c2eb9;}.divi-demo-link{border-bottom: 4px solid #00d5b5; margin-top: 15px; border-radius: 4px; transition: all.5s ease-in-out; display: block; width: 100%; padding: 10px 0; text-transform: uppercase; font-weight: bold; text-align: center; color: #1C695D; background-color: #00efcb;}.divi-demo-link:hover{text-decoration: none; background-color: #2CFFDF;}.divi-download-link{text-align: center; font-size: 18px; border-radius: 4px; padding: 20px; color: #fff; display: block; margin: 10px 0 10px; background-color: #7e3bd0; transition: background .5s; text-decoration: none; font-weight: bold;}.divi-download-link:hover{background-color: #C04BDE;}hr{border-style: solid; margin: 0 0 40px 0; border: 1px solid #EAEBEB;}

The post 5 Stunning Examples of Divi’s Post Title Module & How to Achieve Them appeared first on Elegant Themes Blog.

View @ ElegantThemes

Skip to toolbar