[Support request] Created Related post with featured image using GB Query Loop Block

Home Forums Support [Support request] Created Related post with featured image using GB Query Loop Block

Home Forums Support Created Related post with featured image using GB Query Loop Block

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2438679
    Henry

    I’ve created a list of post on the sidebar using GB Query Loop Block (Check link: https://scholarsly.com/letter-of-sponsorship-for-student-visa/). How do I achieve something similar to https://share.getcloudapp.com/P8uNpyro.

    And also another with numbering but without featured image.

    #2438893
    David
    Staff
    Customer Support

    Hi there,

    in the GB Patterns library there is a Free footer pattern containing that Query Loop layout – see here:

    https://generateblocks.com/library/?pattern-category=query-loop&pattern-type=free&pattern-preview=4011

    You could copy that.

    To add the Counter would require some CSS. Let me know once you have the design fixed on your site, and ill take a look at that.

    #2439509
    Henry

    I’ve just copied the design to my sidebar. Kindly check via the post list shared above.

    #2440111
    Fernando
    Customer Support

    Hi Henry,

    I see. For the counter, can you try adding this through Appearance > Customize > Additional CSS:

    .inside-right-sidebar {
        counter-reset: section;
    }
    
    .inside-right-sidebar .gb-query-loop-item {
        position: relative;
    }
    
    .inside-right-sidebar .gb-query-loop-item::before {
        counter-increment: section;
        display: block;
        content: counter(section);
        position: absolute;
        padding: 5px;
        top: 0;
        left: 0;
        color: #fff;
        z-index: 100;
        transform: translate(-35%, -40%);
    }
    
    .inside-right-sidebar .gb-query-loop-item::after {
        background-color: #5555ff;
        content: "";
        position: absolute;
        border-radius: 100%;
        height: 30px;
        width: 30px;
        transform: translate(-40%, -40%);
        border: solid 2px #fff;
        top: 0;
        left: 0;
        z-index: 99;
    }
    #2440690
    Henry

    Works perfectly..

    Thanks Fernando.

    #2443718
    Fernando
    Customer Support

    You’re welcome, Henry!

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