Como adicionar um Divi Email Optin à sua postagem do blog Gutenberg

O Divi Layout Block abre a porta para muitas maneiras convenientes de trazer os poderosos recursos de design do Divi Builder para o editor de blocos padrão do WordPress (Gutenberg). Isso permite que você escreva a maior parte do conteúdo de sua postagem de blog usando a interface de bloco Gutenberg familiar e, em seguida, injete Divi Layouts onde design personalizado ou funcionalidade são necessários. Um Divi Layout Block pode incluir qualquer coisa que você possa construir dentro do Divi Builder, mas também é ótimo para incluir algo tão simples e essencial como um Email Optin.

Neste tutorial, vamos cobrir como adicionar um belo Divi Email Optin a uma postagem do blog de Gutenberg usando o Divi Layout Block.

Vamos começar!

Espiada

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.

Baixe os arquivos

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.

DOWNLOAD

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!

Importando o Layout Block JSON

Carregar Layout para Biblioteca Divi

Para importar o arquivo JSON que você conseguiu baixar acima, vá para a Biblioteca Divi no backend do painel do WordPress e clique em 'Importar e Exportar'.

Em seguida, selecione o arquivo JSON dentro da pasta de download e clique em 'Import Divi Builder Layouts'.

Adicionar novo bloco Divi dentro do Gutenberg Post

Uma vez que seu layout foi importado, você pode ir ao seu posto de Gutenberg e adicionar um novo bloco de layout Divi.

Importar arquivo JSON de layouts salvos

Em seguida, clique em 'Carregar da biblioteca', navegue até 'Seus layouts salvos' e selecione o layout para importar o bloco de layout Divi CTA para a postagem do seu blog. É isso!

E é isso!

Vamos para o tutorial, vamos?

Adicionando uma opção de e-mail da Divi à sua postagem do blog Gutenberg

Criar ou editar uma postagem no blog

Para começar, precisamos criar uma nova postagem no blog ou editar uma existente. Para este exemplo, vamos adicionar algum conteúdo simulado ao título e corpo do post usando alguns blocos de título e parágrafo. Em seguida, adicione uma imagem em destaque e escolha “Sem barra lateral” para o Layout da página nas Configurações da página Divi.

Adicionar Bloco de Layout Divi Inline

Depois de criar a maior parte da postagem, tudo o que precisamos fazer é adicionar um novo Bloco de Layout Divi em qualquer lugar que quisermos na área de conteúdo da postagem. Poderíamos adicioná-lo em algum lugar mais perto do final da postagem para capturar um lead qualificado que está obviamente interessado no conteúdo da postagem.

Para adicioná-lo, passe o mouse sobre a área em que deseja adicionar a opção de e-mail e clique no ícone de adição azul para adicionar um novo bloco. Na lista de blocos pop-up, selecione o bloco Divi Layout.

Construir novo layout dentro do bloco de layout Divi

Uma vez que o Divi Layout Block foi selecionado, teremos a opção de “Construir Novo Layout” ou “Carregar da Biblioteca”. Como precisamos construir o optin de e-mail do zero, escolha a opção “Build New Layout”.

Projeto de Seção

Dentro do editor Layout Block, podemos começar a projetar a opção de e-mail a ser incluída em nossa postagem. Qualquer coisa que projetarmos neste editor será exibida na área Divi Layout Block da postagem.

Para começar, abra as configurações de seção da seção padrão que já está lá.

Gradiente de Fundo

Em seguida, adicione um gradiente de fundo da seguinte maneira:

• Cor do gradiente de fundo à esquerda: # ff9945
• Cor certa do gradiente de fundo: # f86a4c

Divisores

Em seguida, vá para a guia de design e um divisor de seção superior e inferior da seguinte maneira:

• Estilo do divisor superior: veja a captura de tela
• Cor do divisor superior: # f86a4c
• Repetição horizontal do divisor superior: 0,8x

• Estilo do divisor inferior: veja a captura de tela
• Cor do divisor inferior: # ff9945
• Repetição horizontal do divisor inferior: 0,8x
• Virar divisor inferior: horizontal e vertical

Margem e Fronteira

Depois que as divisórias estiverem no lugar, dê à seção uma pequena margem acima e abaixo e termine com uma borda e uma animação como segue:

• Margem: 20px superior, 20px inferior
• Cantos arredondados: 30px
• Largura da borda: 2px
• Cor da borda: # ff9945
• Estilo de animação: Flip

Adicionar coluna e definir largura de linha

Agora que a seção está concluída, adicione uma estrutura de uma coluna à linha.

Em seguida, atualize as configurações de linha da seguinte forma:

• Largura: 100%
• Largura máxima: 100%

Crie a opção de email

Adicionar Módulo de Aceitação de Email

Em seguida, adicione um módulo de optin por e-mail à linha.

Conteúdo Optin por Email

Para as configurações de conteúdo de ativação de e-mail, atualize o seguinte:

• Título: “Receba dicas GRATUITAS todas as semanas!”
• Corpo: [manter o conteúdo simulado padrão]
• Lista Mailchimp: [adicionar uma lista]
• Use o campo de nome único: SIM
• Usar cor de fundo: NÃO

Email Optin Design

Campos

Vá para a guia de design e projete os campos de permissão de e-mail atualizando o seguinte:

• Layout: corpo à direita, formulário à esquerda
• Cor de fundo dos campos: # f86a4c
• Cor do texto dos campos: #ffffff
• Fonte dos campos: IBM Plex Sans
• Tamanho do texto dos campos: 18px
• Espaçamento das letras dos campos: 2px
• Altura da linha dos campos: 2em

Título

Atualize as configurações do texto do título da seguinte forma:

• Fonte do título: IBM Plex Sans Condensed
• Peso da fonte do título: Semi negrito
• Cor do texto do título: #ffffff
• Tamanho do texto do título: 60 px (desktop), 30 px (telefone)
• Altura da linha de título: 1,2em (desktop), 1,6 (telefone)

Botão

Para o botão, atualize o seguinte:

• Use estilos personalizados para botão: SIM
• Cor do texto do botão: # ff9945
• Gradiente de fundo do botão, cor esquerda: # ff9945
• Gradiente de fundo do botão - cor certa: #ffffff
• Direção do gradiente: 90 graus
• Posição final: 34%
• Largura da borda do botão: 0 px
• Espaçamento entre letras dos botões: 2 px
• Fonte do botão: IBM Plex Sans
• Peso da fonte do botão: negrito
• Estilo da fonte do botão: TT
• Preenchimento do botão: 15 px superior, 15 px inferior

Preenchimento

E para um último toque, adicione o seguinte preenchimento:

• Preenchimento: 5% à esquerda, 5% à direita

Resultado final

Assim que terminarmos de projetar o layout no editor Divi Layout, certifique-se de salvar o layout. Em seguida, salve a postagem para que você possa ver uma prévia da opção de e-mail em uma página ao vivo. Aqui está o que parece.

Aqui está uma pequena animação da opção de e-mail conforme você rola a postagem.

Pensamentos finais

Adicionar um email optin ao seu post Gutenberg ficou incrivelmente simples com o Divi Layout Block. Você não só pode adicionar uma opção de email totalmente funcional (e fácil de usar) em segundos, mas também pode usar o Divi Builder para adicionar design personalizado, efeitos de foco e animação. Tudo isso sem precisar usar um plugin!

Estou ansioso para ouvir de você nos comentários.

Saúde!