Cómo usar los componentes de Galería y de control deslizante de imágenes en Website Builder

¿Quieres mostrar varias imágenes en tu sitio web? Con los componentes galería e imagen slider de Website Builder, puedes insertar varias imágenes en una cuadrícula o ponerlas en una presentación de diapositivas. Esta guía te mostrará cómo añadir los componentes a tu página y ajustarlos como prefieras.


Insertar un componente en tu sitio

  1. Abre Website Builder desde el panel de control de one.com.
  2. Ve a Galería en el menú lateral izquierdo y selecciona una variante de galería.
  3. Arrastra el componente que quieras a tu espacio de trabajo y suéltalo donde quieras colocar tu galería o control deslizante de imágenes.
  4. Selecciona las imágenes que quieras insertar o cárgalas desde tu ordenador o una URL externa. Haz clic en "Añadir a la página" en la parte inferior de la ventana emergente.
  5. Ajusta el tamaño y la ubicación del componente a tu gusto.
  6. Haz clic en Configuraciones de galería/Configuraciones de control deslizante de imágenes en la parte superior del componente para ajustar las configuraciones de tu galería.
  7. Haz clic en Guardar y Publicar para que las imágenes sean visibles en tu sitio.

ezgif.com-gif-maker__17_.gif


Cambiar imágenes y agregar nuevas

Cuando haces clic en el componente insertado, aparecen dos pestañas: Configuraciones de Galería/Configuraciones del control deslizante de imágenes y Cambiar imágenes.

Haz clic en la pestaña Cambiar imágenes para cambiar las imágenes de tu galería. Puedes eliminar una imagen haciendo clic en el icono de la papelera en la esquina o editarla haciendo clic en el icono del lápiz. También puedes agregar nuevas imágenes a la galería haciendo clic en Añadir imágenes en la esquina superior derecha.

Nota: El título de la imagen también actúa como texto alternativo en estos componentes. Si quieres añadir un texto alternativo, puedes hacerlo en Título (alt) a la derecha, en la vista general de Ordenar y editar imágenes.

Screenshow showing the 'Sort & edit images' overview in the Gallery component.


Configuraciones de los componentes galería y control deslizante de imágenes

Al hacer clic en la pestaña Ajustes del componente, aparecerán dos menús. Aquí podrá modificar las siguientes opciones:

Componente de galería:

1 - Menú superior/inferior

  • Columnas - Ajusta el número de columnas.
  • Espaciado - Ajusta el espacio en blanco entre las imágenes.
  • Recortar - Marca esta casilla si quieres que las imágenes se recorten para que todas tengan el mismo tamaño en la galería.
  • Vista compacta - Marca esta casilla si quieres que las imágenes estén lo más cerca posible dentro de los márgenes azules.
  • Ancho completo - Marca esta casilla si quieres que la galería se extienda por todo el ancho de tu página.

 

2 - Menú flotante

  • Al hacer clic - Elige qué debe pasar cuando alguien haga clic en la imagen. Puedes elegir que no pase nada, mostrar una imagen más grande o abrir un enlace.
  • Subtítulos: Elige si quieres añadir subtítulos a las imágenes de la galería. Haz clic en "Administrar subtítulos" para introducir el texto y el texto alternativo. Elige si el subtítulo debe estar delineado a la izquierda, a la derecha o centrado. También puedes elegir el estilo del subtítulo: clásico, plantilla y personalizado.
  • Estilo de imagen: Aquí puedes cambiar la relación de aspecto de tu imagen, por ejemplo, a horizontal o vertical. También puedes añadir bordes y esquinas redondeadas.
  • Ancho completo : aquí, puedes ajustar todo el ancho de la galería para que esté fuera de los márgenes azules (ancho completo) o dentro de ellos (predeterminado).

Screenshot showing the Gallery component. Red, numbered dots mark the properties panel and the floating menu in the image.

Componente de control deslizante de imágenes:

1 - Menú superior/inferior

  • Columnas : Ajusta el número de columnas (1-5) en el control deslizante. En la captura de pantalla, hemos seleccionado tres.
  • Transición : elige entre un efecto de deslizamiento o de aparición gradual para la transición entre imágenes.
  • Recortar : Puedes recortar cada imagen para que tengan el mismo tamaño en el control deslizante. El recorte siempre estará activo si tienes varias imágenes (columnas) por diapositiva.
  • Velocidad : Elige la velocidad de transición de la imagen. El mínimo es 1 segundo y el máximo es 15.
  • Ancho completo : Elige si quieres mostrar tus imágenes a todo ancho. Esta función solo está disponible si tienes solo una columna de imágenes por diapositiva.

 

2. Menú flotante

  • Navegación : elige si las imágenes deben cambiar automáticamente y ajusta u oculta las flechas de navegación y el indicador.
  • Al hacer clic : Elige qué debe pasar cuando un cliente haga clic en una imagen. Puedes elegir que no pase nada, mostrar una imagen más grande o abrir un enlace.
  • Subtítulos : Elige si quieres que se muestren los subtítulos con las imágenes. Al marcar esta casilla, tendrás más opciones de personalización: añade subtítulos y elige la alineación y la ubicación.
  • Ancho completo : si solo tienes una columna, puedes ajustar el ancho del control deslizante para que esté fuera de los márgenes azules (ancho completo) o dentro de ellos (predeterminado).
Screenshot showing the image slider component. Red dots marked '1' and '2' point to the properties panel and the floating menu.

Artículos relacionados:

¿Fue útil este artículo?

¿No puedes encontrar lo que buscas?

Inicia un chat

Es la forma más rápida de ponerse en contacto, todos los días del año.

Llámanos

Chatea con nosotros de lunes a viernes de 9:00 a 16:00