Landing Page
Home – Landing Page – Base
Manual de Uso: BASE
A seção BASE reúne os elementos essenciais para personalizar e configurar aspectos globais da página de landing. Esses elementos são aplicados de forma consistente em todas as seções da página, garantindo alinhamento visual e funcionalidade aprimorada. Configurar adequadamente a seção BASE é fundamental para criar uma experiência de usuário coesa e eficaz.
Campos e Funcionalidades
Tipo: Upload de mídia (imagem).
Descrição: Este campo permite o envio da logomarca da empresa, exibida em locais como o cabeçalho ou rodapé, dependendo do modelo de página escolhido. A logomarca é essencial para manter a identidade visual da marca na página de vendas.
Formato recomendado: Utilize arquivos no formato WEBP para otimização de carregamento e qualidade. Como alternativa, você também pode utilizar imagens do tipo JPG ou PNG, mas sabendo que a performance da página poderá ser prejudicada.
Dimensões sugeridas: 300px de largura para uma exibição clara e proporcional.
Exemplo de uso: Caso sua empresa seja “TechCorp”, envie o logotipo no formato WEBP, ajustado para as dimensões recomendadas, e com fundo transparente, caso necessário.
Tipo: Seleção (radio button).
Descrição: Define o estilo dos cantos dos botões exibidos na página.
Opções disponíveis:
– Arredondado: Proporciona um visual moderno e amigável.
– Quadrado: Transmite uma sensação de formalidade e profissionalismo.
Aplicação: Essa opção tem efeito em botões, imagens, galerias, formulários, enfim, em uma série de elementos que compõe o design de sua página.
Exemplo de uso: Escolha “Arredondado” para designs mais leves e descontraídos ou “Quadrado” para designs corporativos.
Tipo: Seleção de cor (color picker).
Descrição: Define a cor principal de fundo dos botões na página. Essa cor será aplicada em todo o design, garantindo consistência visual.
Formato de cor: Código hexadecimal (ex.: #FF5733).
Ferramenta recomendada: Utilize o Image Color Picker para selecionar e gerar o código hexadecimal desejado.
Exemplo de uso: Se sua identidade visual utiliza a cor laranja, selecione o código hexadecimal correspondente (ex.: #FFA500).
Tipo: Seleção de cor (color picker).
Descrição: Configura a cor do texto exibido nos botões. Escolha uma cor que ofereça contraste com o fundo para garantir legibilidade.
Formato de cor: Código hexadecimal.
Ferramenta recomendada: Image Color Picker.
Exemplo de uso: Para botões com fundo azul (#007BFF), escolha branco (#FFFFFF) como cor do texto.
Tipo: Seleção de cor (color picker).
Descrição: Define a cor de fundo para o estado hover ou ativo dos botões.
Formato de cor: Código hexadecimal.
Ferramenta recomendada: Image Color Picker.
Exemplo de uso: Para um botão com fundo azul padrão (#007BFF), escolha um tom mais escuro, como #0056B3, para o estado hover.
Tipo: Seleção de cor (color picker).
Descrição: Define a cor do texto no estado hover ou ativo dos botões. Certifique-se de que a cor também contraste com o fundo.
Formato de cor: Código hexadecimal.
Ferramenta recomendada: Image Color Picker.
Exemplo de uso: Para um botão azul com texto branco no estado padrão, configure um tom de cinza claro (#D6D6D6) para o texto em hover.
Tipo: Campo de texto (URL).
Descrição: Configura o link para a página de agradecimento exibida após uma conversão, como o envio de formulário.
Origem: Crie essa página utilizando a opção OBRIGADO no seu painel administrativo.
Exemplo de uso: https://www.suaempresa.com/obrigado/pagina.
Tipo: Switcher (ativar/desativar).
Descrição: Ativa ou desativa a integração com o WhatsApp na página. Quando ativado, os campos adicionais (número de telefone e mensagem) devem ser configurados.
Exemplo de uso: Ative essa função para oferecer aos visitantes um canal de contato direto via WhatsApp.
Tipo: Campo de texto (número de telefone).
Descrição: Insira o número de WhatsApp que será usado para comunicação direta com os visitantes.
Formato esperado: Número com código do país e DDD (ex.: 5511987654321). Não utilize caracteres especiais nem separadores.
Exemplo de uso: Para contatos no Brasil, use o formato 5511987654321.
Tipo: Campo de texto.
Descrição: Configura a mensagem padrão enviada ao abrir o WhatsApp pelo botão da página.
Exemplo de uso: “Olá, gostaria de mais informações sobre [produto/serviço].”
Dicas de Configuração
– Cores e Identidade Visual: Utilize a identidade visual da sua marca para configurar as cores de botões e textos. Isso garante consistência e profissionalismo. Caso não tenha uma paleta de cores definida, utilize ferramentas como a de extração de temas da Adobe. Basta você enviar a sua logo para a ferramenta que é gratuita e a sua paleta de cores será gerada automaticamente. Para acessar a ferramenta, clique aqui.
– Formato e Otimização de Imagens: Priorize o uso do formato WEBP para garantir alta qualidade com menor tempo de carregamento.
– Link Verificado: Certifique-se de que o link da página de agradecimento está ativo e funcional antes de publicar a página. (Somente necessário caso esteja utilizando um formulário na sua página.)
– Integração WhatsApp: Se você possui um atendimento estruturado pelo WhatsApp, ative essa opção para aumentar a conversão e engajamento com os clientes.
Erros Comuns e Soluções
Cores sem Contraste:
– Problema: Texto do botão ilegível devido a cores muito semelhantes entre texto e fundo.
– Solução: Utilize uma ferramenta como o Image Color Picker para ajustar as cores e melhorar o contraste.
Número de WhatsApp Incorreto:
Problema: O botão de WhatsApp não funciona.
– Solução: Verifique se o número está no formato internacional correto, incluindo o código do país (ex.: 55 para Brasil). Não utilize qualquer caracter especial ou separadores, apenas digite o número “corrido”, um dígito após o outro. Ex.: 5521999999999.
Imagens com Formato Incompatível:
– Problema: Logomarca não aparece corretamente/não otimizada.
Solução: Converta o arquivo para WEBP e reenvie o arquivo. Para realizar essa conversão utilize ferramentas como o Squoosh.