Os botões e as chamadas para a ação completam relativamente pouco imóveis, mas são alguns dos elementos de design mais importantes de qualquer site. Considerando sua importância, obter botões e direitos de ação direta é uma espécie de grande coisa.
No entanto, os botões de design podem ser complicados. Existem muitos fatores de design a serem considerados ao projetar botões – tamanho, cor, ícones, forma, colocação e texto – e os botões de chamada para ação são ainda mais críticos para obter o direito.
Nesta publicação, abordaremos os conceitos básicos de design de botões para o seu site WordPress. Também consideraremos os fatores a serem considerados quando seus botões serão usados como parte de uma chamada para ação. Finalmente, deixaremos você com o código que você pode usar para criar botões e mostrar como usar esse código com o WordPress.
Três princípios para projetar botões eficazes do site
Vamos começar com o básico. Se você quiser criar botões que sejam efetivos, você precisa seguir algumas práticas recomendadas.
Essas melhores práticas podem parecer senso comum e é porque elas realmente são. No entanto, se você nunca pensou em design de botão antes que você ache que está violando alguns desses princípios.
Princípio # 1: Botões devem parecer, bem, botões!
Para que um design do site funcione como pretendido, os botões precisam ser fáceis de escolher. Vejamos como o Google faz isso em sua página de destino para o seu produto analítico.
Embora nem todos gostem do design do material do Google, os botões na imagem acima são inconfundíveis. Os botões devem se destacar. Os botões que não são claramente botões podem apresentar uma taxa de clique acentuadamente mais baixa.
Princípio # 2: as ações do botão devem estar limpas
Ao projetar botões, a ação associada a cada botão deve ser clara. Olhe para a imagem acima. A ação associada a cada botão é clara. Use o texto ou os ícones nos botões para descrever clara e sucintamente as ações que cada botão foi projetado para executar.
Você não precisa fazer isso com o texto. Às vezes, os ícones podem ser tão eficazes. Por exemplo, olhando para o mesmo exemplo, vemos esse botão de estilo de ícone à direita:
O ícone deste botão comunica algo assim: “Ei! Há mais coisas aqui! “Ele nos informa que existem opções adicionais disponíveis que podem ser vistas clicando no botão.
Princípio # 3: o design do botão deve ser consistente
Em terceiro lugar, ao criar botões, certifique-se de que todos os botões que executam uma ação similar tenham um design similar. Vamos voltar para o Google mais uma vez.
Na imagem, existem três botões diferentes. Cada design de botão faz algo diferente. Os botões verdes são um call-to-action – eles permitem que você se inscreva para um serviço e é o mais proeminente. As setas azuis permitem que você aprenda mais sobre cada serviço. O botão ícone exibe mais opções disponíveis na mesma página.
Ao longo desta página web, esse padrão é consistente:
- Os botões de ícones redondos executam ações na página.
- Os botões “Saiba mais” são azuis e incluem uma seta (e às vezes algum texto).
- Os botões de chamada para ação são quadrados e verdes.
À medida que você designa botões para o seu site, desenvolva um sistema em que diferentes designs de botões tenham propósitos diferentes e sejam consistentes na aplicação desses projetos.
Como fazer os botões Call-to-Action Stand Out
Os botões incluídos nos elementos de chamada para ação (CTA) são um pouco diferentes do resto dos botões em seu site. Isso porque os botões CTA devem ser projetados para incentivar uma ação específica, em vez de simplesmente servir como um elemento de UI funcional. Para tornar os botões CTA tão efetivos quanto possível, mantenha estas diretrizes em mente:
Use cores que estejam em alto contraste com a cor de fundo e se destaquem dos outros botões de tipo UI no seu site.
Faça os botões CTA fáceis de ver e achar, dimensionando-os generosamente e deixando muito espaço em torno de botões CTA.
Use um idioma urgente ao escrever a cópia para seus botões CTA, especialmente se você estiver fazendo uma oferta de tempo limitado.
Criando Botões com Código
Você sempre pode usar um plugin para criar botões, mas codificando você mesmo, você tem controle completo sobre a aparência eo comportamento de seus botões. Então, com princípios básicos de design de botões em mente, vamos dar uma olhada em como você pode criar três projetos de botões comuns com código: botões de texto retangulares, botões de ícones de círculo e botões que combinam texto e ícones.
Como criar botões de texto retangulares com código
Os botões de texto são muito fáceis de criar e, se você escrever o código você mesmo, pode ajustá-los para que pareça exatamente como você gosta.
Vamos começar com a marcação HTML para um simples botão de texto.
Para fazer o link este botão para uma página, adicionar o URL para o elemento âncora, excluindo o sinal de libra e substituí-lo com o seu URL, como este: href="http://example.com/page-to-link-to".
O texto do botão pode ser alterado substituindo Buy Now na marcação do botão pela sua cópia preferida. Abaixo disso, um intervalo contém texto de detalhes menores. Simplesmente exclua todo o texto do espaço se você não deseja exibir o texto detalhado.
Em seguida, precisamos adicionar algum CSS para o estilo do botão:
Para alterar a aparência de cada botão, basta editar o CSS nos pontos indicados pelos comentários. O CSS acima criará um botão verde com uma borda cinza e cantos arredondados como mostrado na imagem acima.
Esses botões são inspirados pelos botões de ícone no Google Analytics. Felizmente, eles são muito fáceis de criar.
Primeiro, precisamos adicionar uma fonte de ícone ao nosso site. Podemos fazê-lo de maneiras diferentes. Se você estiver construindo botões em um documento HTML simples, basta soltar esse link no documento headpara importar Font Awesome.
| < Link rel = “ stylesheet “ type = “ text / css “ href = “ https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css “ > |
Por outro lado, se você estiver adicionando os botões diretamente ao WordPress e seu tema não incluir ícones do Font Awesome, então você pode enfiá-los instalando o Enquecedor Font Awesome CDN , um plugin gratuito do WordPress.
Agora, podemos escrever a marcação que usaremos para os nossos botões de ícone. Para criar os quatro ícones na imagem acima, usaremos esse código:
A classe fa fa-angle-leftaplicada ao primeiro ielemento é o que carrega o ícone. É assim que os ícones são carregados com Font Awesome e você pode ver uma lista completa de ícones no site Font Awesome .
Esse código pode ser usado para gerar botões que incorporem qualquer um dos ícones Font Awesome. Por exemplo, para criar um ícone do Facebook, você usaria o seguinte código:
| < Div class = “ ícone-botão “ > | |
| < A class = “ icon-container “ href = “ # “ > | |
| < I class = “ fa fa-facebook “ > </ i > | |
| </ A > | |
| </ Div > |
Finalmente, aplicamos alguns CSS para transformar a marcação em botões:
Se você quiser usar esse código em seu próprio site, os comentários no CSS acima ajudarão a ajustar a aparência dos seus botões. Observe que você pode querer ajustar o alinhamento de ícones um pouco de um ícone para o próximo. Para fazer isso, você precisará adicionar a classe apropriada ao ícone como mostrado na marcação HTML e ajustar o preenchimento aplicado ao ícone usando a última seção do CSS.
Para centrar o ícone, não adicione nenhuma das classes com prefixo move-.
Como criar botões quadrados com texto e ícones
Com o CSS já existente a partir do ícone e botões de texto, a criação de botões que combinam texto e ícones é simples. Tudo o que temos a fazer é adicionar um ícone a marcação do nosso botão de texto, assim:
Como você pode ver, usamos um novo ícone e reutilizamos uma classe a partir do estilo do botão do ícone move-left, para criar algum espaço entre o ícone e o texto próximo.
Adicionando botões ao WordPress
Há duas etapas a seguir para adicionar botões para um site WordPress. Primeiro, você precisa carregar o CSS. Em segundo lugar, você adiciona a marcação na publicação ou na página em que deseja que o botão apareça.
Você tem algumas opções para adicionar o CSS ao seu site.
- Você pode usar um tema infantil e adicionar o CSS ao arquivo style.css do tema filho .
- Agora que o WordPress 4.7 tem rolado para fora, você poderia adicionar o CSS à CSS adicionais seção do personalizador WordPress.
- Você pode usar um plugin CSS personalizado .
- Se você estiver usando Upfront , você pode adicionar o CSS usando a opção Global CSS do Tema no painel Configurações do Tema .
Passemos pelas etapas de adicionar botões codificados personalizados ao Upfront.
O Upfront inclui um elemento de botão interno que facilita a criação de botões de texto simples e botões de ícones de redes sociais. Então, seus requisitos de botão básicos são facilmente atendidos com esse recurso, mas se você quiser usar botões codificados personalizados, veja como você pode adicioná-los ao seu site.
Conclusão
Os botões de codificação para o seu site WordPress são bastante simples e oferecem a oportunidade de experimentar diferentes cores, botões, ícones e projetos para maximizar a eficácia dos elementos de interface do usuário e chamadas de ação.
