Siempre estoy al tanto de todos sus mensajes, comentarios y referencias de ejercicios web que me comparten casi a diario. La verdad, esa ha sido una de las claves más importantes a lo largo de todos estos años para seguir creando contenido relevante y útil. Gracias a ustedes, también me nutro de muchísima inspiración e ideas. Este tutorial es justamente el resultado de una de esas interacciones.
Un miembro de la comunidad me preguntó si era posible diseñar cierto tipo de sección con Divi, y por supuesto, mi respuesta fue: “¡Lo intentaré!”. Hoy quiero mostrarte el resultado.
En este tutorial vas a aprender a crear una sección de tarjetas (cards) con efecto hover y un elegante modal interactivo en Divi Builder sin utilizar plugins. El ejemplo está enfocado en testimonios, pero puedes adaptarlo fácilmente a cualquier otro propósito o tipo de contenido.
La sección está construida con módulos Anuncio, cada uno compuesto por una imagen de perfil, una descripción, un título y un botón que abre un modal (popup). A cada tarjeta le hemos agregado efectos de animación, escalado, zoom, bordes personalizados y sombras para lograr un diseño dinámico y visualmente atractivo. Recuerda: estos pequeños detalles son los que realmente marcan la diferencia en una buena interfaz de usuario (UI).
Al hacer clic en una tarjeta, se despliega desde la parte inferior un modal que muestra el testimonio completo. Este modal está compuesto por una imagen de perfil, un separador y un texto, todo construido dentro de una fila de Divi. Gracias a esto, puedes personalizar su contenido libremente, insertando cualquier módulo nativo o de terceros sin ningún problema.
Como en todos mis tutoriales, te guiaré paso a paso hasta lograr este resultado increíble. Aunque el video dura 56 minutos, te aseguro que cada minuto vale la pena. A lo largo del proceso te iré compartiendo consejos prácticos que te servirán en tus futuros proyectos con WordPress y Divi.
Así que ya sabes: si quieres aprender a diseñar secciones elegantes, interactivas y sin necesidad de plugins, accede ahora a los Tutoriales Exclusivos y sigue llevando tus diseños con Divi al siguiente nivel.
¡Te espero dentro!
Saludos,
Oscar
0 comentarios