Bloques de Cita

Resalta contenido importante o que valga la pena usando texto único y estilizado.

Última actualización: 12 de septiembre de 2024

Usa Bloques de cita para añadir citas y testimonios a tu sitio y ajustar su estilo.

Mira el video

Añadir un Bloque de cita

Para añadir un Bloque de cita:

  1. Abre un editor de páginas o publicaciones, haz clic en Agregar bloque o en un punto de inserción y, a continuación, en Cita. Para obtener pasos más detallados, consulta Agregar contenido con bloques.
  2. Abre el editor de bloques presionando el ícono del lápiz en el bloque.
  3. Ingresa la cita en el primer campo.
  4. Ingresa su origen en el segundo campo.
  5. Haz clic en Diseñar para agregar una animación o habilitar un color de fondo (solo para sitios de la versión 7.1).

Editar un bloque de citas actual

Para editar un bloque de citas actual, haz doble clic en el bloque o haz clic en el bloque una vez y, a continuación, en el ícono de lápiz o en Editar. Esto abre el editor de bloques. No es posible editar la cita directamente en la página como lo harías con un bloque de texto.

Ajustar el estilo de la cita

El estilo de tus citas dependen de tu plantilla y versión.

Fuentes

Para cambiar el estilo de las fuentes del Bloque de cita:

  1. Mientras editas una página, abre estilos del sitio y, a continuación, haz clic en > junto a Fuentes.
  2. Haz clic en Asignar estilos
  3. Desplázate hasta la sección de bloques de citas para dar estilo a Texto y Fuente.
  4. Para volver a los estilos del sitio, haz clic en Atrásy luego en Estilos del sitio. O, si has terminado de hacer cambios, haz clic en Salir y luego en Guardar para cerrar el editor.

Colores

Para cambiar el estilo de los colores del Bloque de cita:

  1. Mientras editas una página, abre estilos del sitio y, a continuación, haz clic en > junto a Colores.
  2. Posiciona el cursor sobre el tema cromático y haz clic en el ícono del lápiz.
  3. Desplázate hasta la sección de bloques de citas para cambiar los colores de Texto y Fuente.
  4. Haz clic en Guardar para guardar tus cambios y seguir editando, o haz clic en Salir y luego Guardar para cerrar el editor.

Otras opciones de estilo

Para personalizar el aspecto del bloque de citas:

  1. En el editor de bloques de citas, haz clic en Diseño.
  2. Al lado de Trazo, habilita una línea continua o punteada para delinear el bloque. Para líneas continuas y punteadas, establece el ColorGrosor del trazo. 
  3. Haz clic en el menú desplegable Modo de fusión para elegir una configuración de transparencia. Estos efectos son ideales si estás superponiendo un bloque de cita sobre una imagen u otro contenido visual.
  4. Para desenfocar el Elemento o el Fondo, activa la opción Desenfocar y usa el control deslizante para ajustar el nivel de desenfoque.

Cómo acceder a esta función

Hay personalizaciones de Trazo, Modo de mezcla y Desenfoque disponibles para las secciones del Editor dinámico. Para las secciones que usan el editor clásico, solamente está disponible la función de Trazo.

La mayoría de las plantillas tienen opciones de estilo para los bloques de citas. En el caso de las plantillas que no tienen opciones de estilo, el texto de bloque de cita usa el mismo estilo de tu cuerpo del texto. Consulta nuestros consejos a continuación para ver otros modos de hacer que se destaquen las citas.

Para cambiar el aspecto de tu bloque de cita, usa los siguientes ajustes para estas familias de plantillas:

Familia de plantillas Nombre del ajuste

Adirondack

Bloque de Cita

Avenue

n/a

Familia Aviator

Fuente de la cita, Texto de la cita 

Bedford

Fuente de la cita, Color de la cita 

Brine

Sección de Bloque de cita (Alineación, Fuente de la cita, Fuente del origen)

Farro

Sección de Bloque de cita (Alineación, Fuente de la cita, Fuente del origen)

Five

Blockquote

Flatiron

Fuente de la cita, Color de la cita , Tamaño de la cita incorporada

Forte

Bloque de Cita 

Galapagos

n/a

Ishimoto

Cita, Tamaño de la cita

Momentum

Bloque de Cita

Montauk

n/a

Native

Citas, Tamaños de la cita

Pacific

Fuente de la cita, Color de la cita

Skye

Sección de Bloque de cita (Alineación, Fuente, Fuente mínima, Color de la cita)

Supply

n/a

Tremont

Fuente de la cita, Fuente mínima de la cita 
Wells Cita, Tamaño de la cita
Wexley Fuente de la cita

York

Fuente de la cita, Escalar la cita, Mínimo de la cita, Color del texto de la cita, Alineación de la cita, Mostrar comillas, Fuente del origen de la cita, Color del origen de la cita

Animar la cita

Cómo acceder a esta función

El Editor dinámico no admite animaciones específicas del bloque de cita. En su lugar, los bloques de cita siguen la configuración de animación de todo el sitio.

Para animar un bloque de citas:

  1. En el editor de bloques de citas, haz clic en Diseño.
  2. Selecciona un efecto en el menú desplegable. Al seleccionar una opción, aparecerá una vista previa en la página.

Elige entre lo siguiente:

  • Ninguna: Sin animación, incluso si hay configuraciones de animación para todo el sitio
  • Predeterminado del sitio: La animación del texto coincide con la configuración de animación para todo el sitio.
  • Difuminado de entrada: El texto ingresa con un difuminado.
  • Deslizar hacia arriba: El texto se desliza desde abajo.
  • Entrada fuera de foco: El texto aparece borroso y, luego, se hace foco.
  • Revelar: El texto se desplaza hacia afuera desde el centro.

A continuación, se muestra un ejemplo de un bloque de cita que utiliza la animación Entrada fuera de foco.

Quote_block_animations_appear_when_the_block_loads.gif

Otros modos de incorporar citas

Estas son otras opciones para añadir citas a tu sitio y darles un formato exclusivo.

Aplicar formato de texto de cita

Para hacer que una cita resalte dentro de un bloque de texto, destaca el texto y haz clic en el icono de la cita, en el editor del bloque de texto. Se cambiará el margen de la cita. Según tu plantilla, tal vez aparezca una línea al costado y el texto puede estar en cursiva.

Envolver el texto

Para una cita al estilo de las revistas que se destaque en la página, envuelve un Bloque de texto alrededor de otro. Puedes informarte mejor en Crear una cita envolviendo el texto.

pull-quote.png

Solapar bloques de cita y de imagen

Si utilizas el Editor dinámico, puedes colocar un bloque de cita sobre un bloque de imagen para crear un fondo de imagen para la cita. Asegúrate de tener el fondo del bloque desactivado para que el bloque de imagen que está detrás no quede cubierto.

En el editor clásico, no es posible solapar bloques. En su lugar, agrega un bloque de imagen con superposición de texto y dale estilo a ese texto para que se parezca más a una cita extraída. Consulta Bloques de imagen para ver ejemplos de cada una de las diferentes opciones de bloques de imagen. Aquí tienes un ejemplo con el bloque de imagen de póster:

image-block-as-quote.png

Aplicar formato de texto de encabezado

Para que el texto tenga un estilo destacado, añade el texto de la cita a un bloque de texto y, a continuación, aplícale el formato de un encabezado. En el editor del bloque de texto, resalta el texto y usa el menú desplegable de formato para seleccionar Encabezado 2 o Encabezado 3. A continuación, emplea las opciones del panel de estilos del sitio para el encabezado 2 o el encabezado 3 para cambiar el aspecto del texto.

Consejo

debido a que los motores de búsqueda identifican los contenidos en los encabezados como áreas llenas de palabras clave para el indexado, darles a las citas el estilo de los encabezados puede interferir con el SEO de tu sitio. Solo recomendamos esta solución alternativa si tu plantilla no tiene estilos del bloque de citas y tu objetivo principal es destacar el diseño de la cita.

Footer Image
  • Recibe ayuda de nuestra comunidad

  • Recibe la ayuda de nuestra comunidad para personalizaciones avanzadas.

  • Contrata a un Squarespace Expert

  • Destácate en línea con la ayuda de un diseñador o desarrollador con experiencia.