Altere as formas, cores e estilos de texto dos botões para complementar sua marca.

Use os estilos do site para editar a aparência dos botões do seu site e combinar as chamadas para ação com o design visual do site. Para ajudar a criar uma aparência consistente, as mudanças de estilo feitas afetam a maioria dos botões no site.

Estes estilos de botão estão disponíveis nos sites da versão 7.1. Os sites da versão 7.0 têm diferentes opções de estilo de botão.

Vídeo sobre estilos de botão

Assista a este vídeo para ter uma visão geral de como ajustar o estilo dos botões no seu site.

Escolha um pacote de botões

Nos estilos do site, é possível selecionar um pacote de botões para aplicar automaticamente configurações de estilo consistentes aos botões do site. Cada pacote divide os estilos em três tipos.

Os pacotes de botões são ótimos quando você não quer alterar manualmente configurações mais detalhadas, mas também é possível usá-los como ponto de partida antes de personalizar mais.

Para definir seu pacote de botões:

1. Abra o painel "Estilos do site".
2. Clique em Botões.
3. Confira os pacotes de botões recomendados. Ao passar o cursor sobre um pacote, uma prévia dos estilos principal, secundário e terciário é exibida.
4. Escolha entre os pacotes recomendados ou clique em Personalizar e, em seguida, em Todos os pacotes de botões para ver mais opções.
5. Quando encontrar um pacote de botões de sua preferência, clique nele.

Personalize as formas e fontes dos botões

Após escolher um pacote de botões, é possível fazer alterações mais específicas nas opções de estilo dos botões. Embora você possa definir tamanhos e formas específicos, os botões podem aumentar de tamanho e mudar de forma para acomodar o texto. Recomendamos manter o texto do botão com menos de 25 caracteres para ter mais controle.

Alguns ajustes não afetam os botões quando podem atrapalhar o design do site. Por exemplo, para preservar o layout do Bloco de Newsletter, os ajustes de espaçamento não afetam os botões desse bloco.

Para ajustar o estilo dos botões:

1. Abra o painel "Estilos do site".
2. Clique em ＞ ao lado de Botões.
3. Clique em Principal, Secundário ou Terciário. À medida que fizer alterações, uma prévia mostrará como os botões desse tipo aparecerão no site. Lembre-se de que, se mudar um tipo de botão e depois escolher um novo pacote de botões, você perderá as alterações.
4. Clique em Fonte para personalizar os estilos do texto.
5. Clique em Forma para definir a forma do botão.
6. Use o controle deslizante Contorno para definir a espessura do contorno.
7. Defina o espaçamento como P, M ou G, ou clique em … para definir separadamente o espaçamento superior e inferior e o espaçamento esquerdo e direito. Essa opção não afetará os blocos de botões definidos como Preencher nas seções do Editor Intuitivo. Redimensione os blocos para adicionar espaçamento.
8. Opcional: para aplicar essas configurações de estilo a todos os tipos de botão do seu site, clique em Aplicar a todos os tipos de botão.
9. Opcional: para redefinir os estilos do tipo de botão que você está editando para o padrão, clique em Redefinir estilos do botão.
10. Clique em Salvar.

Personalize as cores dos botões

Os botões seguem as cores gerais do site para combinar com a marca do seu site. É possível usar uma maior variedade de cores de botão utilizando diferentes temas de cores em diferentes seções.

Para alterar as cores dos seus botões:

1. Abra o painel "Estilos do site".
2. Clique em > ao lado de Cores.
3. Clique no tema de cores em que deseja alterar as cores do botão.
4. Em Botão, clique nos ajustes para mudar a cor do texto e a cor de fundo nos três tipos de botão. Nos botões definidos como Preencher, a cor de fundo preenche o botão. Nos botões definidos como Sem preenchimento ou que usam a forma Sublinhado, a cor de fundo do botão se aplica ao contorno e ao texto.
5. Opcional: se um bloco tiver um botão, às vezes será possível alterar a cor do botão de forma independente. No painel "Editar tema de cores", verifique as seções de bloco para encontrar ajustes de cor do botão específicos a cada bloco.
6. Clique em Salvar.

O que são tipos de botão?

Os estilos do site dividem os botões em três tipos: Principal, Secundário e Terciário. A maioria dos botões segue os estilos principais e não pode ter o tipo alterado.

É possível alterar o tipo dos blocos de botões, blocos de cabeçalho e botões de envio no Bloco de Formulário, o que é um ótimo jeito de destacar as chamadas para ação mais importantes para os visitantes ou diferenciar os diferentes tipos de link.

Quais botões usam estilos principais?

Os botões que usam estilos principais incluem:

• Botões "Adicionar ao carrinho"
• Botão de layout automático
• Botões de cabeçalho, blocos de botões e botões no Bloco de Formulário definidos como Principal
• Botões de finalização de compra
• Botão "Aceitar tudo" no banner de cookie
• Botões de bloco de doações
• Botões do bloco de plano de preços
• Botões de bloco de newsletter

Quais botões usam estilos secundários?

Os botões que usam estilos secundários incluem:

• Botões de cabeçalho, blocos de botões e botões no Bloco de Formulário definidos como Secundário
• Botões "Continuar as compras"
• Botão "Rejeitar tudo" no banner de cookie

Quais botões usam estilos terciários?

• Botões de cabeçalho, blocos de botões e botões no Bloco de Formulário definidos como Terciário
• Botão "Gerenciar cookies" no banner de cookie