Diseña un pie de logos en Divi

En este tutorial de Divi os voy a enseñar cómo diseñé un pie de logos en Divi que tenía un efecto en CSS que cuando pasabas el ratón por encima mostraba el logo en color.

También te puede interesar:
Optimizar el SEO de las imágenes en WordPress con Divi y Gutenberg
Elementor. Otra plantilla WordPress para Diseño Web
Curso de Diseño Web con Divi
Divi Library ShortCodes [+Descarga]

Caso real

Este es el resultado de cómo me quedó para una web que diseñé el pie de logos al que me refiero. Por defecto los logos se visualizan en escala de grises, pero cuando pasas el ratón por encima el logo se muestra en color. De esta manera le damos un toque más profesional a la web.

Este tipo de elementos quedan muy bien en una web corporativa que venda productos de electrónica y sirve para mostrar a sus clientes las marcas con las que trabaja y confía para dar mayor seguridad a sus posibles compradores.

Resultado animado

Aquí os muestro el resultado de cómo quedaría. He grabado un gif para que podáis ver el resultado final.

¿Cómo puedo diseñarlo yo mismo?

Os voy a explicar paso a paso cómo diseñarlo para que podáis hacerlo vosotros mismos, aunque al final del post os dejaré el enlace para que podáis descargaros el fichero JSON y podáis importarlo en vuestra web si no tenéis ganas de hacer la configuración manualmente.

Primero, comentaros que el diseño lo he realizado sobre un diseño general basado en CAJA. Desde Apariencia > Personalizar os vais a Ajustes de Formato y activáis el diseño en caja. Si no lo habilitáis puede que el módulo nos os quede exactamente igual que a mí y puede que tengáis que hacer algunos ajustes.

El contenido dentro de una página sería el siguiente. Todos los módulos son de tipo imagen. Cada uno contiene un logo.

Esta es la configuración que hice para personalizar la fila. Principalmente hice que tuviera ancho completo,

Aquí ajusté los márgenes y los rellenos:

Y aquí añadí algo de CSS:

En los módulos imagen añadi los logos

 

Aquí creé una clase CSS donde añadí el efecto de escala de grises que os comentaba. He creado una clase que he llamado marcas.

El contenido de esa clase hay que añadirlo a la hoja style.css de vuestro Divi Child:

/* Página de inicio - Logos de las marcas al pie. Cuando se pasa el ratón por encima se muestra el logo en color. */
.marcas img {
filter: grayscale(100%);
}

.marcas img:hover {
filter: none;
}

Pero en los estilos del propio módulo imagen añadimos lo siguiente:

El resultado debería ser este en vuestro entorno de pruebas:

 

Cómo importar el JSON en Divi

Para los que no tengáis ganas de reproducir el ejemplo a mano, aquí os dejo el JSON que podréis importar con tan solo pulsar un botón.

Descomprimimos el zip para extraer el JSON y desde una página de wordpress, pulsamos el botón de importar. Ver siguiente imagen:

Una vez se haya actualizado la página, solo tenéis que añadir estos estilos CSS a la hoja style.css de vuestro Divi Child:

/* Página de inicio - Logos de las marcas al pie. Cuando se pasa el ratón por encima se muestra el logo en color. */
.marcas img {
filter: grayscale(100%);
}

.marcas img:hover {
filter: none;
}

Y eso es todo. Espero que os haga gustado y os sea de utilidad para vuestros proyectos.