Insertar citas (quotes) en nuestros textos con Divi y 6 diseños distintos.

Tutorial Divi. Quotes

Tradicionalmente las citas han sido un recurso utilizado por escritores, redactores o periodistas para romper la monotonía que producen largos textos y captar la atención del lector con textos cortos y destacados con estilo. Además, una cita bien diseñada, añade valor a nuestros textos, aportando un aspecto limpio y profesional a nuestros contenidos.

En los posts, las citas (quotes) se suelen usar de alguna de las siguientes maneras:

• para referenciar determinados contenidos de un autor con los que reforzar o complementar nuestras explicaciones.
• Para destacar algún concepto que ya hemos comentado en el artículo y que queremos enfatizar.

Así que podemos destacar contenidos de fuentes propias o externas. Sea cual sea la fórmula con la usemos las citas, el caso es que pueden potenciar nuestros contenidos y hoy veremos 6 formas de presentarlas con un poco de código CSS.

Cómo insertar citas (quotes) en nuestros contenidos con Divi

Vamos a crear las citas a partir de código CSS que te proporcionamos y que también comentamos para que puedas personalizarlas a tu gusto. De todas formas, te mostraremos el aspecto de cada uno de los 5 estilos propuestos e iremos explicando algunas peculiaridades.

Y ahora, te facilitamos el código que debes copiar y pegar en algún lugar de los tres posibles.

/*CITAS css*/
 
/*Ponemos los estilos en general.*/
blockquote.et-pullquote p {
font-size: 22px;
line-height: 35px;
font-style: italic;
letter-spacing: 1px;
color: #666;
font-weight: 300;
}
 
/*Estilos para comillas-abierta*/
 
blockquote.et-pullquote.left.quote, blockquote.et-pullquote.right.quote{
position: relative;
border-left: none;
}
 
blockquote.et-pullquote.left.quote:before {
 content: "\201C"; 
/*Comprueba que la barra invertida tras content no desaparece*/
 font-size: 75px;
 position: absolute;
 top: 10px;
 left: -16px;
 font-family: times;
/*Cambiamos la fuente para el signo ortogáfico solo*/
 color: #888;
/*este es el color del signo de comilla*/
}
 
blockquote.et-pullquote.right.quote:before {
 content: "\201C";
 font-size: 75px;
 position: absolute;
 top: 10px;
 left: -16px;
 font-family: lato;
 color: #5d83ae;
/*color azul solo para las comillas*/
}
 
/*con barra arriba*/
blockquote.et-pullquote.left.topborder, blockquote.et-pullquote.right.topborder{
border-left: none;
border-top-width: 5px;
border-top-style: solid;
padding: 5px;
}
 
/*Texto blanco, con fondo oscuro, aqui verde*/
blockquote.et-pullquote.left.dark, blockquote.et-pullquote.right.dark{
border-left: none;
padding: 10px;
background: #008960;
}
 
blockquote.et-pullquote.left.dark p, blockquote.et-pullquote.right.dark p {
color: #fff;
}
 
@media all and (min-width: 700px) {
 
blockquote.et-pullquote{
padding: 0 20px;
max-width: 300px;
/*Quita la linea anterior para coincidir con la anchura del texto*/
}
 
/*Cita normal a la izquierda*/
blockquote.et-pullquote.left{
 float: left;
 margin: 20px 20px 20px -10%;
}
/*Cita normal a la derecha*/
blockquote.et-pullquote.right{
 float: right;
 margin: 20px -10% 20px 20px;
}
}

 Dónde pongo el código

Ahora te explicamos donde debes poner el código CSS. Tienes tres opciones:

 1. En la página

Haz click en los ajustes de página, como ves en la imagen y, en la pestaña CSS, pégalo ahí. De esta forma el código sólo lo podemos usar en esta página.

2. En opciones del tema Divi

Navegando desde tu escritorio de WordPress, accede al menú lateral hasta Divi > Opciones del tema >  CSS personalizado . Pégalo donde se te indica con la flecha grande en la imagen inferior. Recordarte que podrías perder la configuración en alguna actualización del tema. Puedes usar las clases creadas con el CSS en cualquier página o entrada.

Opción 3. En la hoja de estilos de tu tema hijo (recomendable)

Si estás usando un tema hijo, accede a tu hoja de estilo del tema hijo desde Apariencia > Editor. Puedes verlo en la imagen de abajo. Afectará el código a todas las galerías de tu sitio, igual que la opción anterior, pero no hay riesgo de perder configuraciones ante futuras actualizaciones del tema.

Elije una de las opciones propuestas y Guarda los cambios.

Configuración de nuestra página o entrada

Una vez tenemos ya nuestro código CSS insertado, creamos nuestra página o entrada, activamos el constructor Divi y añadimos una columna y a continuación un módulo de texto. Para que la visualización sea correcta es conveniente no usar la opción de anchura completa para la fila.

Para esta práctica inserta algunos párrafos de texto. Puedes usar texto simulado de alguna página como esta. Si ya tienes un contenido listo para usar, perfecto.

Ahora pon el editor de texto del módulo en modo html (A).

Resalta el bloque de texto que quieras utilizar para la cita y haz clic en el botón de shortcode B-QUOTE (B) para etiquetar el texto seleccionado como quote (C).

En la imagen puedes ver el proceso y cómo quedará el bloque de texto entre las etiquetas quote.

Ahora solo tienes que añadir una de las 6 clases creadas en el CSS anterior y que son las siguientes:

1. Cita posicionada a la izquierda con banda vertical.

Ya sabes, selecciona el texto al que vas a aplicarle el CSS y etiquétalo como quote (en el editor de texto, modo html, como has visto arriba).

Añade la clase «et-pullquote left»  justo después de la etiqueta <blockquote>. Debe quedar así:

<blockquote class="et-pullquote left">Esta cita se posiciona a la izquierda del párrafo. "¿Te mola?</blockquote>

Esta cita se posiciona a la izquierda del párrafo. ¿Te mola?

Para esta primera personalización de la cita, debes de añadir la clase et-pullquote left a la etiqueta del texto que va a tener el estilo. Como ves en este ejemplo (real, no es una captura de imagen), esta cita se alinea a la izquierda, con banda vertical del color de énfasis del tema. Según el estilo que quieras introducir deberás elegir una u otra clase de las cinco que te proporcionamos. Recuerda que puedes modificar el CSS según te convenga. Por ejemplo para todos las citas, puedes cambiar tamaño de texto, que ahora está en 22 px, negrita, fuente, etc.

2. Cita posicionada a la derecha con banda vertical

Añade la clase «et-pullquote right»  justo después de la etiqueta <blockquote> para que la cita se alinee a la derecha en lugar de a la izquierda.

Esta cita se posiciona a la derecha del párrafo.

Como ya hemos comentado, la cita hay que colocarla precedida del párrafo donde queremos insertarla que en este caso es éste parrafo. Ten en cuenta que el color que toma la banda vertical es azul porque ese es el color de énfasis que yo he escogido para el tema.

Si quieres cambiar ese color, puedes hacerlo desde los ajustes del tema. Divi > Personalizador de Temas > Ajustes de formato > Color de énfasis del tema.

3. Cita izquierda con apertura de comillas

Para este estilo debes insertar la clase «et-pullquote left quote»  después de la etiqueta <blockquote> para que la cita que se aplique sea como la que ves abajo.

Cita con comilla a la izquierda fuente Times

Fíjate que para este estilo hemos modificado la fuente del signo de comillas de apertura a Times New Roman. Si echas un ojo al código CSS lo verás. Para ello simplemente hemos añadido font-family: times; Prueba distintas opciones.

4. Cita derecha con apertura de comillas

La clase para invertir la posición del anterior «et-pullquote right quote»  tras la etiqueta <blockquote> para que la cita que se aplique sea como la que ves abajo.

Cita con comilla a la derecha fuente Lato

La fuente del símbolo de las comillas en esta ocasión la hemos cambiado a Lato. Además, si te fijas también hemos cambiado el color a azul, pero sólo el color del signo de apertura de comillas, ni la fuente ni el color afecta al resto del texto.

5. Cita a la izquierda con banda arriba, horizontal

Si queremos crear un bloque de texto tipo cita con la banda arriba del texto, la clase será «et-pullquote left topborder» .

Cita con banda horizontal en la parte superior del texto

El resultado para esta personalización de la cita lo puedes ver a la izquierdea de estas líneas. Como ves, podemos crear un montón de variantes y además cada una de ellas se pueden personalizar aún más de forma individual con un poquito de CSS.

6. Cita con texto blanco, fondo de color

Por último, si deseamos crear un bloque de texto tipo cita con un fondo de color, la clase será «et-pullquote left dark» .

Cita con texto blanco sobre un fondo de color verde

El resultado para esta clase de la cita lo puedes ver a la izquierdea de estas líneas. SI te fijas, hemos configurado el color de fondo como verde, (background: #008960;) y hemos añadido la propieadd fontfamily para cambiar la tipografía para esta clase a Times (font-family: times;). Prueba con otras configuraciones jugando con el código CSS hasta conseguir el aspecto que quieras para tus quotes.

¿Y si quiero mis bloques de citas a anchura completa?

Si deseas que tus citas no se muestren como has visto hasta ahora, derecha o izquierda, sino que deseas que aparezcan a anchura completa, elimina la propiedad max-widh:300px;, casi al final de codigo CSS. El bloque de CSS original es:

blockquote.et-pullquote{
padding: 0 20px;
max-width: 300px;
}

Y debe quedar así:

blockquote.et-pullquote{
padding: 0 20px;

}

Lo tienes de todas formas comentado en el CSS, aunque puedes ver que no es complicado.

Y esto es todo. Por favor si te ha sido de utilidad comparte este post.

¡Gracias!