How to Add Custom Templates and Design to Divi’s Blog Post Formats (Part 3 of 3)

Welcome to Day 3 of 3, the last day in our series on How to Add Custom Styles to Divi’s Blog Post Formats. By default Divi comes with six blog post formats: Standard, Video, Audio, Quote, Gallery, and Link. In this series we teach you how to customize them with php and css.

Today is the final day of our series on how to add custom templates and styles to Divi’s blog post formats. This last day of the series is dedicated to design. With our single.php customized and our child theme active, we are ready to add styling to the blog post formats.

I will walk you through all six post formats as we add some unique design touches to each one. By the end of this tutorial, you will have six great looking alternatives to the default blog post formats that Divi comes with.

You will also have a pretty unique blog page that displays the different post format featured elements. For example, the link format will display a custom link box in place of the featured image thumbnail. The gallery format post will display an image slider of your gallery images in place of the featured image thumbnail. And, so on.

Here is a glimpse of what your blog page would look like after today’s tutorial (I’m using the Divi Blog Module with a grid layout in the gif below).

Let’s get started.

Setting Up General Design Settings in Theme Customizer

First we need to make a few general style changes using the theme customizer. From your WordPress Dashboard, go to Divi → Theme Customizer → General Settings → Layout Settings and change the following:

Website Gutter Width: 2
Check Use Custom Sidebar Width
Sidebar Width: 30

Also under Theme Customizer, go to Color Schemes and select Orange.

Now let’s take a look at what your standard post looks like so far:

As you can tell, it still needs some styling but everything is in the right place. You have a hero section spanning the full width of the page. You don’t have a featured image yet so the background is only showing the gradient you added to your single.php file earlier. Also the post title and meta are inside the hero section. Now it is time to add the rest of the design elements.

Styling the Hero Section for all Post Formats

Since each of your post formats will share the same hero section and sidebar design, you can add this custom CSS first. Go to back to Theme Customizer, click Additional CSS at the bottom, and add the following custom CSS:

.hero-section {
	padding-top: 120px;
	padding-bottom: 120px;
	background-repeat: no-repeat;
	background-size: cover;
	position:relative;
	max-height: 450px;
	background-color: #333;
}

.single-post #main-content #left-area {padding-top: 0px;}

/* ---- Sidebar Settings ---- */
.single #sidebar {background: #efefef; padding-top: 20px; padding-right: 20px; padding-left: 20px; padding-bottom: 20px;}

/* ---- Standard Post Title & Post Meta ---- */
.single h1.entry-title,.attachment h1.entry-title, .single p.post-meta {
width: 100%;
text-align: center;
padding-left: 8px;
padding-right: 8px;
font-weight: 800;
text-transform: uppercase;
color: #fff;
}

 @media only screen and (min-width: 980px) {
/*** Set title font size for desktop ***/
.single h1.entry-title {
font-size: 65px !important;
}
 }

Now check out what a standard post looks like now.

With the hero section and sidebar styling in place, you are ready to style the individual post formats.

Styling the Standard Post Format

The standard post format is the default format for all of your blog posts. You can select the standard post format when editing your post.

All we are going to do for this standard format is add the featured image. Because this featured image will stretch the entire width of the screen, I suggest using an image that is 2000 x 600. I’m using images from unsplash.com.

After you add your featured image, check out what the standard post looks like.

Styling the Video Post Format

To style the Video Post Format, make sure you have the Video format selected for your post.

Next, add the url or embed of a video to your content. The video format will take the first video url, video tag, or embed and display it at the top of your post content. This video will also replace the featured image on your blog page.

For this example, I’m just using a youtube video url.

Add your 2000 x 600 featured image to the post.

Next, we are going to add additional styling to the featured video to give the video a white border and elevate it slightly so that it overlaps the hero section and stands out a bit.

Go to Theme Customizer → Additional CSS and add the following custom CSS:

/* ---- Format the Position of the Video Wrapper ---- */
 
@media only screen and (min-width: 980px) {
 /*** elevate the video to overlap the hero section ***/
.single-post.single-format-video .et_main_video_container {margin-top: -120px; background: #fff; outline: 10px solid #ffffff !important; z-index: 100; margin-bottom: -100px;}
}

Now check out your new Video Format post.

Alternatively, you could make this post fullwidth for another great design option. Simply go to edit your post and, in the Divi Post Settings on the top right of the page, select a fullwidth page layout.

Now check out the full width Video Format post:

Styling the Audio Post Format

For the Audio Post Format, make sure you have Audio Format selected for your post.

Add your 2000 x 600 featured image.

Next, add your audio file to your post. This can be a .mp3, .m4a, .ogg, or .wav file. You can upload your audio file to your media library and insert to your post in three different ways (embed media player, link to media file, or link to attachment page).

Any of these three options will work. But, for this example I’m just going to add a simple url to the audio file. WordPress will convert this audio url into a media player at the top of the post.

Now let’s take a look at the Audio Format post.

That’s not bad, but it could be better. Let’s hide the duplicate media player that shows beneath the orange media player and add a background image to our the orange media player.

Go to Theme Customizer → Additional CSS and add the following custom CSS:

/* ----- Add Background Image to the Audio Player & Change size of the player ----- */
body.single .et_audio_content, .blog .et_audio_content {
margin-bottom: 0px !important;
height: 300px !important;
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');
background-repeat: no-repeat;
background-size: cover;
 }

/* ---- Hide the Duplicate Audio Player  ------ */ 
div#mep_1 {display: none;}

Then find and upload an image to your media gallery (should be around 700 x 300). Then copy the url and paste in the CSS above where it says “ENTER IMAGE URL HERE”.

background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');

Now go check out your new Audio Format post.

Styling the Quote Post Format

For the Quote Post Format, make sure you have the Quote Format selected for your post.

Then add a 2000 x 600 featured image to the post.

The quote format utilizes the blockquote shortcode to generate a custom quote display. So, add a blockquote to your content for the custom quote to be displayed.

Now check out your post.

Let’s customize the featured quote box with a little CSS to give it a background image and large quotations on the top right.

Go to Theme Customizer → Additional CSS and add the following custom CSS:

/* ---- Add Background Image to the Quote Box ---- */
 
.et_quote_content {
 
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE')!important;
background-repeat: no-repeat;
background-size: cover;
 
}

/* ---- Add the Quotation Symbol to the Quote Box ---- */
 
.et_quote_content blockquote p::before {
font-family: Cardo;
position: absolute;
top: 16px;
left: 5%;
margin-left: -16px;
border-radius: 31px;
background: rgba(255, 255, 255, .0);
font-size: 70px; 
font-color: #fff;
content: "\201C" !important;
}

/* ---- Text Format Inside of quote ---- */
@media only screen and (min-width: 980px) {
.single-post.single-format-quote blockquote p {
font-size: 30px !important;
font-weight: 600 !important;
}
}

Find and upload an image to your media gallery (should be around 700 x 300). Then copy the url and paste in the CSS above where it says “ENTER IMAGE URL HERE”.

background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');

Now check out your final result:

Styling the Gallery Post Format

For the Gallery Post Format, make sure you have the Gallery Format selected for your post.

Next, make sure to add your 2000 x 600 featured image.

The Gallery Post Format allows you to create a gallery within your post content from the media gallery.

To create a gallery for your post, first upload at least 6 images into your media gallery. The size of the image can vary but since the gallery has a lightbox effect that blows up the images to full size, you can make the images about 1200 x 800.

Now select your images in the media gallery, select Create Gallery, and click the “Create a new gallery” button.

Now you should have a gallery shortcode in your content.

This gallery will be displayed on your post in a mosaic layout three columns wide. The gallery will also replace the featured image on your blog page with a slider of your gallery images.

Now go check out your post.

Let’s add some CSS to the gallery to elevate it a little to overlap the hero section and change the margins around each of the images.

Go to Theme Customizer → Additional CSS and add the following custom CSS:

/* ---- Position & Style the Gallery to Overlap the Featured Image ---- */
 
@media only screen and (min-width: 980px) {
 
.single-format-gallery .et_post_meta_wrapper { margin-top: -100px;}
 
.et_post_gallery {
z-index: 100;
position: relative;
border-top: 8px solid #fff !important;
border-left: 8px solid #fff !important; 
background: #fff !important;
}

/* ---- Set Background Color, Margins & Padding for the Gallery Image ---- */
 
.et_gallery_item { margin: 0 0 0 0 !important;}
 
.et_gallery_item {
width: 33.3%;
margin: 0 0% 0% 0 !important;
padding-right: 8px !important;
background: #fff !important;
padding-bottom: 8px !important;
}
}

Now check out the final result.

Styling the Link Post Format

For the Link Post Format, make sure you have the Link Format selected for your post.

Next, add your 2000 x 600 featured image to your post.

The Link Post Format take the first link in the post and displays it at the top of the content inside a box. This custom link display also replaces the featured image thumbnail for this post on your blog page.

Go ahead and add a link to your post and check out the post design.

Now let’s improve the design a bit by adding a background image to the custom link box, and an icon to the left of the link url.
Go to Theme Customizer → Additional CSS and add the following custom CSS:

/* ---- Add thick border to the left side and Lower the link box ---- */

.et_link_content {
border-bottom: 8px solid #ddd; 
background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(ENTER IMAGE URL HERE);
background-size: cover;
background-color:#edb059; 
border-radius: 25px; 
}

/* ---- Font Settings within the Link box ---- */

.et_link_content a.et_link_main_url { font-size: 21px; font-weight: 600; color: #fff !important;}

/* ---- Link Symbol on the right side ---- */
 
.et_link_content::before {
font-family: "ETmodules";
position: absolute;
top: 38%;
left: 5%;
margin-right: -26px;
border-radius: 31px;
background: rgba(255, 255, 255, .0);
font-size: 48px; 
color: #fff;
content: "\e02c";
}

/* ---- Position & Style the Gallery to Overlap the Featured Image ---- */

@media only screen and (min-width: 980px) {
 
.single-format-gallery .et_post_meta_wrapper { margin-top: -100px;}

Then find and upload an image to your media gallery (should be around 700 x 300). Then copy the url and paste it in the CSS snippet you just entered where it says “ENTER IMAGE URL HERE”.

background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');

Now Check out what the post looks like.

That’s it!

Now that we have all of our post formats designed, it’s time to check out the cool layout it creates on the blog page. You can see how all the different post format featured items are displayed.

Note: you can display your blog using the default editor or the Divi Builder and the design will still work.

Responsive?

All of the post formats are completely responsive a work well on all devices. Here is an example of what the Gallery Format post looks like when I shrink change the screen size:

Final Thoughts

Congrats! You are all done. I hope you enjoyed this 3 part series on customizing blog post formats. If anything, I hope you learned something valuable to take with you on your next project. Now that you have completed the tutorial, feel free to experiment with your own design elements for your blog post formats.

Please submit your comments below. I look forward to hearing from you.