Os botões são uma ótima maneira de incentivar os visitantes a interagir com um site. No Editor do Wix Studio, você pode adicionar botões que mostram texto, um ícone ou ambos. Você tem controle total do design e do layout para criar o visual que precisa.
Neste artigo, saiba como:
Adicionar um botão
Ao adicionar um novo botão, você pode escolher um design entre duas categorias:
- Botões básicos: esses botões exibem apenas texto e têm uma aparência mais "minimalista".
- Botões estilizados: esses botões podem exibir texto e ícones e oferecer opções de personalização avançadas (por exemplo: backgrounds de imagem, gradientes de cor e muito mais).
Saiba mais sobre botões básicos e botões estilizados
Existem várias diferenças que você deve observar entre botões básicos e estilizados:
Recursos compatíveis
Ao contrário dos botões básicos, os botões estilizados não suportam as seguintes ações:
- Copiar o design do botão para outro elemento
- Obter sugestões de conteúdo para o texto do botão
Comportamento responsivo
Em tamanhos de tela menores, os dois botões mostram um comportamento responsivo diferente.
Botões básicos quebram automaticamente o texto:
Já os botões estilizados mostram reticências:
Para adicionar um botão:
- Clique em Elementos
no lado esquerdo do Editor. - Clique em Botão.
- Navegue pelos designs e arraste um Botão básico ou Botão estilizado para a página.
Personalizar botões básicos
Após adicionar um botão básico, altere seu texto e escolha para onde ele direciona. Uma vez configurado, você pode começar a personalizar o design. Selecione uma cor de preenchimento diferente, adicione sombra e ajuste outras configurações como espaçamento e formatação de texto.
Para personalizar um botão básico:
- Selecione o botão relevante.
- Escolha o que você deseja personalizar:
- Clique em Alterar texto.
- Insira o novo texto em Texto do botão.
Dica: os botões básicos não têm a opção de mostrar um ícone, mas você pode inserir símbolos (por exemplo: X, +, >) para criar um efeito semelhante.
Os botões podem direcionar para outras partes do seu site (por exemplo: páginas, âncoras, janelas), sites externos e até mesmo ações como enviar um email para o seu cliente ou fazer uma ligação para o número dele.
- Clique no ícone Link
. - Selecione um tipo de link à esquerda.
- Adicione as informações relevantes do link.
- Clique em OK.
Você pode personalizar o design do seu botão básico para 2 estados diferentes: Normal ou Ao passar o mouse. Altere configurações como a cor do background, a borda ou o formato dos cantos do botão.
- Clique na seta Abrir inspetor
no canto superior direito do Editor. - Role para baixo até Design.
- Selecione o estado que deseja criar: Normal ou Ao passar o mouse.
- Faça o design do botão usando as opções disponíveis:
- Cor e opacidade: altere a cor do background do botão e ajuste sua opacidade.
- Borda: ajuste a largura e a cor das bordas do botão.
- Cantos: ajuste o raio dos cantos do botão (em px) para deixá-los mais redondos ou quadrados.
- Sombra: adicione e personalize um efeito de sombra no seu botão.
- Texto: ajuste a formatação do texto do botão.
- Espaçamento: ajuste o espaçamento entre o texto e as bordas do botão.
Personalizar botões estilizados
Os botões estilizados oferecem muitas opções de personalização para que você possa personalizar cada detalhe. Altere o texto e o ícone para corresponder à ação desejada, escolha como os dois devem ser organizados, defina um gradiente ou uma imagem como background e muito mais.
Para personalizar um botão estilizado:
- Selecione o botão relevante.
- Escolha o que você deseja personalizar:
Alterar o texto e/ou ícone
- Clique em Alterar texto e ícone.
- Dependendo do que você precisar, faça o seguinte:
- Escolha uma opção em Escolha o que exibir:
- Texto e ícone
- Apenas texto
- Apenas ícone
- Edite o texto do botão em Texto.
- Clique em Substituir ícone
para escolher um ícone diferente para o botão.
Os botões podem direcionar para outras partes do site (por exemplo: páginas, âncoras, janelas), sites externos e até mesmo ações como enviar um email para o seu cliente ou fazer uma ligação para o número dele.
- Clique no ícone Link .
- Selecione um tipo de link à esquerda.
- Adicione as informações relevantes do link.
- Clique em OK.
Você pode adaptar o design do seu botão estilizado para três estados diferentes: Normal, Ao passar o mouse e Desativado. Altere configurações como a cor do background, borda ou a forma dos cantos do botão.
- Clique na seta Abrir inspetor no canto superior direito do Editor.
- Role para baixo até Design.
- Selecione o estado relevante: Normal, Interativo ou Desativado.
- Personalize seu botão usando as opções disponíveis:
- Background: escolha uma cor, gradiente ou imagem para o background do seu botão.
- Texto: ajuste a fonte, a formatação e o espaçamento do texto do botão. Você também pode clicar em Sombras para adicionar sombra ao texto.
- Bordas: escolha uma cor/gradiente para suas bordas e defina a espessura em px. Você pode aplicar o mesmo design a todos os lados ou clicar no ícone Desbloquear
para personalizá-los separadamente. - Cantos: torne seus cantos mais redondos ou quadrados ao alterar o raio em px. Você pode definir o mesmo raio para todos os cantos ou clicar no ícone Desbloquear para personalizá-los separadamente.
- Sombras: adicione sombra interna/externa ou várias camadas de sombra ao definir a cor, ângulo, distância, tamanho, etc.
- Layout: escolha o que mostrar no seu botão (texto, ícone ou ambos) e como eles devem ser organizados e alinhados.
- Ícone: ajuste a cor, o tamanho e o ângulo do ícone que aparece no botão.
Dica:
Adicione um efeito de profundidade ao background do seu botão aplicando várias camadas com diferentes níveis de opacidade.
Ajustar o layout do botão
Altere o alinhamento, posicionamento e espaçamento do botão para que o texto e/ou ícone fique exatamente como você deseja.
- Clique no ícone Layout
. - Ajuste qualquer uma das seguintes configurações:
- Escolha o que exibir: decida o que é exibido no seu botão: Texto e ícone, Apenas texto, Apenas ícone, ou Nada.
- Posição do ícone: ao escolher mostrar texto e um ícone, você pode decidir como posicioná-los: lado a lado ou um abaixo do outro.
- Espaço entre texto e ícone: ao escolher mostrar texto e um ícone, você pode arrastar o slider para definir o espaço entre eles (em px).
- Alinhamento: alinhe o texto e o ícone à esquerda, ao centro ou à direita do botão. Você também pode clicar em Justificar
para alinhá-los às duas margens do botão.
