conclusão
Insira Button Basic a partir do botão “+” e aplique a predefinição para criar um botão bonito com apenas alguns cliques. Basta configurar seu texto, link e publicar para começar.
Passo 1: Insira o bloco
- Abra a tela de edição de postagem ou página
- Clique no botão + na posição onde deseja adicionar um bloco.
- Digite "Button Basic" no campo de pesquisa
- Clique no bloco Button Basic exibido para inseri-lo
Ponto: Você também pode encontrá-lo pesquisando por "zen" ou "botão".
Etapa 2: aplicar a predefinição de design
- Selecione o bloco inserido
- Clique no ícone predefinido na barra de ferramentas na parte superior do bloco
- Selecione seu design favorito na lista predefinida exibida
Dicas de ajuste: Use as predefinições como base e fique à vontade para ajustar a cor e o tamanho posteriormente. Recomendamos primeiro escolher uma predefinição que esteja próxima da sua direção geral.
Etapa 3: edite o texto
- Clique diretamente no texto dentro do bloco
- Insira o texto do botão que deseja exibir (por exemplo, "Entre em contato conosco", "Comece gratuitamente")
Ponto: O texto pode ser editado diretamente no editor. O tamanho e a espessura da fonte podem ser ajustados no painel "Configurações de texto" na barra lateral.
Etapa 4: configurar o link
- Com o bloco selecionado, clique no ícone de link na barra de ferramentas
- Insira o URL de destino do link
- Ative "Abrir em nova guia" se necessário
- Confirme com a tecla Enter
Nota: Você pode alternar entre
a(link)/button(elemento de botão)/div(elemento de bloco) selecionando a tag na barra de ferramentas. Não há problema com botões de link normais, pois ocorre com a taga.
Etapa 5: ajuste as cores
- Abra cada painel de configurações na barra lateral
- Para alterar a cor de fundo Abra o painel Configurações de plano de fundo
- Para alterar a cor do texto Abra o painel Configurações de texto
- Especifique a cor usando o seletor de cores ou o código de cores
Dica de ajuste: Garantir uma boa taxa de contraste entre a cor de fundo do botão e a cor do texto melhora a visibilidade e a acessibilidade.
Etapa 6: verifique com visualização
- Clique no botão Visualizar na parte superior do editor
- Selecione "Visualizar em nova guia"
- Verifique a visibilidade do botão no front-end
- Verifique também as alterações ao passar o mouse e a transição para o destino do link.
Ponto: A exibição no editor e a exibição no front end basicamente coincidem, mas o tema CSS pode afetá-lo. Por favor, execute a confirmação final no front-end.
Etapa 7: publique sua página
- Quando estiver satisfeito com a aparência e o link do botão, clique em Publicar ou Atualizar na parte superior do editor.
- Acesse a página inicial para confirmação final
Se você quiser fazer configurações mais detalhadas
Button Basic possui 18 tipos de painéis de configuração. Para método de configuração detalhado, consulte o [guia de configuração básica do botão] (../../buttonbasic/).
Painel de configurações principal:
| painel | O que você pode fazer |
|---|---|
| configurações de texto | Ajuste o tamanho da fonte, espessura, espaçamento entre linhas e espaçamento entre caracteres |
| Configurações de layout | Ajustando largura, altura e margens (margens e preenchimento) |
| configurações de fundo | Configurações de cor/gradação/imagem/padrão |
| Configurações de borda | Ajuste a largura, estilo, cor e cantos arredondados da linha |
| configurações de ícone | Adicionando ícones, definindo tamanho e cor |
| Configurações de animação | Animação ao passar o mouse ou exibir (função Pro) |
próxima etapa
Se você estiver interessado na versão Pro, você pode verificar o método de ativação em [ativação da versão Pro] (../pro-activation/).