Kadence - Setting up featured logo sections

A featured logo section is a great way to showcase any media coverage, collaborations, or brand partnerships on your website. Let's go over how to set this up on your site!

The featured logo sections in our themes typically apply a color overlay to the logos. In the example above from Vivienne, the logos have a black overlay. Depending on your theme, the overlay might be black, white, or gray!

1. Finding Logo Images

Many companies provide downloadable logos for media purposes, so you can check if the brands you want to feature have a press kit or media resources on their website. Otherwise, Google Images is your friend!

2. File Type & Size

It's important to download PNG files with transparent backgrounds to allow the overlay effect to work correctly. Avoid JPG files, which are flat images without transparency. You'll end up with a colored rectangle instead of a filled in logo!

We suggest resizing your logos to around 500px wide to ensure a clear, consistent display across all devices. You can use a design tool such as Canva or Photoshop to resize your logo images.

3. Insert Logos in the Block Editor

In the Block Editor, find the logo section you'd like to edit. Simply click on an existing logo and then hit Replace in the top toolbar. Upload or select your new logo PNG file.

If you need to modify the size of the image, you can do so under "Image Max Width" in the Image settings panel on the right.

And that's it! Your Featured Logos section is now set up to beautifully showcase your brand highlights.

Optional: Remove the Color Overlay

If you want your logos to display in their original color, select the Row Layout block that contains the logos. In the Row Layout settings panel on the right, click on the Advanced tab. Scroll down to the Custom CSS section, open the tab, and delete any code present there. This will remove the color overlay.