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.

Pie de imágenes (Caso real)

Este es el resultado de cómo me quedó el pie de imágenes hecho con Divi para una web donde implementé este diseño. Aquí podéis verlo. 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, ya que las imágenes del pie mantienen un tono gris similar al footer y hace que no desentone. Solo cuando el usuario se interese por una de las imágenes será cuando se ponga en color gracias al efecto CSS que añadiremos.

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 del footer de imágenes (Resultado animado)

Aquí os muestro el resultado de cómo quedaría el footer de imágenes. 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 tu footer de logos

Si te ha gustado, comparte este post con la comunidad Divi para que entre todos nos ayudemos con este tipo de tutoriales y aportemos cada uno nuestras ideas.

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.

 

 

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

Dime qué te ha parecido el artículo...

rating on Diseña un pie de logos en Divirating on Diseña un pie de logos en Divirating on Diseña un pie de logos en Divirating on Diseña un pie de logos en Divirating on Diseña un pie de logos en Divi (1 votos, promedio: 5,00 de 5)
loading Diseña un pie de logos en DiviCargando…
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. Solo quiero que aprendas cosas nuevas y te sientas agusto con mis artículos. ¡Gracias!

¡Gracias por suscribirte!

Pin It on Pinterest

Share This