Full width featured image and post meta

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.

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

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.

The 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.