Slider

Este componente es uno de los tipos de secciones más usados y aplicados en sitios web. Te permite añadir y mostrar varios subcomponentes dentro de él, llamados Slide, con múltiples contenidos y diversas opciones para personalizarlos.

Configuración del componente

Al hacer clic en el nombre del componente encontrarás opciones generales para personalizarlo, las cuales determinarán cómo se verá y se comportará la sección. Las opciones disponibles para este componente son las siguientes:

Ancho

Permite definir el ancho máximo al que el componente se ajustará en la ventana del navegador.

Puedes leer más sobre cómo esta opción afectará al componente en esta página.

Nota: el tamaño de las imágenes que puedes subir dentro de cada Slide variará según la opción que elijas aquí. Estas se explican en detalle en esta sección.

Opciones del Slider

Las siguientes opciones te permitirán personalizar su comportamiento:

• Autoplay: permite que el Carousel se mueva automáticamente de un elemento al siguiente.
  • Velocidad de Autoplay: permite definir el tiempo que tardará en ejecutarse la opción anterior.
• Flechas: permite mostrar flechas debajo del Carousel para que los usuarios lo controlen.
  • Flechas al pasar el cursor: permite mostrar las flechas solo cuando el usuario coloca el cursor sobre el componente.
• Puntos: permite mostrar puntos debajo del Carousel para que los usuarios lo controlen.
• Color de navegación personalizado: permite definir manualmente el color de los elementos de navegación.

Mostrar contenido de Slides

Al habilitar esta opción:

• Los Slides mostrarán elementos de contenido (por ejemplo, Título, descripción, etc.).
• Varias opciones serán visibles dentro de la configuración del componente para que puedas personalizar cada uno de esos elementos.
• Varias opciones serán visibles en cada Slide, para personalizar manualmente sus aspectos.
• Las imágenes de los slides se usarán como fondos; por lo tanto, se adaptarán según el ancho y alto que definas.

Las opciones que se mostrarán en el panel principal del componente serán las siguientes:

• Altura: permite definir una altura mínima para todo el Slider, en base a estas opciones:
  • Ajustar al contenido: la altura de la sección se determinará según el contenido que añadas dentro del componente, como Título, Descripción, etc.
  • Pequeña: la altura de la sección será un mínimo de 420px.
  • Mediana: la altura de la sección será un mínimo de 560px.
  • Grande: la altura de la sección será un mínimo de 720px.
  • Navegador: la altura de la sección tomará, como mínimo, la altura de la ventana del navegador donde se esté viendo tu tienda, por lo que puede variar entre dispositivos.
• Habilitar zoom de imagen al pasar el cursor: las imágenes aumentarán su tamaño cuando se coloque el cursor sobre ellas.
• Opciones de elementos: dentro de este grupo encontrarás opciones para personalizar elementos como título, subtítulo y descripción/texto, que se detallan en esta página.
• Opciones de ícono: dentro de este grupo podrás habilitar un ícono para todos los slides y, al hacerlo, se mostrarán varias opciones para personalizar su apariencia.

Nota 1: Nos referimos a una altura mínima, porque variará según la cantidad y/o extensión del contenido que añadas en cada slide.

Nota 2: El tamaño de las imágenes que puedes subir dentro de cada Slide variará según la combinación de ancho y alto que definas. Estas se explican en detalle en esta sección.

Apariencia

Este grupo contiene las siguientes opciones para personalizar el componente:

• Margen superior: permite controlar el margen superior de la sección.
• Margen inferior: permite controlar el margen inferior de la sección.
• Colores del contenido: permite elegir el Pack de colores para el componente.

Animaciones

La opción Personalizar opciones permite ajustar las animaciones para este componente específico. Puedes leer cuáles están disponibles en esta página.

---

---

Configuración del subcomponente

Como se mencionó antes, el subcomponente de un Slider se llama Slide, y puedes añadir tantos como quieras. Las opciones para este subcomponente son las siguientes:

Opciones de fondo

Este grupo contiene varias opciones para personalizar cómo se verá y comportará cada slide:

Tipo de medio

Permite definir qué tipo de elemento de media se usará como fondo del slide:

• Imagen: muestra dos opciones de imagen para subirlas. Al subir la primera, aparecerá otra para dispositivos móviles. Si no, se usará la anterior en todos los dispositivos.
• Video: muestra una opción de Origen del video para añadir y usar un video desde una URL externa o un video de Youtube. Al hacerlo, aparecerá una segunda opción para subir otro distinto para dispositivos móviles.

Al elegir Imagen, se mostrarán las siguientes opciones para definir aspectos de estas:

• Opciones de escritorio: permite definir la posición horizontal y vertical de la imagen en dispositivos de escritorio.
• Opciones móviles: permite definir la posición horizontal y vertical de la imagen en dispositivos móviles.

Nota 1: La posición vertical y horizontal es más notoria cuando las imágenes son más grandes que el área del slide; por ejemplo, si tiene una dimensión vertical y la imagen subida es rectangular.

Nota 2: Escritorio considerará dispositivos con un ancho igual o mayor a 576px. Móvil será para dispositivos con un ancho igual o menor a 575px.

Al elegir Video, se centrará horizontal y verticalmente y cubrirá toda el área del slide.

Superposición

Permite definir la opacidad (o transparencia) de este elemento. Puedes leer más sobre esto en esta página.

Opciones de enlace

A continuación, encontrarás varias opciones para añadir un Enlace al slide:

• Enlace: permite añadir un enlace a cualquier contenido de la tienda, como categorías, productos, páginas, etc.
• Mostrar imagen del enlace: permite mostrar la imagen del enlace seleccionado (para productos, categorías y páginas), si fue añadida desde el panel de administración.
• Texto del enlace: texto que se mostrará dentro del botón.
• Habilitar como enlace externo: si está habilitado, el enlace se abrirá en una nueva pestaña del navegador.
• Enlace como botón: si está habilitado, se mostrará un botón junto con el contenido del slide.
  • Estilo contorno: permite que el botón tenga un borde alrededor y un fondo transparente.
  • Flecha en el botón: muestra un ícono de flecha en el lado derecho del texto del botón.

Opciones de contenido

En este grupo encontrarás varias opciones para añadir contenido a un slide, que solo serán visibles en la tienda si habilitaste la opción Mostrar contenido de Slides dentro de la configuración principal del componente:

• Colores del contenido: permite definir el Pack de colores a usar en el slide, lo que afectará los colores de todos los elementos dentro de él.
• Ancho máximo en escritorio: permite definir la cantidad máxima de espacio hasta donde el contenido se estirará dentro del slide.
• Los siguientes elementos de contenido estarán disponibles para usar:
  • Subtítulo
  • Título
  • Descripción
• Escritorio: permite definir la alineación y posición del contenido en dispositivos de escritorio.
• Móvil: permite definir la alineación y posición del contenido en dispositivos móviles.

Nota: Para las opciones de alineación y posicionamiento, la medida de Escritorio considerará dispositivos con un ancho igual o mayor a 768px; para Móvil será para dispositivos con un ancho igual o menor a 767px.

Opciones de imagen del contenido

Este grupo contiene opciones para mostrar una imagen junto al contenido del slide:

• Imagen: se usará para dispositivos de escritorio y también para móviles si no se sube la correspondiente a móvil.
• Tamaño en escritorio: permite definir el ancho de la imagen (en porcentaje) según el espacio disponible: Pequeño (80%), Mediano (90%), Grande (100%).
• Imagen (móvil): se mostrará solo en dispositivos móviles.
• Posición de la imagen: permite definir la posición en la que se ubicará la imagen, opuesta al contenido del slide:
  • Izquierda: en dispositivos móviles, se mostrará antes del contenido del slide.
  • Derecha: en dispositivos móviles, se mostrará después del contenido del slide.
• Respetar orden en móvil: será visible si Posición de la imagen es igual a Izquierda, y permite forzar que el tema posicione la imagen antes del contenido del slide en dispositivos móviles. Si se desactiva, la imagen se mostrará después.

---

---

Tamaños de imágenes

Las dimensiones sugeridas listadas a continuación variarán según si habilitas la opción Mostrar contenido de Slides en la configuración principal del componente:

Show slides content: Enabled

Ancho	Alto	Dimensión para Escritorio (en píxeles)	Dimensión para Móvil (en píxeles)
Pequeño	Pequeño	1320 × 420	551 × 420
Pequeño	Mediano	1320 × 560	551 × 560
Pequeño	Grande	1320 × 720	551 × 720
Pequeño	Navegador	1320 × (variable)	551 × (variable)
Pequeño	Ajustar al contenido	1320 × (variable)	551 × (variable)
Mediano	Pequeño	1620 × 420	575 × 420
Mediano	Mediano	1620 × 560	575 × 560
Mediano	Grande	1620 × 720	575 × 720
Mediano	Navegador	1620 × (variable)	575 × (variable)
Mediano	Ajustar al contenido	1620 × (variable)	575 × (variable)
Grande	Pequeño	1920 × 420	575 × 420
Grande	Mediano	1920 × 560	575 × 420
Grande	Grande	1920 × 720	575 × 720
Grande	Navegador	1920 × (variable)	575 × (variable)
Grande	Ajustar al contenido	1920 × (variable)	575 × (variable)
Extra grande	Pequeño	2220 × 420	575 × 420
Extra grande	Mediano	2220 × 560	575 × 560
Extra grande	Grande	2220 × 720	575 × 720
Extra grande	Navegador	2220 × (variable)	575 × (variable)
Extra grande	Ajustar al contenido	2220 × (variable)	575 × (variable)
Ancho del navegador	Pequeño	Ancho: mínimo sugerido 2400 px / Alto: 420 px	575 × 420
Ancho del navegador	Mediano	Ancho: mínimo sugerido 2400 px / Alto: 560 px	575 × 560
Ancho del navegador	Grande	Ancho: mínimo sugerido 2400 px / Alto: 720 px	575 × 720
Ancho del navegador	Navegador	Ancho: mínimo sugerido 2400 px / Alto: variable	575 × (variable)
Ancho del navegador	Ajustar al contenido	Ancho: mínimo sugerido 2400 px / Alto: variable	575 × (variable)

Nota 1: Al elegir Navegador dentro de la opción Altura, la dimensión necesaria debería ser un mínimo de ciertos píxeles considerando dispositivos muy grandes, para que se visualice correctamente.

Nota 2: Al elegir Ajustar al contenido dentro de la opción Altura, la dimensión necesaria debería considerar la altura del Slide más alto que hayas añadido.

Show slides content: Disabled

Solo hacemos referencia al Ancho de la imagen en esta tabla; su Alto dependerá de qué tan altas sean las imágenes que subas:

Ancho	Imagen de escritorio (en píxeles)	Imagen móvil (en píxeles)
Grid	Mínimo sugerido: 1320	Máximo sugerido: 551
Mediano	Mínimo sugerido: 1620	Máximo sugerido: 575
Grande	Mínimo sugerido: 1920	Máximo sugerido: 575
Extra grande	Mínimo sugerido: 2220	Máximo sugerido: 575
Ancho total	Mínimo sugerido: 2400	Máximo sugerido: 575

---

---