I created this page to demonstrate the use of the opacity-10, opacity-20 … to opacity-100 modifier on various logo ribbon blocks, both color and grayscale logo ribbon. We will use opacity for the grayscale block to soften the intensity of black on the entire block, and then on individual logos as well – not every logo is equally black when converted from color to grayscale.

The idea is that the user can add a new logo on their own without needing to ask for help from a designer or programmer.

Preview Logo Ribbon

This block contains only empty placeholder images.

Color Logo Ribbon

In this block, I used color images of different sizes directly from the internet and did not upload them to the Media Library. These logos have a transparent background, and that is the most flexible option, but it’s not mandatory.

Converted to just Logo Ribbon

We just changed the CSS classes from "ribbon-logos-color" to "ribbon-logos" and everything automatically turned gray. However, it’s somehow too intense, so we would like to tone it down a bit in the next step.

Less Intense Gray

To reduce the strength of the logos, simply add the "opacity-60" modifier to the entire block, and all logos will be 60% transparent. However, Barilla and P&G still somehow appear subjectively “stronger”. We’ll address that in the next step.

Perfect Final Gray

And finally, in this step we will “weaken” the intensity of only three logos – Amazon, Barilla and P&G. We will simply add "opacity-80" or "opacity-70" to only those elements for those three logos, and they will be at 70-80% of their full intensity. Of course, all of this is subjective, but it looks much better now than when we started with the gray color.

Bad Example from Live Site

The example of a block where it was incorrectly implemented, because the designer manually adjusted the lighting in Figma and then exported the images, even though it is much easier to do within WP. In addition, this way, if someone wants a slightly darker or lighter block in the future, all the images need to be modified again in Figma… etc. Just finding images in Figma is not an easy task at all, if they are there at all.