Blog Post Layout

Apart from many SEO benefits, blogging positions you as an expert in the eyes of your potential clients. It creates that initial connection and allows you to earn that initial trust. It is one of the best ways to grow a business online. So in this video, I’d like to focus on the technical and visual aspects of creating a blog in Divi. I’ll walk you through the process of creating a single post layout.

Please note that the main Maya Webdesign demo page shows the final version of the website. The exact layout created during this lesson can be viewed here.

Video Chapters

scripts.js

$('.single-post h2#reply-title span').text('Share some thoughts?');

style.css

/*
______________________
   
   Single Post
______________________

*/

/* Mini Blurbs in Post Meta */
.maya-mini-blurb .et_pb_blurb_content {
    display: flex;
}

.maya-mini-blurb .et_pb_main_blurb_image {
    width: auto;
    margin: 0;
}

.maya-mini-blurb .et_pb_blurb_container {
    padding-left: 10px;
}

/* Mising image fix */
#maya-post-header .et_pb_image .et_pb_image_wrap {
	display:block;
}

#maya-post-header .et_pb_image img {
	width:100%;
}

/* Post header on mobile */

@media (max-width:980px) {
	
	#maya-post-header .et_pb_column:first-child,
	#maya-post-header .et_pb_column:first-child .et_pb_image,
	#maya-post-header .et_pb_column:first-child .et_pb_image_wrap,
	#maya-post-header .et_pb_column:first-child img  {
	    height: 100%;
	    width: 100%;
	}
	
	#maya-post-header .et_pb_column:first-child img {
	    object-fit:cover;
	}
	
}

/* Comments Module */
.maya-comments .comment a {
    color: var(--gray6);
    font-weight: 500;
    font-size: inherit;
}

#page-container .maya-comments #comment-wrap .comment-reply-link {
    background: var(--gray10)!important;
    color: var(--gray7)!important;
    border-color: var(--gray8);
    line-height: 1!important;
    transform: scale(0.8);
}

.maya-comments #comment-wrap form p,
#page-container .maya-comments p.comment-form-cookies-consent label {
    font-size:18px;
    font-family: "Merriweather", serif!important;
}

@media (max-width:980px) {

    .maya-comments #comment-wrap form p,
    .maya-comments p.comment-form-cookies-consent label {
        font-size:16px;
    }
}

@media (max-width:767px) {

    .maya-comments #comment-wrap form p,
    .maya-comments p.comment-form-cookies-consent label {
        font-size:14px;
    }
}

#page-container .maya-comments .submit.et_pb_button {
    line-height:1!important;
}

@media (min-width:768px) {
    body:not(.logged-in) .maya-comments p.comment-form-comment {
        width: 50%;
        float: right;
    }
}
.maya-comments textarea#comment {
    max-height: 11.25em;
}
.maya-comments p.comment-form-cookies-consent {
    clear: both;
}
.maya-comments h1, .maya-comments h2, .maya-comments h3 {
    padding-bottom: 1em;
}


/* Mini Blog - Related Posts */
.maya-mini-blog .et_pb_ajax_pagination_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.maya-mini-blog article {
    width: 47.5%;
    justify-content: space-between;
    display: flex;
    flex-wrap: wrap;
    align-items:center;
}

.maya-mini-blog .entry-featured-image-url {
    width: 40%;
    margin-bottom:0;
}

.maya-mini-blog .entry-title {
    width: calc(60% - 30px);
    position: relative;
}

.maya-mini-blog .post-meta {
	flex-basis: 100%;
}

.maya-mini-blog .et_pb_ajax_pagination_container > div:last-child {
    width: 100%;
}

@media (max-width:980px) {
    .maya-mini-blog .entry-title {
        width: calc(60% - 20px);
    }
}


@media (max-width:800px) {
    .maya-mini-blog .entry-title {
        width: calc(70% - 20px);
    }
    .maya-mini-blog .entry-featured-image-url {
        width: 30%;
    }
}

@media (max-width:730px) {
    .maya-mini-blog .et_pb_ajax_pagination_container {
        display: block;
    }
    .maya-mini-blog article {
        width: 100%;
        margin-bottom:0!important;
    }
    .maya-mini-blog .entry-title {
        width: calc(80% - 30px);
    }
    .maya-mini-blog .entry-featured-image-url {
        width: 20%;
    }
}