Os traigo un caso bien vitaminado en el que conseguimos un listado de testimonios muy flexibles que permiten a mi cliente mostrar el texto del testimonio, un vídeo, audio o foto que acompaña el testimonio, el nombre de la persona, el avatar, insertar un enlace a sus redes sociales y destacar algunos testimonios. Y todo esto lo ponemos en un layout con ayuda de Masonry, una librería JS que nos permite "encajar" los elementos en un listado que tienen alturas diferentes. Este es el resultado:
¡Hey! 🖐 Parece que no tienes acceso a este contenido ☹ Puedes suscribirte al contenido completo o crear una cuenta gratuita para probar gratis una clase de cada guía 😊
Suscribirse Cuenta demoVeamos en qué situación estamos ahora, qué es lo que intentamos conseguir y cómo lo vamos a hacer
Sorry! No tienes acceso a este contenido 😢. Puedes iniciar la sesión o suscribirte al contenido completo.
Creamos un grupo de campos personalizados que vamos a utilizar en los testimonios
Sorry! No tienes acceso a este contenido 😢. Puedes iniciar la sesión o suscribirte al contenido completo.
Mostramos el listado de testimonios y definimos la estructura de HTML que van a tener. También insertamos los valores de los campos con PHP.
Sorry! No tienes acceso a este contenido 😢. Puedes iniciar la sesión o suscribirte al contenido completo.
Ahora toca ponerlo bonito. Aplicamos CSS para estilizar los testimonios.
Sorry! No tienes acceso a este contenido 😢. Puedes iniciar la sesión o suscribirte al contenido completo.
Finalmente, aplicamos la librería de JavaScript Masonry para conseguir que los elementos del loop mantengan la misma distancia vertical entre ellos, sin importar la altura que tengan.
Sorry! No tienes acceso a este contenido 😢. Puedes iniciar la sesión o suscribirte al contenido completo.