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:
Listado de testimonios con Custom Fields y Masonry
¡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 demoIntro - presentación del caso
Veamos 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.
Preparamos los Custom Fields
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.
Loop y estructura de HTML
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.
Estilos CSS
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.
Layout de "encaje" con Masonry
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.