Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • June 9, 2023 at 6:34 pm #1410090
    yayo85

    Hi!!, could someone please help me with this?
    How can I customize the way blog posts are displayed on the page to have the following structure:

    A featured image on the left, followed by the post title. Below the title, display the date, and below that, the excerpt. The next post should be displayed with the featured image on the right and the rest on the left. And so on…

    June 11, 2023 at 9:31 pm #1410281
    Mike

    Hey yayo85,
    Try adding a Blog Element to your page with the Blog Style: Single Author, big preview Pic (no author picture is displayed, feature image is big):
    Enfold_Support_2324.jpeg
    and add thw custom class row-posts:
    Enfold_Support_2326.jpeg
    Then add this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    #top .row-posts.template-blog article.single-big .blog-meta,
#top .row-posts.template-blog article.single-small .big-preview{
	width: 300px;
    height: 300px;
    line-height: 300px;
}
#top .row-posts.template-blog article.single-big {
	display: flex;
    align-items: center;
    flex-direction: row;
}
#top .row-posts.template-blog article.single-big:nth-child(even) {
	flex-direction: row-reverse;
}

    This is the expected results:
    Enfold_Support_2328.jpeg

    Best regards,
    Mike

    June 13, 2023 at 2:45 pm #1410461
    yayo85

    Thank you very much for the help. I don’t think I explained well what I’m trying to achieve. I’m looking for the following structure:

    Structure

    I really appreciate the help.

    • This reply was modified 1 year, 5 months ago by yayo85.
    June 13, 2023 at 6:13 pm #1410487
    Mike

    Hi,
    Thanks for the feedback, this is what my screenshot above shows, there is just more space between the image and text.
    I adjusted to this:
    Enfold_Support_2342.jpeg

    #top .row-posts.template-blog article.single-small .big-preview {
	width: 300px;
    height: 300px;
    line-height: 300px;
}
#top .row-posts.template-blog article.single-big .blog-meta {
display: none;
}
#top .row-posts.template-blog article.single-big {
	display: flex;
    align-items: center;
    flex-direction: row;
}
#top .row-posts.template-blog article.single-big:nth-child(even) {
	flex-direction: row-reverse;
}

    Best regards,
    Mike

    June 13, 2023 at 7:10 pm #1410497
    yayo85

    Thank you very much for the help, but I can’t make it work. Everything appears centered.
    Edit*:
    I was able to solve it thanks to your code. I had the Elegant blog style active, and that’s why it wasn’t working. I switched it to the default style, and now it displays exactly as I needed! THANK YOU VERY MUCH!

    • This reply was modified 1 year, 5 months ago by yayo85.
    June 14, 2023 at 12:38 am #1410520
    Mike

    Hi,
    Glad to hear that you have this sorted out, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘How customize blog posts?’ is closed to new replies.