Elementos: botones

Última actualización: 14 de julio de 2024

Temas:

Creado para:

Principiante
Intermedio
Usuario

Utilice el tipo de contenido Botones para agregar un botón individual o un conjunto de botones en el Page Builder escenario. 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

NOTE

Si está realizando cambios significativos en el contenido de Page Builder, se recomienda aumentar la Duración de la 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 se utiliza para diseñar botones en el escenario Page Builder.

Cuadro de herramientas de botón individual

Cuadro de herramientas de botón

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

Cuadro de herramientas Contenedor de botones

Cuadro de herramientas de contenedor de botones

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

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

Establezca Button Type en una de las siguientes opciones:

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 primario y secundario

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

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

Pase el ratón sobre el contenedor del botón para mostrar la caja de herramientas y elija el icono Agregar ( ).
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 ( ).
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.
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.

Paso 2: crear el tercer botón

Vuelva a hacer clic en el segundo botón del escenario y elija el icono Duplicar ( ).
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 ( ).
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.

Paso 3: Actualizar el contenedor del botón

Pase el ratón sobre el contenedor del botón para mostrar la caja de herramientas y elija el icono Configuración ( ).
En Appearance, elija Stacked.
Establezca All Buttons are same size en Yes.
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.

Mover un botón

Haga clic en el botón que desee mover.
Seleccione y arrastre el icono Mover ( ), que aparece justo antes del texto del botón, a una nueva posición para el botón dentro del contenedor de botones.

Cambiar la configuración de un botón

Haga clic en el botón del escenario para mostrar la caja de herramientas y elija el icono Configuración ( ).
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.
  
  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.
  
  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.

Cambiar la configuración de un contenedor de botones

Pase el ratón sobre el contenedor del botón para mostrar la caja de herramientas y elija el icono Configuración ( ).
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:
  
  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.

Cambiar configuración avanzada

Puede modificar la configuración de Advanced para botones individuales y para el contenedor de botones.

Para controlar la posición dentro del contenedor principal, elija Alignment:

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.
Establezca el estilo Border aplicado a los cuatro lados del contenedor de botones o botones:

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.
Si establece un estilo de borde distinto de None, complete las opciones de visualización de borde:

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

Á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