Como projetar uma seção de assinatura atraente para qualquer tipo de site com Divi

Um dos principais motivos pelos quais as pessoas criam sites é encontrar uma nova maneira de abordar seu público-alvo. Depois de dar o primeiro passo e começar a construir um site, você começa a se perguntar como exatamente poderá entrar em contato com seus clientes em potencial. Uma das coisas que provaram ajudar muitos proprietários de sites é a construção de listas. É uma questão de coletar endereços de e-mail de visitantes, transformando-os em leads (e eventualmente em clientes) com marketing por e-mail.

E com o edifício da lista vem a criação de seções de assinatura atraentes em seu site. Você deseja que sua seção de inscrição seja atraente e, mais importante, deseja que sua seção de inscrição seja convertida. Para este tutorial, criamos uma seção de assinatura impressionante que inegavelmente chamará a atenção do seu visitante. Estamos combinando um design elegante com argumentos sobre por que se inscrever para uma lista de e-mail. Além disso, também compartilharemos três paletas de cores que você pode escolher ao criar o design.

Vamos lá!

Inscreva-se no nosso canal no Youtube

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada no resultado em diferentes tamanhos de tela.

Paleta de cores # 1

• Cor # 1: rgba (79,35,255,0,88)
• Cor # 2: # e09900
• Cor # 3: # 4f23ff

Paleta de cores # 2

• Cor # 1: rgba (255,35,97,0,75)
• Cor # 2: # e09900
• Cor # 3: # d80e00

Paleta de cores # 3

• Cor # 1: rgba (41,17,147,0,75)
• Cor # 2: # 00ffd8
• Cor # 3: # 291193

Abordagem

Escolha uma das paletas de cores acima (ou crie a sua própria) e use essas cores ao longo do tutorial. Iremos nos referir às cores 1, 2 ou 3 quando estivermos usando uma cor em nossas configurações. Também estamos fazendo o Módulo de assinatura sobrepor duas colunas e enfatizando os benefícios de se inscrever para uma lista de e-mail.

Recriar a seção de inscrição

Adicionar uma nova seção

Divisor superior

Abra a página à qual deseja adicionar sua seção de inscrição e adicione uma nova seção padrão. Abra as configurações de sua seção imediatamente e adicione o seguinte divisor superior:

• Estilo do divisor: Encontrar na lista
• Cor do divisor: #FFFFFF
• Altura do divisor: 200px
• Divider Flip: Vertical

Divisória Inferior

Adicione o mesmo tipo de divisor na parte inferior de sua seção:

• Estilo do divisor: Encontrar na lista
• Cor do divisor: #FFFFFF
• Altura do divisor: 200px
• Divider Flip: Vertical

Espaçamento

Abra as configurações de Espaçamento a seguir e remova todo o preenchimento padrão de sua seção, adicionando '0px' ao preenchimento superior e inferior.

Adicionar uma nova linha

Estrutura da Coluna

Agora que concluímos todas as configurações de seção, podemos adicionar uma nova linha. Escolha a seguinte estrutura de coluna para ele

Fundo Gradiente

Abra as configurações de linha e continue adicionando o seguinte fundo gradiente:

• Cor do primeiro gradiente: cor # 1
• Segunda cor de gradiente: cor # 2
• Direção do gradiente: 123deg
• Colocar gradiente acima da imagem de fundo: Sim

Imagem de fundo

Continue adicionando uma imagem de fundo de sua escolha. Esta imagem de fundo só aparecerá um pouco. Escolha 'Capa' como o tamanho da imagem de fundo também.

Cor de fundo da coluna 2

Em seguida, adicione 'rgba (255,255,255,0,87)' como a Cor de fundo da coluna 2.

Dimensionamento

Também vamos reduzir o espaço entre as duas colunas e fazer com que a linha ocupe toda a largura da tela, aplicando as seguintes configurações de dimensionamento:

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Equalize a altura das colunas: Sim

Espaçamento

A última coisa que você precisa fazer nas configurações de linha é adicionar algum preenchimento personalizado:

• Preenchimento superior e inferior: 0 px
• Preenchimento superior da coluna 1: 200 px
• Preenchimento inferior da coluna 1: 100 px
• Preenchimento superior da coluna 2: 300 px (desktop) 50 px (tablet e telefone)
• Preenchimento inferior da coluna 2: 100 px (tablet e telefone)
• Preenchimento da coluna 2 esquerdo e direito: 50 px

Adicione o Módulo Blurb # 1 à Coluna 1

Adicionar título do Blurb

Agora vamos começar a adicionar nossos módulos! Começaremos com a primeira coluna adicionando um Módulo do Blurb. Assim que terminarmos de modificar esse módulo do Blurb, reutilizaremos suas configurações para os outros dois também. Depois de adicionar um Módulo do Blurb, dê um título a ele.

Adicionar ícone do Blurb

Em seguida, adicione um ícone ao seu Módulo Blurb. Usamos o seguinte ícone para o primeiro módulo:

Configurações de ícone

Altere a aparência do ícone adicionando as seguintes configurações:

• Cor do ícone: #FFFFFF
• Posicionamento do ícone: topo
• Use o tamanho da fonte do ícone: Sim
• Tamanho da fonte do ícone: 43px

Configurações de texto do título

Estamos usando apenas um título comercial. É por isso que precisaremos modificar as configurações de texto do H4 apenas:

• Fonte do título: Yeseva One
• Alinhamento do Texto do Título: Centro
• Cor do texto do título: #FFFFFF
• Espaçamento entre letras de título: -1px

Dimensionamento

Também modificaremos a largura do nosso Módulo Blurb de acordo com os diferentes tamanhos de tela:

• Largura do conteúdo: 150 px
• Largura: 33% (desktop), 40% (tablet), 60% (telefone)
• Alinhamento do Módulo: Centro

Espaçamento

Por último, adicione o seguinte preenchimento personalizado ao seu Módulo Blurb também:

• Preenchimento superior e inferior: 50 px

Clonar o módulo do Blurb duas vezes e modificar o módulo do Blurb em destaque

Alterar ícone e conteúdo

Agora você pode clonar o Módulo Blurb duas vezes. Mantenha todos eles na primeira coluna. Para cada um dos novos Módulos do Blurb, vá em frente e altere o ícone e o título para que correspondam à mensagem que você deseja enviar.

Adicionar cor de fundo

Vamos destacar o módulo do meio do Blurb. Para fazer isso, começaremos adicionando uma cor de fundo branca a ele.

Alterar a cor do ícone e do texto do título

Também mudaremos a cor do ícone e o título H4 para '# 000000'.

Adicionar cantos arredondados

A seguir, adicionaremos '5px' a cada um dos cantos nas configurações de Borda.

Sombra da caixa

Por último, mas não menos importante, adicionaremos um pouco de profundidade usando a primeira opção de sombra da caixa.

Adicione o Módulo de Texto # 1 à Coluna 2

Configurações de texto

Vamos passar para a segunda coluna! O primeiro módulo de que precisaremos é um Módulo de Texto. Depois de adicionar seu conteúdo, aplique as seguintes configurações de texto a ele:

• Fonte do Texto: Yeseva One
• Cor do texto: # 000000
• Tamanho do texto: 54px
• Altura da linha de texto: 1em

Adicionar Módulo de Texto # 2 à Coluna 2

Espaçamento

Logo abaixo desse Módulo de Texto, vamos adicionar outro Módulo de Texto para a descrição. Depois de adicionar seu conteúdo, adicione '20px' à margem superior.

Adicionar Módulo de Aceitação de Email à Coluna 2

Cor de fundo

O próximo módulo que precisaremos adicionar é um Módulo de aceitação de e-mail. Depois de adicioná-lo, vá em frente e altere a cor de fundo para 'rgba (255,255,255,0).'

Conta de e-mail

Em seguida, adicione sua conta de e-mail, escolhendo o provedor de serviços de sua preferência.

Campos

Continue abrindo as configurações de Campo e desabilite os campos Nome e Sobrenome.

Configurações de campo

Também modificaremos as configurações do campo. Remova os cantos arredondados adicionando '0px' a cada um dos cantos. Adicione também a primeira opção de sombra da caixa.

Configurações de botão

Em seguida, altere a aparência do seu botão:

• Cor do texto do botão: #FFFFFF
• Cor de fundo do botão: Cor # 3
• Largura da borda do botão: 0 px
• Raio da borda do botão: 0 px
• Fonte do botão: Yeseva One
• Mostrar ícone do botão: Sim
• Cor do ícone do botão: #FFFFFF
• Posicionamento do ícone do botão: Esquerda
• Mostrar apenas o ícone ao passar o mouse para o botão: Não
• Sombra da caixa: Selecione a primeira opção

Espaçamento

Por último, faça com que o Módulo de Assinatura se sobreponha às duas colunas usando as seguintes configurações de Espaçamento:

• Margem superior: 20 px (desktop), 0 px (tablet e telefone)
• Margem esquerda: -60% (desktop e tablet), 0px (telefone)
• Margem direita: 60% (desktop), 50% (tablet), 0px (telefone)

Adicionar Módulo de Acompanhamento de Mídia Social à Colum 2

Adicione quantas redes sociais desejar

Por último, mas não menos importante, adicionaremos um Módulo de Acompanhamento de Mídia Social. Vá em frente e adicione as redes sociais que você deseja que apareçam.

Cantos arredondados

Depois de adicionar todas as redes sociais, adicione '50px' a cada um dos cantos nas configurações de Borda.

Espaçamento

Também empurraremos o módulo para baixo adicionando '50px' à margem superior.

Alterar a cor de fundo de cada rede social individualmente

Por último, mas não menos importante, altere a cor de fundo de cada uma das redes sociais individualmente para '# 000000'.

Antevisão

Agora que passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.

Pensamentos finais

As seções de inscrição são uma parte importante do seu site. Eles ajudam você a criar listas de e-mail, habilitar o marketing por e-mail e transformar clientes potenciais em visitantes em apenas uma questão de tempo. Neste artigo, mostramos como criar uma seção de assinatura impressionante que se encaixará em qualquer tipo de site que existe. Combinamos o uso de um design lindo com a divulgação das vantagens de inscrição. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!