Como adicionar botões no WordPress: aprimore seus botões do WordPress com PostX
Publicados: 2023-05-17O 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.
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:
- Vá para Plug-ins → Adicionar novo.
- Pesquise por "PostX".
- 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.
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.
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.
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.
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.
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.
Aqui está uma perspectiva visual de diferentes 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”.
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.
Aqui está uma perspectiva visual do efeito hover.
Fundo
Esta configuração permitirá que você personalize todos os planos de fundo deste bloco de botões.
Primeiro, você pode definir o botão Margin, que é totalmente personalizável, para obter o posicionamento horizontal e vertical perfeito.
Em seguida, você pode alterar as cores dos botões, sólidas e gradientes. Clique em cada um para abrir a paleta de cores.
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.
E também ajuste o raio da borda do botão selecionado.
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”.
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.
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.
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.
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.
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.
Alinhamento Horizontal e Vertical
Aqui, você pode ajustar o alinhamento horizontal e vertical de vários botões.
Você também pode alternar o Alinhamento vertical para definir os botões verticalmente.
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.
Aqui está um visual de animações de 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!
Apresentando a atualização da interface amigável do PostX
Gutenberg Post Blocks - # 1 Melhor Plugin Post Blocks
Como criar um modelo de página do WordPress no tema Twenty Twenty-Two
Atualização de segurança importante para PostX e ProductX