Medios: deslizador

Utilice el Regulador tipo de contenido para agregar una presentación de imágenes a la Page Builder stage. Puede cargar imágenes nuevas o elegir imágenes existentes de la galería o del catálogo de productos. Se puede configurar un control deslizante para que se reproduzca automáticamente o se controle manualmente con los botones de navegación. Para asociar el control deslizante a una promoción específica, consulte Bloque dinámico.

Regulador de medios en la tienda {width="700" modal="regular"}

NOTE
Si está realizando cambios importantes en Page Builder contenido, se recomienda aumentar el Duración de sesión de administrador para evitar que se agote el tiempo de espera de la sesión mientras trabaja.

Cajas de herramientas

Cuando se trabaja con el tipo de contenido Regulador, se agregan y editan diapositivas individuales y el contenedor deslizante que contiene una o más diapositivas. Cada diapositiva tiene su propia caja de herramientas que se utiliza para diseñar diapositivas en la Page Builder escenario.

Cuadro de herramientas de diapositiva individual

Cuadro de herramientas de diapositiva individual {width="500" modal="regular"}

Herramienta
Icono
Descripción
Mover
Icono Mover {width="25"}
Mueve la diapositiva a otra posición en el control deslizante.
(etiqueta)
Diapositiva #
Identifica el número de la diapositiva actual.
Configuración
Icono de configuración {width="25"}
Abre el Edit Slide, donde puede cambiar las propiedades de la diapositiva actual.
Duplicar
Icono Duplicar {width="25"}
Realiza una copia de la diapositiva actual.
Eliminar
Icono Eliminar {width="25"}
Elimina la diapositiva actual del regulador.

Cuadro deslizante

Herramienta
Icono
Descripción
Mover
Icono Mover {width="25"}
Mueve el control deslizante a otra posición del escenario.
(etiqueta)
Slider
Identifica el contenedor del control deslizante.
Configuración
Icono de configuración {width="25"}
Abre el Edit Slider, donde puede cambiar las propiedades del vídeo y del contenedor.
Hide
Icono Ocultar {width="25"}
Oculta el control deslizante actual.
Mostrar
Mostrar icono {width="25"}
Muestra el control deslizante oculto.
Duplicar
Icono Duplicar {width="25"}
Realiza una copia del control deslizante.
Eliminar
Icono Eliminar {width="25"}
Elimina el control deslizante del escenario.
NOTE
Los elementos ocultos se almacenan en la base de datos y son invisibles para los clientes. Sin embargo, estos elementos son visibles para los motores de búsqueda y otros bots que rastrean el sitio. También se devuelven como parte del contenido si se solicitan a través de una llamada de API con un atributo de invisibilidad, a menos que los elimine del escenario.

Agregar una diapositiva individual

  1. Abra la página, el bloque o el bloque dinámico donde desee colocar el control deslizante y expanda el Content sección.

  2. En el Page Builder panel, expandir Media y arrastre un Slider marcador de posición a una fila, columna o ficha del escenario.

    En el ejemplo siguiente, el color de fondo de la fila es amarillo (#fffd16).

    Arrastrar el control deslizante al escenario {width="600" modal="regular"}

    El contenedor del deslizador se muestra en el escenario con una sola diapositiva vacía.

  3. Haga clic en el contenedor del control deslizante para mostrar el editor de texto e introduzca el contenido para la primera diapositiva.

    También puede incluir contenido de titular más complejo mediante el Contenido configuración.

  4. Haga clic en el punto de navegación situado en la parte inferior del control deslizante para mostrar el cuadro de herramientas de la diapositiva individual y seleccione Configuración ( Icono de configuración {width="20"} ) icono.

    Los deslizadores tienen dos cajas de herramientas. Asegúrese de utilizar la caja de herramientas de diapositivas situada en la parte inferior.

  5. Complete la configuración según sea necesario en las siguientes secciones:

  6. Cuando termine, haga clic en Save para aplicar la configuración de y volver a Page Builder workspace.

Agregar más diapositivas

En las secciones siguientes se describe una serie de pasos para comenzar con una diapositiva individual y crear un control deslizante adaptable que incluya características y vínculos a productos específicos. Si todavía no tiene una diapositiva individual, siga las instrucciones anteriores para agregar una diapositiva individual al escenario.

Para agregar diapositivas, utilice uno o una combinación de los métodos siguientes:

Método 1: duplicar una diapositiva existente

Puede ahorrar tiempo duplicando una diapositiva que ya se haya configurado con la configuración necesaria.

  1. Haga clic en el punto de navegación situado debajo de la diapositiva para mostrar el cuadro de herramientas y elegir Duplicar ( Icono Duplicar {width="20"} ) icono.

    Duplicación de una diapositiva {width="500" modal="regular"}

  2. Haga clic en el punto de navegación de la nueva diapositiva y para mostrar el cuadro de herramientas y elegir Configuración ( Icono de configuración {width="20"} ) icono.

  3. Modifique la configuración, según sea necesario, según las siguientes secciones:

  4. Cuando termine, haga clic en Save para aplicar la configuración de y volver a Page Builder workspace.

Método 2: añadir una nueva diapositiva en blanco

  1. Pase el ratón sobre el contenedor del deslizador situado en la parte superior para mostrar el cuadro de herramientas y seleccione Añadir ( Icono Agregar {width="20"} ) icono.

    Agregar una diapositiva en blanco {width="500" modal="regular"}

    Se agrega una nueva diapositiva en blanco con su propio punto de navegación y cuadro de herramientas al control deslizante y se muestra en el escenario.

    Nueva diapositiva con caja de herramientas {width="500" modal="regular"}

  2. Haga clic en el punto de navegación de la nueva diapositiva y para mostrar el cuadro de herramientas y elegir Configuración ( Icono de configuración {width="20"} ) icono.

  3. Modifique la configuración, según sea necesario, según las siguientes secciones:

  4. Cuando termine, haga clic en Save en la esquina superior derecha para cerrar el Edit Slide ​página.

Agregar un widget en una diapositiva

Puede añadir cualquiera tipo de widgets a la diapositiva en un Page Builder Realice la fase siguiendo estos pasos:

  1. Creación del widget que desee ver en una diapositiva.

  2. Abra la página, el bloque o el bloque dinámico donde desee colocar el control deslizante y expanda el Content sección.

  3. En el Page Builder panel, expandir Media y arrastre un Slider marcador de posición a una fila, columna o ficha del escenario.

  4. Haga clic en el contenedor del control deslizante para mostrar el editor de texto y haga clic en Insertar widget ( Icono Insertar widget {width="20"} ) icono.

  5. Seleccione el Widget Type lo necesitas.

  6. Especifique la configuración, que es diferente según el tipo de widget

    Ejemplo de inserción de un widget en la diapositiva {width="600" modal="regular"}

  7. Cuando termine, haga clic en Insert Widget en la esquina superior derecha.

  8. Modifique el resto de configuraciones según sea necesario.

  9. Cuando termine, haga clic en Save en la esquina superior derecha.

    Ejemplo de widget insertado en la diapositiva {width="600" modal="regular"}

Ver cada diapositiva

Para mostrar cada diapositiva en el escenario, haga clic en el siguiente punto debajo de la diapositiva mostrada actualmente.

Regulador completado {width="500" modal="regular"}

La diapositiva del ejemplo anterior tiene una imagen de fondo, una imagen móvil transparente y una imagen en línea que se ha agregado desde el editor de texto. Esta técnica funciona bien en dispositivos móviles al desactivar la imagen de fondo y mostrar solo la imagen en línea más pequeña. La diapositiva de producto de este ejemplo tiene la siguiente configuración adicional:

Opción
Ejemplo de configuración
Appearance
Collage Right
Background Color
#ffffff (Blanco)
Background Image
La imagen de esta diapositiva se guardó desde la página de producto y se cargó en la galería.
Mobile Background Image
La imagen de fondo móvil es una imagen transparente con un cuadrado de 10 píxeles. El uso de una imagen en blanco para móviles reemplaza eficazmente la imagen de fondo estándar con una imagen invisible.
Background Size
Auto
Message Text
Minerva LumaTech™ V-Tee (Alinear al centro) con la imagen insertada a una escala del 40% (Alinear al centro)
Link
Product
Show Button
Always
Button Text
Buy Now
Show Overlay
Never Show
Alignment
Center (para alinear el botón)
Border
Solid
Border Color
#000000 (Negro)
Border Width
1 px

Cambiar la configuración de diapositiva individual

  1. Cambie la presentación del control deslizante en el escenario y vea la diapositiva que desee cambiar.

  2. En el cuadro de herramientas de diapositivas individual, elija la opción Configuración ( Icono de configuración {width="20"} ) y complete la configuración, según sea necesario, según las secciones siguientes.

  3. En la esquina superior derecha, haga clic en Save para aplicar la configuración de y volver a Page Builder workspace.

Appearance

  1. Elija uno de los siguientes tipos de colocación de diapositivas:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
    Tipo Descripción
    Poster Centra el contenido de la diapositiva en el contenedor del control deslizante. Si se utiliza, la superposición amplía la anchura completa del control deslizante.
    Collage Left Coloca el contenido de la diapositiva en un área definida del lado izquierdo del contenedor del control deslizante. Si se utiliza la superposición, solo se cubre el área definida.
    Collage Center Coloca el contenido de la diapositiva en un área definida centrada en el contenedor del control deslizante. Si se utiliza la superposición, solo se cubre el área definida.
    Collage Right Coloca el contenido de la diapositiva en un área definida en el lado derecho del contenedor del control deslizante. Si se utiliza la superposición, solo se cubre el área definida.

    Posición de deslizamiento {width="600" modal="regular"}

  2. Introduzca el Slide Name.

    Cuando se trabaja en modo de edición, el nombre de la diapositiva aparece como información sobre herramientas encima del punto de navegación. El nombre de la diapositiva no es visible desde la tienda.

    Nombre de la diapositiva en la navegación {width="500" modal="regular"}

  3. Introduzca el Minimum Height para la diapositiva.

    La altura mínima puede ser un número con cualquier unidad CSS válida (como 100px, 50%, 50em, 100vh) o un cálculo (como 100vh - 237px).

    Por ejemplo, puede establecer la altura mínima de la diapositiva para cubrir toda la altura de la página y, a continuación, utilizar imágenes y vídeos de fondo para obtener opciones de diseño atractivas.

    note note
    NOTE
    Cuando la diapositiva está ajustada a la altura completa de la página (100 vh), el control deslizante que contiene la diapositiva también amplía la altura completa de la página para ajustarse a la altura de la diapositiva.

Background

Existen muchas opciones para definir la visualización de fondo de una diapositiva. Puede aplicar un color simple o una imagen de fondo, y administrar efectos más sofisticados.

Background Color

Especifique el color de fondo eligiendo una muestra, haciendo clic en el selector de color o introduciendo un nombre de color válido o un valor hexadecimal equivalente. Esta configuración determina el color de fondo de la fila. También puede ajustar la opacidad del color.

Sin color (predeterminado) {width="200"}

Puede establecer el valor de una de las tres maneras siguientes:

  • Un nombre de color predefinido, como White
  • El valor hexadecimal del color, como #ffffff
  • El valor de rgba para el color, con un porcentaje de opacidad, como rgba(255, 255, 255, 0.75)

Si desea elegir un color, haga clic en la muestra a la izquierda del Sin color cuadro.

Selección de una muestra de color {width="600" modal="regular"}

Si hace clic en el cuadro de color para abrir de nuevo el selector de color, el cuadro situado debajo del control deslizante mostrará los valores actuales de rojo, verde, azul y alfa (rgba). El último número indica el porcentaje de opacidad actual como decimal. Puede utilizar el control deslizante para ajustar la opacidad o introducir el valor decimal deseado.

Estableciendo opacidad de color de fondo {width="600" modal="regular"}

NOTE
Page Builder también admite una capa de transparencia, o canal alfa, en imágenes de fondo que pueden utilizarse para crear fondos con distintos grados de opacidad.

Background Type

Un tipo de fondo puede ser una imagen o un vídeo. Page Builder el valor predeterminado es Image y muestra varios ajustes de imagen. Si selecciona Video, Page Builder cambia la configuración de la imagen por la configuración del vídeo. Ambas configuraciones de tipo de fondo se describen en las secciones siguientes.

Tipo de fondo {width="400"}

Configuración del tipo de imagen

Si establece la variable Background Type ​hasta Image, utilice la siguiente configuración para definir la visualización de la imagen de fondo.

Titular con imagen de fondo {width="600" modal="regular"}

  • Background Image - Si es necesario, utilice las herramientas proporcionadas para elegir una imagen de fondo para aplicarla al titular:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Herramienta Descripción
    Upload Carga un archivo de imagen desde el equipo local a la galería y, a continuación, lo aplica como imagen de fondo para el titular.
    Select from Gallery Le pide que elija una imagen existente de la galería como imagen de fondo para el titular.
    Icono de cámara {width="25"} Permite arrastrar la imagen al mosaico de la cámara o navegar a la imagen en el sistema de archivos local.
  • Background Mobile Image : Si es necesario, utilice las mismas herramientas para elegir una imagen de fondo diferente para utilizarla en la visualización en dispositivos móviles.

  • Background Size - Elija la escala de la imagen de fondo en relación con la anchura del titular:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Opción Descripción
    Cover La imagen de fondo cubre la anchura completa del titular.
    Contain La imagen de fondo está limitada a la anchura del área de contenido.
    Auto Aplica el tamaño de la hoja de estilos actual.

    Tamaño de fondo {width="400"}

  • Background Position - Elija cómo se ancla la imagen de fondo en relación con el banner:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Punto de ancla Posición
    Top Izquierda/Centro/Derecha
    Center Izquierda/Centro/Derecha
    Bottom Izquierda/Centro/Derecha

    El punto de ancla es como un pin de inserción que adjunta la imagen al titular en la posición de fondo especificada.

  • Background Repeat - Si desea repetir la imagen de fondo para rellenar el espacio, cambie este ajuste Yes.

Configuración del tipo de vídeo

Si establece la variable Tipo de fondo hasta Video, utilice la siguiente configuración para definir la visualización de la imagen de fondo.

  • Video URL : introduzca una URL de vídeo válida. Las direcciones URL de vídeo válidas pueden ser vínculos a:

    • Vídeos de YouTube: https://youtu.be/CoDhMRUUjeI
    • Vídeos de Vimeo: https://vimeo.com/190156113
    • Archivos de vídeo válidos (.mp4 se recomienda): https://myvideos.com/spiral.mp4

    URL de vídeo de fondo {width="500"}

  • Overlay Color - Seleccione un color para aplicar un tinte transparente al vídeo.

  • Infinite Loop - Configurado como No para que el vídeo se reproduzca una vez y se detenga. Cuando esta opción se establece en Yes (valor predeterminado), el vídeo se repite en un bucle infinito.

  • Lazy Load - Configurado como No para que el vídeo se cargue con la página, incluso cuando no esté visible. Cuando esta opción se establece en Yes (opción predeterminada), el vídeo se carga desde el origen solo cuando está visible en la pantalla.

  • Play Only When Visible - Configurado como No para que el vídeo comience a reproducirse inmediatamente después de cargarse, independientemente de si está visible. Cuando esta opción se establece en Yes (opción predeterminada), el vídeo solo se reproducirá cuando esté visible.

  • Fallback Image - Si es necesario, especifique una imagen para mostrar en la pantalla antes de que se cargue el vídeo y si el vídeo no se carga por alguna razón.

Content

Puede modificar el contenido de la diapositiva directamente en el escenario o al cambiar la configuración. La configuración proporciona funciones de contenido más complejas, como vínculos de diapositivas y botones, y superposiciones. La posición del contenido refleja el Aspecto configuración de ubicación.

Contenido sencillo en el escenario

  1. Haga clic en el marcador de posición o en el texto existente e introduzca el nuevo texto que desea que aparezca en la diapositiva.

    La barra de herramientas del editor aparece encima del cuadro de texto.

  2. Utilice la barra de herramientas del editor para introducir y dar formato al texto, así como para insertar elementos como vínculos, imágenes y widgets.

    Escenario con texto con formato {width="500" modal="regular"}

Contenido complejo en la configuración

  1. Haga clic en el punto de navegación situado en la parte inferior del control deslizante para mostrar el cuadro de herramientas de la diapositiva individual y seleccione Configuración ( Icono de configuración {width="20"} ) icono.

  2. En el Content, introduzca la Message Text ​que desea que aparezca con la diapositiva.

  3. Desplácese hacia abajo hasta el Content ​y utilice la sección Message Text ​editor para introducir y dar formato al texto del banner.

    También puede insertar elementos, como vínculos de texto, imágenes y widgets.

  4. Aplique formato al texto según sea necesario mediante la barra de herramientas del editor.

    La primera diapositiva de este ejemplo tiene una imagen de fondo, pero no contiene texto de mensaje. El Buy 3 Get 1 Free el texto situado encima del control deslizante se encuentra en un contenedor de texto (que se añadirá más adelante).

  5. Si es necesario, especifique un Link para la diapositiva.

    El vínculo es la página de destino que aparece cuando el cliente hace clic en el área de la diapositiva. Puede utilizar uno de los tres tipos de vínculos:

    • URL : Vínculos a una dirección URL relativa o completa.

    • Product : identifica la página de destino según el nombre del producto o el SKU. Busque el producto por nombre en función de un nombre parcial o completo. Elija el producto de la lista de resultados de búsqueda.

      Selección de un producto para vincular {width="600" modal="regular"}

    • Category : identifica la página de destino como una categoría o subcategoría específica en el árbol de categorías. Busque la categoría en función de un nombre parcial o completo. Elija la categoría de la sección expandida del árbol mostrado.

      Elección de una categoría para vincular {width="600" modal="regular"}

    • Page : identifica la página de destino como una página de contenido específica. Busque la página en función de un nombre parcial o completo. Elija la página en la lista de resultados de la búsqueda.

      Selección de una página para vincular {width="600" modal="regular"}

    A partir de la versión 2.4.1, Page Builder ya no admite la vinculación de la diapositiva y los vínculos dentro del texto anidado debido a problemas con la visualización en la tienda. Si utiliza un vínculo en _Message Text_, no puede configurar _Link_ opción. Si prefiere utilizar un solo vínculo para toda la diapositiva, puede quitar todos los vínculos del texto. Configuración de vínculo bloqueada {width="300"}

    Si desea evitar que el visitante salga de su tienda, seleccione la opción Open in new tab casilla de verificación Cuando se desactiva la casilla de verificación, el destino vinculado se abre en la misma pestaña del explorador, lo que podría sacar al visitante de la tienda.

  6. Si es necesario, agregue un botón para pedir a los clientes que sigan el vínculo.

    La diapositiva Aspecto position coloca un solo vínculo o botón debajo del texto. Complete las propiedades del vínculo o del botón que desee agregar.

    Apariencia de la diapositiva - collage derecho {width="600" modal="regular"}

    note note
    NOTE
    También puede utilizar varios botones o vínculos añadiendo una bloquear al titular. Para evitar conflictos, mantenga todos los vínculos o botones en el bloque independiente y no agregue un vínculo o botón directamente al titular.
    • Establecer Show Button a uno de los siguientes:

      table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
      Opción Descripción
      Always En la diapositiva siempre aparece un botón.
      On Hover Un botón aparece en la diapositiva sólo al pasar el ratón por encima.
      Never Show Nunca aparece un botón en la diapositiva.
    • Introduzca el Button Text para mostrar en el botón.

    • Establecer Button Type a uno de los siguientes:

      table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
      Opción Descripción
      Primary Aplica el estilo del botón principal de la hoja de estilos actual.
      Secondary Aplica el estilo del botón secundario de la hoja de estilos actual, si corresponde.
      Link Crea un hipervínculo en lugar de un botón.

      El estilo de botón del tema actual determina el formato del botón. Normalmente, un botón principal tiene un color de fondo más prominente que un botón secundario.

  7. Establecer Show Overlay a uno de los siguientes:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Opción Descripción
    Always La superposición siempre es visible.
    On Hover La superposición solo aparece al pasar el ratón por encima.
    Never Show La superposición no es visible.

    Puede utilizar una superposición para aplicar un color de fondo al área de contenido activo definida por la configuración Aspecto. La imagen de fondo de la diapositiva permanece visible durante todo el ancho de la diapositiva.

    Configuración de superposición de diapositivas {width="600" modal="regular"}

    Si elige mostrar una superposición, configure el Overlay Color:

    • Haga clic en Sin color muestra y elija una muestra.
    • En el Color , introduzca un nombre de color válido o un valor hexadecimal.

    Color de superposición de diapositiva {width="600" modal="regular"}

Search Engine Optimization seo

El texto de esta configuración es visible para los motores de búsqueda y mejora la forma en que se indexa la página.

  • Para Alternative Text, introduzca un alt descripción de texto de las herramientas de accesibilidad digital para mostrar.

    El uso de texto alternativo es una práctica recomendada de accesibilidad y es obligatorio por ley en algunas configuraciones regionales. En HTML, la variable alt es un subconjunto del atributo image etiqueta: <image title="tooltip" alt="description" src="image.jpg">.

  • Para Title Attribute, introduzca el texto que se mostrará como información sobre herramientas al pasar el ratón por encima.

    Como práctica recomendada, elija un título descriptivo y con muchas palabras clave para mejorar la forma en que los motores de búsqueda indexan la imagen. En HTML, la variable title es un subconjunto del atributo image etiqueta: <image title="tooltip" alt="description" src="image.jpg">.

Advanced

  1. Para controlar la posición horizontal del contenido añadido a la diapositiva, elija la Alignment:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
    Opción Descripción
    Default Aplica la configuración predeterminada de alineación especificada en la hoja de estilos de la temática actual.
    Left Alinea el contenido a lo largo del borde izquierdo de la diapositiva, con margen para cualquier relleno que se especifique.
    Center Alinea el contenido en el centro de la diapositiva, con margen para cualquier relleno que se especifique.
    Right Alinea el contenido a lo largo del borde derecho de la diapositiva, con margen para cualquier relleno que se especifique.
  2. Configure las variables Border estilo que se aplica a los cuatro lados de la diapositiva:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
    Opción Descripción
    Default Aplica el estilo de borde predeterminado especificado por la hoja de estilos asociada.
    None No proporciona ninguna indicación visible de los bordes de la diapositiva.
    Dotted El borde del contenedor aparece como una línea de puntos.
    Dashed El borde del contenedor aparece como una línea discontinua.
    Solid El borde del contenedor aparece como una línea sólida.
    Double El borde del contenedor aparece como una línea doble.
    Groove El borde del contenedor aparece como una línea ranurada.
    Ridge El borde del contenedor aparece como una línea discontinua.
    Inset El borde del contenedor aparece como una línea de margen.
    Outset El borde del contenedor aparece como una línea de inicio.
  3. Si establece un estilo de borde distinto de None, complete las opciones de visualización de bordes:

    Color del borde {width="600" modal="regular"}

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Opción Descripción
    Border Color Especifique el color seleccionando una muestra, haciendo clic en el selector de color o introduciendo un nombre de color válido o un valor hexadecimal equivalente.
    Border Width Introduzca el número de píxeles de la anchura de la línea del borde.
    Border Radius Introduzca el número de píxeles para definir el tamaño del radio que se utiliza para redondear cada esquina del borde.
  4. (Opcional) Especifique los nombres de CSS classes de la hoja de estilos actual para aplicarla a la diapositiva.

    Separe los distintos nombres de clase con un espacio.

  5. Introduzca valores, en píxeles, para Margins and Padding para especificar los márgenes exteriores y el relleno interno de la diapositiva.

    Introduzca cada valor correspondiente en el diagrama de diapositivas.

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Área del contenedor Descripción
    Margins Cantidad de espacio en blanco que se aplica al borde exterior de todos los lados de la diapositiva.
    Padding Cantidad de espacio en blanco que se aplica al borde interior de todos los lados de la diapositiva.

Añadir un título de control deslizante

Si desea un título sobre el deslizador, simplemente añada un [Tipo de contenido de texto] encima del control deslizante. A continuación, dé formato al texto según sea necesario.

  1. En el Page Builder panel, expandir Elements y arrastre un Texto marcador de posición a una fila, columna o ficha establecida en el escenario.

    A medida que arrastra, una guía roja marca el punto de inserción encima del control deslizante.

    Arrastrar un marcador de posición de texto sobre un control deslizante {width="600" modal="regular"}

  2. Utilice el editor para dar formato al texto según sea necesario.

    Edición del texto del título del control deslizante {width="500" modal="regular"}

Cambiar configuración del control deslizante

  1. Pase el ratón sobre el contenedor del control deslizante para mostrar la caja de herramientas principal y seleccione Configuración ( Icono de configuración {width="20"} ) icono.

    Cuadro deslizante {width="500" modal="regular"}

  2. Introduzca el Minimum Height para la diapositiva.

    La altura mínima puede ser un número con cualquier unidad CSS válida (como 100px, 50%, 50em, 100vh) o un cálculo (como 100vh - 237px).

    Por ejemplo, puede establecer la altura mínima de un control deslizante para ampliar la altura completa de la página, lo que le ofrece opciones atractivas para imágenes y vídeos de fondo de página completa.

    Altura mínima del regulador {width="400"}

  3. Si desea que el control deslizante comience cuando se cargue la página, establezca Autoplay hasta Yes y establecer Autoplay Speed al número de milisegundos del retardo entre diapositivas.

    De forma predeterminada, la velocidad se establece en 4000 ms, es decir, cuatro segundos. Si establece la reproducción automática en No, la primera diapositiva aparece de forma predeterminada y el cliente debe hacer clic en el desplazamiento por diapositivas (puntos o flechas) para mostrar la siguiente diapositiva en secuencia.

    Ajustes de reproducción automática del regulador {width="600" modal="regular"}

  4. Para suavizar la transición de una diapositiva a la siguiente, establezca Fade hasta Yes.

    Con el fundido, las diapositivas parecen permanecer en su lugar, pero el contenido cambia suavemente de una a otra. Sin fundido, puede ver el movimiento horizontal de una diapositiva a la siguiente.

    Atenuación deslizante y configuración de bucle infinito {width="600" modal="regular"}

  5. Para que la presentación se repita indefinidamente mientras la página está abierta, establezca Infinite Loop hasta Yes.

  6. Para elegir el tipo de controles de navegación para el control deslizante, haga lo siguiente:

    • Para incluir Siguiente y Anterior flechas en el lado izquierdo y derecho de cada diapositiva, establezca Show Arrows hasta Yes.

    • Para incluir un conjunto de puntos de navegación debajo del control deslizante, establezca Show Dots hasta Yes.

    Flechas y puntos de presentación del deslizador {width="600" modal="regular"}

  7. Complete la Avanzadas ajustes del regulador según sea necesario.

  8. Cuando termine, haga clic en Save para aplicar la configuración de y volver a Page Builder workspace.

Avanzado: regulador slider-advanced

  1. Para controlar el posicionamiento de las diapositivas dentro del contenedor del control deslizante principal, elija Alignment:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
    Opción Descripción
    Default Aplica la configuración predeterminada de alineación especificada en la hoja de estilos de la temática actual.
    Left Alinea las diapositivas a lo largo del borde izquierdo del contenedor del control deslizante, teniendo en cuenta el relleno especificado.
    Center Alinea las diapositivas en el centro del contenedor del control deslizante, teniendo en cuenta el relleno especificado.
    Right Alinea las diapositivas a lo largo del borde derecho del contenedor del control deslizante, teniendo en cuenta el relleno especificado.
  2. Configure las variables Border estilo que se aplica a los cuatro lados del contenedor del control deslizante:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
    Opción Descripción
    Default Aplica el estilo de borde predeterminado especificado por la hoja de estilos asociada.
    None No proporciona ninguna indicación visible de los bordes del contenedor.
    Dotted El borde del contenedor aparece como una línea de puntos.
    Dashed El borde del contenedor aparece como una línea discontinua.
    Solid El borde del contenedor aparece como una línea sólida.
    Double El borde del contenedor aparece como una línea doble.
    Groove El borde del contenedor aparece como una línea ranurada.
    Ridge El borde del contenedor aparece como una línea discontinua.
    Inset El borde del contenedor aparece como una línea de margen.
    Outset El borde del contenedor aparece como una línea de inicio.
  3. Si establece un estilo de borde distinto de None, complete las opciones de visualización de bordes:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Opción Descripción
    Border Color Especifique el color seleccionando una muestra, haciendo clic en el selector de color o introduciendo un nombre de color válido o un valor hexadecimal equivalente.
    Border Width Introduzca el número de píxeles de la anchura de la línea del borde.
    Border Radius Introduzca el número de píxeles para definir el tamaño del radio que se utiliza para redondear cada esquina del borde.
  4. (Opcional) Especifique los nombres de CSS classes de la hoja de estilos actual para aplicarla al contenedor del regulador.

    Separe los distintos nombres de clase con un espacio.

  5. Introduzca valores, en píxeles, para Margins and Padding para determinar los márgenes exteriores y el relleno interno del contenedor de control deslizante.

    Introduzca los valores correspondientes en el diagrama.

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Área del contenedor Descripción
    Margins Cantidad de espacio en blanco que se aplica al borde exterior de todos los lados del contenedor.
    Padding Cantidad de espacio en blanco que se aplica al borde interior de todos los lados del contenedor.

Pruebe el regulador

  1. Abra la página donde ha incluido el control deslizante, establezca Enable Page hasta Yes.

  2. En la esquina superior derecha, haga clic Save flecha y elija Save & Close.

  3. Busque la página en Páginas cuadrícula y seleccionar View en el Action ​columna.

    Vista previa del regulador: vista estándar {width="600" modal="regular"}

    Al obtener una vista previa del control deslizante, cambie el tamaño de la ventana para poder ver cómo aparece en un dispositivo móvil.

    Vista previa del deslizador: vista móvil {width="400" modal="regular"}

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d