Elementos: botones

En el panel Page Builder, expanda Elements y arrastre un marcador de posición Buttons a una fila, columna o conjunto de pestañas en el escenario.

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

Pase el ratón sobre el botón para mostrar la caja de herramientas y elija el icono Configuración ( ).

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

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

Establezca Button Type en una de las siguientes opciones:

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

Establezca Button Link mediante uno de los siguientes tipos:

• URL - Escriba la dirección URL de destino para el vínculo.

  La dirección URL puede ser un vínculo relativo a un producto o a una página de la tienda, o bien una dirección URL completa.

  Ejemplo de dirección URL relativa: ../luma-analog-watch.html

  Ejemplo de dirección URL completa: http://mystore.com/luma-analog-watch.html

  Si el vínculo va a un sitio web diferente, puede mantener la página actual abierta en la tienda abriendo el vínculo en una nueva pestaña del explorador.

  Para evitar que el visitante salga de su tienda, marque la casilla de verificación Open in new tab.

• Product: escriba un nombre de producto (parcial o completo) o un SKU y, a continuación, elija el nombre de producto en la lista.

  note note
  NOTE
  Los productos se muestran en la lista según la configuración Mostrar productos sin existencias. Para los comerciantes de Multi Source que usan Inventory management, la lista de productos está limitada únicamente por la fuente asignada al sitio web predeterminado.

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

• Category: escriba un nombre de categoría (parcial o completo) o haga clic en el campo en blanco para mostrar el árbol de categorías. A continuación, elija el nombre de la categoría en el árbol.

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

• Page: escriba el nombre de una página de CMS (parcial o completa) o haga clic en el campo en blanco para mostrar la lista completa. A continuación, elija el nombre de la página en la lista de resultados de la búsqueda.

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

Complete la configuración avanzada según sea necesario.

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

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

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

Escriba el texto que desea que aparezca en el segundo botón.

Haga clic en el nuevo botón para mostrar su cuadro de herramientas y elija el icono Configuración ( {width="20"} ).

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

Establezca Button Type en Secondary.

Configure Button Link según sea necesario.

En el ejemplo siguiente, el vínculo es una dirección URL relativa que va a la página Contáctenos.

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

Complete la configuración avanzada según sea necesario.

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

Vuelva a hacer clic en el segundo botón del escenario y elija el icono Duplicar ( {width="20"} ).

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

Escriba el texto que desea que aparezca en el tercer botón.

Haga clic en el tercer botón para mostrar el cuadro de herramientas y elija el icono Configuración ( {width="20"} ).

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

Actualice Button Link según sea necesario.

En la esquina superior derecha, 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 botón para mostrar la caja de herramientas y elija el icono Configuración ( {width="20"} ).

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

En Appearance, elija Stacked.

Establezca All Buttons are same size en Yes.

{width="300"}

Actualice los valores restantes según sea necesario, utilizando las descripciones de Cambiar la configuración de un contenedor de botones.

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

El conjunto completo de botones apilados aparece en el escenario, con un botón principal y dos botones secundarios.

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

Haga clic en el botón que desee mover.

Seleccione y arrastre el icono Mover ( {width="20"} ), que aparece justo antes del texto del botón, a una nueva posición para el botón dentro del contenedor de botones.

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

Haga clic en el botón del escenario para mostrar la caja de herramientas y elija el icono Configuración ( {width="20"} ).

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

Actualice la configuración estándar según sea necesario.

• Button Text: escriba el texto que se mostrará en el botón (también se puede actualizar directamente desde el escenario).

• Button Type: determina el formato del botón.

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  Tipo	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.

• Button Link: determina la página de destino que se proporciona cuando se hace clic en el botón.

  table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
  Opción	Descripción
  URL	Utiliza una dirección URL relativa o completa para identificar la página de destino.
  Product	Identifica la página de destino según el nombre del producto o el SKU. El nombre del producto se puede buscar en función de un nombre parcial o completo. A continuación, se elige el producto de la lista de resultados de búsqueda.
  Category	Identifica la página de destino como una categoría o subcategoría específica en el árbol de categorías.
  Page	Identifica la página de destino como una página CMS específica.

Complete la configuración avanzada según sea necesario.

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

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

Actualice la configuración de Appearance según sea necesario.

• Utilice las opciones de disposición para mostrar los botones horizontal o verticalmente en el contenedor:

  table 0-row-2 1-row-2 2-row-2 layout-auto
  Opción	Descripción
  Inline	Organiza los botones horizontalmente.
  Stacked	Organiza los botones verticalmente.

• Establezca la opción All buttons are same size según sus preferencias.

  Cuando se establece en Yes, todos los botones del contenedor tienen un tamaño uniforme, según la longitud del texto de botón más largo.

Complete Configuración avanzada 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 dentro del contenedor principal, elija Alignment:

Establezca el estilo Border aplicado a los cuatro lados del contenedor de botones o botones:

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 de botones o botones.

Separe los distintos nombres de clase con un espacio.

Escriba valores, en píxeles, para que Margins and Padding determine los márgenes externos y el margen interno del contenedor de botones o botones.

Introduzca los valores correspondientes en el diagrama.