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]

Pie de logos 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.

Diseña un pie de logos en Divi

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.

Diseña un pie de logos en Divi 03

¿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.

Descuento Divi solo por 24 horas

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.

Diseña un pie de logos en Divi 04

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

Diseña un pie de logos en Divi 05

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

Diseña un pie de logos en Divi 06

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

Diseña un pie de logos en Divi 07

Y aquí añadí algo de CSS:

Diseña un pie de logos en Divi 08

En los módulos imagen añadi los logos

Diseña un pie de logos en Divi 09

Diseña un pie de logos en Divi 10

 

Diseña un pie de logos en Divi 11

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.

Diseña un pie de logos en Divi 12

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:

Diseña un pie de logos en Divi 13

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

Diseña un pie de logos en Divi 14

 

Cómo importar el pie de logos 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:

Diseña un pie de logos en Divi 15

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 el pie de logos personalizado con Divi y os sea de utilidad para vuestros proyectos.

 

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies