Elemento Botón

El Elemento de botón es un elemento interactivo que invita a los usuarios a realizar acciones específicas en su sitio web. Sin embargo, si la acción deseada es agregar artículos al carrito, le recomendamos utilizar el Elemento del botón del carrito .

Acerca del elemento de botón

El Elemento de botón es un elemento interactivo que solicita a los usuarios que realicen acciones específicas en su sitio web, como navegar a otra página, abrir una ventana emergente o contactarlo.

Si su acción deseada es agregar artículos al carrito, le recomendamos utilizar el Elemento del botón del carrito .

Añade el elemento Botón a tu página

Paso 1: Acceda a Panel de Control de GemPages > Páginas, y localice la página objetivo para abrir el editor.

Paso 2: En la barra lateral izquierda, ingrese “Botón” en la barra de búsqueda para encontrar el elemento Botón. 

Puede elegir entre dos estilos de botón, uno con símbolo y otro sin él, luego arrástrelo y suéltelo en la posición deseada.

Cuando se selecciona el elemento, encontrará todas las opciones de configuración en la barra lateral izquierda, debajo del Configuración y Avanzado .

Configurar la Pestaña de Configuración

El Configuración La pestaña le permite controlar completamente la apariencia, el diseño y el comportamiento del elemento Botón, incluidos:

Tamaño

Controle las dimensiones generales del botón con opciones flexibles de ancho y alto:

Ancho:Elige cómo debe escalarse el botón horizontalmente:

• Contenido adecuado: :El botón se ajustará al tamaño de su contenido (texto e icono).
• Automática:Hereda el tamaño según el contenedor principal u otros estilos.
• Completo (100%):El botón se expandirá para llenar todo el ancho de su contenedor.

Altura: Establezca la altura en Ajustar al contenido (Automático) o un valor de píxel fijo.

Relleno: Define el espaciado interno dentro del botón.

Fondo

Establezca un fondo de color sólido o degradado Para el botón de añadir al carrito. Puedes ajustar el color:

• Ingresar el código de color
• Arrastrando o seleccionando de las muestras de color
• Usando el selector de color para seleccionar cualquier color en su página actual
• Eligiendo un color desde la lista Colores recientes  or Colores sugeridos liza

Si prefiere un fondo de imagen, sube una nueva imagen o elige de tu galería para establecerla como fondo del elemento, luego configura la imagen:

• Escala: Cubrir, contener o auto
• Posición: Establecer la alineación de la imagen (centrada, arriba a la izquierda, etc.)
• Repetir: Activar o desactivar la configuración de repetición
• Datos adjuntos: Elija entre Desplazamiento o Fijo
• SEO: Agregue texto alternativo (Alt text) y título de imagen (Image title) para accesibilidad y SEO
• Precarga: Activar o desactivar la precarga para mejorar la pintura con contenido más grande (LCP)

Forma

• Borde: Puede cambiar el color del borde, grosor y trazo.
• Esquina: La esquina de la sección puede ser cuadrada, redonda o en forma de píldora. Además, puede ingresar un radio exacto para personalizar la esquina del elemento a su manera.
• Sombra: Agregue una sombra y ajuste su visualización (tamaño, color, desenfoque y distancia).

Ícono

Habilite este interruptor para mostrar un ícono dentro del botón:

• Ícono:Elija entre los íconos incorporados o cargue íconos .SVG personalizados.
• Posición:Coloca el icono en el izquierda or derecha del texto.
• Gap:Ajuste el espaciado entre el ícono y el texto usando el control deslizante o la entrada de número.

Texto

Esta sección le permite personalizar la tipografía y la apariencia de la etiqueta del botón:

• Estilos: Elija un ajuste de texto preestablecido, como Párrafo 1, Encabezado o estilos de texto personalizados.
• Fuente: Seleccione entre las familias de fuentes disponibles (por ejemplo, Ui-sans-serif) para que coincida con la marca de su tienda.
• Tamaño: Ajuste el tamaño del texto utilizando los controles +/–.
• Formateo: Aplique estilos Negrita, Cursiva o Subrayado según sea necesario.
• Color: Establezca el color de la fuente utilizando el código HEX o el selector de color.
• Grosor de la fuente: Elija entre Normal, Medio, Seminegrita, Negrita, etc.
• Altura de la línea: Controlar el espacio vertical entre líneas de texto (por ejemplo, 160%).
• Espaciado de letra: Ajuste el espacio entre letras (por ejemplo, 0.6).
• Transformar: Elige cómo aparece el texto: 
  • AA: MAYÚSCULAS
  • Aa: Escriba cada palabra con mayúscula
  • aa: minúsculas
• Sombra: Aplique una sombra de texto para agregar contraste o profundidad visual.

Efecto al pasar el cursor

Personaliza cómo reacciona el botón cuando pasas el cursor sobre él:

• Fondo: Cambia el color de fondo al pasar el cursor.
• Imagen:Agrega una imagen de fondo para el estado flotante.
• Color de TextoCambie el color del texto al pasar el cursor sobre él.
• BordeAgregue o personalice el estilo del borde cuando pasas el cursor sobre él (color, grosor, trazo).
• Esquina: Ajuste el radio de las esquinas al pasar el mouse para hacer que los bordes sean más redondeados o cuadrados.
• Sombra: Aplique un efecto de sombra para darle más profundidad al botón cuando pasas el cursor sobre él.

Enlace

Convierte tu botón en un elemento en el que se pueda hacer clic habilitando la Enlace Alternar. Una vez habilitado, puede definir qué sucede cuando los usuarios hacen clic en el botón:

Después de hacer clic:Elige la acción que se activa con el botón:

• Abrir página:Redireccionar al usuario a una página o URL específica.
• Desplazarse a: Desplácese suavemente a una sección específica en la misma página usando un ID de anclaje (por ejemplo, #features).
• Abrir ventana emergente:Activa una ventana emergente creada con GemPages.
• Enviar correo electrónico:Abre el cliente de correo electrónico del usuario con una dirección de destinatario previamente completada.
• Hacer llamada telefónica:Iniciar una llamada telefónica en dispositivos móviles usando un Tel: .

Página/Enlace: Haga clic en "+ Agregar…" Botón para buscar o pegar una URL directamente en la barra de búsqueda

• Seleccione entre sus páginas de Shopify existentes 
• Utilice el filtro desplegable (por ejemplo, "Páginas de destino") para limitar sus resultados
• Haga clic en Ver para obtener una vista previa de la página antes de confirmar

Alineación

Establezca la alineación horizontal del botón dentro de su contenedor: Izquierda, Centro o Derecha.

Configurar la pestaña Avanzada

Para una personalización más avanzada, navegue a la pestaña Avanzada y siga las instrucciones en este artículo.

Preguntas Frecuentes

1. ¿Cómo cambio el color del botón?

Vaya a la pestaña de Configuración > Fondo > Color. Utilice el selector de color o ingrese un código HEX para actualizar el color de fondo del botón.

2. ¿Por qué el color de mi botón no cambia al pasar el mouse sobre él?

Asegúrate de leer Efecto al pasar el cursor Configuración. Asegúrese de que el color del fondo o del texto al pasar el mouse esté configurado en un valor diferente del estado normal.

3. ¿Puedo agregar un degradado o una imagen de fondo al botón en lugar de un color sólido?

Sí. Bajo el Pestaña Configuración > FondoPuedes subir una imagen y ajustar la escala, la posición y las opciones de repetición. Para los degradados, puedes agregar CSS personalizado en el... pestaña Avanzada.

4. ¿Por qué mi botón no muestra el nuevo color en la página activa?

Asegúrate de hacer clic Publicar Después de editar. Si el problema persiste, borre la caché del navegador o desactive el código personalizado conflictivo.

5. ¿Cómo conecto mi botón a una categoría de producto (colección) en Shopify?

Paso 1: Agregue un Elemento de botón a la página de su producto (o cualquier página donde desee que aparezca el botón de categoría).

Paso 2: Vaya a la Configuración > Enlace > Después de hacer clic, A continuación, elija Abrir página.

Paso 3: En la pantalla Página/Enlace campo, ya sea:

• Seleccione su deseado colección (categoría) de la lista de páginas de Shopify, o
• Pegue el enlace de la colección a la que desea redirigir.

Paso 4: Haga clic en Guardar y Publicar tus cambios