Easily add a stunning button in the block editor with the GutenKit Button Block. You can easily design an interactive button with an icon, text, animation effects, and all the necessary customization options that encourage users to click.

In this documentation, we are going to show you how to use the GutenKit button block in the Gutenberg editor.

How to Use the GutenKit Button Block #

Go to the WordPress dashboard > Add a page or post >  Hit the “+" icono en el parte superior de la pantalla del editor de bloques  > Buscar GutenKit Button. Click or drag & drop it to the editor screen.

Now, you will see the GutenKit Button block settings in the right sidebar of the block editor screen.

Step 1: Add Button Text and icon in Gutenberg Builder #

We will start by adding the text and icon. Let’s how to insert them:

Bajo la Pestaña de contenido,

Contenido #

1. Etiqueta: Edit or Add a new label for the button.
2. URL: Add the URL that will follow after hitting the button.
3. Agregar icono: Toggle this icon within the button.

• Left Icon:Seleccione un ícono de la biblioteca o cargue el suyo.
• Posición del icono: Show the icon before or after the button text.
• Alineación: Align your button to the left, center, or right.
• Clase: Give the button class.
• IDENTIFICACIÓN: Give the button a unique ID.

Step 2: Style the Button Block in Gutenberg Builder #

Moving on to the styling options for the button block. The following settings will help you to customize the style of the button.

Botón: #

1. Ancho: Use the bar or enter the value manually for the width of your button.
2. Relleno: Set padding within your button.
3. Tipografía: Control all the typography options for the button text.
4. Sombra de texto: Provide all the options for the shadow visual effects of button text.
5. Color: Pick a color for the button text.
6. Tipo de fondo: Add a classic or solid color background.

Borde #

You can add a border for both normal and hover stages. Clicking any option will reveal the below settings:

1. Borde: Give color to the border and use the slider or enter a value manually for the border size.
2. Radio del borde:Define la redondez del borde.

Shadow,

• Sombra de la caja: Add shadow visual effects to the box and define its color, size, angle, and position.

Icono,

1. Add Space After Icon: Add space after the icon to locate it horizontally.
2. Move the Icon Vertically: Define the vertical position of the icon.

Step 3: Advanced Settings #

Using the Advanced Settings tab, you can configure the Button block layout, background, border styles, and control its visibility.

Disposición: #

• Margen: define el espacio alrededor del diseño del bloque. Ayuda a establecer un espacio entre otro bloque.
• Relleno: ingrese un valor para establecer el espacio alrededor del bloque dentro de su diseño.
• Ancho: Además de mantener el ancho de diseño predeterminado.
  • Ancho completo: Al seleccionar esto, el diseño abarcará todo el ancho de la pantalla.
  • En línea (automático): Al aplicarlo tendrá el mismo ancho que el elemento del bloque.
  • Costumbre: Al elegir esta opción, se mostrará un control deslizante para definir el espacio horizontal del diseño del bloque.
• Índice Z: utilice el control deslizante para especificar el orden de pila del bloque con otros bloques.

Posición: #

Debajo del menú desplegable, verá tres opciones: Por defecto, Absoluto, y Fijado. 

• Absoluto: Al seleccionar esta opción, obtendrá una posición absoluta del bloque, lo que significa que los elementos encajarán en su contenedor.
• Fijado: La opción Posición fija permitirá que el elemento encaje en toda la ventana gráfica o pantalla.

Tanto la opción Absoluta como la Fija tienen configuraciones similares a las siguientes:

• Orientación horizontal: Elija la dirección de posicionamiento entre izquierda y derecha.
• Compensar: Utilice el control deslizante o introduzca un valor manualmente para ajustar la posición horizontal del bloque.
• Orientación vertical: Seleccione la dirección de posicionamiento entre arriba o abajo.
• Compensar: Utilice el control deslizante o introduzca un valor manualmente para ajustar la posición vertical del bloque. 

Visibilidad #

El módulo de visibilidad le permite controlar la visualización de diseños de bloques según el tipo de dispositivo. Habrá tres opciones de dispositivo (escritorio, tableta, móvil) con un botón de alternancia. Active el botón de alternancia para ocultar el diseño de bloque de ese dispositivo.

Sin embargo, aún puedes verlo en la vista del editor.

Avanzado: #

• Nombre del bloque: proporcione un nombre para identificar este bloque de forma única mientras lo vincula o crea una secuencia de comandos para darle estilo al bloque.
• Ancla HTML: agregue una URL para vincular una página de sitio web.

• Clases CSS adicionales: Asigne clases CSS adicionales al bloque, lo que le permitirá diseñar el bloque como desee con CSS personalizado. 

NÓTESE BIEN: Puede agregar varias clases por separado con espacios.

Applying the above settings accurately, you will end up with an attractive button on your website. Give yourself a try to add a button to the website.