If you want to display the logo of a co-brand or sales brand on your website, you don't need to use a cumbersome plugin, just use the WoodMart Bring your own layout tools, plus a little CSSThis article takes you step by step through the process of building a branded display module from material preparation to CSS landscaping. This article takes you from material preparation, layout construction to CSS beautification step by step to complete the construction of the brand display module.

Step 1: Prepare the brand logo material

Before you start designing, organize the brands you need to display logo. It is recommended to operate in this way:

1. Open your image manipulation tool (e.g. Photoshop, Figma, Canva).
2. Adjust all brand logos to a uniform scale, e.g. 200px width, 100px height.
3. Save as a PNG or SVG with a transparent background for improved visual consistency.
4. Naming conventions (e.g. brand-nike.png(math.) genusbrand-adidas.png) for easy upload management.

Step 2: Build a Brand Display Structure in Elementor

WoodMart supports Elementor Building the home pageand customized templates, here's how:

• Log in to the WordPress backend and go to Pages > Edit Home.

• Click Edit with Elementor.
• In the editor, click "+" to create a new SectionSelection 6-column layoutThe

• Click on each column of the + button to add the "Image" widget.

• Click the Upload button and select the corresponding brand logo.
• If you need jump functionality, click on the image to add a custom link (e.g. jump to a branded product page).

• If there are more than 6 logos, copy this block and continue with the next line.

Tip: For typographic flexibility, you can use "internal blocks" to nest images and unify them with a class name (e.g. .brand-logos) for easy and uniform management of styles.

Step 3: Add class name to the branding block

Select the entire brand display area in Elementor as follows:

• Check the outermost Section of the Brand Display Block.
• In the left-hand settings column, click high level > CSS classThe

• Input class name brand-logos(Do not add the dot).
• Click Update to save.

This sets a uniform CSS identifier for the entire display module for easy style control.

Step 4: Add Custom CSS in WordPress

Next, apply the style to the .brand-logos Block:

1. Go back to the WordPress backend.
2. go into Appearance > Customization > Additional CSSThe
3. Paste the following code:

.brand-logos {
  display: flex;
  flex-wrap: wrap; justify-content: center;
  justify-content: center;
  gap: 20px; padding: 30px 0;
  padding: 30px 0;
}

.brand-logos img {
  max-width: 160px; max-height: 80px; }
  max-width: 160px; max-height: 80px; object-fit: contain; }
  object-fit: contain; filter: grayscale(100%); }
  filter: grayscale(100%);
  transition: filter 0.3s ease; }
}

.brand-logos img:hover {
  filter: grayscale(0%); }
}

4. Click "Publish" to save the style settings.
5. Refresh the front page to see if the effect takes effect.

Step 5: Adapt the display effect to mobile (optional)

To make the brand logo display more neatly on the phone, it is recommended to add a media query:

@media (max-width: 767px) {
  .brand-logos img {
    max-width: 45%.
  }
}

Add it in the same way as above, on the last line of the additional CSS.

Step 6 (advanced): Enhanced presentation (optional)

If you want to liven up this branding area, try the following extensions:

• Add Title: Add a title above the brand area, e.g. "Co-branding".
• Using the rotation function: Implemented with WoodMart's own "Product Branding Slider" or Elementor's CarouselRolling ShowcaseThe
• Delayed Loading Logo Image: Install and enable WP Rocket maybe Lazy Load Plugin, reducing the load pressure on the front page.
• Category Jump: For each logo, set up a jump link that will take you to the brand's category page when you click on it.

summarize

expense or outlay WoodMart respond in singing CSSYou can create a lightweight, unified style of brand display block, suitable for a variety of e-commerce home page, brand promotion page or thematic page. As long as the material is well prepared, the whole building process can be completed in 20 minutes.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨詢：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off