[Support request] Possible to design a product “badge” like this?

[William]

Hello –

First off thanks so much to generatepress for always being so amazing with support.

I’m using generate blocks to create Product Boxes to better highlight various products I discuss.

Is there a way to build a “badge” to call out specifics such as “Top Pick” etc. similar to this image?

View post on imgur.com

Thank you.

[David]

Hi there,

select your Container Block and in advanced > additional CSS Class(es) add: relative-parent
Then inside you container block, add a headline block, set it to Inline, and add your padding and colors, and give that a CSS Class of gb-badge

Then add this CSS:

.relative-parent {
  position: relative;
}
.gb-badge {
  position: absolute;
  top: -10px;
  left: -10px;
  z-index: 1;
}

We’re trying to keep our forums tidy – if you need any further assistance that is directly to GenerateBlocks – would you mind raising topics in the GB forum.

[William]

David thank you so much for the lightning fast response.

I have done what you stated here. I may be doing something incorrectly. https://imgur.com/a/a0zBMP0

This is what I’m seeing. https://imgur.com/a/J00aYqM

Also, moving forward I’ll be sure to use the correct forum when raising a GB topic.

Thank you,

[David]

Not the inline code option, the Headline block has an Inline width option ( sorry could have been clearer ):

https://docs.generateblocks.com/article/headline-overview/#spacing

[William]

Thank you, David. I have changed that and made the headline “inline width”

Here is what the image looks like on the frontend and backend: https://imgur.com/a/SAG6LmO

Is there a way to perhaps get the badge more in the upper left-hand corner similar to this? https://imgur.com/a/nMm9iWI#80Bm0Ei

[David]

Can you share a link to the a page where i can see the badge?

[William]

https://dmnds.net/watches/mvmt-watches-men/

Product #1 “1. MVMT Classic Black Leather”

[David]

Ooops – some bad characters in my original CSS.
I have updated it here:

https://generatepress.com/forums/topic/possible-to-design-a-product-badge-like-this/#post-1641929

If you set top and left properties both to 0 – it will align it with the container corner. Positive values move it inside the container, negative values move it outside.

[Author]

Posts