[Resolved] Imprint: blog page like shop

[Vincenzo Quarta]

Hi there,
can I show posts in blog page like product in shop page?
Thanks.
V

[David]

Hi there,

yes, if you enable the Blog module in Appearance > GeneratePress
Then in Customizer > Layout > Blog you can disable the content you do not require. and Enable columns to 3.

If other changes are needed, set it up so we can see the site and i can assist.

[Vincenzo Quarta]

Hi David,
I set up the blog page as you said but I think it needs some CSS code for the blog page to look like the shop one;)
can you help me?
Thanks

[David]

Try adding this CSS:

.generate-columns .entry-title {
    transition: opacity 0.3s ease-in;
    opacity: 0.25;
}
.generate-columns:hover .entry-title {
    transition: opacity 0.3s ease-in;
    opacity: 1;
}
.generate-columns .post-image {
    margin-bottom: 0 !important;
}
@media (min-width: 1024px) {
    .generate-columns:nth-child(3n), .generate-columns:nth-child(3n+1) {
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
    }
}

And if you go to Customizer > Typography and set the Archive Content Title (H2) for your font size. If you want to match the product title then that would be 14px

[Vincenzo Quarta]

Hi David,
your code work well!
Thanks.
V

[David]

You’re welcome 🙂

[Vincenzo Quarta]

Hi there,
I added blog post in Home Page. I would to customize loop in Home Page like product or posts in Blog.
Thanks.
V

[David]

Try adding this CSS:

@media(min-width: 601px) {
    .wp-block-post-template.is-flex-container li:nth-child(3n),
    .wp-block-post-template.is-flex-container li:nth-child(3n+1) {
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
    }
    .wp-block-query .wp-block-post-title {
        transition: opacity 0.3s ease-in;
        opacity: 0.25;
    }
    .wp-block-query li:hover .wp-block-post-title {
        transition: opacity 0.3s ease-in;
        opacity: 1;
    }
}

[Vincenzo Quarta]

Works fine!
Thank you David!!!

[David]

Glad to hear that!

[Author]

Posts