O Bloco de Botão permite adicionar botões clicáveis de call-to-action às suas páginas SeedProd. Este bloco ajuda a direcionar os visitantes para realizar ações específicas, seja fazer uma compra, assinar uma newsletter, baixar um recurso ou navegar para outra página.
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 de Botão suporta links internos (para outras páginas do seu site) e links externos (para outros sites), bem como links âncora para rolagem suave para seções específicas na mesma página.
Adicionando o Bloco de Botão às Suas Páginas
Siga estas etapas para adicionar um Bloco de Botão à sua página SeedProd:
Etapa 1: Adicionar o Bloco
Em Design > Blocos, arraste e solte o bloco Botão na seção desejada da sua página.
O Bloco de Botão aparece no painel de Blocos e pode ser arrastado para qualquer seção ou coluna da sua página.
Etapa 2: Configurar as Definições de Conteúdo
Após adicionado, clique no Bloco de Botão para abrir suas configurações. Na aba 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 aparece no seu botão (por exemplo, “Comece Agora”, “Compre Já”, “Saiba Mais”). Mantenha-o conciso e voltado para a ação.
- Subtexto do Botão: Adicione um texto menor opcional que aparece abaixo do texto principal do botão. Isso é útil para adicionar informações suplementares 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://exemplo.com), um caminho relativo (/sobre) ou um link âncora (#nome-da-secao) para navegação na mesma página.
- Alinhar: Defina o alinhamento horizontal do botão dentro de seu contêiner (esquerda, centro ou direita)
- Tamanho: Escolha o tamanho do botão entre Pequeno, Médio, Grande, Extra Grande ou 2X Grande. Botões maiores são mais proeminentes e funcionam bem para chamadas primárias para ação.
Ícones:
- Ícone Antes do Texto: Adicione um ícone que aparece à esquerda do texto do seu botão. Clique em Escolher Ícone para navegar e selecionar entre centenas de ícones disponíveis.
- Ícone Depois do Texto: Adicione um ícone que aparece à direita do texto do seu botão. Isso é comumente usado para indicações direcionais como setas ou indicadores de link externo.
A aba Conteúdo permite personalizar o texto do botão, links, alinhamento, tamanho e adicionar ícones decorativos.
Passo 2a: Escolha um Estilo de Modelo
Na aba Modelos, você pode selecionar entre estilos de botões pré-projetados para alterar rapidamente a aparência geral do seu botão.
- Botão Pill, Botão Flat, 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 designs de modelo diferentes, cada um com cores e estilos únicos. Visualize cada estilo para encontrar aquele que melhor se adapta ao design da sua página e às cores da sua marca.
A aba Modelos oferece onze estilos pré-projetados para personalizar rapidamente a aparência do seu botão.
Etapa 3: Personalizar o Design
Na aba Avançado, você pode personalizar a aparência visual do seu bloco de Botão:
Estilos:
- Tipografia: Controle as propriedades da fonte para o texto do seu botão, incluindo família da fonte, tamanho, peso e estilo
- Estilo do Botão: Escolha o tratamento visual para o seu botão. As opções incluem Flat (design plano moderno), 2D (profundidade sutil), Vintage (visual clássico), Ghost (transparente com borda), Link (link de texto simples) ou Personalizado (controle manual completo)
- Cor de Fundo: Defina a cor de fundo do seu botão para combinar com sua marca ou criar contraste
- Preenchimento Vertical: Controle o espaçamento superior e inferior dentro do botão, afetando sua altura
- Preenchimento Horizontal: Controle o espaçamento esquerdo e direito dentro do botão, afetando sua largura
- Raio da Borda: Ajuste o arredondamento dos cantos do botão. Valores mais altos criam botões mais arredondados, enquanto zero cria cantos retos.
- 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 profundidade e legibilidade. Escolha entre Nenhum, Fio de Cabelo, Pequeno, Médio, Grande, X Grande, 2X Grande ou Personalizado.
- Sombra: Aplique efeitos de sombra a todo o botão para profundidade. Escolha entre Nenhum, Fio de Cabelo, Pequeno, Médio, Grande, X Grande, 2X Grande ou Personalizado.
Espaçamento:
- Margem: Controle o espaçamento externo ao redor do seu bloco de botão (Superior, Direita, Inferior, Esquerda). Isso determina quanto espaço aparece entre o botão e os elementos circundantes.
- Espaçamento: Ajuste o espaçamento interno dentro do contêiner do seu bloco de botão (Superior, Direito, Inferior, Esquerdo). Isso cria espaço ao redor do próprio botão.
Atributos:
- ID CSS: Exibe o identificador exclusivo gerado automaticamente para o seu bloco de botão. Este ID é criado automaticamente pelo SeedProd para estilização personalizada ou segmentação por 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 no Desktop: Oculte o bloco de botão em telas de desktop.
- Ocultar no Tablet: Oculte o bloco de botão em dispositivos tablet.
- Ocultar no Celular: Oculte o bloco de botão 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 entra na tela. As opções incluem Bounce, Fade In, Zoom In, Rotate In e muitos outros. Isso atrai atenção imediata para sua chamada para ação
A aba Avançado oferece opções extensas 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 de Botão e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de Botão à sua página! Este bloco essencial ajuda você a criar chamadas para ação claras que guiam os visitantes em direção aos seus objetivos de conversão. Experimente diferentes estilos, cores, tamanhos e animações de botões para criar botões que se destacam e impulsionam as ações que você deseja que os visitantes realizem.