Elegir el componente y moverte por el editor
El Slider Principal presenta una o varias diapositivas de imágenes y contenido. Es distinto de Productos, que muestra artículos del catálogo, y de Banner, que es una franja de anuncio.
El panel izquierdo Página sirve para seleccionar componentes; Añadir abre la biblioteca y Ajustes reúne las preferencias del editor y de la página. En Ajustes > Nivel de edición puedes elegir Básico o Avanzado. El inspector derecho muestra las opciones del elemento seleccionado: verifica siempre si estás viendo Slider Principal o un Slide antes de cambiar algo.
Si abriste Añadir por accidente, presiona Cancelar o selecciona un componente existente en el lienzo: saldrás de la inserción y podrás editarlo. Si abriste la biblioteca sin elegir primero una ubicación, selecciona el componente y después confirma una zona Agregar aquí; en escritorio también puedes arrastrarlo al lienzo. En modo Avanzado, una sección con varias columnas puede pedirte la Columna de destino.
Las flechas, los indicadores y la selección de una fila permiten cambiar de slide sin editar su contenido. Los controles Desktop, Móvil y Editar slide que aparecen sobre el lienzo son herramientas del editor y no se publican en la tienda. El zoom cambia la escala de trabajo, no el tamaño guardado del slider.
Opciones del slide: Contenido
Cada diapositiva tiene sus propios textos, imágenes y destino.
- Mostrar textos: muestra u oculta título, descripción y botón; al desactivarlo los textos permanecen guardados. Sirve para usar una imagen que ya contiene el mensaje.
- Título: mensaje principal del slide; puedes editarlo en el inspector o directamente en el lienzo.
- Descripción: texto de apoyo; déjalo vacío si la imagen y el título ya explican la propuesta.
- Área del enlace > Sin enlace: desactiva la navegación y el botón sin borrar el texto ni el destino que tenías configurados.
- Área del enlace > Todo el slide: permite abrir el destino al pulsar la superficie del slide; el texto del botón es opcional, por lo que también sirve para una imagen sin textos visibles.
- Área del enlace > Solo el botón: enlaza únicamente el botón; necesita un texto, un destino y Mostrar textos activado. Si ocultas los textos, el botón también queda oculto.
- Texto del botón: nombre visible de la acción, como
Ver productos; se edita como texto plano, incluido desde el lienzo cuando el botón está visible.
- Destino del slide: abre el selector de enlaces; un destino pendiente muestra un aviso junto al campo. Completa ese dato antes de probar la acción.
- Abrir en una pestaña nueva: conserva la página del slider abierta mientras abre su destino en otra pestaña; desactivado, el enlace se abre en la actual.
Formato del título y la descripción
Selecciona el fragmento que quieras cambiar y utiliza Negrita, Cursiva, Color del texto seleccionado o Tamaño del texto seleccionado. Los tamaños disponibles son Del diseño, Pequeño, Mediano, Grande y Muy grande; Del diseño vuelve al tamaño definido por el slider o por ese slide.
El color del fragmento se recupera con Usar color del diseño. Los saltos de línea se escriben desde el teclado; Mayús + Enter permite un salto dentro del mismo párrafo. Deshacer texto y Rehacer texto pertenecen al campo de texto activo; Deshacer cambios y Rehacer cambios de la barra superior recorren los cambios de la página.
Un fragmento con color o tamaño propio puede conservar ese formato aunque cambies el diseño general. Recupera Del diseño y Usar color del diseño en ese fragmento si quieres que vuelva a seguir los ajustes comunes.
Elegir el destino de una acción
En Destino del slide puedes elegir Páginas del Sitio, Productos, Categorías o Marcas, buscar el elemento y seleccionarlo. Para llevar al catálogo completo, entra a Páginas del Sitio y elige Todos los productos, que utiliza /products.
URL Personalizada / Externa permite escribir una ruta interna, como /contacto, o una dirección externa completa y presionar Aplicar. También admite anclajes como #contacto, correo con mailto: y teléfono con tel:; el anclaje debe existir en la página de destino para desplazar al visitante a esa sección. El campo admite hasta 180 caracteres y avisa cuando la dirección no es válida.
Seleccionar un destino no crea automáticamente la página ni modifica sus permisos de publicación. Comprueba que el destino exista y sea accesible para los clientes.
Opciones del slide: Imágenes
- Imagen para escritorio: se utiliza en pantallas de 1024 px o más; Agregar imagen abre la biblioteca, Cambiar la sustituye y Quitar retira esa imagen del slide.
- Imagen para tablet y móvil: alternativa utilizada en pantallas menores a 1024 px, incluida tablet. No necesitas otra imagen si la de escritorio funciona bien en esos tamaños.
- Respaldos de imagen: si falta la alternativa, se utiliza la de escritorio; si falta la de escritorio, se utiliza la alternativa. El inspector indica Usará la imagen de escritorio o Usará la imagen alternativa, por lo que quitar una de ellas no necesariamente deja el slide sin imagen.
- Proporción actual y Recomendado: orientan las dimensiones de la imagen según el formato elegido; usa archivos nítidos y revisa el resultado en cada dispositivo.
- Ajuste de imagen > Cubrir: llena el espacio de la imagen y puede recortar sus bordes; funciona bien con fotografías cuyo sujeto admite ese recorte.
- Ajuste de imagen > Contener: conserva la imagen completa; puede dejar zonas libres con el fondo del slide cuando las proporciones no coinciden. Es útil para imágenes con texto incorporado que no debe cortarse.
- Dispositivo del encuadre: permite configurar Escritorio, Tablet o Móvil; no cambia por sí mismo la vista del lienzo, que se elige en su barra superior.
- Posición de la imagen: coloca el encuadre en Centro, Arriba, Abajo, Izquierda o Derecha; resulta especialmente útil con Cubrir.
- Usar encuadre del slider: elimina los ajustes particulares de encuadre de ese slide y vuelve al encuadre común.
- Imagen decorativa: evita anunciar la imagen como contenido informativo; la descripción escrita queda guardada aunque el campo esté desactivado.
- Descripción de la imagen: explica su información relevante; incluye el texto incorporado en la imagen si no está repetido en el título o la descripción del slide.
Sin imágenes, un slider nuevo presenta los textos sobre un fondo de la tienda. Si quieres retirar todas las imágenes de un slide, revisa y quita ambas versiones.
Opciones del slider: Diseño
Formato y altura
- Altura > Adaptable al texto: parte de una altura mínima y puede crecer para acomodar el contenido. Es una buena opción para titulares y descripciones de distintas extensiones.
- Altura mínima: Pequeño parte de 320 px en escritorio, 280 en tablet y 240 en móvil; Mediano, de 480, 400 y 320; Grande, de 640, 540 y 440. Son mínimos del slide, no límites para el texto ni alturas totales incluyendo los espacios de la sección.
- Altura > Por proporción: usa el ancho disponible y la proporción elegida como referencia de altura; revisa que los textos y la imagen encajen en ese formato.
- Altura > Según la imagen: adapta la altura a la imagen utilizada; slides con proporciones distintas pueden tener alturas diferentes. Sin imagen, sigue habiendo una composición para los textos.
- Dispositivo de la proporción: elige qué tamaño de pantalla estás configurando; después cambia Proporción de imagen para ese dispositivo.
- Proporción de imagen: admite 1:1, 4:3, 4:5, 16:9, 2:1, 21:9 y 32:9. El primer número representa el ancho y el segundo el alto: 32:9 es muy panorámica y 4:5 es vertical.
- Extender a los bordes de la pantalla: solicita una presentación que alcance los bordes de la pantalla; desactivado, los sliders nuevos utilizan el ancho disponible de su contenedor. En una sección simple de una columna ya ocupan todo el ancho disponible.
- Esquinas: Rectas, Suaves, Redondeadas, Amplias o Muy amplias controlan la curva de los bordes del slider.
Un slider nuevo empieza con altura Adaptable al texto, mínimo Mediano, proporciones 2:1 en escritorio, 16:9 en tablet y 1:1 en móvil, y esquinas Rectas. La proporción también sirve como referencia para la imagen cuando el texto móvil se coloca debajo.
Encuadre y composición del texto
El grupo Encuadre del slider define el ajuste y la posición de imagen comunes a sus slides, con las mismas opciones explicadas en Imágenes. Un slide con encuadre propio conserva esa excepción hasta que uses Usar encuadre del slider.
- Alineación: Izquierda, Centro o Derecha ubican horizontalmente los textos y su acción.
- Posición vertical: Arriba, Centro o Abajo ubican el contenido dentro del slide cuando hay espacio disponible.
- Ancho del texto: Compacto, Medio o Amplio limitan la anchura de lectura; un ancho menor produce más líneas.
- Tamaño del título: Pequeño, Mediano o Grande establecen el tamaño general del título; el formato aplicado a fragmentos puede tener su propio tamaño.
- Texto en móvil > Sobre la imagen: mantiene los textos encima de la imagen; revisa el contraste y que no oculten información importante.
- Texto en móvil > Debajo de la imagen: separa la imagen y un bloque de texto de altura natural; se aplica en móvil, no en tablet. Sin imagen no reserva una zona de imagen vacía.
- Estilo del botón: Principal y Secundario usan las variantes de color de la tienda; Con borde destaca el contorno; Enlace lo presenta subrayado; Clásico conserva la apariencia blanca y redondeada del botón anterior.
Colores y contraste
- Oscurecer imagen: de 0 % a 100 %, controla la intensidad de la capa sobre la imagen; solo se aplica cuando hay imagen.
- Fondo: color del slide, visible sin imagen, debajo del contenido móvil o en las zonas libres de una imagen contenida.
- Texto: color general del título y la descripción; revisa también cualquier fragmento con color propio.
- Oscurecimiento: color de la capa que modifica el contraste de la imagen; trabaja junto con Oscurecer imagen.
- Fondo del botón y Texto del botón: personalizan la acción independientemente del fondo y texto del slide.
Presiona la muestra de color, usa el selector o escribe un Código de color de seis caracteres, como #2563EB, y cierra con Listo. Usar color de la tienda recupera el valor automático del slider; no cambia la paleta global. En un slide, Usar color del slider recupera el color común.
Navegación y movimiento
- Mostrar flechas: permite avanzar y retroceder entre slides; Flechas también en móviles añade esos controles en pantallas móviles.
- Mostrar indicadores: presenta los puntos con los que el visitante puede ir directamente a un slide.
- Reproducción automática: cambia los slides sin intervención del visitante; está desactivada en sliders nuevos y siempre detenida en el editor.
- Intervalo entre slides: tiempo de espera entre cambios, entre 0,5 y 60 segundos; se aplica al salir del campo o pulsar Enter y se conserva al apagar la reproducción.
Con un único slide no aparecen controles de navegación ni reproducción. Con varios slides y reproducción automática, el visitante puede Pausar slider y Reanudar slider; las interacciones pueden detenerla y se respeta la preferencia de movimiento reducido del dispositivo. Prueba este comportamiento en Vista previa, no esperando que el lienzo avance solo.
Personalizar un slide sin cambiar los demás
En Slide > Diseño se pueden modificar Composición del texto y Colores y contraste solo para esa diapositiva. El encuadre particular se configura en Slide > Imágenes; el formato general, las proporciones y la navegación se ajustan desde Slider Principal > Diseño.
Los valores sin personalizar siguen el diseño del slider. Si cambias una opción de un slide, esa opción deja de seguir el ajuste común; Restablecer en un grupo elimina sus personalizaciones y vuelve a usar el diseño del slider para todo ese grupo. No borra textos, imágenes ni destinos.
Visibilidad y espacio alrededor del slider
Mostrar en escritorio, Mostrar en tablet y Mostrar en móvil, en Visibilidad del slider, controlan dónde aparece todo el componente. Son distintos de Mostrar textos, que afecta al contenido de un solo slide.
En modo Básico, al final de Diseño, Separación superior e inferior controlan el espacio exterior; Aire vertical y Aire lateral añaden relleno alrededor del componente. Aplicar a > Un valor comparte el espaciado entre tamaños y Por dispositivo permite editar el de la vista activa; al volver a Un valor, se comparte el valor que estás viendo. Restablecer espaciado recomendado recupera los espacios iniciales, no el contenido.
En Avanzado, los ajustes generales del bloque también ofrecen Color de fondo, imagen de Fondo y su ajuste, capa y opacidad, Borde y sombra, Padding (espacio interno) y Margen (espacio externo) por lado. Esos ajustes pertenecen al contenedor del componente: para cambiar las imágenes de las diapositivas utiliza Slide > Imágenes, y para cambiar sus colores utiliza el diseño del slider o del slide.
Cómo comprobar que quedó listo
- En el editor, selecciona y recorre cada slide en Escritorio, Tablet y Móvil; espera a que carguen las imágenes y comprueba textos completos, encuadre, contraste y ausencia de desbordamientos.
- En Vista previa, prueba la superficie y el botón según Área del enlace, confirma el destino y la apertura en la pestaña elegida, y revisa que los slides sin enlace no naveguen.
- Si tienes varios slides, prueba flechas, indicadores y reproducción; con autoplay, comprueba pausa y reanudación y que el intervalo permita leer el mensaje.
- Después de Publicar cambios, abre la página pública y confirma que aparecen los mismos contenidos y los dispositivos habilitados.
Alcance y límites
Un slider puede funcionar con un único slide. Los sliders nuevos completamente vacíos no se muestran en la tienda, aunque sigan siendo editables en el lienzo; los antiguos pueden conservar su presentación de vacío y otros ajustes históricos.
Un slider creado antes de las opciones actuales puede mantener proporciones, reproducción, enlaces y botones diferentes de los valores iniciales de uno nuevo. Seleccionarlo no aplica automáticamente el diseño nuevo: revisa sus ajustes antes de modificarlos y evita recrearlo si solo necesitas cambiar una imagen o un texto.
El slider presenta contenido y enlaces: escribir una oferta no crea un descuento en el catálogo. Editar imágenes o mensajes tampoco programa su publicación ni su retirada automática.
Tutoriales relacionados