O bloco Botão permite adicionar botões clicáveis de call to action às suas páginas SeedProd. Este bloco ajuda a orientar os visitantes a realizar ações específicas, seja fazer uma compra, inscrever-se em uma newsletter, baixar um recurso ou navegar para outra página.
Os botões são elementos essenciais para conversões e engajamento do usuário. Com texto, links, estilos, ícones e efeitos visuais personalizáveis, você pode criar botões que se destacam e incentivam os visitantes a agir. O bloco Botão suporta links internos (para outras páginas do seu site) e externos (para outros sites), bem como links âncora para rolagem suave para seções específicas na mesma página.
Adicionando o bloco Botão às suas páginas
Siga estas etapas para adicionar um bloco Botão à sua página SeedProd:
Passo 1: Adicione o bloco
Em Design > Blocos, arraste e solte o bloco Botão na seção desejada da sua página.
O bloco Botão aparece no painel Blocos e pode ser arrastado para qualquer seção ou coluna da sua página.
Etapa 2: Configurar as definições de conteúdo
Depois de adicionado, clique no bloco Botão para abrir suas configurações. Na guia Conteúdo, você pode personalizar o texto do botão, o destino do link e a aparência.
Botão:
- Texto do botão: insira o texto principal que aparecerá no seu botão (por exemplo, “Comece agora”, “Compre agora”, “Saiba mais”). Mantenha-o conciso e orientado para a ação.
- Texto secundário do botão: adicione um texto opcional menor que aparece abaixo do texto principal do botão. Isso é útil para adicionar informações complementares, como preços, ofertas por tempo limitado ou contexto adicional.
- Link: insira a URL para onde o botão deve levar os visitantes quando clicado. Pode ser uma URL completa (https://example.com), um caminho relativo (/about) ou um link âncora (#section-name) para navegação na mesma página.
- Alinhar: defina o alinhamento horizontal do botão dentro do seu contêiner (esquerda, centro ou direita).
- Tamanho: escolha o tamanho do botão entre Pequeno, Médio, Grande, Extragrande ou 2X Grande. Botões maiores são mais visíveis e funcionam bem para chamadas à ação primárias.
Ícones:
- Ícone antes do texto: adicione um ícone que aparecerá à esquerda do texto do botão. Clique em Escolher ícone para navegar e selecionar entre centenas de ícones disponíveis.
- Após o ícone de texto: adicione um ícone que aparece à direita do texto do botão. Isso é comumente usado para indicações direcionais, como setas ou indicadores de links externos.
A guia Conteúdo permite personalizar o texto dos botões, links, alinhamento, tamanho e adicionar ícones decorativos.
Etapa 2a: Escolha um estilo de modelo
Na guia Modelos, você pode selecionar estilos de botões pré-concebidos para alterar rapidamente a aparência geral do seu botão.
- Botão comprimido, botão plano, botão azul, botão verde claro, botão verde, botão laranja, botão vermelho, botão amarelo, botão branco, botão cinza, botão preto: escolha entre onze modelos diferentes, cada um com cores e estilos exclusivos. Visualize cada estilo para encontrar aquele que melhor combina com o design da sua página e as cores da sua marca.
A guia Modelos oferece onze estilos pré-concebidos para personalizar rapidamente a aparência do seu botão.
Etapa 3: Personalizar o design
Na guia Avançado, você pode personalizar a aparência visual do seu bloco Botão:
Estilos:
- Tipografia: controle as propriedades da fonte do texto do botão, incluindo família, tamanho, espessura e estilo da fonte.
- Estilo do botão: escolha o tratamento visual para o seu botão. As opções incluem Plano (design plano moderno), 2D (profundidade sutil), Vintage (aparência clássica), Fantasma (transparente com borda), Link (link de texto simples) ou Personalizado (controle manual total).
- Cor de fundo: defina a cor de fundo do seu botão para combinar com a sua marca ou criar contraste.
- Preenchimento vertical: controla o espaçamento superior e inferior dentro do botão, afetando sua altura.
- Preenchimento horizontal: controla o espaçamento esquerdo e direito dentro do botão, afetando sua largura.
- Raio da borda: Ajuste a curvatura dos cantos dos botões. Valores mais altos criam botões mais arredondados, enquanto zero cria cantos mais nítidos.
- Largura da borda do botão: defina a espessura do contorno da borda do botão.
- Cor da borda do botão: escolha a cor da borda do botão
- Sombra do texto: adicione efeitos de sombra ao texto do botão para dar profundidade e legibilidade. Escolha entre Nenhuma, Fina, Pequena, Média, Grande, Extra grande, 2X Grande ou Personalizada.
- Sombra: aplique efeitos de sombra em todo o botão para dar profundidade. Escolha entre Nenhuma, Fina, Pequena, Média, Grande, Extragrande, 2X Grande ou Personalizada.
Espaçamento:
- Margem: controle o espaçamento externo ao redor do bloco de botões (superior, direito, inferior, esquerdo). Isso determina quanto espaço aparece entre o botão e os elementos ao redor.
- Preenchimento: ajuste o espaçamento interno dentro do contêiner do bloco de botões (superior, direito, inferior, esquerdo). Isso cria um espaço ao redor do botão.
Atributos:
- ID CSS: exibe o identificador exclusivo gerado automaticamente para o seu bloco de botões. Esse ID é criado automaticamente pelo SeedProd para personalização de estilo ou segmentação JavaScript.
- Classe personalizada: adicione classes CSS personalizadas para aplicar estilos específicos do seu tema ou CSS personalizado.
- Atributos personalizados: adicione quaisquer atributos HTML ao elemento wrapper do botão. Insira cada atributo em uma nova linha usando o formato: nome-do-atributo|valor (por exemplo, data-action|signup)
Visibilidade do dispositivo:
- Ocultar na área de trabalho: Oculta o bloco de botões nas telas da área de trabalho.
- Ocultar no tablet: Oculta o bloco de botões em dispositivos tablet.
- Ocultar no celular: Oculte o bloco de botões em dispositivos móveis
Efeitos de animação:
- Animação de entrada: escolha entre vários efeitos de animação que são reproduzidos quando o botão aparece na tela. As opções incluem Saltar, Aparecer gradualmente, Ampliar, Girar e muitas outras. Isso chama a atenção imediatamente para sua chamada à ação.
A guia Avançado oferece opções abrangentes de estilo, incluindo tipografia, cores, preenchimento, bordas, sombras e efeitos de animação.
Etapa 4: Salve suas alterações
Depois de terminar de configurar o bloco Botão e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco Botão à sua página! Esse bloco essencial ajuda a criar chamadas à ação claras que orientam os visitantes em direção às suas metas de conversão. Experimente diferentes estilos, cores, tamanhos e animações de botões para criar botões que se destaquem e impulsionem as ações que você deseja que os visitantes realizem.