Todos nós amamos com novos assinantes da nossa lista de newsletter . Uma das principais formas de conseguir novos assinantes é fornecer aos seus visitantes um formulário inscrição de e-mail bem projetada. É por isso que, neste tutorial, vou mostrar a você como fazer três designs diferentes com o Divi Email Subscription Module para despertar sua imaginação sobre as possibilidades deste poderoso e flexível módulo.
Visão geral
Aqui está uma visão geral dos três conceitos do módulo de email Divi que exploraremos hoje.
Aceitar # 1 de pilhas de sombras
# 2 Opt-in grande e mínimo
# 3 pequeno formulário de inscrição
O que você precisa para começar
Para este tutorial, tudo o que você precisa é Divi. Vamos construir cada um destes formulário do zero, portanto, não há necessidade de um layout pré-fabricado. No entanto, usarei algumas imagens de alguns dos pacotes de layout, mas você pode usar as suas próprias, se desejar.
Além disso, é importante saber que você não poderá ver os campos do formulário inclusão no site ativo até que você atribua um provedor/lista de e-mail ao seu módulo de assinatura de e-mail. Você pode fazer isso nas configurações de ativação do seu e-mail em Conta de e-mail.
Agora vamos para esses desenhos!
Aceitar # 1 de pilhas de sombras
Esse design adiciona duas sombras de caixa ao módulo de inscrição de e-mail Divi para um efeito de empilhamento exclusivo que aparece no formulário. A primeira sombra de caixa é adicionada ao módulo de aceitação de e-mail e a segunda sombra de caixa é adicionada à linha que possui um tamanho e uma borda personalizados para que funcione.
Assim que se faz.
Primeiro crie uma nova seção com uma linha de uma coluna e, em seguida, adicione o módulo de inscrição de e-mail à linha.
Abra as configurações de conexão de email e atualize o seguinte:
Cor de fundo: #1a0a38
Layout: Corpo na parte superior, Forma na base
Moedas de Campos Arredondados: 0px
Orientação de texto:
Peso da fonte do título central:
Limpar título Tamanho do texto: 36px
Cor do botão de texto: #ffffff
Cor de fundo do botão: # 00ac69
Largura da borda do botão: 0px
Raio do botão: 0px
Preenchimento personalizado: 3vw na parte superior, 3vw na parte inferior, 5vw na esquerda, 5vw na direita
Agora, vamos adicionar nossa primeira camada de sombra de caixa atrás do nosso módulo de aceitação de email.
Sombra da caixa: veja a imagem
Posição Horizontal da Sombra da Caixa: 25px
Posição Vertical da Sombra da Caixa: -25px
Cor da sombra: rgba (26,10,56,0.82)
Agora vamos adicionar um pequeno fragmento de código CSS personalizado para remover o preenchimento esquerdo adicionado por padrão ao formulário. Vá para a guia Avançado e adicione o seguinte CSS no Formulário de associação.
padding-left: 0px !important; |
Isso suporta as configurações do módulo de e-mail opcional. Agora vamos editar nossa linha. Abra as configurações de linha e atualize o seguinte:
Largura personalizada: 600px
Preenchimento personalizado: 25px para cima, 0px para baixo, 25px para a direita
Largura da borda inferior: 25px
Cor da borda inferior: rgba (0,0,0,0)
Largura da borda esquerda: 25px
Cor da borda esquerda: rgba (0,0,0, 0)
Agora podemos adicionar a sombra da caixa à linha.
Sombra da caixa: veja a imagem
Posição Horizontal da Sombra da Caixa: 50px
Posição Vertical da Sombra da Caixa: -50px
Força de propagação de sombra de caixa: -25px
Cor da sombra: rgba (26,10,56,0.55)
Tudo que você precisa fazer agora é editar o texto no formulário. Agora vamos ver o design final.
# 2 Opt-in grande e mínimo
Esse design de e-mail opt-in é mínimo, limpo e grande. Os campos de formulário se adaptam ao tamanho do navegador, por isso fica ótimo em todos os dispositivos. E não é muito grande para exigir rolagem.
Veja como fazer isso.
Primeiro crie uma nova seção com uma linha de uma coluna e, em seguida, adicione o módulo de inscrição de e-mail à linha.
Abra as configurações de participação de email e atualize o conteúdo para incluir o texto do título e do rodapé.
Atualize o plano de fundo com uma cor ou imagem escura:
Cor de fundo: #121212
Imagem de fundo: opcional. Estou usando um do Pacote de Layout de Podcast
Antes de passar para a guia Design para mais personalização, precisamos abrir espaço para os grandes elementos do formulário que vamos adicionar. Para fazer isso, vá para as configurações de linha e atualize o seguinte:
Largura personalizada: 100%
Conselho: Usar uma largura 100% personalizada é uma ótima maneira de garantir que seu design não tenha margens esquerda ou direita no celular. Se você usar a opção "Gerar largura total", sua largura máxima será de 89%, para que você sempre tenha margens no seu celular.
Agora volte às configurações do módulo de registro de e-mail e atualize o seguinte modelo:
Layout: corpo para cima, forma para baixo
Cor de fundo do campo de formulário: rgba (0,0,0,0)
Cantos arredondados: 0px
Largura dos campos da borda inferior: 2px
Campos de cores da borda inferior: #ffffff
Orientação do Texto: Centro
Título da Fonte: Lato
Título da Fonte: Light
Estilo da fonte do título: TT
Tamanho do texto do título: 4vw
Altura da linha do título: 1em
Cor do texto de campo: #ffffff
Fonte do campo: Lato
Peso do campo da fonte: Light
Tamanho do texto: 3.5vw
Espaçamento das letras do campo: 0.1em
Altura da linha de campo: 1.3em
Espaçamento das letras do corpo: 0.5em
Tamanho do texto do botão: 4vw
Raio do botão: 0px
Espaço das letras dos botões: 0.1em
Fonte do botão: Lato
Peso da fonte: Light
Preenchimento personalizado: 10vw na parte superior, 10vw na parte inferior, 10vw na esquerda, 10vw na direita
Observe o uso da unidade de comprimento vw para o tamanho da fonte combinada com a unidade de comprimento em para a altura da linha e espaçamento entre letras. Isso permite que o texto e o design se adaptem perfeitamente ao ajustar seu navegador.
A última etapa inclui alguns trechos de CSS personalizados para aprimorar o design. Vá para a guia Avançado e adicione o seguinte CSS personalizado nos Campos do formulário de associação:
font-size: 3.5vw; |
Isso permitirá que o tamanho do texto ao digitar corresponda ao texto alternativo nos campos do seu formulário.
A seguir, vamos adicionar uma margem personalizada acima do botão para dar uma pausa. Adicione os seguintes itens no botão Inscrever-se:
margin-top: 3.5vw; |
Agora vamos ver o design final.
# 3 Pequeno formulário de assinatura
Esse novo design certamente será uma solução popular para empresas e blogs que desejam economizar espaço vertical em suas postagens ou páginas de destino. Embora o módulo de assinatura de e-mail do Divi seja mais adequado para formas formas verticais mais tradicionais, você pode realmente convertê-lo em um formulário horizontal de uma linha com apenas um pequeno trecho de código CSS.
Veja como fazer isso.
Crie uma nova seção com uma linha de uma coluna e adicione o módulo de associação de email à linha.
Abra as configurações de assinatura de e-mail e atualize o conteúdo para incluir um título, mas nada mais.
Atualize o desenho com um plano de fundo e uma cor de botão da seguinte maneira:
Cor de fundo: # 54677d
Layout: Corpo para cima, forma para baixo
Orientação do Texto: Centro
Cor de fundo do botão: #b0c94f
Largura da borda do botão: 0px
Agora é a hora de CSS customizado. Como queremos que o design do formulário fino seja apenas para desktop (não móvel), adicionaremos o CSS à página (nas configurações da página) usando um ID CSS personalizado para direcionar o estilo do formulário. .
Para fazer isso, vá para a guia Avançado e atribua um ID CSS personalizado ao módulo de associação.
Id CSS: magro
Isso será usado para direcionar este formulário com o CSS externo que adicionaremos à página.
Agora abra as configurações na página Divi Builder e adicione o seguinte CSS na guia Avançado.
@media (largura mínima: 980px) {# skinny.et_pb_newsletter .et_pb_newsletter_fields {flex-wrap: nowrap! important; } # skinny.et_pb_newsletter .et_pb_newsletter_fields> * {flex-basis: 23%; }} #skinny .et_pb_newsletter_form {padding-left: 0px; }
Uma vez que Divi já está usando flex para estilizar o formulário no backend, este CSS remove a propriedade flex-wrap que alinha os campos do formulário verticalmente. O resultado é uma organização horizontal dos campos do formulário. Ajustando a propriedade flex-base para 23%, você normalmente define a largura de cada um dos campos do formulário. E como adicionamos o CSS em uma solicitação de mídia, o design só acontecerá na área de trabalho com o layout padrão do formulário exibido no celular.
Aqui está o desenho final.
Isso é tudo para este tutorial, espero que permita que você crie formas assinatura única no Divi Builder.
