Testimonios CSS

Una petición muy común que tienen los clientes es la implementación de una página de testimonios, tener testimonios en la página de inicio o algo similar, si estamos trabajando con WordPress podríamos hacer uso de algún plugin de testominios, sin embargo, para efectos de velocidad y optimización de una página todos sabemos que es recomendable evitar al máximo el uso de plugins, por esto, me vi en la obligación de encontrar un método para poder tener testimonios sin plugins. Cabe resaltar que si no estás trabajando con WordPress te servirá igualmente.

[wp_ad_camp_1]

Este método para tener testimonios CSS usa los pseudo-elementos CSS :before y :after, también algunas propiedades simples de CSS3 para hacer lucir mejor a los testimonios.

Resultado Testimonios CSS

Esto no es un testimonio falso de esos que nos encontramos todos los días en Internet, esto es un testomonio falso con un agradable estilo CSS!

Alan Turing | Computer scientist

Como podemos apreciar, básicamente tenemos un blockquote con fondo de color B7EDFF, en la esquina superior izquierda e inferior derecha tenemos unas comillas y por último en la parte inferior del bloque tenemos el nombre del autor y un título de profesión o algo similar.

Cómo implementar los testimonios CSS

En esta sección voy a asumir que estás trabajando con WordPress, sin embargo si quieres tener testimonios con CSS usando otro CMS o una página que estés desarrollando desde cero lo puedes hacer sin ningún problema.

Básicamente tenemos que hacer dos cosas

1. Desde nuestro escritorio de administración vamos a Apariencia y editamos nuestra Hoja de estilo (style.css). Aunque también se puede incluir el CSS en cada elemento es recomendable hacerlo en la hoja de estilos que esté cargardo nuestro sitio. Incluimos el siguiente código CSS:

.autor-testimonio {
    margin: 0 0 0 25px;
    font-family: Arial, Helvetica, sans-serif;
    color: #999;
    text-align:left;
}
.autor-testimonio span {
    font-size: 12px;
    color: #666;
}
.fecha-abajo {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid #B7EDFF;
    margin: 0 0 0 25px;
}
.testimonio {
    margin: 0;
    background: #B7EDFF;
    padding: 10px 50px;
    position: relative;
    font-family: Georgia, serif;
    color: #666;
    border-radius: 5px;
    font-style: italic;
    text-shadow: 0 1px 0 #ECFBFF;
    background-image: linear-gradient(#CEF3FF, #B7EDFF);
    text-align: justify;
}

.testimonio:before, .testimonio:after {
    content: "\201C";
    position: absolute;
    font-size: 80px;
    line-height: 1;
    color: #999;
    font-style: normal;
}

.testimonio:before {
    top: 0;
    left: 10px;
}
.testimonio:after {
    content: "\201D";
    right: 10px;
    bottom: -0.5em;
}

2. Lo único que nos falta es agregar el código HTML en el lugar donde queremos mostrar nuestro testimonio.

<blockquote class="testimonio">Aquí debes poner lo que quieras que salga en el testimonio.</blockquote>
<div class="fecha-abajo"></div>
<p class="autor-testimonio">Nombre del Autor del Testimonio | Profesión o título del personaje anterior</p>

Una vez que realicemos estos dos pasos tendremos testimonios usando CSS como lo mostré al inicio de este artículo en Resultado Testimonios CSS, si deseas cambias el color de fondo deberás cambiar el atributo background en .testimonios, también podrás cambias bordes, tipo de letra, la alineación del texto, etc.

Si tienes sugerencias para hacer que los testimonios luzcan incluso mejor espero comentarios.