[Resolved] Imprint: blog page like shop

Home Forums Support [Resolved] Imprint: blog page like shop

Home Forums Support Imprint: blog page like shop

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2289392
    Vincenzo Quarta

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

    #2289427
    David
    Staff
    Customer Support

    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.

    #2289526
    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

    #2289566
    David
    Staff
    Customer Support

    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

    #2290273
    Vincenzo Quarta

    Hi David,
    your code work well!
    Thanks.
    V

    #2290398
    David
    Staff
    Customer Support
    #2293275
    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

    #2293702
    David
    Staff
    Customer Support

    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;
        }
    }
    #2293716
    Vincenzo Quarta

    Works fine!
    Thank you David!!!

    #2293727
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.