conclusión
Inserte Button Basic desde el botón “+” y aplique el ajuste preestablecido para crear un botón atractivo con solo unos pocos clics. Simplemente configure su texto y enlace y publíquelo para comenzar.
Paso 1: inserta el bloque
- Abra la pantalla de edición de publicación o página
- Haga clic en el botón + en la posición donde desea agregar un bloque.
- Ingrese "Button Basic" en el campo de búsqueda
- Haga clic en el bloque Button Basic mostrado para insertarlo.
Punto: También puedes encontrarlo buscando "zen" o "botón".
Paso 2: aplicar el diseño preestablecido
- Seleccione el bloque insertado
- Haga clic en el ícono preestablecido en la barra de herramientas en la parte superior del bloque.
- Seleccione su diseño favorito de la lista preestablecida que se muestra
Consejos de ajuste: Utilice los ajustes preestablecidos como base y siéntase libre de ajustar el color y el tamaño más adelante. Recomendamos primero elegir un ajuste preestablecido que se acerque a su dirección general.
Paso 3: edita el texto
- Haga clic directamente en el texto dentro del bloque.
- Ingrese el texto del botón que desea mostrar (por ejemplo, "Contáctenos", "Empiece gratis")
Punto: El texto se puede editar directamente en el editor. El tamaño y el peso de la fuente se pueden ajustar desde el panel "Configuración de texto" en la barra lateral.
Paso 4: configurar el enlace
- Con el bloque seleccionado, haga clic en el icono de enlace en la barra de herramientas
- Ingrese la URL de destino del enlace
- Habilite "Abrir en una pestaña nueva" si es necesario
- Confirmar con la tecla Enter
Nota: Puede cambiar entre
a(enlace)/button(elemento de botón)/div(elemento de bloque) seleccionando la etiqueta en la barra de herramientas. No hay ningún problema con los botones de enlace normales como ocurre con la etiquetaa.
Paso 5: ajusta los colores
- Abra cada panel de configuración en la barra lateral
- Para cambiar el color de fondo Abra el panel Configuración de fondo
- Para cambiar el color del texto Abra el panel Configuración de texto
- Especifique el color mediante el selector de color o el código de color
Consejo de ajuste: Garantizar una buena relación de contraste entre el color de fondo del botón y el color del texto mejora la visibilidad y la accesibilidad.
Paso 6: Verifique con vista previa
- Haga clic en el botón Vista previa en la parte superior del editor.
- Seleccione "Vista previa en una pestaña nueva"
- Verifique la visibilidad del botón en la parte frontal
- También verifique los cambios al pasar el mouse y la transición al destino del enlace.
Punto: La visualización en el editor y la visualización en la interfaz básicamente coinciden, pero el tema CSS puede afectarlo. Realice la confirmación final en la interfaz.
Paso 7: publica tu página
- Una vez que esté satisfecho con la apariencia y el enlace del botón, haga clic en Publicar o Actualizar en la parte superior del editor.
- Acceda a la página principal para la confirmación final
Si desea realizar ajustes más detallados
Button Basic tiene 18 tipos de paneles de configuración. Para conocer el método de configuración detallado, consulte el botónGuía de configuración básica.
Panel de configuración principal:
| panel | que puedes hacer |
|---|---|
| configuración de texto | Ajustar el tamaño de fuente, el grosor, el interlineado y el espaciado entre caracteres |
| Configuración de diseño | Ajustar el ancho, el alto y los márgenes (márgenes y relleno) |
| configuración de fondo | Configuración de color/gradación/imagen/patrón |
| Configuración de borde | Ajustar el ancho de línea, el estilo, el color y las esquinas redondeadas |
| configuración de iconos | Agregar íconos, configurar tamaño y color |
| Configuración de animación | Animación al pasar el mouse o mostrar (función Pro) |
siguiente paso
Si está interesado en la versión Pro, puede consultar el método de activación en [Activación de la versión Pro] (../pro-activation/).