Elementos: botones

Utilice el Botones tipo de contenido para añadir un botón individual o un conjunto de botones en la Page Builder stage. Puede organizar los botones horizontal o verticalmente y agregarlos directamente a las filas, columnas, pestañas y titulares del escenario.

Titular con un botón en la tienda {width="600" 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 trabaja con el tipo de contenido Botones, agrega y edita botones individuales y el contenedor de botones que contiene uno o más botones. Cada una tiene su propia caja de herramientas que puede utilizar para diseñar botones en la Page Builder escenario.

Cuadro de herramientas de botón individual

Cuadro de herramientas Botón {width="500" modal="regular"}

Herramienta
Icono
Descripción
Configuración
Icono de configuración {width="25"}
Abre la página Botón de edición, donde puede cambiar las propiedades del botón.
Duplicar
Icono Duplicar {width="25"}
Realiza una copia del botón.
Eliminar
Icono Eliminar {width="25"}
Elimina el botón del escenario.

Cuadro de herramientas Contenedor de botones

Cuadro de herramientas Contenedor de botones {width="500" modal="regular"}

Herramienta
Icono
Descripción
Mover
Icono Mover {width="25"}
Mueve el contenedor de botón a otro lugar válido de la página.
Añadir
Icono Agregar {width="25"}
Agrega un botón al contenedor.
(etiqueta)
Botón
Identifica el contenedor actual como un elemento de botón.
Configuración
Icono de configuración {width="25"}
Abre la página Editar botones, donde puede cambiar las propiedades del contenedor.
Hide
Icono Ocultar {width="25"}
Oculta el contenedor de botón.
Mostrar
Mostrar icono {width="25"}
Muestra el contenedor de botones oculto.
Duplicar
Icono Duplicar {width="25"}
Realiza una copia del contenedor de botones.
Eliminar
Icono Eliminar {width="25"}
Elimina el contenedor de botón y su contenido 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.

Añadir un botón individual

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

    Arrastrar un botón al escenario {width="500" modal="regular"}

  2. Pase el ratón sobre el botón para mostrar el cuadro de herramientas y seleccione Configuración ( Icono de configuración ) icono.

  3. Introduzca el Button Text que se mostrará en el botón.

    Configuración básica del botón {width="600" modal="regular"}

  4. Establecer Button Type a uno de los siguientes:

    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.

    Ejemplo de botón principal y secundario {width="500" modal="regular"}

  5. Configure las variables Button Link mediante uno de los siguientes tipos:

    • URL : introduzca 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 URL relativa - ../luma-analog-watch.html

      Ejemplo de 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, seleccione la opción Open in new tab casilla de verificación

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

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

      Vínculo Elegir un producto para el botón {width="600" modal="regular"}

    • Category : introduzca 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.

      Selección de una categoría para el vínculo de botón {width="600" modal="regular"}

    • Page : introduzca 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.

      Elija la página de CMS para el vínculo de botón {width="600" modal="regular"}

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

  7. Cuando termine, haga clic en Save en la esquina superior derecha para aplicar la configuración y volver a la Page Builder workspace.

Añadir un conjunto de botones

En las secciones siguientes se describe una serie de pasos para comenzar con un botón individual y crear un conjunto de tres botones dentro de un contenedor de botones. Si aún no tiene un botón individual, siga las instrucciones anteriores para agregar un botón individual al escenario.

Paso 1: Crear el segundo botón

  1. Pase el ratón sobre el contenedor de botones para mostrar el cuadro de herramientas y seleccione Añadir ( Icono Agregar {width="20"} ) icono.

    Adición de otro botón {width="500" modal="regular"}

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

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

    Edición del botón {width="500" modal="regular"}

  4. Establecer Button Type hasta Secondary.

  5. Configure las variables Button Link según sea necesario.

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

    Configuración del botón Contáctenos {width="600" modal="regular"}

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

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

Paso 2: crear el tercer botón

  1. Haga clic de nuevo en el segundo botón del escenario y elija el Duplicar ( Icono Duplicar {width="20"} ) icono.

    Duplicación de un botón {width="500" modal="regular"}

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

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

    Cuadro de herramientas del tercer botón {width="500" modal="regular"}

  4. Actualice el Button Link según sea necesario.

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

Paso 3: Actualizar el contenedor del botón

  1. Pase el ratón sobre el contenedor de botones para mostrar el cuadro de herramientas y seleccione Configuración ( Icono de configuración {width="20"} ) icono.

    Cuadro de herramientas Contenedor de botones {width="500" modal="regular"}

  2. En Appearance, elija Stacked.

  3. Establecer All Buttons are same size hasta Yes.

    Botones apilados del mismo tamaño {width="300"}

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

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

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

    Botones apilados en el escenario {width="500" modal="regular"}

Mover un botón

  1. Haga clic en el botón que desee mover.

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

    Mover un botón {width="500" modal="regular"}

Cambiar la configuración de un botón

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

    Cajas de herramientas Botón {width="500" modal="regular"}

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

    • Button Text : introduzca 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 sirve 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.
  3. Complete la configuración avanzada según sea necesario.

  4. Para guardar la configuración y volver a Page Builder workspace, haga clic en Save en la esquina superior derecha.

Cambiar la configuración de un contenedor de botones

  1. Pase el ratón sobre el contenedor de botones para mostrar el cuadro de herramientas y seleccione Configuración ( Icono de configuración {width="20"} ) icono.

  2. Actualice el Appearance ajustes 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.
    • Configure las variables All buttons are same size opción según sus preferencias.

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

  3. Complete la Configuración avanzada según sea necesario.

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

Cambiar configuración avanzada

Puede modificar la variable Advanced ​configuración de botones individuales y del contenedor de botones.

  1. Para controlar la posición dentro del contenedor principal, elija la opción 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 del contenedor principal, con margen para cualquier relleno que se especifique.
    Center Alinea el contenido en el centro del contenedor principal, con margen para cualquier relleno que se especifique.
    Right Alinea el contenido a lo largo del borde derecho del contenedor principal, con margen para cualquier relleno que se especifique.
  2. Configure las variables Border estilo aplicado a los cuatro lados del contenedor de botones o botones:

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

    Separe los distintos nombres de clase con un espacio.

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

    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. Opciones: Top / Right / Bottom / Left
    Padding Cantidad de espacio en blanco que se aplica al borde interior de todos los lados del contenedor. Opciones: Top / Right / Bottom / Left
recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d