Medios: deslizador

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

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

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

{width="600" modal="regular"}

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

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

También puede incluir contenido de banner más complejo usando la configuración Contenido.

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

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

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

• Appearance
• Background
• Content
• Search Engine Optimization
• Advanced

Una vez finalizado, haga clic en Save para aplicar la configuración y volver al área de trabajo Page Builder.

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

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

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

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

• Appearance
• Background
• Content
• Advanced

Una vez finalizado, haga clic en Save para aplicar la configuración y volver al área de trabajo Page Builder.

Pase el ratón sobre el contenedor del deslizador en la parte superior para mostrar la caja de herramientas y elija el icono Agregar ( {width="20"} ).

{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.

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

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

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

• Appearance
• Background
• Content
• Advanced

Una vez finalizado, haga clic en Save, en la esquina superior derecha, para cerrar la página Edit Slide.

Cree el widget que desee ver en una diapositiva.

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

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

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

Seleccione el(la) Widget Type que necesita.

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

{width="600" modal="regular"}

Una vez finalizado, haga clic en Insert Widget, en la esquina superior derecha.

Modifique el resto de configuraciones según sea necesario.

Una vez finalizado, haga clic en Save, en la esquina superior derecha.

{width="600" modal="regular"}

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

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

En la esquina superior derecha, haga clic en Save para aplicar la configuración y volver al área de trabajo Page Builder.

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

{width="600" modal="regular"}

Escriba 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.

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

Escriba 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.

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.

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.

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

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

En la sección Content, escriba el(la)Message Text ​que desea que aparezca con la diapositiva.

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

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

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 texto Buy 3 Get 1 Free situado encima del control deslizante se encuentra en un contenedor de texto (que se agregará más adelante).

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 o el SKU del producto. 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.

  {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.

  {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.

  {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 usa un vínculo en _Message Text_, no puede configurar la opción _Link_. Si prefiere utilizar un solo vínculo para toda la diapositiva, puede quitar todos los vínculos del texto.

{width="300"}

Si desea evitar que el visitante salga de su tienda, active la casilla de verificación Open in new tab. 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.

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

La posición de la diapositiva Apariencia coloca un solo vínculo o botón debajo del texto. Complete las propiedades del vínculo o del botón que desee agregar.

{width="600" modal="regular"}

• Establezca Show Button en una de las siguientes opciones:

  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.

• Escriba Button Text para que se muestre en el botón.

• Establezca Button Type en una de las siguientes opciones:

  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.

Establezca Show Overlay en una de las siguientes opciones:

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.

{width="600" modal="regular"}

Si elige mostrar una superposición, establezca Overlay Color:

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

{width="600" modal="regular"}

Para controlar la posición horizontal del contenido agregado a la diapositiva, elija Alignment:

Establezca el estilo Border que se aplica a los cuatro lados de la diapositiva:

Si establece un estilo de borde distinto de None, complete las opciones de visualización de borde:

{width="600" modal="regular"}

(Opcional) Especifique los nombres de CSS classes de la hoja de estilos actual para aplicarlos a la diapositiva.

Separe los distintos nombres de clase con un espacio.

Escriba valores, en píxeles, para que Margins and Padding especifique los márgenes exteriores y el margen interior de la diapositiva.

Introduzca cada valor correspondiente en el diagrama de diapositivas.

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

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

{width="600" modal="regular"}

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

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

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

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

Escriba 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.

{width="400"}

Si desea que el control deslizante comience cuando se cargue la página, establezca Autoplay en Yes y Autoplay Speed en el número de milisegundos de retardo entre las 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 aparecerá de forma predeterminada y el cliente deberá hacer clic en el desplazamiento por diapositivas (puntos o flechas) para mostrar la siguiente diapositiva en secuencia.

{width="600" modal="regular"}

Para suavizar la transición de una diapositiva a la siguiente, establezca Fade en 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.

{width="600" modal="regular"}

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

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

• Para incluir las flechas Siguiente y Anterior en los lados izquierdo y derecho de cada diapositiva, establezca Show Arrows en Yes.

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

{width="600" modal="regular"}

Complete la configuración del control deslizante Avanzado según sea necesario.

Una vez finalizado, haga clic en Save para aplicar la configuración y volver al área de trabajo Page Builder.

Para controlar la posición de las diapositivas dentro del contenedor del control deslizante principal, elija Alignment:

Establezca el estilo Border que se aplica a los cuatro lados del contenedor del control deslizante:

Si establece un estilo de borde distinto de None, complete las opciones de visualización de borde:

(Opcional) Especifique los nombres de CSS classes de la hoja de estilos actual para aplicarlos al contenedor del control deslizante.

Separe los distintos nombres de clase con un espacio.

Escriba valores, en píxeles, para que Margins and Padding determine los márgenes exteriores y el margen interior del contenedor del control deslizante.

Introduzca los valores correspondientes en el diagrama.

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

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

Busque la página en la cuadrícula Páginas y seleccione View en la columna Action.

{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.

{width="400" modal="regular"}