Cómo personalizar el estilo de las comillas en los temas de WordPress

¿Buscas una forma de personalizar el estilo de las citas en bloque en tu sitio web de WordPress?

Las citas suelen ser la parte más memorable de tu artículo. También son la parte más compartida de cualquier entrada de blog o página. Por eso los periódicos y los sitios de medios de comunicación más importantes personalizan su estilo de citas en bloque para que destaquen.

En este artículo, te mostraremos cómo personalizar el estilo de las citas en bloque en los temas de WordPress

Personalizar el estilo de las citas en bloque en los temas de WordPress

¿Por qué utilizar Blockquotes y personalizarlos en WordPress?

El uso de blockquotes en tu contenido puede mejorar la experiencia del usuario en tu sitio de WordPress. Puedes utilizarlo para hacer que una sección seleccionada del texto destaque sobre el resto del contenido y capte la atención de tus lectores

Por ejemplo, puedes utilizar blockquotes para citas de autores y personas influyentes, citas de publicaciones, testimonios de tus clientes o para destacar información valiosa para tus usuarios

Otra ventaja de utilizar blockquotes es que puede aumentar el compromiso social. Permitir que los usuarios compartan la cita en Twitter o Facebook puede ayudarte a conseguir más seguidores y mejorar la visibilidad de tus marcas en las redes sociales

Por defecto, WordPress ofrece un bloque de citas en el editor de contenido. Para añadirlo, simplemente dirígete al editor de WordPress y añade el bloque de Cita donde quieras en el contenido

Bloque de citas por defecto en WordPress

Sin embargo, el bloque de citas por defecto no ofrece muchas opciones de personalización. Sólo puedes cambiar el tamaño del texto y elegir entre los estilos predeterminados de WordPress.

Dicho esto, vamos a ver cómo puedes personalizar el estilo de las citas en bloque en los temas de WordPress. Te mostraremos cómo cambiar el estilo de los blockquotes usando un plugin de WordPress y también usando CSS personalizado

Método 1: Personalizar el estilo de las comillas con un plugin

Una forma fácil de personalizar las citas en bloque en tu sitio web de WordPress es utilizar un plugin como Bloques Gutenberg - Complementos definitivos para Gutenberg. Es un plugin gratuito para WordPress que añade bloques adicionales en el editor de contenido de WordPress, incluyendo citas en bloque personalizables.

En primer lugar, tendrás que instalar y activar el plugin Bloques Gutenberg - Ultimate Addons for Gutenberg. Para más detalles, consulta nuestra guía sobre cómo instalar un plugin de WordPress

Una vez que el plugin esté activo, te llevará automáticamente a Ajustes " UAG desde tu panel de control de WordPress

Asegúrate de que el bloque de citas está activo

Por defecto, el plugin activará todos los bloques adicionales, incluidos los blockquotes, pero puedes elegir desactivar diferentes bloques para tu sitio web

Después de eso, puedes editar cualquier entrada y página del blog. Una vez que estés en el editor de contenido de WordPress, simplemente añade un bloque de Blockquote en cualquier parte de tu contenido

Añade un bloque de citas en bloque

A continuación, puedes introducir el texto en el área de la cita en bloque

Encontrarás diferentes opciones para personalizar el estilo de la cita en bloque en el menú de la derecha

Por ejemplo, puedes elegir entre 2 diseños, incluyendo el moderno y el de cita. Luego puedes utilizar las diferentes opciones para personalizar el estilo del diseño, el grosor del borde de la cita, su color y mucho más

Personaliza tu cita en bloque

El plugin también te permite cambiar el color del texto de la cita y editar su tipografía

Puedes utilizar la fuente predeterminada para las citas o elegir una fuente diferente para que el texto destaque. Además, hay opciones para editar el tamaño de la fuente y la altura de la línea.

Editar texto en la cita

Hay más opciones para personalizar el estilo de una cita en bloque en el plugin

Para citar tweets, puedes introducir tu nombre de usuario de Twitter en el campo "Nombre de usuario" y cambiar la configuración del icono de Twitter. Hay opciones para elegir si mostrar el icono del Tweet y el texto, ambos, o sólo el icono. El plugin también te permite cambiar su estilo, la etiqueta, etc

Incluso hay una opción para desactivar por completo la aparición del icono de Twitter en las citas de bloque

Editar la configuración de los iconos de Twitter

Una vez que hayas personalizado tu blockquote, sólo tienes que publicar tu entrada o página del blog

A continuación, visita tu sitio web para ver el blockquote en acción

Vista previa de la cita en bloque

Método 2: Añadir CSS personalizado para personalizar el estilo de las Blockquotes

Si no quieres utilizar un plugin de WordPress, añadir CSS personalizado es otra forma de personalizar tus blockquotes

Puedes utilizar el bloque de citas por defecto en el editor de WordPress para añadir tus blockquotes. Después, simplemente introduce el código CSS personalizado para cambiar su estilo y apariencia

Para añadir el código CSS personalizado, primero tendrás que dirigirte a Apariencia " Personalizar desde tu panel de control de WordPress. Esto abrirá el personalizador de temas de WordPress

En el personalizador del tema, tendrás que hacer clic en la opción "CSS adicional" que aparece en el menú de la izquierda

Haz clic en el CSS adicional

Después de eso, puedes introducir código CSS personalizado para cambiar el aspecto y el estilo de las citas en bloque

Aquí tienes algunos estilos de citas en bloque que puedes utilizar en tu sitio web

1. Bloqueo clásico de CSS

Normalmente, la gente utiliza la imagen de fondo de CSS para añadir comillas grandes en el blockquote. En este ejemplo, hemos utilizado CSS para añadir comillas grandes.

Cita en bloque CSS clásica
blockquote {
	font-family: Georgia, serif;
	font-size: 18px;
	font-style: italic;
	width: 450px;
	margin: 0.25em 0;
	padding: 0.25em 40px;
	line-height: 1.45;
	position: relative;
	color: #383838;
	background:#ececec;
}

blockquote:before {
	display: block;
	content: "201C";
	font-size: 80px;
	position: absolute;
	left: -10px;
	top: -10px;
	color: #7a7a7a;
}

blockquote cite {
	color: #999999;
	font-size: 14px;
	display: block;
	margin-top: 5px;
}

blockquote cite:before {
	content: "2014 2009";
}

2. Cita en bloque clásica con imagen

En este ejemplo, hemos utilizado una imagen de fondo para las comillas.

Cita en bloque CSS clásica con imagen
blockquote {
	font: 16px italic Georgia, serif;
	width:450px;
	padding-left: 70px;
	padding-top: 18px;
	padding-bottom: 18px;
	padding-right: 10px;
	background-color: #dadada;
	border-top: 1px solid #ccc;
	border-bottom: 3px solid #ccc;
	margin: 5px;
	background-image: url(http://example.com/wp-content/themes/your-theme/images/gray-georgia.png);
	background-position: middle left;
	background-repeat: no-repeat;
	text-indent: 23px;
} 

blockquote cite {
	color: #a1a1a1;
	font-size: 14px;
	display: block;
	margin-top: 5px;
}

blockquote cite:before {
	content: "2014 2009";
}

3. Cita en bloque simple

En este ejemplo, hemos añadido el color de fondo y el borde izquierdo discontinuo en lugar de las citas en bloque. Siéntete libre de jugar con los colores.

Cita en bloque simple con borde discontinuo
blockquote {
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
width: 500px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #383838;
border-left:3px dashed #c1c1c1;
background:#eee;
}

blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}

blockquote cite:before {
content: "2014 2009";
}

4. Blockquote blanco azul y naranja

Los blockquotes pueden destacarse, y pueden ser tan coloridos como tú quieras.

Blockquote azul y naranja
blockquote {
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
width: 450px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #FFF;
border-left:5px solid #FF7F00;
background:#4b8baf;
}

blockquote cite {
color: #efefef;
font-size: 14px;
display: block;
margin-top: 5px;
}

blockquote cite:before {
content: "2014 2009";
}

5. Uso de Google Web Fonts para Blockquotes en CSS

En este ejemplo de blockquote CSS, hemos utilizado la fuente Droid Serif de la biblioteca de fuentes web de Google. Puedes utilizar cualquier fuente personalizada que desees. Simplemente sustituye la fuente en el código por la familia de fuentes que quieras utilizar

Bloqueo de citas con la fuente de Google
blockquote {
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400italic);
font-family: 'Droid Serif', serif;
font-size:16px;
font-style:italic;
width:450px;
background-color:#fbf6f0;
border-left:3px dashed #d5bc8c;
border-right:3px dashed #d5bc8c;
text-align:center;
}
blockquote cite {
color: #a1a1a1;
font-size: 14px;
display: block;
margin-top: 5px;
}

blockquote cite:before {
content: "2014 2009";
}

6. Esquina redondeada de Blockquote

En este ejemplo, tenemos un blockquote con esquinas redondeadas, y hemos utilizado la sombra paralela para los bordes.

Cita en bloque con esquinas redondeadas
blockquote {
width: 450px;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote cite:before {
content: "2014 2009";
}

7. Usar el degradado como fondo para el blockquote

En este ejemplo de CSS blockquote, hemos utilizado el gradiente CSS para mejorar el fondo de un blockquote

Los degradados CSS son complicados debido a la compatibilidad entre navegadores. Recomendamos utilizar un generador de degradados CSS, como Gradiente CSS.

Cita en bloque con colores degradados
blockquote {
width: 450px;
color:#FFF;
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#7d7e7d", endColorstr="#0e0e0e",GradientType=0 ); /* IE6-9 */
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote cite:before {
content: "2014 2009";
}

8. Cita en bloque con patrón de fondo

En este ejemplo, hemos utilizado una imagen de fondo como patrón para el blockquote.

Bloqueo con imagen
blockquote {
width: 450px;
background-image:url('http://example.com/wp-content/themes/your-theme/images/lined_paper.png');
border: 1px solid #ccc;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote cite:before {
content: "2014 2009";
}

Nota: Tendrás que sustituir la URL de la imagen de fondo en el código CSS por la URL de la imagen que hayas subido a tu sitio web de WordPress

9. Usar varias imágenes en el fondo de un bloque

Puedes utilizar múltiples imágenes en el fondo del bloque de la cita utilizando CSS. Por ejemplo, hemos utilizado blockquote:before un pseudo-elemento para añadir otra imagen de fondo a blockquote.

Bloqueo de la cita con múltiples imágenes
blockquote {
width: 450px;
background-image:url('http://example.com/wp-content/themes/your-theme/images/lined_paper.png');
border: 1px solid #ccc;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote:before{
position:absolute;
margin-top:-20px;
margin-left:-20px;
content:url('http://example.com/wp-content/themes/your-theme/images/pin.png');
}
blockquote cite:before {
content: "2014 2009";
}

Nota: Tendrás que sustituir las URL de las imágenes de fondo en el código CSS por las imágenes que hayas subido a tu sitio web

Esperamos que el artículo te haya ayudado a aprender cómo personalizar el estilo de las comillas en los temas de WordPress. También puedes ver nuestra guía sobre cómo elegir el mejor software de diseño y los mejores servicios de alojamiento de sitios web gratuitos

Si te ha gustado este artículo, suscríbete a nuestro Canal de YouTube para los videotutoriales de WordPress. También puedes encontrarnos en Twitter y Facebook.

Si quieres conocer otros artículos parecidos a Cómo personalizar el estilo de las comillas en los temas de WordPress puedes visitar la categoría Themes.

¡Más Contenido!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Go up