How To Change Appearance of Blog Posts on Home Page

  • Unknown's avatar
    phoebekristina · Member ·

    Hi There,

    Just wondering how I can change the appearance of my blog posts on the home page to be a different colour where the title is and to round the edges. Also wanting to change the colour of the text on hover.

    WP.com: Yes
    Jetpack: No
    Correct account: Yes

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    phoebekristina · Member ·

    I would like my blog posts on my home page and blog page to look similar to this.

    Thanks so much for your help in advance!

  • supernovia · Staff ·

    Hi @phoebekristina, I took a look at your example and have also opted to link rather than embed it, in light of our community standards. Thanks for understanding :)

    • I noticed in example, the post title is in black. You have something above that in blue. Is that a category? What part of the post would that come from, since it’s different from the title?
    • I don’t currently see blog articles on the front page.
    • Your blog page seems to be using a standard page template for some reason, and that page template has “latest posts” on it rather than a query loop.

    If you’re using Query Loop rather than Latest Posts, you’ll have quite a few more options for managing the look and feel, including things like border radius and font colors, plus you’ll have better options for loading more posts. And, you’ll have more options for formatting the title/excerpt/tags, which could give you a better shot at replicating the image you have in mind. Here’s a guide on the Query Loop:

    WP
    Blocks (The Full List) » Query Loop Block
    in WordPress.com Support
    9 min read
    Use the Query Loop block to display blog posts (or other content types such as pages, testimonials, or projects) anywhere on your site. This block is similar to the Blog Posts block, but with greater flexibility to display your content using many different parameters and visual layouts. This guide will show you how to use it. Add the Query Loop Block The Query Look block may already be add

    You can manage the index template here. Just remember you’re editing the style, not the individual posts here. Once you have the layout as you like, you can designate the Blog page for your posts here. If that isn’t working, let us know when you have the index set up the way you like it and we’ll have a deeper look. Thanks!

  • Unknown's avatar
    phoebekristina · Member ·

    Thanks for your help @supernovia! I have updated the blog posts to the layout I was after on the home page with the query loop.

    I am wondering how to fix the query loop on my BLOG page to be the same as the home page? I thought I did it the same but when I preview the website it shows up differently. I would also like to show ALL of the blog posts on the designated blog page.

    I am also having a few issues with the previous Blog page I made showing up on both the BLOG and Business Resources tabs in my website header.

    If you have any suggestions or advice I would greatly appreciate it. Thanks so much for your help in advance!

  • supernovia · Staff ·

    Hi @phoebekristina, you could use the List View, select the query loop from the home page, remove the query loop from the Blog page, then paste the one from the front page in place. Want to give that a go? That should give you an exact copy.

    WP
    WordPress Editor » Use List View
    in WordPress.com Support
    3 min read
    List View is an indispensable feature of the WordPress editor that makes it easy for you to work with the blocks on your site. This guide will show you how to make the most of List View. Video Tutorial Access List View To access List View, click the icon that looks like three horizontal lines above each other at the top left corner of the editor: Opening List View Select a B
  • The topic ‘How To Change Appearance of Blog Posts on Home Page’ is closed to new replies.