Optimización de la configuración y el estilo del bloque de visualización de la marca WoodMart

Si desea mostrar el logotipo de la marca compartida o la marca de venta en su sitio web, no es necesario utilizar un plugin complicado, basta con utilizar el plugin WoodMart Traiga sus propias herramientas de maquetación, además de un poco de CSSEste artículo te lleva paso a paso a través del proceso de construcción de un módulo de visualización de marca desde la preparación del material hasta el embellecimiento CSS. Este artículo te lleva paso a paso desde la preparación del material, la construcción del diseño hasta el embellecimiento CSS para completar la construcción del módulo de visualización de marca.

Paso 1: Preparar el material del logotipo de la marca

Organizar las marcas que hay que exponer antes de empezar el diseño logotipo. Se recomienda operar de esta manera:

Abre tu herramienta de manipulación de imágenes (por ejemplo, Photoshop, Figma, Canva).
Ajuste todos los logotipos de la marca a una escala uniforme, por ejemplo, 200px de ancho, 100px de alto.
Guarde como PNG o SVG con fondo transparente para mejorar la coherencia visual.
Convenciones de denominación (por ejemplo marca-nike.png(matem.) géneromarca-adidas.png) para facilitar la gestión de las cargas.

Paso 2: Crear una estructura de visualización de marca en Elementor

WoodMart es compatible con Elementor Construir la página de inicioy plantillas personalizadas, he aquí cómo:

Inicie sesión en el backend de WordPress y vaya a Páginas > Editar Inicio.

Haga clic en Editar con Elementor.
En el editor, haga clic en "+" para crear un nuevo SecciónSelección Diseño a 6 columnas.

Haga clic en cada columna del + para añadir el widget "Imagen".

Haga clic en el botón Cargar y seleccione el logotipo de la marca correspondiente.
Si necesita una función de salto, haga clic en la imagen para añadir un enlace personalizado (por ejemplo, saltar a una página de productos de marca).

Si hay más de 6 logotipos, copie este bloque y continúe con la línea siguiente.

Sugerencia: Para mayor flexibilidad tipográfica, puede utilizar "bloques internos" para anidar imágenes y unificarlas con un nombre de clase (p. ej. .marca-logos) para una gestión fácil y uniforme de los estilos.

Paso 3: Añadir el nombre de la clase al bloque de marca

Seleccione toda el área de visualización de la marca en Elementor y haga lo siguiente:

Compruebe la sección más externa del bloque de visualización de la marca.
En la columna de configuración de la izquierda, haga clic en alto nivel > Clase CSS.

Nombre de la clase de entrada logotipos de marcas(Sin puntos).
Haga clic en Actualizar para guardar.

Esto establece un marcado CSS uniforme para todo el módulo de visualización para facilitar el control de estilo.

Paso 4: Añadir CSS personalizado en WordPress

A continuación, aplique el estilo al .marca-logos Bloque:

Vuelva al backend de WordPress.
entrar en Apariencia > Personalización > CSS adicional.
Pega el siguiente código:

.logo-marca {
  display: flex; flex-wrap: wrap;
  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; filter: grayscale(100%); }
  filtro: escala de grises(100%);
  filter: grayscale(100%; transition: filter 0.3s ease; }
}

.brand-logos img:hover {
  filtro: escala de grises(0%); }
}

Haga clic en "Publicar" para guardar los ajustes de estilo.
Actualice la página de inicio para ver si el efecto surte efecto.

Paso 5: Adaptar el efecto de visualización al móvil (opcional)

Para que el logotipo de la marca se vea mejor en los teléfonos móviles, se recomienda añadir una consulta de medios:

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

Añádelo como arriba, en la última línea del CSS adjunto.

Paso 6 (Avanzado): Mejora de la presentación (opcional)

Si quieres animar esta zona de marca, prueba las siguientes extensiones:

Añadir títuloAñadir un título encima de la zona de marca, por ejemplo "Marca compartida".
Utilizar la función de rotaciónImplementado con el propio "Product Branding Slider" de WoodMart o Elementor's CarouselEscaparate rodante.
Retraso en la carga de la imagen del logotipo: Instalar y habilitar Cohete WP tal vez Plugin de carga perezosareduciendo la presión de carga en la página de inicio.
Categoría SaltoPara cada logotipo, hay un enlace que lleva a la página de categoría de la marca.

resúmenes

gasto o desembolso WoodMart responder cantando CSSPuede crear un bloque de visualización de marca de estilo ligero y unificado, adecuado para una gran variedad de páginas de inicio de comercio electrónico, páginas de promoción de marca o páginas temáticas. Siempre que el material esté bien preparado, todo el proceso de construcción puede completarse en 20 minutos.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres