"Top Pick" Ribbon / Tag on a Container

What is the best way to create such a blue “Top Pick” ribbon on container/grid with GB?

Hi @Dek,

The Structure should be something like

Container
–Container(Top Pick)
–Container

Then, you can use margins or custom CSS to move it to the right position.

1 Like

Hi @fernandoazarcon2,

Here is where I am with this:

I tried respecting the structure you mentionned.

1 - As you can see, the container selected on the screenshot is for (Top Pick). I don’t understand how to reduce its width to only the width of the text (“Meilleur cadeau” = “top pick”)?

2 - Also, why is the Container containing the Custom HTML displayed all to the right instead of being centered?

  1. Can you provide the link where we can see this?
  2. It’s because of the left padding value on the Container Block, it’s pushing the Block to the left on the editor page.
  1. Sure, my pleasure. Link to the page.

  2. So is this normal or am I doing it wrong?
    I mean, I added 300 for left and right paddings in order to draw the green box. Is there a better while trying to reproduce a similar rectangle size as with the blue rectangle shared on my first message above.

  1. Try adding a GB Headline Block inside the Container where “Meilleur cadeau” text is set, and add the Background color to this Headline Block instead.
  2. To clarify, do you want the Borders smaller?
  1. No worries. I find a way.

  2. This is what I now have, after playing quite a bit with the structure of the blocks and headings:

How to make sure the green rectangle of “Meilleur cadeau” is fully displayed as the “top layer”? As you can see, the white background if the Custom HTML image is eating the bottom of the green rectangle?

You can try adding this through Appearance > Customize > Additional CSS:

.gb-container.gb-container-cfbf70ae {
    position:relative;
    z-index: -1;
}

This pushes the second container to the back.

If you want to reuse this code, just create a custom class, and add it to the class list of the Container.

For instance, add push-to-back class to the class list of the 2nd Container Block relative to the Parent container, then the CSS would be:

.gb-container.push-to-back {
    position:relative;
    z-index: -1;
}

Hello,

Thank you.
Something does not work.

Here is for the block:

Here is for the CSS:

image

I tried adding the same class to the first Container relative to the Grid too, but it does not work either.

How are you adding the CSS? I can’t see it added: 10 idées de cadeaux pour pr...

I completely confused.

Since my latest message above, I have changed anything.
I reconnected today to my site after reading your message here.

It now works:

But the is no way I can now edit the content on the Edit mode. It seems to have become invisible. Is it due to the CSS we added?

Might be a caching issue.

Can you try using a different browser?