Como adicionar botões no WordPress: aprimore seus botões do WordPress com PostX

Publicados: 2023-05-17

O bloco de botões do WordPress é um bloco poderoso para WordPress que leva a personalização de botões a um nível totalmente novo. Com uma ampla gama de opções e recursos, permite criar botões atraentes e interativos que envolvem os visitantes do site. Então, como adicionar botões no WordPress?

Use as etapas a seguir para usar botões no WordPress

  • Instalar o PostX
  • Adicionar bloco de botão PostX
  • Adicionar links no botão do WordPress
  • Personalize o bloco de botões

Hoje vamos explorar os destaques do bloco de botões PostX, como adicionar botões no WordPress usando PostX. Sem mais delongas, vamos começar.

Ver demonstração agora!
Esconder conteúdo
1 Como adicionar botões no WordPress
2 Vídeo Tutorial
2.1 Passo 1: Instalar o PostX
2.2 Etapa 2: adicionar bloco de botão PostX
2.3 Etapa 3: adicionar links nos botões do WordPress
2.4 Passo 4: Personalize o Bloco de Botões
2.4.1 Configurações de personalização para botão único
2.4.2 Estilo
2.4.3 Tamanho do botão
2.4.4 Texto
2.4.5 Antecedentes
2.4.6 Ícone
2.4.7 Configurações de personalização para grupo de botões (múltiplos botões)
2.4.8 Abertura do botão
2.4.9 Alinhamento Horizontal e Vertical
2.4.10 Margem
2.4.11 Animação do Botão
3 Conclusão

Como adicionar botões no WordPress

Agora, explicaremos como adicionar botões a sites WordPress. Siga este guia passo a passo e você poderá adicionar o botão WordPress perfeito em seu site.

Vídeo tutorial

Aqui está um tutorial em vídeo para adicionar o botão WordPress ao seu site.

Passo 1: Instale o PostX

Para desbloquear os recursos poderosos do PostX e tirar proveito de seus recursos, você precisa instalar o plug-in.

Para instalar e ativar o plugin PostX Gutenberg Blocks:

Installing PostX
Instalando o PostX
  1. Vá para Plug-ins → Adicionar novo.
  2. Pesquise por "PostX".
  3. Clique em Instalar e depois em Ativar.

Obtenha o PostX Pro para desbloquear todos os recursos interessantes e criar sites incríveis !

Agora você está pronto para aprimorar seu site com os botões do WordPress.

Etapa 2: adicionar bloco de botão PostX

Concluímos a instalação do PostX. E os botões agora estão disponíveis para uso junto com sua personalização estendida. Então, sem mais delongas, vamos mostrar como adicionar botões no WordPress.

Adding Button Block
Adicionando Bloco de Botão

Primeiro, você precisa ir para uma página. Você pode ir para a opção de página do WordPress e clicar em Adicionar novo para criar uma nova página. Em seguida, procure por “Grupo de Botões” para selecionar este bloco. E isso adicionará o botão WordPress à página.

Etapa 3: adicionar links nos botões do WordPress

Hiperlinkar um botão ou, em termos simples, adicionar links nos botões do WordPress é fácil.

Adding Links to Buttons
Adicionando Links a Botões

Você precisa selecionar o botão primeiro e selecionar os textos que deseja vincular. Agora, você verá a dica de ferramenta padrão do WordPress. Na dica de ferramenta, você verá a opção “Link” com o ícone do hiperlink. Basta clicar nele para abrir a caixa de URL e adicionar o link desejado para adicionar links no botão.

Passo 4: Personalize o Bloco de Botões

Depois de selecionar o bloco, você verá todas as opções de personalização na barra lateral direita.

Button Settings
Configurações do botão

Existem dois tipos de configurações para este bloco. Como você pode adicionar vários botões, este bloco possui configurações separadas para “Botão” e “Grupo de botões”.

Mostraremos todas as opções de personalização e como usá-las.

Configurações de personalização para botão único

Para selecionar e abrir as configurações do botão, você precisa clicar no botão.

Estilo

Primeiro, clique no botão para obter sua opção de personalização. A primeira configuração que você verá são as opções de estilo. Atualmente, possui 4 opções de estilo. Você pode escolher aquele que melhor se adapta ao design do seu site.

Button Style
Estilo do botão

Tamanho do botão

A próxima opção que você terá é alterar o tamanho do botão. Você obterá Pequeno, Médio, Grande, Extra Grande e Personalizado por padrão. Você obterá o tamanho de botão predefinido se selecionar a opção de tamanho Pequeno, Médio, Grande ou Extra Grande.

Button Size

Mas se você deseja personalizar o tamanho do botão completamente, pode fazer isso selecionando “Personalizado” e ajustando a parte superior, direita, inferior e esquerda para definir as medidas horizontais e verticais.

Custom Button Size
Tamanho do botão personalizado

Aqui está uma perspectiva visual de diferentes estilos de botão.

estilos de botão

Texto

Em seguida, você obterá as configurações de texto. Isso permitirá que você personalize o texto do botão conforme sua necessidade. Você verá as configurações de “Tipografia do texto”, “Cor do texto” e “Cor do texto em foco”.

Button Text Setting
Configuração do Texto do Botão

Se você expandir a configuração de tipografia do texto, poderá alterar o tamanho da fonte (totalmente personalizável), selecionar fontes (incluindo fontes personalizadas) , espessura da fonte, altura, espaçamento, decoração do texto e estilos de texto e transformá-la em maiúsculas, minúsculas e caso do título.

Button Text Typography Control
Controle de tipografia do texto do botão

Aqui está uma perspectiva visual do efeito hover.

Seleção de cores e efeito de foco

Fundo

Esta configuração permitirá que você personalize todos os planos de fundo deste bloco de botões.

Button Background Settings
Configurações de plano de fundo do botão

Primeiro, você pode definir o botão Margin, que é totalmente personalizável, para obter o posicionamento horizontal e vertical perfeito.

Button Margin Control
Controle de margem de botão

Em seguida, você pode alterar as cores dos botões, sólidas e gradientes. Clique em cada um para abrir a paleta de cores.

Button Color Setting
Configuração de cor do botão

Depois disso, você pode ajustar a borda desse botão. Essa configuração inclui estilos de borda (3 estilos predefinidos), largura e cor da borda.

Button Border Setting
Configuração da Borda do Botão

E também ajuste o raio da borda do botão selecionado.

Button Border Radius Adjustment
Ajuste do raio da borda do botão

Além disso, você obterá a configuração Box Shadow. A expansão permitirá que você ajuste o “Offset-X”, “Offset-Y”, “Blur” e “Spread”.

Button Border Shadow Control
Controle de Sombra da Borda do Botão

Além disso, você pode definir a cor da sombra. E você obterá a opção “Inserir” se quiser que o botão sombreie para dentro em vez de para fora.

Ícone

A última configuração que você obterá nas configurações do botão é a configuração do ícone. Você tem que ativar a barra de alternância para usá-lo. E depois de expandir a configuração, você verá o menu “Loja de ícones”, onde poderá selecionar ícones de uma vasta biblioteca.

Button Icon Settings
Configurações do ícone do botão

Há um botão para trocar o ícone de antes para depois do texto.

Você pode alterar o tamanho do ícone e ajustar o espaço entre o ícone e o texto.

Icon Size and Space Control
Tamanho do Ícone e Controle de Espaço

E também, você pode alterar a cor do ícone tanto normal quanto ao passar o mouse. Você precisa clicar no ícone de personalização de cores para abrir a paleta de cores.

Button Icon Color Control
Controle de cor do ícone do botão

Configurações de personalização para grupo de botões (vários botões)

Para selecionar o grupo de botões, você verá um ícone “Selecionar grupo de botões” na dica de ferramenta padrão do WordPress.

Button Group Selection
Seleção de grupo de botões

Abertura do botão

Depois de selecionar o grupo de botões, você encontrará a configuração Button Gap. Esta configuração ajuda a definir o espaço entre 2 e mais botões.

Button Gap Management
Gerenciamento de lacunas de botão

Alinhamento Horizontal e Vertical

Aqui, você pode ajustar o alinhamento horizontal e vertical de vários botões.

Horizontal and Vertical Adjustment
Ajuste horizontal e vertical

Você também pode alternar o Alinhamento vertical para definir os botões verticalmente.

Vertical Alignment Toggler
Alternador de Alinhamento Vertical

Margem

Você também pode ajustar a margem de todo o grupo de botões a partir desta configuração.

Animação de botão

Esta é uma das configurações mais interessantes no bloco de botões. Atualmente, você terá 4 animações definidas no bloco de botões do WordPress. E cada um deles oferece uma abordagem diferente quando você passa o mouse sobre o botão. Além disso, você pode ajustar a posição da animação com o controle deslizante Transformação de botão.

Button Animation Selector
Seletor de Animação de Botão

Aqui está um visual de animações de botão.

Animação do botão

E isso é tudo que você obterá com o bloco de botões do WordPress. Agora você sabe como adicionar botões do WordPress com PostX.

Obtenha o PostX Pro para desbloquear todos os recursos interessantes e criar sites incríveis !

Conclusão

Agora que você sabe como adicionar botões no WordPress, o bloco Button oferece opções avançadas de personalização, incluindo estilos de botão, integração de ícones, planos de fundo gradientes, efeitos de foco, tipografia avançada, funcionalidade de grupo de botões e animações. Você pode criar incríveis botões de compartilhamento social ou até mesmo implementar um botão carregar mais completamente personalizado em seu site.

Com esta poderosa ferramenta, você pode criar botões visualmente atraentes e envolventes que aprimoram a experiência do usuário em seu site. Aproveite o bloqueio de botão do WordPress do PostX para liberar o poder dos botões personalizáveis ​​no WordPress.

Você pode conferir os tutoriais em vídeo do WordPress em nosso canal do YouTube. Além disso, encontre-nos no Facebook e Twitter para atualizações regulares!

Gostou deste artigo? Espalhe a palavra
  • PostX User-Friendly Interface Update

    Apresentando a atualização da interface amigável do PostX

  • Gutenberg Post Blocks - #1 Best Post Blocks Plugin 1

    Gutenberg Post Blocks - # 1 Melhor Plugin Post Blocks

  • How to Create WordPress Page Template in Twenty Twenty-two Theme

    Como criar um modelo de página do WordPress no tema Twenty Twenty-Two

  • Security Update: WPXPO Products

    Atualização de segurança importante para PostX e ProductX