Personalize os botões no seu site de acordo com a sua marca.

Use o painel de estilos do site para editar o visual dos botões do site. Você pode alterar cor, forma e estilo do texto para combinar as chamadas para ação com o design do seu site. Para deixar um visual uniforme, as mudanças que você faz no estilo afetam a maioria dos botões no site.

Assistir a um vídeo

Este guia aborda as opções de estilo de botão na versão 7.1. Para os estilos de botão na versão 7.0, confira Botões de estilo na versão 7.0.

Forma e fontes do botão

Ao ajustar o estilo dos botões, recomendamos abrir uma página com um botão para você ir conferindo as alterações na prévia do site. Para ajustar o estilo dos botões em todo o site:

1. Abra o painel "Estilos do site" e clique em > ao lado de "Botões".
2. Clique no tipo de botão desejado: Principal, Secundário ou Terciário. Saiba mais em "Tipos de botão".

Você pode ajustar o seguinte:

• Texto - a fonte e os estilos de fonte dos botões nesse nível.
• Forma - a forma e se o botão deve ter preenchimento em cores (Preenchimento) ou apenas um contorno (Sem preenchimento).
• Contorno - a espessura do contorno do botão Sem preenchimento. No botão com Preenchimento, use o controle deslizante do contorno para ajustar o espaçamento fora do botão.
• Espaçamento horizontal - o espaçamento à esquerda e à direita do texto do botão.
• Espaçamento vertical - O espaçamento acima e abaixo do texto do botão. Este ajuste não afetará os blocos de botões definidos para Preencher as seções do Editor Intuitivo. Redimensione os blocos para adicionar espaçamento vertical.

As alterações são salvas automaticamente. Para aplicar as configurações de um tipo aos outros tipos, clique em Aplicar a todos os tipos de botão. Para deixar os estilos de um tipo nas configurações padrão, clique em Redefinir estilos de botão.

É possível ajustar estilos de forma e tamanho no geral, mas todos os botões aumentam o tamanho e mudam de forma para acomodar o texto. Se você incluir muito texto em um botão, ele poderá ficar diferente do esperado. Para garantir um visual uniforme nos botões, recomendamos manter o texto do botão com menos de 25 caracteres.

Cores dos botões

Para garantir que os botões combinem com o design do seu site, eles seguem as cores gerais do site.

• Defina o fundo do botão e as cores do texto do botão no painel Cores - para isso, clique no ícone de lápis no seu tema.
• Cada tipo de botão tem os próprios ajustes das cores de fundo e texto em cada tema de cor; os blocos têm os próprios ajustes de cor de botão.
• Nos botões com Preenchimento, a cor do fundo do botão preenche o botão. Nos botões Sem Preenchimento, a cor do fundo do botão se aplica ao contorno e ao texto e preenche o botão ao se passar o cursor.
• Ao usar a forma Sublinhado, defina a cor do texto do botão com o ajuste de fundo do botão. Defina a cor do botão com o ajuste de texto do botão.
• Para usar outras cores nos botões de outras seções, altere o tema de cores das seções com botões.

Saiba mais em Alterando as cores.

Tipos de botão

O painel "Botões" divide os estilos do botão em três tipos: Principal, Secundário e Terciário. Só é possível alterar o tipo do botão no cabeçalho, no bloco de botões e no botão de envio do bloco de formulário. A maioria dos botões segue as configurações do estilo principal, mas você pode usar as configurações secundárias e terciárias para variar o estilo dos blocos de botões em todo o site.  

Essa é uma ótima maneira de destacar as chamadas para ação mais importantes; ou de diferenciar os diferentes tipos de links. A tabela abaixo mostra quais tipos valem para quais botões.

Os ajustes não afetam certos botões no site, pois podem atrapalhar o design do site. Para preservar o layout do bloco de newsletter, por exemplo, os ajustes do espaçamento não afetam os botões do bloco de newsletter.

Aprenda a usar os tipos de bloco de botões em Bloco de botões.

Botões de estilo na versão 7.0

Na versão 7.0, use os seguintes ajustes gerais do site para editar o visual da maioria dos botões no site:

1. Acesse uma página que tenha botões.
2. Retorne ao painel Site , clique em Design e depois em Estilos do site.
3. Role até Botões. No bloco de botões, a seção será chamada de Bloco de botões (pequeno), (médio) ou (grande).

Use os seguintes ajustes:

• Estilo do botão - EscolhaSólido, Contorno ou Levantado . Na opção contorno, o texto aparece automaticamente como preto ou branco ao se passar o cursor, dependendo da cor do botão.
• Forma do botão - Escolha quadrado, arredondado ou arredondado.
• Cor do botão - altere a cor de fundo do botão.
• Cor do texto do botão - altere a cor do texto.
• Fonte do botão - altere a fonte. O ajuste do tamanho do texto afeta apenas o texto do bloco de botões.
• Alternativo ou (sobreposição) - disponível em alguns templates; defina cores alternativas para destacar os botões nas imagens de fundo ou as cores.

Os ajustes gerais do site afetam os seguintes botões:

• Botões "Adicionar ao carrinho"
• Bloco de botões
• Botões de bloco de doações
• Botões de enviar no bloco de formulário
• Botões de bloco de newsletter
• Botão do bloco de produtos digitais

Alguns tipos de botões têm diferentes opções de estilo:

• Os botões do Carrinho de compras têm outras opções em determinados templates.
• Os botões de página de entrada têm outras opções de botões.
• Blocos de imagem têm outras opções de botões.
• Os botões de banner da família Bedford são estilizados na seção Banner.
• O botão de navegação de cabeçalho da família Bedford é estilizado em Navegação do site.
• Os botões de navegação do cabeçalho da família Brine são estilizados em Cabeçalho: navegação principal e Cabeçalho: navegação secundária.