[Support request] ‘Latest Post’ hero not appear in columns.

Home Forums Support [Support request] ‘Latest Post’ hero not appear in columns.

Home Forums Support ‘Latest Post’ hero not appear in columns.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2329659
    oakpea

    Hi,

    I would like to make my latest blog post appear above all the other posts on Blog Archive Page, but not be next to any other posts in the columns as it does when selecting ‘make the first post featured’ in customizing>Layout>Blog.

    I have columns set to 3 wide.
    The latest post would change each time a new post is published.

    So I believe I would build a block in Elements, but not sure how to make it change for each new post.
    I would like to make it look something like this site;
    https://christinagalbato.com/blog/

    I have tried watching some of the tutorial videos GP has, but not found anything specific to have the latest post details change each time I publish a new post.

    Thank you 🙂

    #2329759
    Ying
    Staff
    Customer Support

    but not be next to any other posts in the columns as it does when selecting ‘make the first post featured’ in customizing>Layout>Blog.

    I’m not sure what the means, if we are talking about the default blog page, this issue won’t happen.

    Are you trying to create a static page which shows the posts by sections like the linked site? If so, the customizer option would not work. You will need to use the query loop block:
    https://docs.generateblocks.com/article/query-loop-overview/

    #2329812
    oakpea

    Hi,

    Yes the blog page where all the featured images and blog titles are displayed.I think it is also called the Archives page.
    In Customise > Layout > Blog I have ticked ‘display posts in columns’ then selected ‘3’. So it automatically arranges my posts for me, so I haven’t actually created the page myself as such.

    In Customize When I select ‘make the first post featured’ it displays the first post with the next post directly to the right.
    Then on the next line there are another 3 posts and so on.

    The first post is not on its own – it just takes up twice the width. So the top row has 2 posts and then each subsequent row has 3.

    #2329829
    Ying
    Staff
    Customer Support

    So you want the top row to only have 1 post with the same style as the other posts or do you want the latest post to have its own style?

    Can you link me to the archive page?

    Let me know 🙂

    #2329838
    oakpea

    Hi,

    Yes that’s right the top row to only have 1 post, but a different style to the others. Like the ‘latest post’ on this blog;
    https://christinagalbato.com/blog/

    Then if you scroll down a bit on the page on that link there are rows of 3 posts, like I already have for all my other posts.

    My site isn’t live yet, I am using local host whilst I build it so unfortunately, I can’t give you a link to my site.

    Thank you for your help 🙂

    #2329906
    Ying
    Staff
    Customer Support

    Yes that’s right the top row to only have 1 post, but a different style to the others.

    You can build a block element - content template for the first post:
    https://docs.generatepress.com/article/block-element-content-template/

    Build another block element - content template for the rest of the posts.

    The idea will basically be the same as the Scribetemplate in our site library: https://gpsites.co/scribe/

    #2331704
    oakpea

    Thank you Ying that was really helpful 🙂

    I have taken a look at the links you recommended and have an understanding of how to create what I need by using Block Element > Content Template. I can build the two Element Blocks I need.

    Within the Content Template right-hand menu, I have chosen ‘First post’ under ‘APPLY TO’.
    The newly designed block now replaces the first post on the Blog page but is still on the same line, at the side of the 2nd post.
    How would I move the first post to be on its own line?

    Many thanks for all your help.

    #2331794
    Ying
    Staff
    Customer Support

    Can you try adding this CSS?

    .generate-columns-container .featured-column {
    	width: 100%;
    }

    If it doesn’t work, I’ll have to see your live site to adjust the CSS code.

    Let me know 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.