Site logo

Archived topic

I want the grids exactly in this way

61 replies · Started by Rohith on June 19, 2021

Viewing posts 16–30 of 62

Please check it now, I have did it

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.

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

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.

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

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;
    }
}

Added it but I couldn't see any changes

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

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

Just delete the first grid.

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

Can we finish this today please?

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.

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

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.

This archived topic is closed to new replies.