O Divi Layout Block abre a porta para muitas maneiras convenientes de integrar os poderosos recursos de design do Divi Builder com o editor de blocos padrão do WordPress (Gutenberg). Isso permite que você escreva a maior parte do conteúdo da postagem do seu blog usando a interface de bloco familiar do Gutenberg e, em seguida, injete layouts Divi onde o design ou funcionalidade personalizada for necessária. Um bloco de layout Divi pode incluir qualquer coisa que você possa criar no Divi Builder, mas também é ótimo para incluir algo tão simples e essencial como um formulário de assinatura.
Neste tutorial, veremos como adicionar um formulário assinatura de uma postagem no blog do Gutenberg usando o bloco de layout Divi.
Resultado Possível
Importando o Bloco de Layout JSON
Faça o download do layout na biblioteca Divi
Para importar o arquivo JSON que você conseguiu baixar acima, vá para sua biblioteca Divi no backend do seu painel do WordPress e clique em 'Importar e exportar'.
Em seguida, selecione o arquivo JSON na sua pasta de download e clique em "Importar layouts do Divi Builder".
Adicionar um novo Bloco Divi dentro do posto de Gutenberg
Depois que seu layout for importado, você poderá acessar sua mensagem do Gutenberg e adicionar um novo bloco de layout Divi.
Importar um arquivo JSON de apresentações salvas
Em seguida, clique em "Carregar da biblioteca", vá até "Seus layouts salvos" e selecione o layout para importar o bloco de layout Divi CTA para a postagem do seu blog. É isso aí !
E isso é tudo!
Vamos passar para o tutorial, ok?
Adicione um módulo de email Optin à sua postagem no blog Gutenberg
Criar ou editar uma postagem do blog
Para começar, precisamos criar uma nova postagem no blog ou editar uma existente. Para este exemplo, vamos adicionar conteúdo Simule o título e o corpo do artigo usando alguns blocos de cabeçalho e parágrafo. Em seguida, adicione uma imagem em destaque e escolha “Sem barra lateral” para o layout nas configurações da página Divi.
Adicione um bloco de layout Divi online
Depois de criar a maior parte da postagem, tudo o que precisamos fazer é adicionar um novo bloco de layout Divi onde quisermos na área de postagem. conteúdo de publicação. Poderíamos adicioná-lo em algum lugar próximo ao final da mensagem para capturar um lead qualificado que esteja obviamente interessado no conteúdo da mensagem.
Para adicioná-lo, passe o mouse sobre a área onde 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 contextuais, selecione o bloco Divi Layout.
Crie um novo layout no bloco de layout Divi
Uma vez selecionado o bloco de layout Divi, teremos a opção de “Criar um novo layout” ou “Carregar da biblioteca”. Como precisamos criar a opção de e-mail do zero, escolha a opção “Criar Novo Layout”.
Design da seção
No editor de layout, podemos começar a projetar a opção de e-mail para ser incluída em nossa postagem. Tudo o que projetamos neste editor será exibido na área Divi Layout Block da postagem.
Para começar, abra as configurações da seção padrão já existente.
Para o layout, escolheremos um layout de duas colunas.
Em seguida, adicionaremos o módulo Email Optin a uma das colunas, deixo a escolha da coluna para você.
A seguir, personalizaremos o plano de fundo da seção. Você sempre pode alterar os valores para tornar seu design único. No entanto, usamos os seguintes valores:
- Plano de Fundo: # ff6100
- Separador superior e inferior: o 13º contando a partir do topo.
- Largura do elemento divisor: 40px (superior e inferior).
Agora adicionaremos texto à coluna oposta. Aqui você usará um texto de incentivo para trazer o visitante subscrever.
Você precisará fazer as diferentes modificações:
- Texto da fonte: Montserrate
- Cor da fonte: #FFF
- Legenda da fonte de texto H2: Montserrat
- Tamanho da legenda H2 do texto: 2.5em
- Subtítulo do texto H2 Cor: #FFF
Lembre-se de configurar o sistema de e-mail que usará. Você deve saber que Gutenberg é compatível com MailChimp.
Considerações finais
Adicionar um e-mail opcional à sua mensagem Gutenberg tornou-se incrivelmente fácil com o bloco de layout Divi. Você não só pode adicionar uma opção de e-mail 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!
