Cómo utilizar el bloque Pullquote de WordPress

Publicado: 2021-08-14

Un pullquote es un pequeño fragmento del artículo que llama la atención. Es ideal para agregar énfasis a su texto o resaltar una frase. Proporciona una ayuda visual al lector. WordPress tiene un Bloque Pullquote diseñado específicamente para este propósito.

En este artículo, veremos el bloque Pullquote, veremos cómo agregarlo a sus publicaciones y páginas, veremos consejos y mejores prácticas para usarlo y veremos las preguntas frecuentes.

Cómo agregar el bloque Pullquote a su publicación o página

Cómo agregar el bloque Pullquote a su publicación o página

Para agregar un Bloque Pullquote, haga clic en el Insertador de bloques donde desea colocar el bloque o en la esquina superior izquierda. Busque Pullquote y selecciónelo. Alternativamente, puede escribir / pullquote y presionar enter donde desea colocar el bloque.

Cómo agregar el bloque Pullquote a su publicación o página

El Bloque Pullquote se agregará a su contenido donde puede agregar una cita de su artículo.

Cómo agregar el bloque Pullquote a su publicación o página

Para usarlo, simplemente ingrese el texto que le gustaría que se muestre donde dice Agregar cita . Debajo hay otra línea de texto con la etiqueta Agregar cita donde agregará el nombre de la persona que está citando, que para una cita es el autor del artículo. La cita es opcional para pullquotes.

Su cotización se muestra entre dos líneas horizontales e incluye una comilla sobre ella. La configuración predeterminada muestra la cita en una fuente grande y pesada, mientras que la cita está en una fuente más pequeña con un grosor regular.

Opciones y configuración de bloques de Pullquote

Opciones y configuración de bloques de Pullquote

Pullquote Block incluye configuraciones y opciones dentro del propio bloque y la barra lateral derecha.

Barra de herramientas Pullquote Block

Barra de herramientas Pullquote Block

La barra de herramientas Pullquote Block se coloca encima del bloque. Aparece cuando seleccionas el bloque. Miremos un poco más de cerca.

Cambiar el tipo o estilo de bloque

Cambiar el tipo o estilo de bloque

Tiene varias opciones para transformar el bloque en otros bloques, estilos, etc. Transformarlo en un párrafo, columnas, grupo, encabezado, cita o lista. Cada uno proporciona una vista previa de cómo se vería con su contenido. También tiene opciones para Estilos. Al pasar el cursor sobre las opciones, se muestra una vista previa de cómo se vería en su contenido. En este ejemplo, estoy pasando el cursor sobre las opciones de Color sólido en Estilos.

Arrastra y mueve

Arrastra y mueve

La herramienta Arrastrar está representada por 6 puntos. Agarre los puntos y arrastre el bloque a cualquier lugar que desee. La herramienta Mover tiene flechas hacia arriba y hacia abajo. Haga clic en ellos para mover el bloque hacia arriba o hacia abajo a través de su contenido.

Cambiar alineación

Cambiar alineación

Las opciones de alineación incluyen izquierda, derecha, ancho ancho y ancho completo. Las opciones de ancho y ancho completo solo están disponibles si su tema las admite. Elegir izquierda o derecha lo coloca en ese lado de la pantalla. Deseleccione su opción para volver a la predeterminada, que está centrada. Funciona con bloques de párrafos.

Cambiar alineación

Por ejemplo, si lo configura para alinearlo a la izquierda oa la derecha, el párrafo se coloca debajo del bloque Pullquote. En este ejemplo, lo configuré en Izquierda y el texto en el siguiente párrafo ahora está envuelto alrededor de él.

Negrita e itálica

Negrita e itálica

Las opciones de negrita y cursiva afectan el texto que está resaltando. Se pueden usar juntos o de forma independiente. En este ejemplo, los he usado de forma independiente dentro de la cita y juntos para la cita.

Enlace

Enlace

Agrega el enlace a cualquier texto que hayas resaltado. A medida que ingrese la URL, verá sugerencias basadas en las que ha usado antes. También verá una opción para abrir el enlace en una nueva pestaña.

Enlace

En este ejemplo, agregué el enlace a la cita. Subraya el texto para mostrar que es un enlace.

Mas opciones

Mas opciones

Al hacer clic en Más opciones, se abre un cuadro desplegable con 7 opciones para aplicar estilo al texto. He agregado cada uno de ellos en el ejemplo anterior. Todos afectan el texto que resaltas cuando haces clic en ellos. Incluyen:

Código en línea : diseña el texto para que se vea como código y evita que el código se ejecute. La palabra Esto se formatea como código en línea.

Imagen en línea : agrega una imagen de su biblioteca de medios a la ubicación del cursor del mouse.

Entrada de teclado: aplica estilo al texto con formato HTML de teclado. La cita de la palabra tiene un estilo de entrada de teclado.

Tachado : coloca una línea a través del texto, como la palabra impresionante en la imagen de arriba.

Subíndice : hace que el texto sea más bajo y más pequeño que el resto, como la letra R en la cita anterior.

Superíndice : hace que el texto sea más alto y más pequeño que el resto, como la letra A en la cita anterior.

Color del texto : le permite cambiar el color del texto, como la palabra Marrón en la cita anterior. El icono de configuración cambia a la barra de herramientas cuando está activo.

Mas opciones

Para las opciones de color, seleccione un color preseleccionado o cree un color personalizado. Seleccione un color personalizado del selector de color o ingrese el código hexadecimal, el código RGB o el código HSL.

Opciones

Opciones

Todas las opciones estándar están incluidas:

Ocultar más configuraciones: oculta la barra lateral derecha.

Copiar : copia el bloque Pullquote para que pueda pegarlo en cualquier lugar dentro de su contenido.

Duplicar : agregue un duplicado del Bloque Pullquote debajo del original.

Insertar antes : agrega un espacio antes del bloque Pullquote donde puede agregar un bloque.

Insertar después : agrega un espacio después del bloque Pullquote donde puede agregar un bloque.

Mover a : coloca una línea azul dentro de su contenido que puede mover a la ubicación donde desea mover su Bloque Pullquote, lo que facilita el movimiento del bloque.

Editar como HTML : abre el editor de código donde puede editar el HTML.

Agregar a bloques reutilizables : agrega el bloque Pullquote a sus bloques reutilizables, lo que facilita su reutilización.

Grupo : agrega el bloque a un grupo que puede ajustar como una sola unidad.

Eliminar bloque : elimina el bloque Pullquote.

Configuración de la barra lateral del bloque Pullquote

Configuración de la barra lateral del bloque Pullquote

La configuración de la barra lateral incluye estilos, color y avanzada. Haga clic en el engranaje de la esquina superior derecha para abrir o cerrar la barra lateral. Al hacer clic en el bloque, la barra lateral cambia a las opciones de Pullquote Block.

Estilos

Estilos

Estilos muestra dos opciones: el estilo predeterminado y un estilo de color sólido. Los estilos muestran una vista previa de cómo se vería la cita. Puede establecer el estilo predeterminado haciendo clic en él en el cuadro desplegable etiquetado Estilo predeterminado .

Color

Color

Las opciones de color incluyen el color principal y el color del texto. Hay varios colores disponibles como predeterminados, o puede seleccionar un color personalizado. Para colores personalizados, elija entre un selector de color o ingrese el color que desee como hexadecimal, RGB o HSL.

Color

El color principal afecta las líneas arriba y abajo de la cita para el primer estilo.

Color

Para el segundo estilo, el color principal afecta al fondo. Cambia a un texto claro cuando elige un color oscuro para el fondo. Si elige una combinación de colores que sea difícil de leer, se lo informará.

Color

El color del texto afecta las comillas, la cita y la cita. No anula los colores del texto establecidos en la configuración de la barra de herramientas.

Color

Puede usar la configuración de color del texto para ajustar las comillas y luego usar la configuración de color en la barra de herramientas para ajustar el texto de forma independiente.

Avanzado

Avanzado

La configuración avanzada incluye un ancla HTML y clases CSS adicionales. El ancla proporciona una URL para que pueda vincular directamente al bloque. El campo de la clase CSS incluye el estilo que ha seleccionado y puede agregar otras clases si lo desea.

Consejos y mejores prácticas para utilizar el bloque Pullquote de forma eficaz

  • Utilice texto del propio artículo.
  • Úselos con moderación.
  • Está bien no usar la leyenda.
  • Use la alineación derecha o izquierda para hacer que su cita envuelva su texto.
  • Utilice las opciones de alineación de pantalla ancha y completa para crear títulos interesantes.
  • Pruebe ambos estilos, predeterminado y sólido, para ver cuál funciona mejor para su contenido. Utilice el color sólido y cambie el color de fondo para destacar.
  • Use color para hacer que la cita destaque aún más.

Preguntas frecuentes sobre el bloque Pullquote

¿Cuál es la diferencia entre Pullquote Block y Quote Block?

Una cotización muestra cotizaciones externas. Un pullquote resalta una parte del texto del artículo en el que está colocado. El Pullquote Block incluye más opciones de alineación y tiene un estilo diferente.

¿Cuál es la ventaja de usar un bloque Pullquote?

Le da al texto un aspecto más gráfico que se destaca. También resalta una línea del texto para llamar la atención sobre él.

¿Se pueden transformar en un Quote Block?

Sí, y un bloque de párrafo, columnas, grupo, encabezado o lista.

¿Pueden usarse para cualquier otra cosa?

Sí, y tutoriales breves, notas a pie de página, títulos, etc.

Conclusión

Ese es nuestro vistazo al bloque WordPress Pullquote. Pullquotes es una excelente manera de agregar un énfasis visual a su texto y Pullquote Block lo hace muy bien. Este bloque es fácil de usar y le brinda suficientes opciones para crear una apariencia única que se destaque. Sus opciones de diseño funcionan bien con su texto, lo que le permite dividir el texto, ajustarlo e incluso usarlo como encabezado.

Queremos escuchar de ti. ¿Usas el bloque Pullquote? Háganos saber lo que piensa al respecto en los comentarios.

Imagen destacada a través de girafchik / shutterstock.com