Como criar um optin de e-mail fixo em Divi que chama a atenção
Publicados: 2020-09-30As opções de posição fixa do Divi permitem que você torne qualquer elemento de sua página fixa. Isso permite que você conserte elementos na página em determinados intervalos conforme o usuário rola a página para baixo, para que permaneçam visíveis por mais tempo. E para os blogueiros que estão por aí, faz muito sentido adicionar um e-mail fixo opt-in ao seu modelo de postagem para uma forma sutil, mas eficaz, de manter esse formulário importante em primeiro plano.
Neste tutorial, vamos mostrar a você como adicionar um opt-in de e-mail fixo ao seu modelo de postagem do blog Divi que chame mais atenção e, esperançosamente, consiga mais leads. Também mostraremos como adicionar um efeito pop-up de foco ao opt-in de e-mail fixo!
Vamos começar!
Espiada
Aqui está uma rápida olhada no design que construiremos neste tutorial.
Baixe GRATUITAMENTE o Sticky Email Optin Post Template
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!
Como fazer upload do modelo de postagem com a opção de e-mail fixo no seu site
Para fazer o upload do modelo, navegue até o Divi Theme Builder no backend do seu site WordPress.
Então, no canto superior direito, você verá um ícone com duas setas. Clique no ícone.
Navegue até a aba de importação, carregue o arquivo JSON que você conseguiu baixar neste post e clique em 'Importar Divi Theme Builder Templates'.
Depois de carregar o arquivo, você notará um novo modelo com uma nova área do corpo que foi atribuída a Todas as postagens. Salve as alterações do Divi Theme Builder assim que quiser que o modelo seja ativado.
Vamos para o tutorial, vamos?
Parte 1: Importar o modelo de postagem do blog pré-fabricado
Para este tutorial, usaremos o modelo de postagem do blog para o Pacote de layout para consultor de negócios da Divi, que você pode baixar nesta postagem do blog.
Depois de baixar o arquivo zip, você precisará descompactá-lo e importar o arquivo para o Divi Theme Builder.
Veja como fazer ...
- navegue até Divi> Theme Builder.
- Clique no ícone de portabilidade no canto superior direito.
- Selecione a guia de importação no pop-up de portabilidade.
- Escolha o arquivo json do arquivo que você baixou.
- Clique no botão Importar.
Parte 2: Adicionando a opção de adesão por e-mail ao modelo
Depois que o arquivo JSON tiver sido importado, clique no ícone de edição para editar o layout do modelo de corpo personalizado.
Na parte inferior do layout do modelo de postagem, você encontrará a seção com o formulário de opt-in de e-mail que usaremos para nosso opt-in de e-mail fixo.
Para este exemplo, queremos a posição fixa do opt-in de e-mail em uma seção para que o usuário não veja o opt-in de e-mail até que role para a seção com o opt-in de e-mail fixo. No entanto, como o opt-in do e-mail está em sua própria seção, o opt-in do e-mail não terá espaço suficiente para se mover. Portanto, precisamos trazê-lo para a seção acima, que contém a seção de comentários, de modo que o opt-in do e-mail passe o mouse sobre essa seção antes de parar em seu lugar original.
Adicionar nova linha na seção acima
Para fazer isso, crie uma nova linha de uma coluna diretamente abaixo da linha que contém o módulo de comentários.
Adicionar estilo de linha
Em seguida, abra as configurações da nova linha e adicione uma cor de fundo da seguinte forma:
- Cor de fundo: # 282828
Na guia de design, atualize o seguinte tamanho e espaçamento da linha:
- Largura: 100%
- Largura máxima: 100%
- Margem: 15vw superior
- Preenchimento: 0 px superior, 0 px inferior
Mover Email Opt-in para Nova Linha
Assim que o estilo da linha estiver em vigor, mova a opção de e-mail na seção inferior para a nova linha que você acabou de criar.
Exclua a seção inferior (não precisamos mais dela).
Atualize a aceitação de e-mail com posição fixa
Em seguida, abra as configurações para o opt-in de e-mail agora dentro da nova linha e atualize as opções de posição do stick da seguinte forma:
- Posição pegajosa: grudar no fundo
- Limite de aderência superior: Seção
Isso fará com que a opção de e-mail fique na parte inferior da janela do navegador ao rolar pela seção antes de parar na linha pai.
Atualizar estilo de ativação de e-mail
Na guia de design, atualize o layout da opção de e-mail da seguinte maneira:
- Layout: corpo na parte superior, formulário na parte inferior
Em seguida, atualize o seguinte estilo:
- Tamanho do texto do título: 32px
- Largura máxima: 600px
- Alinhamento do Módulo: Centro
Em seguida, defina o estilo de animação como nenhum.
Resultado
Neste ponto, podemos verificar o resultado visualizando uma postagem em outra janela do navegador.
Adicionando estilo de posição aderente
Quando a opção de e-mail está na posição fixa, podemos adicionar um estilo específico ao módulo que se aplicará apenas ao estado fixo. Isso nos permite adicionar diferentes esquemas de cores para compensar o fundo branco e fazê-lo se destacar um pouco mais.
Para adicionar uma cor de fundo diferente para o estado aderente, abra as configurações de ativação do e-mail e selecione o ícone em miniatura (ícone aderente) próximo à opção de fundo. Em seguida, clique na guia aderente e adicione a seguinte cor de fundo:
- Cor de fundo (aderente): # 282828
Continue o mesmo processo para adicionar um estilo fixo às seguintes opções na guia de design:
- Cor do texto do título (aderente): #ffffff
- Cor do corpo do texto (aderente): #ffffff
- Largura máxima (aderente): 500 px
- Preenchimento (adesivo): 18 px superior, 30 px inferior, 30 px à esquerda, 30 px à direita
Resultado
Agora vamos verificar o resultado em uma postagem ao vivo.
Adicionar efeito Hover Popup à ativação de e-mail fixo
Para adicionar um efeito pop-up instantâneo na opção de adesão por e-mail, abra as configurações de opção de e-mail e atualize a tradução da transformação de stick da seguinte maneira:
- Transformar Traduzir Eixo Y (aderente): 85%
Isso trará o opt-in do e-mail para baixo (fora da janela de visualização) em 85% de sua própria altura, expondo apenas o suficiente do opt-in do e-mail para que o usuário possa passar o mouse sobre o título.
Em seguida, adicione um estado de foco à opção de transformação para que a posição de translação da transformação volte à sua posição original ao passar o mouse:
- Transformar Traduzir Eixo Y (pairar): 0%
Resultado
Aqui está o resultado final.
Resultados finais
Aqui estão as três versões do nosso cabeçalho fixo que construímos.
Pensamentos finais
Felizmente, o Divi torna mais fácil adicionar opções de e-mail fixas ao seu site. Isso libera mais tempo para ajustar o design de seu elemento aderente para maneiras mais exclusivas de exibir seu formulário. Esperançosamente, essa técnica serve a você nos próximos projetos de blog.
Estou ansioso para ouvir de você nos comentários.
Saúde!