Ir para o conteúdo principal

3 design para formulário de inscrição possível no Divi

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

Todos nós amamos novos assinantes da nossa lista de boletins. Uma das principais maneiras de obter novos assinantes é fornecer aos visitantes um formulário de registro de email bem projetado. É por isso que, neste tutorial, mostrarei como fazer três designs diferentes com o módulo de assinatura de e-mail Divi para estimular sua imaginação sobre as possibilidades desse módulo poderoso e flexível.

Visão geral

Aqui está uma visão geral dos três conceitos do módulo de e-mail Divi que exploraremos hoje.

Aceitar # 1 de pilhas de sombras

Formulário de inscrição 1 completo

Comece a projetar # 1

# 2 Opt-in grande e mínimo

módulo de mensagens opt-in divi

Comece a projetar # 2

# 3 formulário de assinatura pequena

email form 3.png

Comece a projetar # 3

O que você precisa para começar

Para este tutorial, tudo que você precisa é Divi. Criaremos cada um desses formulários a partir do zero, portanto, não há necessidade de um layout predefinido. No entanto, usarei algumas imagens de alguns dos pacotes de layout, mas você pode usar o seu, se desejar.

Além disso, é importante saber que você não poderá ver os campos do formulário de inclusão no site ativo até atribuir uma lista de emails / provedor de email ao seu módulo de assinatura de email. Você pode fazer isso nas configurações Optin do seu email em Conta de email.

configuração de email divi.jpg

Agora vamos para esses desenhos!

Aceitar # 1 de pilhas de sombras

Formulário de inscrição 1 completo

Esse design adiciona duas sombras de caixa ao Divi Email Enrollment Module para um efeito de empilhamento exclusivo que exibe o formulário. A primeira sombra da caixa é adicionada ao módulo de associação de email e a segunda caixa é adicionada à linha que possui um tamanho e borda personalizados para fazê-lo funcionar.

Veja como isso é feito.

Comece criando uma nova seção com uma linha de uma coluna e adicione o módulo de registro de email à 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:
Título do centro Peso da fonte:
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

formulário de inscrição divi.jpg

Agora, vamos adicionar nossa primeira camada de sombra de caixa atrás do nosso módulo de aceitação de email.

Box Shadow: veja a captura de tela
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)

configuração border email form.jpg

Agora vamos adicionar uma pequena amostra de código CSS personalizado para remover o preenchimento do lado esquerdo adicionado por padrão ao formulário. Vá para a guia Avançado e adicione o seguinte CSS em Formulário de associação.

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

padding-left: 0px ! Importante;

formulário de preenchimento optin divi.jpg

Isso suporta as configurações do módulo de email opt-in. Agora, vamos editar nossa linha. Abra as configurações de linha e atualize os seguintes itens:

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)

configuração de fronteira line.jpg

Agora podemos adicionar a sombra da caixa na linha.

Box Shadow: veja a captura de tela
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)

linha de sombra de configuração divi email form.jpg

Tudo o que você precisa fazer agora é alterar o texto no formulário. Agora vamos ver o design final.

Formulário de inscrição 1 completo

# 2 Opt-in grande e mínimo

email form 2 divi.png

Esse design de email opcional é mínimo, limpo e ótimo. Os campos do formulário se adaptam ao tamanho do navegador, para que sua aparência seja ótima em todos os dispositivos. E não é muito grande para forçar a rolar a página.

Veja como fazer isso.

Comece criando uma nova seção com uma linha de uma coluna e adicione o módulo de registro de email à linha.

Abra as configurações de participação por email e atualize o conteúdo para incluir o título e o texto do rodapé.

2 popup configuration email.jpg

Atualize o plano de fundo com uma cor ou imagem escura:

Cor de fundo: #121212
Imagem de fundo: é opcional. Eu uso um dos pacotes de layout do Podcast

Antes de passar para a guia Design para obter mais personalização, precisamos abrir espaço para os elementos de formulário grandes que adicionaremos. Para fazer isso, vá para os parâmetros da linha e atualize o seguinte:

Largura personalizada: 100%

Conselho: Usar uma largura personalizada em 100% é 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á 89%, assim você ainda terá margens no seu celular.

Retorne agora à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

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

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

email de confiugração 2.png

Observe o uso da unidade de comprimento vw para o tamanho da fonte combinado com a unidade de comprimento em para a altura da linha e o espaçamento das 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 ajustar o design. Vá para a guia Avançado e adicione o seguinte CSS personalizado em Campos do formulário de associação:

tamanho da fonte: 3.5vw;

Isso permitirá que o tamanho do texto ao digitar corresponda ao texto alternativo nos campos do seu formulário.

Em seguida, adicione uma margem personalizada acima do botão para dar uma pequena pausa. Adicione os seguintes itens no botão Inscrever-se:

margem superior-: 3.5vw;

configuração de margem de formulário divi email.png

Agora vamos ver o design final.

exemplo de design final 2 divi email.png

# 3 Small subscription form

pequena assinatura form.png

Esse novo design certamente será uma solução popular para empresas e blogs que desejam economizar espaço vertical em suas publicações ou páginas de destino. Embora o módulo de associação de e-mail da Divi seja melhor para formulários verticais mais tradicionais, você pode convertê-lo em um formulário horizontal em uma linha com apenas um pequeno pedaço 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 inscrição por email 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

exemplo de criação de fórum 3 divi email.png

Chegou a hora do CSS personalizado. Como queremos que o design do formulário fino seja apenas na área de trabalho (não no celular), adicionaremos o CSS à página (nas configurações da página) usando um ID CSS personalizado para segmentar 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

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

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 (min-width: 980px) {# skinny.et_pb_newsletter .and_pb_newsletter_fields {flex-wrap: nowrap! important; } # skinny.et_pb_newsletter .et_pb_newsletter_fields> * {base flexível: 23%; }} #skinny .et_pb_newsletter_form {padding-left: 0px; }

configuração css.png

Como o Divi já usa flex para estilizar o formulário no back-end, esse CSS remove a propriedade flex-wrap que alinha os campos do formulário verticalmente. O resultado é um layout horizontal dos campos do formulário. Ao ajustar a propriedade flex-base para 23%, você geralmente define a largura de cada um dos campos do formulário. E como adicionamos CSS em uma consulta multimídia, o design só acontecerá na área de trabalho com a apresentação padrão do formulário exibida no celular.

Aqui está o desenho final.

exemplo de email de formulário de design 3.png

exibir em dispositivos móveis.png

Isso é tudo para este tutorial, espero que permita criar formulários de assinatura exclusivos no Divi Builder.

Este artigo contém comentários 0

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo