+34 644 20 61 33 / +52 81 321 81 333 info@laraprado.com

Escrito por Lara Prado

Consultora y Formadora en Marketing Online. Directora en la agencia de marketing online Lanzadera Online.

10.01.2021

MÓDULO PORTAFOLIO FILTRABLE EN DIVI: INTRODUCCIÓN

Hola a todos,

Os traigo hoy una entrada express sobre cómo ebellecer el módulo de PORTAFOLIO FILTRABLE de Divi.

Y es que es muy útil para que tus proyectos se vayan incluyendo de forma automática con la posibilidad de filtrado…pero algo que a priori debería ser fácil con las opciones del módulo, como poner el título en hover (al pasar el ratón por encima) o eliminar totalmente el espacio entre imágenes (muy de moda), no lo es tanto y requiere hasta de un poquito de código.

Para los que estáis perdidos, estamos hablando de convertir esto:

portafolio filtrable divi como poner titulo sobre imagenes y como juntar imagenes eliminar espacio entre fotos 2

En esto:

PASO 1: ELIMINAR LOS ESPACIOS ENTRE IMÁGENES

Para eso, nos iremos a la configuración de la fila donde hemos incluido el módulo portafolio filtrable – DISEÑO – TAMAÑO – USO PERSONALIZADO DE CANALÓN ANCHO, lo activaremos y bajaremos el tamaño al mínimo (1).

Es un poco engañoso…porque uno a priori pensaría que el canalón ancho debería trabajarse a nivel de módulo…pero no!

Por eso los hay que se vuelven locos buscando la solución a esta parte.

portafolio filtrable divi como poner titulo sobre imagenes y como juntar imagenes eliminar espacio entre fotos css divi wordpress tema hijo child theme fila canalon ancho

PASO 2: AÑADIR EL EFECTO HOVER MEDIANTE CSS

Y añadiremos una clase CSS que conseguirá que al pasar el ratón por encima, el fondo se oscurezca y el título del proyecto aparezca por encima con un efecto muy visual y elegantón.

Para ello, añadiremos el seguiente scripts en el CSS PERSONALIZADO DE DIVI.

portafolio filtrable divi como poner titulo sobre imagenes y como juntar imagenes eliminar espacio entre fotos css divi wordpress

OJO! Porque si estás utilizando un tema hijo (que deberías seriamente), entonces el CSS lo incluiremos en el editor de temas, seleccionas tu tema hijo, te vas al style.css y lo colocas al final, antes del cierre de archivo CON EXTREMADO CUIDADO. Recuerda que estás editando archivos importantes, puedes corromperlos y que l web deje de funcionar.

portafolio filtrable divi como poner titulo sobre imagenes y como juntar imagenes eliminar espacio entre fotos css divi wordpress tema hijo child theme

Y..sorpresa! Aquí tenemos ya el título del proyecto sobre la imagen (overlay) al pasar el ratón sobre ella (hover).

portafolio filtrable divi como poner titulo sobre imagenes y como juntar imagenes eliminar espacio entre fotos

El script lo saqué de este hilo de foro después de mucho probar y mucho rebuscar, y en él profundizan en sus opciones y problemas, por si necesitáis más info!

Un besote a todos,

Lara.

Y hasta aquí esta entrada en nuestro blog de marketing online.

¿TE HA SIDO ÚTIL? ¿HA RESUELTO TU PROBLEMA? ¿TE AYUDARÁ EN TU PROYECTO ONLINE?

Si es así…TE RUEGO que por favor contribuyas a nuestra comunidad devolviendo el favor con algunas de las siguientes opciones:

 

Contrata nuestros servicios.

¿Te quedan cosas por hacer en tu proyecto online?

¿Podemos ayudarte en algo más?

Consulta nuestros servicios y precios súper asequibles.

Invítanos a un café.

Igual que a cualquier amigo 🙂

Clica en el icono del café de la esquina o aquí e invítanos a un café virtual con un par de cómodos clics 🙂

Comparte esta entrada.

Ayúdanos a compartir esta entrada en tus redes sociales 🙂

Suscríbete a nuestra newsletter.

Déjanos tu email para enviarte más contenido interesante y gratuito como este.

w

Déjanos un comentario.

Tus comentarios nos dan feedback, ayudan a la comunidad y afectan positivamente a nuestro SEO.

Visita más entradas del blog.

Sigue navegando por nuestra web en cualquiera de nuestras otras entradas del blog.

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada.