Archived topic
How to create content box like this
5 replies · Started by Trạng on January 28, 2022
Hi there, I want to create an affiliate product box like this screenshot
I think the container & content inside is easily created by container blocks, but how about the pink label at the in the upper left corner?
Is there anyway allow me to done it with GP premium & GB?
Hi there,
it would require some CSS.
To begin:
1. Add a Container Block and give it an Additional CSS Class of: has-ribbon
2. Add your content to the Container including a Headline Block for the ribbon.
2.1 Set the Headline > Spacing to Inline Width and give it some padding and colors.
2.2 Give your headline block a class of is-ribbon
3. Add this CSS to position the ribbon over the corner of the container.
.gb-container.has-ribbon {
position: relative;
}
.gb-headline.is-ribbon {
position: absolute;
top: -10px;
left: -10px;
}Hi There David,
I would like to add this ribbon to some of my containers, but I'm an absolute noob concerning CSS for now. Can you tell me what should I add or remove from this code to add it to custom CSS?
I did all of the steps above.
Hi there,
can you raise a new topic, where you will have access to the Private Information field, if you can share a link to your site, and let us know where you want to add that ribbon, and we'll see what we can do.
Hi Dave, No need for it, I couldn't find the way to delete the thread. I solved the problem myself, just some tweaking was needed to the code with padding and margin considering the changes beforehand. Sorry to bother you.
So glad to hear you got it working :)
