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.

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 1 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 Diseña un pie de logos en Divi

¿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 Aparencia > Personalizar os vais a Ajustes de Formato y activáis el diseño en caja. Si no lo habiltá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 Diseña un pie de logos en Divi

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 Diseña un pie de logos en Divi

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 Diseña un pie de logos en Divi

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

Diseña un pie de logos en Divi 07 Diseña un pie de logos en Divi

Y aquí añadí algo de CSS:

Diseña un pie de logos en Divi 08 Diseña un pie de logos en Divi

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

Diseña un pie de logos en Divi 10 Diseña un pie de logos en Divi

 

Diseña un pie de logos en Divi 11 Diseña un pie de logos en Divi

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 Diseña un pie de logos en Divi

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 Diseña un pie de logos en Divi

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

Diseña un pie de logos en Divi 14 Diseña un pie de logos en Divi

Compártelo:

Cómo importar el JSON

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 Diseña un pie de logos en Divi

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.

Añadir publicidad de Divi con el constructor antes de publicar

 

 

Si te ha parecido interesante este artículo y crees que Divi puede ayudarte con tu proyecto Web y estás pensando en comprarlo, te pido que lo hagas pinchando en la siguiente imagen. Estoy afiliado a ElegantThemes y me llevaría una pequeña comisión si llegas a comprarlo. De esta manera me ayudas a mantener el blog y a escribir más artículos como este. Si además, te haces suscriptor de ElegantThemes, podrás comprarlo con hasta un 20% de descuento en algunos casos. AfiliadosDivi Diseña un pie de logos en Divi Guardar Guardar Guardar
Advertisements

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

Veo que te gusta mi Blog...

Si te ha parecido interesante este artículo, no esperes a suscribirte a mi blog. Cuando vuelva a escribir otro seguro que te interesará y no desearás no haberte enterado. Puedes suscribirte con total tranquilidad de que no recibirás spam. Lo odio igual que tu. Solo quiero que aprendas cosas nuevas y te sientas agusto con mis artículos. ¡Gracias!

¡Gracias por suscribirte!

Pin It on Pinterest

Share This

Compártelo

¡Comparte este artículo con tus amigos!