Landing page: testimonios

Este apartado es muy común en las landing pages como forma de implementar el boca a boca. Hoy día es muy habitual consultar las opiniones de otros consumidores cuando se asquiere un producto. Los sitios de venta onlline suelen incorporar una sección de opiniones donde los usuarios vierten su experiencia con el producto.

Así que siempre que sea posible es recomendable colocar este apartado. Se puede hacer con ima´gnes, solo texto, con datos del usuario. Todo va a depender de que el clietne de su permiso para poner estos detalles. Por supuesto se deben poner datos reales, cuanto más creíbles mejor.

Este módulo queda como puedes ver aquí

Códito HTML

Para este apartado mantengo el esquema de filas: una para cada testimonio. Cada fila va a tener una celda para una imagen y otra para el comentario, con unas imagen de comillas como detalle de diseño.

<article id="testimonios">
<header class="titarticulo"><h1>Lo que dicen nuestros alumnos</h1></header>

<section class="fila">
<div class="celdas"> <img src="imgs/testimonio1.jpg" width="300" height="300" alt=""/> </div>
<div class="quote"><i class="icon-comillas-abr"></i></div>
<div class="celdas"> Class aptent ... </div>
</section>

<section class="fila">
<div class="celdas"> <img src="imgs/testimonio2.jpg" width="300" height="300" alt=""/> </div>
<div class="quote"><i class="icon-comillas-abr"></i></div>
<div class="celdas"> Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. .... </div>
</section>

<section class="fila">
<div class="celdas"> <img src="imgs/testimonio3.jpg" width="300" height="300" alt=""/> </div>
<div class="quote"><i class="icon-comillas-abr"></i></div>
<div class="celdas"> Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. </div>
</section>
</article>

Como ves es un conjunto de tres bloques para cada comentario: fotografia, imagen de comillas, texto del comentario (lo he resumido para ocupar menos espacio).

Estilo CSS

La estructura visual la completamos con los estilos CSS que colocarán las celdas en fomra de filas, Tendremos una fila por comentario, pero desalineadas verticalmente, en tresbolillo: alternando la alineación derecha - izquierda. Esto se vuelve a hacer con flex-box.

#testimonios{
margin-bottom:80px;
}
#testimonios .fila .celdas {
flex: 0 1 30%;
text-align:center;
}
#testimonios .fila:nth-of-type(odd) {
justify-content:flex-end;
}
#testimonios .fila:nth-of-type(even) {
justify-content:flex-start;
}
.quote{
font-size:3rem;
text-align:center;
align-self:flex-start;
width:4rem;
height:4rem;
line-height:4rem;
position:relative;
top: -2rem;
background:#f5f8ff;
color:aquamarine;
border-radius:50%;
border: 1px solid lightgray;
border-width: 5px 0 0 0;
}

Como ves he estrechado las filas respecto al ancho total y el elemento decorativo de las comillas lo pongo en position:relative y lo subo por encima de su posición.

Para que sea responsive y se ve bien en pantallas pequeñas solo se necestia con vertir las fila en colmun (felx-direction:colum) y algun otro ajuste para que se vea centrado y ocupando un espacio proporcioanl de la pantalla con paddings laterales.

#testimonios .fila {
flex-direction:column;
}
.quote{ align-self:center;}
#testimonios .fila .celdas {
flex: 1 0 100%;
text-align:center;
padding:0 16px;
}