Como adicionar botão no editor do WordPress [tutorial]

Por que o bloco de botões do WordPress é tão importante?

A navegação no site é importante para visitantes e clientes. Queremos enviá-los de uma subpágina adiante. Guie-os durante todo o processo de compra. Por isso é importante inserir corretamente links importantes dentro do conteúdo da página.

Basicamente temos 2 opções. Use um link ou botão padrão. As opiniões sobre quando usar a primeira e a última opção são diversas. É comum que em uma página existam várias ações possíveis. Precisamos ter certeza de qual é o principal e qual é o secundário. Recomendamos que você use o botão apenas para a ação principal. Dessa forma você consegue maior visibilidade dessa ação primária. Você concentrará a atenção dos visitantes nessa ação. Também podemos chamá-lo de botão de chamada para ação. Não crie muitos botões em uma subpágina.

Quais são as funções dos botões principais?

• Os botões podem chamar a atenção dos visitantes – call to action
• Eles separam o conteúdo da página ou do post e o tornam mais legível
• Ajuda com orientação na página. Muitos visitantes examinam a página apenas visualmente com os olhos
• Navegar visitantes para outras páginas usando hiperlinks

Existem muitos parâmetros que determinam o sucesso do botão. Importante é, por exemplo, tamanho, posicionamento ou cor do botão. É necessário seguir os princípios padrão de UI e UX. A cor verde é usada para botões com ação positiva, por exemplo, para comprar algo. A cor vermelha é para o negativo – por exemplo, para cancelar a assinatura do boletim informativo. Botões projetados corretamente dessa maneira influenciam diretamente as ações do visitante.

Adicionar botão em qualquer página ou postagem no WordPress

Situação antes do WordPress 5

Adicionar botões era um processo bastante complicado antes da invenção do editor de blocos do WordPress. Porque esse recurso não estava naturalmente no WordPress. Você pode usar o tema com o Page Builder ou um plug-in de terceiros. Shortcodes criam botões neste caso.

Em nossos temas WordPress mais antigos, você pode adicionar botões usando códigos de acesso no editor visual. Depois de clicar em Inserir Shortcode -> Button, você pode definir várias configurações na janela modal. Texto, cor do texto, cor do botão, url, alinhamento e assim por diante. Graças a essas configurações avançadas, você pode adicionar botões com bastante facilidade e rapidez, sem qualquer programação.

Como usar o bloco de botões no editor do WordPress?

Graças ao WordPress 5, existe uma segunda via. Muito facil. O editor visual do WordPress traz muitos blocos úteis. Para criar um botão no site, agora você pode usar o bloco de botão do WordPress no editor.

Guia passo a passo de como adicionar botão no editor do WordPress

1. Primeiro você precisa decidir onde deseja inserir o botão
2. O bloco de botões pode ser adicionado de várias maneiras:
– clicando em “+” na barra superior ou em qualquer lugar no editor de blocos onde você seleciona Bloco de botões

– você também pode encontrar qualquer bloco usando a barra de pesquisa, basta escrever “botão”

– digitando “/“ que lhe dá acesso a todos os blocos disponíveis

3. O bloco de botão criado pode ser configurado ainda mais

Adicione o texto do botão e o endereço URL

Assim que o botão Bloquear do WordPress for criado, você poderá digitar o texto dentro dele. Lembre-se que para o botão de call to action é melhor usar um texto curto com uma mensagem clara. Você pode definir o texto como negrito, itálico ou sublinhado. Todas essas alterações podem ser feitas clicando na barra de ferramentas. Você também pode alinhar o botão ao lado ou centralizá-lo.

O botão geralmente aponta para outra página ou site externo. Por esse motivo, logo abaixo dele, há uma entrada para adicionar o endereço URL. A vantagem é que adicionar URL não requer a seleção de texto.

Mudando a cor do botão

O novo editor permite que você altere o bloco de botões do WordPress em poucos segundos. Basta usar as configurações na barra lateral do lado direito. Você pode alterar a cor de fundo do botão ou a cor do texto dentro do botão. Existem cores básicas predefinidas ou você pode escolher as suas próprias. Todas as alterações são visíveis imediatamente para ver se a combinação de cores está correta.

Um ótimo recurso é que, se você selecionar combinações erradas, por exemplo, plano de fundo cinza e cor de texto branco, o editor de blocos do WordPress avisará que o botão não pode ser lido em seu site.

Encontre seu próprio estilo de botão

Para criar ou alterar o botão ultra rápido e sem nenhum esforço, você pode usar um dos estilos preparados. O botão pode ser alterado para, por exemplo, arredondado, com borda ou retangular. Experimente o que melhor combina com o estilo ou design do seu site.

Botão de edição com CSS personalizado

Uma personalização ainda maior pode ser obtida usando classes CSS personalizadas. Dessa forma, você pode adicionar seus próprios estilos CSS e botão de estilo no editor do WordPress exatamente como desejar.

Como podemos ver, há uma maneira muito mais fácil do que usar o código de atalho do botão. O bloco de botões do WordPress pode ser usado em qualquer tema compatível com o WordPress Block Editor. Leia mais sobre o nosso novo tema WordPress Citadela. É especialmente projetado e desenvolvido para WordPress Block Editor.

Dica extra no final

Não se esqueça de monitorar o bloco de botões do WordPress e o próprio sucesso do botão. Se você usa o Google Analytics, pode criar um URL exclusivo. Para acompanhar os cliques dos visitantes, você pode adicionar Parâmetro UTM do Google. O URL pode ser criado usando o construtor de URL. A adição de parâmetros permite identificar a origem da visita. É muito útil se você deseja saber de onde os visitantes chegaram à sua página de compras.

Qual é o maior problema que você tem atualmente com o bloqueio de botões do WordPress? Vamos discutir nos comentários abaixo. Compartilhe sua experiência com o uso de botões no site.