¿Has visto esos elegantes estilos de citas en la web y quieres usarlos en tu sitio de WordPress? Bueno, ¡esa es la razón de un diseñador web para emocionarse! Vamos a profundizar en el uso de blockquotes en WordPress y, con suerte, le daremos una visión bastante completa de lo que son, por qué deberían usarse y cómo usarlos.
Lo primero que debe saber sobre el uso de comillas en bloque es que son diferentes de las comillas extraídas, las comillas y las citas. Las diferencias son principalmente semánticas, pero también tienen que ver con el diseño. Tradicionalmente, en forma impresa, se usan de manera separada, y esa tradición continúa en nuestro mundo en línea.
En resumen, las citas en bloque están destinadas a ser «bloques» de texto mucho más largos, generalmente una cita del trabajo de otra persona , y siempre deben citarse. Si estudió humanidades en la universidad, probablemente haya utilizado esta forma de citar fuentes en trabajos académicos. Las citas se utilizan para nombrar al escritor y la fuente de una cita. Y una cita es lo que esperas que sea: una cita que recibiste de otra persona, solo que mucho más corta para que no sea necesario separarla del párrafo del cuerpo principal. En otras palabras, algo que no dijiste, pero que quieres incluir en tu escrito porque fue dicho tan maravillosamente que no podrías decirlo mejor.
Las comillas extraídas son donde las cosas se vuelven un poco confusas. Las comillas son frases u oraciones cortas clave tomadas del propio contenido del cuerpo y hechas para que se destaquen en la página para ayudar al lector a escanear el contenido más fácilmente. Agregan algún tipo de decoración visual a un texto que de otro modo se vería bastante soso y aburrido.
Al igual que las comillas en bloque, en el diseño también se destacan del texto, o deberían distinguirse de alguna manera. Eso puede ser mediante el uso de una fuente, tamaño o color de fuente diferente, color de fondo, sangría u otras técnicas de diseño. Pero no usaría los términos «cita en bloque» y «cita extraída» indistintamente, al menos no en el sentido tradicional.
Pero, y aquí es donde puede confundirse más , no hay una etiqueta HTML para una cita extraída. Entonces, si desea usarlos en un sitio web, debe hacerlos con clases CSS , selectores de pseudoclase o con un <aside>. Eso significa que en WordPress, también necesitará saber cómo modificar HTML mientras usa el editor de «Texto» en su tablero.
Prácticamente en la web, la gente usa principalmente comillas en bloque, o simples comillas basadas en caracteres para indicar que están citando algo. Eso está bien, pero existen aplicaciones útiles para distinguir comillas en bloque, comillas extraídas, comillas y citas en su estrategia de marcado HTML y diseño web.
¿Para qué se usan normalmente las comillas en el diseño web?
Indicar referencias a obras externas
La razón más importante para usar el estilo de las comillas, o incluso solo las comillas, es, por supuesto, mostrar que estás usando las palabras de otra persona. Sería una falta de respeto, por no hablar de las normas de derechos de autor, no hacerlo. Cuánto se le permite citar antes de que aún constituya una infracción de derechos de autor es un gran debate. Aquí hay un gran video sobre el tema. Sin embargo, eso no es lo que estamos aquí para discutir. Solo sepa que es importante no atrasarse en citar las palabras de otras personas.
Testimonios
La otra razón más obvia para usar citas es para testimonios. Por ejemplo, consulte la barra lateral de este sitio . Está diseñado para usar la etiqueta <blockquote> para mostrar un testimonio, y se ha diseñado con comillas y texto sangrado.
enfatizar el contenido
El uso de la etiqueta HTML <blockquote> también puede ser excelente para enfatizar el contenido como una cita extraída. Sin embargo, recuerde que las comillas extraídas y las comillas en bloque no son lo mismo, pero en HTML se codifican de manera similar (consulte más arriba los enlaces y las explicaciones).
Al usar una cita extraída, puede ayudar a enfatizar declaraciones clave en su propio texto, para mostrar a los lectores un punto importante.
Consejos para codificar y diseñar citas en bloque y citas en WordPress
En primer lugar, querrá tener claras las definiciones y los significados previstos de las comillas en bloque, las comillas y las citas en HTML, para asegurarse de que está utilizando las mejores prácticas .
Si usa la etiqueta <blockquote> en su HTML para indicar un trabajo de referencia en su escritura, muchos navegadores usarán una pantalla predeterminada para indicar a los lectores, independientemente de su CSS, que esta no es su propia escritura.
Blockquotes son tan libres en su diseño como cualquier otro elemento del sitio web. Sin embargo, al igual que no querrá poner todo el cuerpo del texto en cursiva, ya que puede confundir la forma convencional de mostrar la importancia de una palabra en particular, tampoco querrá ir demasiado lejos al diseñar sus estilos de citas en bloque. .
Aquí hay algunos consejos e ideas simples para tener en cuenta al diseñar sus citas en bloque:
- Sangrar el texto: es una forma tradicional de mostrar una cita más larga.
- Haga que el texto sea más grande, u otra fuente, para que se destaque, pero no demasiado en negrita ni demasiado difícil de leer. La legibilidad es clave en la tipografía.
- Considere agregar un símbolo de cita u otro icono para indicar visualmente que se trata de una cita. Intente usar fuentes de íconos para ayudar a que el símbolo se vea nítido en las pantallas retina, o use una imagen @2x. Más sobre eso se puede leer aquí .
- Considere agregar un fondo a la cita. Trate de mantener este CSS basado, ya que las imágenes pueden ser difíciles de escalar y hacer que retina sea amigable en múltiples dispositivos y tamaños de pantalla.
- Considere cómo diseñará la cita para la cita. Es decir, debe diseñar el nombre de la persona que escribió las palabras originales o la fuente donde se encontraron las palabras.
- Si usa una cita extraída, cree una clase fácil de recordar que se pueda usar. Alinee a la derecha o alinee a la izquierda su cita breve. Tenga en cuenta que para la alineación a la derecha o a la izquierda, deberá considerar cómo escalar la cita de extracción para consultas de medios receptivas.
- Si está usando Bootstrap, no olvide que puede usar blockquote-reverse para mezclar el estilo de su cita.
Encuentre inspiración para diseñar citas en bloque
Si realiza una búsqueda en Dribble, obtendrá excelentes estilos de citas en bloque que puede adaptar para el CSS de su propio sitio web.
Aquí hay algunas excelentes demostraciones de estilos de citas en bloque en las que puede inspirarse.
Además, consulte estos artículos que han recopilado estilos de citas en bloque de toda la web:
Blockquotes con estilo y cotizaciones pull en diseño web: consejos y ejemplos
Galería de diseños de cotizaciones (56 ejemplos)
Cómo personalizar el estilo de Blockquotes en temas de WordPress
Además, aquí hay algunos estilos geniales de citas en bloque que reunimos para su observación de toda la web:
Aquí hay un estilo de cita en bloque usado en rebeccasehn.com que se suma al tema del carácter y la nostalgia de todo el sitio. En lugar de una imagen de cita a la izquierda, utiliza una ilustración, pero sigue siendo obvio que se trata de una cita.
23andme.com es uno de mis sitios favoritos, y usa estilo para sus testimonios usando símbolos de comillas. Observe cómo usan este estilo como una cita extraída y alinean las palabras a la derecha de la pantalla.
Biblesforamerica.org usa solo un simple cambio de fuente y cambio de color para indicar una cita. Simplemente se alinean al centro y usan cursiva, y hace el trabajo.
Executivesuite.com utiliza citas en bloque para su página de testimonios. Observe cómo se usa un ícono de cita aquí y el texto tiene sangría para indicar que es una cita y no un cuerpo de texto normal.
Eastwoodcollege.com utiliza una fuente nueva y un color más brillante para que sus citas en bloque realmente se destaquen y capten la atención del lector. No se utiliza ningún otro simbolismo o imaginería.
¿Por qué debería marcar sus citas en bloque y comillas en HTML?
No le gustaría estar constantemente usando un margen izquierdo y una etiqueta de encabezado solo para que sus citas en bloque se vean diferentes en sus páginas web. Sé que este método puede ser tentador cuando tiene fácil acceso a los controles de botones que pueden cambiar la apariencia de su texto en el editor de WordPress. Esto es especialmente cierto cuando está acostumbrado a formatear las cosas de esa manera en Microsoft Word.
Pero las etiquetas HTML tienen significados que ayudan a un navegador a comprender de qué está compuesto su texto. Por eso es importante usarlos, y usarlos correctamente. No se trata sólo de cómo se ven las cosas.
Este párrafo de Josh Byers explica bien el razonamiento de esto:
En realidad, puedes hacer lo que quieras. Esto puede parecer un asunto trivial, pero afecta la forma en que se desarrollan los navegadores y las aplicaciones en el futuro. Por ejemplo, podría tener un lector de rss con una configuración que ignoraría todos los apartes para que el contenido no se repita en el flujo del artículo sin estilo.
Accesibilidad e idiomas
No olvides que no todas las personas pueden acceder a tu contenido con los ojos. Hay factores de accesibilidad que intervienen en el marcado HTML adecuado que permite que las personas con discapacidades lean su texto. Ahora imagina si no indicaste en tu HTML que estabas citando el trabajo de otra persona en este escenario. ¿Cómo sabría el lector la diferencia? ¿Cómo sabrían cuándo terminan tus palabras y comienzan las de otra persona?
(Además de nuestro punto aquí, debemos agregar que mirar sus páginas web desde el punto de vista de la accesibilidad es una práctica muy saludable. También puede decirle cómo los motores de búsqueda ven su contenido, ya que no tienen nada más que guiar excepto su código).
Además, este excelente artículo en Smashing Magazine explica que no todos los idiomas usan las comillas que usamos en inglés para indicar una cita. Por ejemplo, en francés y alemán se utilizan los caracteres ‘»’ y ‘«’. Si bien es posible que esté escribiendo para una audiencia completamente en inglés, algunos webmasters deben considerar que su contenido puede traducirse por la configuración del navegador. Al usar la etiqueta <q> en lugar de solo comillas para citas cortas de texto en línea, puede indicarle a un navegador que muestre los caracteres correctos que se usan para las citas en diferentes idiomas.
Facilidad de uso e inserción.
La otra razón más obvia para usar el código adecuado para mostrar citas en bloque y comillas es porque hace que su vida y la de sus clientes sea mucho más fácil. Si sus estilos están definidos en su archivo CSS (generalmente en la carpeta de su tema de WordPress), sus comillas en bloque, comillas y comillas extraídas se verán iguales sin importar qué, siempre que esté usando las etiquetas y clases correctas en su HTML. No tendría que diseñarlos manualmente cada vez que quiera usarlos en su contenido web.
Por lo tanto, si aplica estilo a todas las comillas en bloque para que tengan un símbolo de comillas en la esquina superior izquierda, para que el texto tenga sangría y el tamaño de la fuente sea más grande que el texto normal, todo lo que necesita hacer es envolver su contenido de origen en el <blockquote> etiqueta usando HTML. En WordPress, también puede usar el botón blockquote en el editor visual para hacer esto. (Nota: anteriormente dijimos que necesita usar el editor de texto, pero recuerde, eso es solo si desea usar comillas separadas de las comillas en bloque).
Permítanme usar una cita en bloque de probablemente el mejor artículo que encontré sobre este tema para explicar la importancia de codificar sus citas en bloque de una manera con la que no pueda competir (que es el propósito de usar cualquier cita):
Supongamos por un momento que siempre queremos comillas de apertura y cierre alrededor de los párrafos en una cita extraída: es en este punto que la capacidad de CSS para producir contenido generado se vuelve útil.
…Digamos que cada vez que creamos un párrafo en cualquier parte de cualquier página de nuestro sitio web, quisiéramos comenzarlo con las palabras “Érase una vez” en rojo, seguidas de puntos suspensivos (…).
…Eso es un montón de tipeo repetido para cada párrafo, con muchas posibilidades de entradas incorrectas y errores. En ese punto podríamos argumentar que “Érase una vez…” pasa a formar parte de la apariencia consistente de cada párrafo: contenido decorativo .
El punto que Dudley está haciendo es que puede diseñar sus citas y citas en bloque de la forma que desee, incluso con el texto que aparece antes y después. La clave es que si los estilos deben ser consistentes, debe automatizar el proceso de ese estilo.
Recursos para crear sus propios estilos de citas en bloque y citas extraídas en CSS:
Efectos de tipografía clásica en CSS: Extraer comillas con comillas generadas
Impresionante estilo Blockquote con CSS
Cómo personalizar su estilo BlockQuote en WordPress
Juega con el CSS predeterminado para <blockquote> en W3schools.com
Extraer comillas (tutorial)
Citas elegantes para tu blog
Cotizaciones rizadas Swooshy sin imágenes
Cómo usar elementos de citas con estilo y semánticamente correctos en la web
Maneras de hacer que las citas en bloque sean más fáciles con WordPress
A veces, su tema tendrá configuraciones para modificar los estilos de blockquote. Si ese es el caso, continúe y use la configuración de su tema. Fácil, hecho.
Si usa uno de nuestros temas en Elegant Themes, encontrará que tenemos funciones de códigos abreviados incorporadas que le permiten crear citas muy fácilmente.
También hay complementos en WordPress.org que le permitirán crear citas en bloque usando códigos abreviados, lo que puede ahorrarle algo de tiempo de codificación. Aquí hay algunos que encontramos:
Códigos cortos de Olevmedia
Testimonios fáciles (para citas testimoniales)
Maestro de citas
AddQuicktag s (puede que no sea tan fácil de usar, pero es más personalizable)
Graceful Pull-Quotes (no usa códigos cortos, pero sí usa JavaScript)
Para concluir: ¡las frases en bloque son muy divertidas, si se hacen bien!
La alegría de usar blockquotes no es solo la capacidad de usar las palabras de otra persona para ayudar a probar su punto. Mucho de esto está en el estilo. Es una excelente manera de agregar expresión, elementos de marca y legibilidad a su cuerpo de texto. Pero también es importante hacerlo bien, para asegurarse de que su HTML sea semántico y pueda ser leído correctamente por todos los navegadores y dispositivos.
¡Déjenos un comentario a continuación para informarnos sus estilos favoritos de citas en bloque y cómo los usa en su sitio web!