Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Post/grid layout and look

  • I was trying to see if I could replicate the post and grid layout in generate press, like the layout in the attached link. The individual posts have a raised look or shadow effect (box around each post) that makes each post stand out. Thank you!

  • Hi there,

    yes it is possible, as that site is built with GeneratePress and GenerateBlocks.

    Can i see your site and where it is you want to apply the shadow ?

  • Thanks David, below is a link I would attempt to place this effect on with a photo inside a box as pictured in the sample page.

  • Try this CSS:

    
    .generate-columns-container .inside-article {
        display: flex;
        flex-direction: column;
        padding: 30px;
        background-color: #fff;
        box-shadow: 3px 3px 12px 0 rgba(0,0,0,0.1);
    }
    .generate-columns-container .no-featured-image-padding  .post-image {
        margin-left: -30px;
        margin-right: -30px;
    }
    .post-image-above-header .generate-columns-container .inside-article div.post-image {
        margin-bottom: 0.75em;
    }
    .generate-columns-container .entry-summary {
        margin-top: 0.75em;
        margin-bottom: auto;
        font-size: 0.8rem;
    }
    .generate-columns-container .read-more-container {
        display: none;
    }
    
  • Hi David, that looks amazing,thanks a lot for your help.

    As a followup is there a way I can replicate this on other pages? For instance, I want to add it (the shadow effect on post/grid) to the page below as well and a few others, but is there a way I can make a simple change so I don’t have to bother you all?

  • Hmmm…. you could try this:

    
    .gb-post-grid-item {
        box-shadow: 3px 3px 12px 0 rgba(0,0,0,0.1);    
    }
    
    .gb-post-grid-item .gb-block-post-grid-text {
        padding: 0 30px 20px;
        
    }
    
  • Amazing! Thank you David!

  • You’re welcome

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.