Como construir um menu CTA pegajoso ao rolar a página para baixo
Publicados: 2020-10-23Tradicionalmente, os menus fixos são visíveis na parte superior (ou inferior) de uma página no momento em que ela é carregada. No entanto, construir um menu de CTA fixo enquanto o usuário rola a página para baixo pode ser uma maneira criativa e eficaz de manter esses CTAs clicáveis o tempo todo. De certa forma, é o melhor dos dois mundos. Ele permite que o CTA mantenha sua posição principal no design original. E mantém uma versão reduzida do CTA (o botão) visível em uma estrutura de menu fixa com a qual os usuários estão familiarizados.
Neste tutorial, vamos mostrar como construir um menu CTA fixo enquanto você rola a página no Divi. Isso funcionará muito bem para usuários de desktop e móveis, adicionando uma maneira intuitiva, mas única, de motivar os visitantes a agirem.
Vamos começar!
Espiada
Aqui está uma rápida olhada no design que construiremos neste tutorial.
Baixe o Layout GRATUITAMENTE
Para colocar suas mãos nos designs deste tutorial, primeiro você precisa fazer o download usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.
Download de graça
Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.
Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!
https://youtu.be/kpjbG8frPTQ
Inscreva-se no nosso canal no Youtube
Para importar o layout da seção para sua biblioteca Divi, navegue até a biblioteca Divi.
Clique no botão Importar.
No pop-up de portabilidade, selecione a aba de importação e escolha o arquivo de download do seu computador.
Em seguida, clique no botão importar.
Feito isso, o layout da seção estará disponível no Divi Builder.
Vamos para o tutorial, vamos?
O que você precisa para começar
Para começar, você precisará fazer o seguinte:
- Se ainda não o fez, instale e ative o Divi Theme.
- Crie uma nova página no WordPress e use o Divi Builder para editar a página no front end (construtor visual).
- Escolha a opção “Build From Scratch”.
Depois disso, você terá uma tela em branco para começar a desenhar no Divi.
Como construir um menu CTA pegajoso enquanto você rola por uma página no Divi
Construindo CTA # 1
Para começar a construir nosso primeiro CTA, usaremos um módulo de sinopse com um botão de CTA personalizado que ficará preso na parte superior e inferior da página conforme o usuário rola.
Para começar, crie uma nova linha de uma coluna dentro da seção regular.
Adicionar Blurb
Dentro da coluna da linha, adicione um módulo blurb.
Abra as configurações do blurb e adicione uma imagem de sua escolha em vez do ícone padrão. Estou usando uma imagem do Pacote de Layout de Criptomoeda.
Na guia de design, atualize os estilos de texto da seguinte maneira:
- Título Título Nível: H2
- Fonte do título: Titillium Web
- Peso da fonte do título: Semi negrito
- Alinhamento do Texto do Título: Centro
- Tamanho do texto do título: 36 px (desktop), 28 px (telefone)
- Altura da linha de título: 1,5em
- Altura da linha corporal: 2em
Adicionar linha para botão CTA
Sob a linha que contém a sinopse que acabamos de criar, adicione uma nova linha de uma coluna.
É importante obter as configurações de linha corretas para que a funcionalidade dos botões aderentes se alinhem corretamente.
Abra as configurações de linha e atualize o seguinte:
- Largura da calha: 1
- Largura: 100%
- Largura máxima: 1400 px (desktop), 100% (tablet)
Adicionar botão de apelo à ação
Dentro da nova linha, adicione um módulo de apelo à ação. A atualização é o seguinte:
- Precisamos apenas do elemento de botão neste módulo para que possamos nos livrar do Título e do texto do corpo.
- Certifique-se de adicionar um URL de link de botão ('#' serve por enquanto) para que o botão fique visível ao projetar o layout. Você sempre pode atualizar isso mais tarde.
- Desative a opção “Usar cor de fundo”.
(NOTA: Você ainda não conseguirá ver o botão branco em um fundo branco, mas isso mudará na próxima etapa)
Na guia de design, atualize os seguintes estilos de botão:
- Tamanho do texto do botão: 14 px (desktop), 11 px (telefone)
- Cor do texto do botão: # 1b1f50
- Cor de fundo do botão: # 09d5fe
- Largura da borda do botão: 0 px
- Espaçamento entre letras dos botões: 2 px
- Fonte do botão: Titillium Web
- Peso da fonte do botão: negrito
- Estilo da fonte do botão: TT
- Preenchimento do botão: 1em superior, 1em inferior
Continue atualizando o design da seguinte maneira:
- Largura: 33,33%
- Alinhamento do Módulo: centro
- Preenchimento: 0 px superior, 0 px inferior
A largura de 33,33% do botão permitirá que ele ocupe exatamente 1/3 da janela do navegador quando na posição fixa. Combinar isso com dois outros botões (cada um com a mesma largura de 33,33%) fornecerá uma barra de menu CTA completa de botões.
Na guia Avançado, adicione o seguinte snippet CSS personalizado à descrição da promoção (ele tem espaçamento desnecessário de que não precisamos):
display:none;
Em seguida, adicione outro snippet ao botão promocional:
display:block;
Tornando o botão aderente
Para tornar o botão aderente, usaremos a opção de posição aderente para colar o botão e as partes superior e inferior da janela do navegador. Também vamos adicionar um deslocamento para o cabeçalho fixo Divi padrão.
Atualize o seguinte:
- Posição pegajosa: grudar na parte superior e inferior
- Deslocamento superior fixo: 54 px (desktop), 0 px (tablet)
- Compensação dos elementos aderentes circundantes: NÃO
Com nossa posição aderente no lugar, podemos agora direcionar o estilo do botão no estado aderente. Neste caso, queremos mover o botão para a esquerda para abrir espaço para botões aderentes adicionais posteriormente.
Atualize o seguinte estilo de transformação no estado fixo:
- Transformar o eixo X da tradução (aderente): -100%
Isso moverá o botão por uma distância igual à largura exata do botão (que é 33,33%), uma vez que ele adere à parte superior ou inferior da página.
Construindo CTA # 2
Agora que temos uma seção completa com um botão CTA aderente em funcionamento, podemos duplicar a seção anterior e fazer pequenos ajustes no botão.
Primeiro, duplique a seção.
Abra as configurações do módulo Call to Action na nova seção e atualize as opções de transformação da seguinte maneira:
- Transformar traduzir eixo X (aderente): 0px
Na verdade, isso é apenas restaurá-lo ao estado padrão, porque não queremos mover este botão, pois ele precisa permanecer no centro.
Construindo CTA # 3
Para construir a terceira seção CTA, duplique a seção anterior.
Em seguida, abra as configurações do módulo Call to Action na nova seção e atualize as opções de transformação da seguinte maneira:
- Transformar Traduzir eixo X (aderente): 100%
Isso moverá o botão para a direita a uma distância igual à largura exata do botão (que é 33,33%), uma vez que ele adere à parte superior ou inferior da página.
Atualizar o texto e as cores do botão
Para aprimorar o design, atualize o texto e as cores do botão CTA para combinar com o design do seu site. Aqui estão as configurações para este exemplo:
Para CTA # 2…
- Texto do Botão: Ver Nossos Planos
- Cor do texto do botão: #ffffff
- Cor de fundo do botão: # 1b1f50
Para CTA # 3…
- Texto do botão: Converse conosco
- Cor do texto do botão: #ffffff
- Cor de fundo do botão: # 4328b7
Adicionar margem temporária à seção superior e inferior para testar a funcionalidade
Em um site normal, esses CTAs residiriam no meio da página em algum lugar, portanto, haveria espaço extra para rolar para cima e para baixo na página. Por enquanto, podemos adicionar alguma margem temporária às seções superior e inferior da página.
Na seção superior, adicione uma margem superior de 90 Vh.
Na seção inferior, adicione uma margem inferior de 90 Vh.
Resultado final
Agora vamos conferir o resultado final.
Pensamentos finais
Este tutorial mostra uma maneira criativa de manter esses CTAs importantes em primeiro lugar, para que os usuários possam clicar neles quando quiserem. Ele também adiciona uma microinteração sutil que chama ainda mais atenção para eles sem desviar a atenção do conteúdo principal da página. Esperançosamente, isso ajudará a fazer com que sua criatividade flua para que você possa experimentar mais designs para torná-los ainda melhores.
Estou ansioso para ouvir de você nos comentários.
Saúde!