Site logo

[Support request] I want the grids exactly in this way

Home Forums Support [Support request] I want the grids exactly in this way

Home Forums Support I want the grids exactly in this way

Viewing 15 posts - 16 through 30 (of 62 total)
  • Author
    Posts
  • #1829097
    Rohith

    Please check it now, I have did it

    #1829367
    David
    Staff
    Customer Support

    The shortcodes that you have in Columns 1 and 3 – edit them and go to the Columns Tab – and set that to 1 This will stack the posts.

    Now on the More Settings tab there is a field titled Offset.
    By adding a value in here you can skip a number of posts, for example if you set your column 1 shortcode to 1 it will skip the first post and display posts 2 and 3.

    #1829492
    Rohith

    I have made the changes as you said. Please check!
    What to do next?

    #1829496
    David
    Staff
    Customer Support

    1. For your 3rd column shortcode you need to edit the WPSP list and change its Offset value to 3 – so it skips the first 3 posts.
    2. Now edit the Block Element and change the % widths of each of your columns column 1: 25%, column 2: 50%, column 3: 25% – or whatever values you require to make the middle column wider. They must total 100% to remain on the same line.
    3. Before publishing – select the parent Container Block ( the one with the grid inside it ) and in sidebar Advanced > Additional CSS Class(es) add hero-grid

    Once thats done i can provide some CSS to resize the titles etc.

    #1829498
    Rohith

    Hey please check, I have done! Can we proceed?

    #1829529
    David
    Staff
    Customer Support

    Now add this CSS:

    @media(min-width: 769px) {
        /* reduce title font size of columns 1 and 3 */
        .hero-grid>.gb-inside-container>.gb-grid-wrapper>.gb-grid-column:not(:nth-child(2)) .wp-show-posts-entry-title {
            font-size: 16px;
        }
        /* reduce vertical space between posts in columns 1 and 3 */
        .hero-grid>.gb-inside-container>.gb-grid-wrapper>.gb-grid-column:not(:nth-child(2)) .wp-show-posts-single {
            padding-bottom: 0;
            margin-bottom: 0.75em;
        }
    }
    #1829531
    Rohith

    Added it but I couldn’t see any changes

    #1829536
    David
    Staff
    Customer Support

    I can see the changes in the second grid – try clearing your browser caches… i don’t know why you have added two grids ?!?

    #1829539
    Rohith

    I can also see in Second Grid, Thanks for do it up to here. How to remove the first grid? What to do next?

    #1829545
    David
    Staff
    Customer Support

    Just delete the first grid.

    #1829553
    Rohith

    Hey thanks, I have removed it. Can we please go ahead and finish the process?

    #1829874
    Rohith

    Can we finish this today please?

    #1829885
    David
    Staff
    Customer Support

    The only differences i see between your site and the example is the Category terms and the Excerpt on the middle post.
    Which can be enabled in the individual WPSP posts lists.

    Edit each of the WPSP lists and go to the Meta Tab and select: Include terms and set there location to below post.

    Then for your middle column post list – go to the Content Tab and enable the Excerpt.

    #1829908
    Rohith

    Hey, I will take care of that once everything gets done. Can you please tell me how to make the posts as Magazine grids?

    #1829941
    David
    Staff
    Customer Support

    You have a separate topic open for that question – so if we can resolve this topic, one of the team can assist with your other requests.

Viewing 15 posts - 16 through 30 (of 62 total)
  • You must be logged in to reply to this topic.