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 “+” icon at the top of the block editor screen  > Search 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:

Debaixo de Content tab,

Contente #

1. Rótulo: Edit or Add a new label for the button.
2. URL: Add the URL that will follow after hitting the button.
3. Adicionar ícone: Toggle this icon within the button.

• Left Icon: Select an icon from the library or upload your own one.
• Posição do ícone: Show the icon before or after the button text.
• Alinhamento: Align your button to the left, center, or right.
• Aula: Give the button class.
• EU IA: 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ão: #

1. Largura: Use the bar or enter the value manually for the width of your button.
2. Preenchimento: Set padding within your button.
3. Tipografia: 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. Cor: Pick a color for the button text.
6. Tipo de plano de fundo: Add a classic or solid color background.

Fronteira #

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

1. Fronteira: Give color to the border and use the slider or enter a value manually for the border size.
2. Raio da Fronteira: Defina a redondeza da borda.

Shadow,

• Sombra da caixa: Add shadow visual effects to the box and define its color, size, angle, and position.

Ícone,

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.

Disposição: #

• Margem: Defina o espaço ao redor do layout do bloco. Ajuda a definir a lacuna entre outro bloco.
• Preenchimento: insira um valor para definir o espaço ao redor do bloco dentro de seu layout.
• Largura: Além de manter a largura padrão do layout.
  • Largura completa: selecionar esta opção fará com que o layout ocupe toda a largura da tela.
  • Em linha (automático): Aplicá-lo terá a mesma largura do elemento do bloco.
  • Personalizado: Escolher esta opção revelará um controle deslizante para definir o espaço horizontal do layout do bloco.
• Índice Z: Use o controle deslizante para especificar a ordem da pilha do bloco com outros blocos.

Posição: #

No menu suspenso, você verá três opções: Padrão, Absoluto, e Fixo. 

• Absoluto: Selecionar esta opção lhe dará uma posição absoluta do bloco, o que significa que os elementos caberão em seu contêiner.
• Fixo: a opção Posição fixa permitirá que o elemento caiba em toda a viewport ou tela.

Ambas as opções Absoluta e Fixa têm configurações semelhantes às abaixo:

• Orientação horizontal: Escolha a direção de posicionamento entre esquerda e direita.
• Desvio: Use o controle deslizante ou coloque um valor manualmente para ajustar o posicionamento horizontal do bloco.
• Orientação Vertical: Selecione a direção de posicionamento entre para cima ou para baixo.
• Desvio: Use o controle deslizante ou coloque um valor manualmente para ajustar o posicionamento vertical do bloco. 

Visibilidade #

O módulo de visibilidade permite controlar a exibição de designs de blocos dependendo do tipo de dispositivo. Haverá três opções de dispositivos (Desktop, Tablet, Mobile) com um botão de alternância. Ative o botão de alternância para ocultar o design do bloco desse dispositivo.

No entanto, você ainda pode vê-lo na visualização do editor.

Avançado: #

• Nome do bloco: forneça um nome para identificar este bloco exclusivamente ao vincular ou criar scripts para definir o estilo do bloco.
• Âncora HTML: adicione um URL para vincular uma página do site.

• Classes CSS adicionais: atribua classes CSS adicionais ao bloco, o que permitirá estilizar o bloco como desejar com CSS personalizado. 

Observação: você pode adicionar várias classes separadamente com espaços.

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.