Bloques de desplazamiento

Agrega a tu página un flujo de texto que se mueva horizontalmente para captar la atención de los visitantes.

Última actualización: 10 de abril de 2024

Usa bloques de desplazamiento para agregar texto que se desplace horizontalmente por la página, de forma similar a una marquesina de cine o un teletipo de noticias. Esta es una excelente opción para dar un toque visual a tu texto o atraer la atención de los visitantes a información importante.

Mira el video

Agregar un bloque de desplazamiento

Para agregar un bloque de desplazamiento:

  1. Edita una página o publicación, haz clic en Agregar bloque o un punto de inserción y, luego, en Scrolling. Para obtener ayuda, visita Agregar contenido con bloques.
  2. Abre el editor de bloques presionando el ícono del lápiz en el bloque.
  3. En la pestaña Contenido, agrega o edita elementos de texto.
  4. Para convertir el bloque de desplazamiento en un enlace en el que se pueda hacer clic, agrega una dirección web en el campo Enlace o haz clic “the para agregar diferentes tipos de enlaces.Cuando los visitantes hacen clic en el bloque de desplazamiento, los lleva al enlace que agregaste.
  5. Haz clic en Diseño para personalizar el bloque.
A_scrolling_block_with_the_text_Dream_It.gif

Nota

En dispositivos iOS, los bloques de desplazamiento no se desplazarán si el visitante tiene activada la función de accesibilidad Reducir movimiento.

Agregar y editar elementos de texto

Al agregar un bloque de desplazamiento, incluye dos elementos de forma predeterminada. Uno incluye el texto Suéñalo y el otro incluye el emoji "guión ondulado" que funciona como un divisor.

Puedes agregar nuevos elementos o editar los actuales con tu propio texto.

Agregar nuevos elementos

Para agregar un artículo nuevo:

  1. Haz clic en Editar en la página con el bloque de desplazamiento, haz clic en el bloque y, a continuación, haz clic en el ícono de lápiz o en Editar.
  2. En la pestaña Contenido, haz clic en Agregar elemento.
  3. Esto crea un elemento nuevo con texto predeterminado.Para editar el texto, haz clic en el elemento de la lista y clic en el campo Texto.

Editar elementos actuales

Para editar, duplicar o eliminar elementos actuales, haz clic en el elemento en la pestaña Contenido del editor de bloques. Edita el texto en el campo o haz clic en DuplicarEliminar.

También puede eliminar elementos directamente desde la pestaña Contenido haciendo clic en el ícono de papelera.

Reorganizar los elementos

La lista de elementos de la pestaña Contenido establece el orden de desplazamiento del texto. Para reorganizar los elementos:

  1. Haz clic en Editar en la página con el bloque de desplazamiento, haz clic en el bloque y, a continuación, en el ícono de lápiz.
  2. En la pestaña Contenido, haz clic y mantén pulsado el ícono :: a la izquierda del título del elemento.
  3. Arrastra el elemento a donde desees que aparezca en la lista.
  4. Repite los pasos para los demás elementos hasta que la lista esté en el orden que prefieres.

Personalizar el diseño

En la pestaña Diseño del editor de bloques, puedes personalizar el aspecto del bloque de desplazamiento de varias maneras.Te recomendamos que pruebes con los diferentes ajustes hasta que encuentres una combinación que te guste.

Cada bloque de desplazamiento tiene su propia configuración de diseño. No puedes aplicar automáticamente la configuración a todos los bloques de desplazamiento de tu sitio.

Onda de texto

Puedes agregar una onda al texto, haciendo que el texto suba y baje verticalmente en el bloque, con los siguientes ajustes:

  • Intensidad de onda. Establece la altura vertical de la onda.La configuración del extremo izquierdo no tiene onda y el extremo derecho tiene una onda más alta.
  • Ancho de onda. Selecciona S, M, L... para una configuración personalizada.Con un ancho de onda más pequeño, se muestran más picos y valles de la onda en el bloque de desplazamiento.Con un ancho de onda mayor, esta puede aparecer como una pendiente larga y su pico puede no ser visible.

Este es un ejemplo de un bloque de desplazamiento con una intensidad de onda media y un ancho pequeño:

A_scrolling_block_with_the_text_Dream_It_that_goes_up_and_down_in_waves_.gif

Estilo y tamaño del texto

Establece el estilo y el tamaño del texto con estos ajustes:

  • Estilo de texto. Selecciona Párrafo o Encabezado.El texto sigue los estilos globales de párrafo o encabezado según tu preferenciaEsto establece la fuente del texto y otros ajustes de estilo, pero no el tamaño.
  • Tamaño del texto. Selecciona S, M, L... para una configuración personalizada.

Cambia el color del texto en los estilos del sitio. El color del texto sigue los ajustes de Color de párrafo o Color de encabezado bajo Desplazamiento en la combinación de colores de la sección, dependiendo de lo que selecciones para el estilo de texto.

Si agregas un color de fondo al bloque de desplazamiento, el texto sigue el Color de párrafo sobre fondo o el Color de encabezado sobre fondo bajo Desplazamiento.

Ten en cuenta que el emoji "guión ondulado" tiene un color establecido que no se puede personalizar.

Estilo de desplazamientos

Personaliza el comportamiento y la apariencia de los desplazamientos con estos ajustes:

  • Dirección. Establece el bloque para que se desplace hacia la izquierda o derecha.
  • Velocidad.  Establece la velocidad de desplazamiento en 0.5x, 1x o 2x.
  • Pausar al desplazar el cursor. Activa esta opción para hacer que el desplazamiento se detenga cuando los visitantes desplacen el cursor sobre el bloque.La animación no se detendrá mientras estés en modo Editar.
  • Difuminar en los bordes. Activa esta opción para hacer que el texto sea semitransparente en los bordes izquierdo y derecho del bloque.
  • Espaciado de elementos. Establece la distancia entre los elementos de texto del desplazamiento.

Otras opciones de estilo

Para personalizar el aspecto del bloque de desplazamiento:

  • Trazo: habilita una línea continua o punteada para delinear el bloque. Para líneas continuas y punteadas, establece el Color y Grosor del trazo. 
  • Modo de fusión: usa el menú desplegable para elegir una configuración de transparencia. Estos efectos son ideales si superpones un bloque de desplazamiento sobre una imagen u otro contenido visual.
  • Desenfoque: activa la opción para desenfocar el Elemento o el Fondo, 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.

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.