Full width featured image and post meta

I recently had a request to add the featured image, title and meta of a post before the rest of the content (left area and sidebar). As you can see in the image below it actually looks quite cool.

You can do this type of layout with the page builder on posts but that limits you to new posts. It’s one of the reasons we made the default page builder layout for blogs plugin, but for this setup, a plugin might be overkill. So we’re going to use a little bit of jQuery and CSS.

The jQuery

You can add this script to Divi > Theme Options > Integrations > Head.

jQuery( document ).ready(function($) {
 $(".single-post .et_post_meta_wrapper").first().prependTo(".single-post #main-content");

This script searches for the first instance of the .et_post_meta_wrapper which is used to house the post title, featured image and meta data. When it finds it, it moves it underneath the opening tag of the #main-content div. This pulls it above the left area and sidebar which allows us to make it full width and position it a little better with CSS.


You can add this script to ‘Divi > Theme Options > Custom CSS’ OR to your child theme stylesheet.

.single-post .et_post_meta_wrapper:first-child {
 position: relative;
 height: calc(100vh - 180px);
 background: #303030;

.single-post .et_post_meta_wrapper:first-child img {
 position: absolute;
 top: 0;
 height: 100%;
 left: 0;
 width: 100%;
 object-fit: cover;
 object-position: top;
 z-index: 1;

.single-post .entry-title {
 top: calc(50vh - 180px);
 left: 0;
 width: 100%;
 position: absolute;
 text-align: center;
 z-index: 10;
 color: #fff;

.single-post p.post-meta {
 position: absolute;
 width: 100%;
 z-index: 10;
 top: calc(50vh - 80px);
 text-align: center;
 color: #fff;

.single-post p.post-meta a {
 color: #fff;
 font-weight: 700;

This CSS makes the featured image full width and a portion of the viewport size which encourages users to scroll to the post content. It also places the title and the meta data into the center of the featured image, though the values could be adjusted to place it wherever you like. By default the image will cover the text so we’ve adjusted the z-indexing a bit. We’ve set the fall back colour of the new section to #303030 but you could replace this with a default background image if you wanted to.

And that’s all you need  to create a beautiful blog layout. I hope you’ve enjoyed reading this post and look forward to seeing what you do with it 🙂

Stephen James

SJ is a web developer living in the coastal town of Southsea, England. He is a Divi and WordPress advocate and the founder of Divi Space.

Previous post
Next post


  1. Richard

    Just found this – it’s exactly what I needed and worked perfectly on my site. Thanks!

    • David

      You’re welcome Richard!

  2. Mark

    Amazing! Exactly what i needed.
    Thank you for this.
    Is there a way to add some gentle overlay to the featured image too?
    I tried but didn’t succeed.

  3. Luke

    Great, Thanks! is there anyway to add an overlay to the header image?? I have text titles on it that are white and not visible… Ideally a dark overlay would be great?

  4. Paul

    To add a dark overlay, here is the code I came up with.

    .single-post div.et_post_meta_wrapper:first-child:after {
    content: ‘\A’;
    width: 100%;
    height: calc(100vh – 180px);

    • Kat

      This code isn’t working.

  5. Patrick

    Hi, I’m looking to do something similar, but with the blog module. I’d like to have the Title and Meta information be overlay on the featured image instead of below it. Any ideas?

  6. DAn

    Curious, but for SEO purposes, wouldn’t removing the from inside the cause confusion with crawling the article?

  7. Teix Web

    HI, I’ve made somethign similar, but the js delays too much in loading and the effect does not look very nice, How can I make the js to load before?

    My web is http://teixweb.com

    Thanks in advance

  8. Vijay

    Hi Guys,

    I got this working. But looks the image is spreading too much with hight. Can we cut some height of the image.


Submit a Comment

Your email address will not be published. Required fields are marked *

Receive notifications about our new blog posts.