Landing Page
Home – Landing Page – Chamada Principal
Manual de Uso: CHAMADA PRINCIPAL
A Dobra Chamada Principal (CP) é uma seção essencial para capturar a atenção dos visitantes ao acessar a página. Esta dobra permite a personalização de diversos elementos, como imagens, textos, botões, galerias e formulários. Abaixo estão os campos organizados exatamente na ordem em que aparecem.
Campos e Funcionalidades
Tipo: Seleção (dropdown).
Descrição: Escolha o modelo visual para a Dobra Chamada Principal.
Opções disponíveis:
– Modelo 01
– Modelo 02 – Galeria
– Modelo 03 – Slider
– Modelo 04 – Centralizado
– Modelo 05 – Estático
Dica de configuração: Teste os modelos disponíveis para escolher o que melhor atende às suas necessidades de design.
Tipo: Upload de mídia (imagem).
Descrição: Configura a segunda imagem exibida (dependendo do modelo).
Dimensões sugeridas: 1920x1280px.
Formato recomendado: WEBP.
Tipo: Upload de mídia (imagem).
Descrição: Configura a segunda imagem exibida (dependendo do modelo).
Dimensões sugeridas: 1920x1280px.
Formato recomendado: WEBP.
Tipo: Upload de mídia (imagem).
Descrição: Configura a terceira imagem exibida (dependendo do modelo).
Dimensões sugeridas: 1920x1280px.
Formato recomendado: WEBP.
Tipo: Seleção de cor (color picker).
Descrição: Define a cor de fundo da seção.
Formato de cor: Código hexadecimal.
Dica de configuração: Escolha uma cor que harmonize com as imagens e textos.
Tipo: Seleção de cor (color picker).
Descrição: Configura a cor do título principal.
Formato de cor: Código hexadecimal.
Tipo: Seleção de cor (color picker).
Descrição: Configura a cor do título principal.
Formato de cor: Código hexadecimal.
Tipo: Campo de texto.
Descrição: Configura o título principal da seção, também chamado de Headline. Este é o elemento mais importante da Chamada Principal, pois impacta diretamente na capacidade de conversão da página.
Destaque:
– Um título bem escrito deve ser direto, impactante e relevante para o público-alvo.
– A headline é a primeira coisa que o visitante verá, então ela precisa capturar a atenção imediatamente.
Dica de configuração:
– Use palavras que gerem curiosidade ou que enfatizem os benefícios para o visitante.
– Considere a inclusão de números ou verbos de ação para aumentar o impacto.
Exemplo de uso: “Transforme Seu Negócio com Soluções Inovadoras!”
Tipo: Editor de texto.
Descrição: Complementa o título principal, fornecendo mais informações ou detalhes para reforçar a mensagem.
Destaque:
– O subtítulo deve ser claro e persuasivo, explicando como a oferta, serviço ou produto resolve o problema do visitante ou atende à sua necessidade.
– Funciona como uma extensão do título, mantendo o interesse do visitante e guiando-o para a ação desejada.
Dica de configuração:
– Use frases curtas e diretas, destacando o diferencial ou valor agregado.
Exemplo de uso: “Oferecemos soluções personalizadas para aumentar a eficiência e os resultados do seu negócio.”
Campo: Texto do Botão
Tipo: Campo de texto.
Descrição: Configura o texto exibido no botão de chamada para ação (CTA). Este campo também suporta o uso de ícones para enriquecer a apresentação visual do botão.
Uso de Ícones: Recomenda-se a utilização da biblioteca Font Awesome para adicionar ícones ao botão.
Exemplo: Para adicionar o ícone do WhatsApp antes do texto, utilize: <i class=“fa fa-whatsapp” aria-hidden=“true”></i> CTA HEADLINE
– Esse recurso é especialmente útil para botões que direcionam o visitante para redes sociais ou aplicativos específicos.
Dica de configuração: Use textos claros e objetivos, como “Fale Conosco” ou “Saiba Mais”, acompanhados de ícones relevantes, se necessário.
Tipo: Campo de texto (URL).
Descrição: Define o link para onde o botão direcionará o visitante.
Formato esperado:
– URLs completas (ex.: https://www.suaempresa.com).
– Âncoras para seções da página (ex.: #01, #02).
Dica de configuração:
– Sempre use links relevantes à ação descrita no botão.
– Para redirecionar ao WhatsApp, configure o link no formato:
– Essa abordagem cria um fluxo direto entre o visitante e o atendimento.
Tipo: Upload de mídia (imagem).
Descrição: Adiciona imagens à galeria, exibidas no Modelo 02.
Dimensões sugeridas:
– Fundo: 1920x1280px.
– Galeria: 600x600px.
Formato recomendado: WEBP.
Tipo: Seleção (radio button).
Descrição: Configura o alinhamento da galeria dentro da seção.
Opções disponíveis:
– Centralizado
– Inferior
Tipo: Campo de texto (URL).
Descrição: Insira o link de um vídeo do YouTube para exibição na seção.
Formato esperado: URL completa do YouTube (ex.: https://www.youtube.com/watch?v=12345).
Tipo: Campo de texto (URL).
Descrição: Insira a URL de um vídeo do YouTube para ser exibido na Chamada Principal.
Formato esperado: URL completa do YouTube (ex.: https://www.youtube.com/watch?v=12345).
Impacto no Modelo 02 – Galeria:
– Caso este campo esteja preenchido, a galeria será desabilitada e substituída pelo botão do vídeo.
– Esta configuração é exclusiva do Modelo 02 – Galeria.
Dica de configuração:
– Certifique-se de que o vídeo esteja configurado como público e represente bem a mensagem ou o produto destacado na página.
– Inclua vídeos curtos e diretos para aumentar o engajamento do visitante.
Tipo: Seleção de cor (color picker).
Descrição: Configura a cor do ícone do botão de vídeo.
Formato de cor: Código hexadecimal.
Tipo: Switcher (ativar/desativar).
Descrição: Quando ativado, exibe um formulário na Chamada Principal, substituindo a galeria e o botão do YouTube. Essa configuração prioriza o formulário como elemento principal da seção.
Impacto no Layout:
– A galeria será desabilitada.
– O botão do YouTube será ocultado.
– O formulário ocupará o espaço direito na seção.
Dica de configuração: Ative o formulário quando o objetivo for coletar informações de visitantes, como contatos ou inscrições.
Tipo: Seleção de cor (color picker).
Descrição: Configura a cor de fundo do formulário.
Tipo: Seleção de cor (color picker).
Descrição: Configura a cor do título do formulário.
Tipo: Campo de texto.
Descrição: Configura o texto do botão de envio do formulário.
Exemplo de uso: “Enviar” ou “Cadastrar”.
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.