El bloque Botón te permite añadir botones de llamada a la acción en los que se puede hacer clic a tus páginas de SeedProd. Este bloque te ayuda a guiar a los visitantes para que realicen acciones específicas, ya sea realizar una compra, suscribirse a un boletín informativo, descargar un recurso o navegar a otra página.
Los botones son elementos esenciales para las conversiones y la participación de los usuarios. Con texto, enlaces, estilos, iconos y efectos visuales personalizables, puedes crear botones que destaquen y animen a los visitantes a realizar acciones. El bloque Botón admite tanto enlaces internos (a otras páginas de tu sitio) como externos (a otros sitios web), así como enlaces de anclaje para desplazarse fácilmente a secciones específicas de la misma página.
Añadir el bloque Botón a tus páginas
Sigue estos pasos para añadir un bloque Botón a tu página SeedProd:
Paso 1: Añadir el bloque
En Diseño > Bloques, arrastra y suelta el bloque Botón en la sección deseada de tu página.
El bloque Botón aparece en el panel Bloques y se puede arrastrar a cualquier sección o columna de la página.
Paso 2: Configurar los ajustes de contenido
Una vez añadido, haz clic en el bloque Botón para abrir su configuración. En la pestaña Contenido, puedes personalizar el texto del botón, el destino del enlace y la apariencia.
Botón:
- Texto del botón: Introduzca el texto principal que aparecerá en el botón (por ejemplo, «Empezar», «Comprar ahora», «Más información»). Sea conciso y enfóquese en la acción.
- Subtexto del botón: añade texto opcional más pequeño que aparecerá debajo del texto principal del botón. Esto resulta útil para añadir información complementaria, como precios, ofertas por tiempo limitado o contexto adicional.
- Enlace: Introduzca la URL a la que debe dirigir a los visitantes cuando hagan clic en el botón. Puede ser una URL completa (https://example.com), una ruta relativa (/about) o un enlace de anclaje (#section-name) para la navegación dentro de la misma página.
- Alinear: Establece la alineación horizontal del botón dentro de su contenedor (izquierda, centro o derecha).
- Tamaño: Elige el tamaño del botón entre pequeño, mediano, grande, extragrande o 2X grande. Los botones más grandes son más visibles y funcionan bien para llamadas a la acción principales.
Iconos:
- Icono antes del texto: añade un icono que aparecerá a la izquierda del texto del botón. Haz clic en «Elegir icono» para buscar y seleccionar entre cientos de iconos disponibles.
- Icono después del texto: añade un icono que aparecerá a la derecha del texto del botón. Se utiliza habitualmente para indicaciones direccionales, como flechas o indicadores de enlaces externos.
La pestaña Contenido te permite personalizar el texto de los botones, los enlaces, la alineación y el tamaño, así como añadir iconos decorativos.
Paso 2a: Elija un estilo de plantilla
En la pestaña Plantillas, puedes seleccionar entre estilos de botones prediseñados para cambiar rápidamente el aspecto general de tu botón.
- Botón píldora, botón plano, botón azul, botón verde claro, botón verde, botón naranja, botón rojo, botón amarillo, botón blanco, botón gris, botón negro: elige entre once diseños de plantillas diferentes, cada uno con colores y estilos únicos. Previsualiza cada estilo para encontrar el que mejor se adapte al diseño de tu página y a los colores de tu marca.
La pestaña Plantillas ofrece once estilos prediseñados para personalizar rápidamente el aspecto de tu botón.
Paso 3: Personalizar el diseño
En la pestaña Avanzado, puedes personalizar la apariencia visual de tu bloque Botón:
Estilos:
- Tipografía: controla las propiedades de la fuente del texto de tu botón, incluyendo la familia tipográfica, el tamaño, el grosor y el estilo.
- Estilo del botón: elige el aspecto visual de tu botón. Las opciones incluyen Plano (diseño plano moderno), 2D (profundidad sutil), Vintage (aspecto clásico), Fantasma (transparente con borde), Enlace (enlace de texto sin formato) o Personalizado (control manual total).
- Color de fondo: Establece el color de fondo del botón para que coincida con tu marca o cree contraste.
- Relleno vertical: controla el espacio superior e inferior dentro del botón, lo que afecta a su altura.
- Relleno horizontal: controla el espacio izquierdo y derecho dentro del botón, lo que afecta a su anchura.
- Radio del borde: Ajusta la redondez de las esquinas de los botones. Los valores más altos crean botones más redondeados, mientras que el valor cero crea esquinas afiladas.
- Ancho del borde del botón: Establece el grosor del contorno del borde del botón.
- Color del borde del botón: Elija el color del borde del botón.
- Sombra del texto: añade efectos de sombra al texto del botón para dar profundidad y facilitar la lectura. Elige entre Ninguna, Muy fina, Pequeña, Mediana, Grande, Muy grande, 2 veces más grande o Personalizada.
- Sombra: Aplica efectos de sombra a todo el botón para darle profundidad. Elige entre Ninguno, Línea fina, Pequeño, Mediano, Grande, Extragrande, 2X Grande o Personalizado.
Espaciado:
- Margen: controla el espacio exterior alrededor del bloque de botones (superior, derecho, inferior, izquierdo). Esto determina cuánto espacio aparece entre el botón y los elementos circundantes.
- Relleno: Ajusta el espacio interior dentro del contenedor del bloque de botones (arriba, derecha, abajo, izquierda). Esto crea un espacio alrededor del botón.
Atributos:
- ID CSS: muestra el identificador único generado automáticamente para tu bloque de botones. SeedProd crea este ID automáticamente para personalizar el estilo o la orientación de JavaScript.
- Clase personalizada: añade clases CSS personalizadas para aplicar estilos específicos de tu tema o CSS personalizado.
- Atributos personalizados: añade cualquier atributo HTML al elemento contenedor del botón. Introduce cada atributo en una nueva línea utilizando el formato: nombre-del-atributo|valor (por ejemplo, data-action|signup).
Visibilidad del dispositivo:
- Ocultar en el escritorio: Ocultar el bloque de botones en las pantallas del escritorio.
- Ocultar en tableta: Ocultar el bloque de botones en dispositivos tablet.
- Ocultar en dispositivos móviles: Ocultar el bloque de botones en dispositivos móviles.
Efectos de animación:
- Animación de entrada: elige entre varios efectos de animación que se reproducen cuando el botón aparece en pantalla. Las opciones incluyen rebote, fundido de entrada, zoom, rotación y muchas más. Esto atrae inmediatamente la atención hacia tu llamada a la acción.
La pestaña Avanzado ofrece amplias opciones de estilo, incluyendo tipografía, colores, relleno, bordes, sombras y efectos de animación.
Paso 4: Guarde los cambios
Una vez que haya terminado de configurar el bloque Botón y personalizar su apariencia, asegúrese de guardar su trabajo.
¡Has añadido correctamente un bloque Botón a tu página! Este bloque esencial te ayuda a crear llamadas a la acción claras que guían a los visitantes hacia tus objetivos de conversión. Experimenta con diferentes estilos, colores, tamaños y animaciones de botones para crear botones que destaquen y impulsen las acciones que deseas que realicen los visitantes.