Quando você simplifica a maneira como cria postagens de blog em seu site da Web, é provável que você queira incluir um CTA atraente em algum lugar do seu artigo. Agora, com a nova integração do Gutenberg Layout Block do Divi, você pode facilmente adicionar um novo bloco construído pelo Divi em qualquer lugar da postagem do seu blog Gutenberg. Isso permite que você mantenha o conteúdo postagem geral do blog no ambiente Gutenberg, enquanto continua a criar um Divi CTA personalizado usando as opções integradas do Divi. O melhor de dois mundos! Neste tutorial, mostraremos como adicionar um bloco de layout Divi CTA animado e embutido à sua postagem do Gutenberg. Também compartilharemos o arquivo JSON do bloco de layout Divi CTA gratuitamente!
Vamos.
Resultado Possível
Antes de mergulharmos no tutorial, vamos dar uma olhada no resultado em diferentes tamanhos de tela.
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 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 o seu blog. É isso aí!
Vamos começar a recriar!
Use o modelo de publicação para o terceiro pacote de temas
Use o terceiro construtor de temas
É hora de começar a criar do zero! Em primeiro lugar, o design que estamos a recriar corresponde ao terceiro pack de criação de temas publicado no blog da Divi. Vá para o artigo e faça o download dos arquivos JSON deste pacote de criação de temas.
Vá para o Divi Theme Builder
Depois de baixar o terceiro pacote de criação de temas, você pode acessar o Divi Theme Builder.
Faça o download do modelo de publicação
Baixe o modelo de postagem do Theme Building Pack clicando no ícone no canto superior direito.
Em seguida, selecione o modelo de postagem e clique em "Importar modelos Divi Theme Builder". Certifique-se de salvar as mudanças no construtor de tema também. Neste ponto, atribuímos o modelo de postagem do blog do Pacote de Criação de Tema a todas as nossas postagens.
Abra uma publicação existente do Gutenberg ou crie uma nova
A próxima etapa é adicionar o bloco de layout Divi CTA à nossa postagem de Gutenberg. Para fazer isso, abra um artigo existente ou crie um novo.
Adicione um novo bloco Divi online
Uma vez dentro da mensagem, você pode adicionar um novo bloco de layout Divi.
Crie um novo layout dentro do bloco Divi
Então você terá duas opções. Selecione a opção "Criar um novo layout".
Configurações de seção
espaçamento
Uma vez dentro do editor de blocos de layout Divi, você notará uma seção. Abra esta seção e adicione valores de margem personalizados para criar espaço ao redor do contêiner da seção.
- Margem superior: 50px
- Margem inferior: 50px
- Margem esquerda: -10%
- Margem direita: -10%
Adicionar linha 1
Estrutura da coluna
Continue adicionando uma nova linha usando a seguinte estrutura de colunas:
dimensionamento
Sem adicionar mais módulos, abra os parâmetros da linha e aumente a largura e a largura máxima.
- Largura: 100%
- Largura máxima: 100%
Adicione o separador nº 1 à coluna
visibilidade
É hora de adicionar módulos, começando com um módulo de separação. Certifique-se de que a opção “Mostrar separador” esteja habilitada.
- Mostrar separador: Sim
Linha
Alterne para a guia de design do módulo e altere as configurações de linha da seguinte forma:
- Cor da linha: # fc526e
- Estilo da linha: sólido
- Posição da linha: alta
dimensionamento
Modifique também os parâmetros de dimensionamento.
- Peso do divisor: 3px
- Largura: 30%
- Alinhamento do módulo: direito
- Altura: 3px
Animação
E altere as configurações de animação de acordo:
- Estilo de animação: slide
- Direção da animação: esquerda
- Duração da animação: 2000ms
- Atraso de animação: 500 ms
- Intensidade da animação: 100%
- Opacidade de início da animação: 0%
Adicione o divisor nº 2 à coluna
visibilidade
Vamos passar para o próximo módulo de separação. Novamente, certifique-se de que a opção “Mostrar Separador” esteja ativada.
- Mostrar separador: Sim
Linha
Em seguida, vá para a guia de design do módulo e altere as configurações de linha da seguinte forma:
- Cor da linha: # e1e3e8
- Estilo da linha: sólido
- Posição da linha: alta
dimensionamento
Em seguida, modifique os parâmetros de dimensionamento do módulo.
- Peso do divisor: 3px
- Altura: 3px
espaçamento
Adicione também valores de espaçamento personalizados.
- Margem esquerda: 10%
- Margem direita: -20%
Animação
E complete os parâmetros do módulo alterando os parâmetros de animação da seguinte forma:
- Estilo de animação: slide
- Direção da animação: esquerda
- Duração da animação: 2000ms
- Atraso de animação: 500 ms
- Intensidade da animação: 100%
- Opacidade de início da animação: 100%
Você pode adicionar quantos separadores quiser ajustar sua animação.
Adicione uma linha # 2
Estrutura da coluna
Adicione outra linha à seção usando a seguinte estrutura de colunas:
dimensionamento
Sem adicionar mais módulos, abra os parâmetros de linha e modifique os parâmetros de dimensionamento da seguinte maneira:
- Use uma largura de calha personalizada: Sim
- Largura da calha: 1
- Largura: 70%
- Alinhamento da linha: centro
Adicione o módulo de texto nº 1 à coluna
Adicionar conteúdo H2
A seguir, adicione um primeiro módulo de texto à coluna da linha com conteúdo H2 de sua escolha.
Configurações de texto H2
Mude para a guia Design e altere as configurações de texto H2 de acordo:
- Cor do texto do item 2: # fc526e
- Cabeçalho 2 Tamanho do texto: 28 px
espaçamento
Em seguida, adicione valores de preenchimento personalizados.
- Estofamento superior: 50px
- Preenchimento inferior: 50px
- Preenchimento à esquerda: 50px
Fronteira
Também usamos uma borda esquerda.
- Largura da borda esquerda: 2 px
- Cor da borda esquerda: # fc526e
Animação
E complete os parâmetros do módulo adicionando uma animação personalizada.
- Estilo de animação: Flip
- Direção da animação: Centro
- Atraso de animação: 1500 ms
Adicione o módulo de texto nº 2 à coluna
Adicionar conteúdo
Adicione outro módulo de texto logo abaixo do anterior com conteúdo De sua escolha.
espaçamento
Vá para a guia de design do módulo e altere os valores de preenchimento de acordo:
- Estofamento superior: 50px
- Preenchimento inferior: 50px
- Preenchimento direito: 50px
fronteira
Em seguida, adicione uma borda superior e direita.
- Borda superior e direita: 2 pixels
- Cor da borda superior e direita: # fc526e
Animação
E complete os parâmetros do módulo alterando os parâmetros de animação da seguinte forma:
- Estilo de animação: Flip
- Direção da animação: Centro
- Atraso de animação: 1700 ms
Adicione um módulo de botão à coluna
Adicione uma cópia
O próximo e último módulo de que precisamos nesta linha é um módulo de botão. Adicione uma cópia de sua escolha.
Configurações de botão
Mude para a guia de design do módulo e altere as configurações do botão da seguinte forma:
- Use estilos personalizados para o botão: Sim
- Tamanho do texto do botão: 13px
- Cor do texto do botão: #ffffff
- Gradiente de cor 1: # ff5b84
- Gradiente de cor 2: # f94857
- Tipo de gradiente: linear
- Direção do gradiente: 165deg
- Largura da borda do botão: 0 px
- Raio da borda do botão: 0 px
- Espaçamento entre letras dos botões: 1 px
- Fonte do botão: Montserrate
- Peso da fonte do botão: Semi-negrito
- Estilo da fonte do botão: maiúsculas
espaçamento
Em seguida, adicione preenchimento superior e inferior personalizado.
- Estofamento superior: 16px
- Preenchimento inferior: 16px
Animação
E complete os parâmetros do módulo adicionando a seguinte animação:
- Estilo de animação: Flip
- Atraso de animação: 1900 ms
Clone a linha 1 e coloque-a na parte inferior da seção
Depois de terminar a primeira e a segunda linhas, você pode clonar a primeira linha e colocar a duplicata na parte inferior da seção.
Altere a ordem dos separadores
Troque de lugar para o primeiro e o último módulo de separação.
Considerações finais
Neste artigo, mostramos a você como tirar proveito da nova integração do Gutenberg do Divi e adicionar um bloco de pitch Divi CTA animado e inline à sua postagem no blog do Gutenberg. Esta é uma ótima maneira de destacar sua chamada para ação de escolha enquanto visitantes leia o conteúdo da sua postagem no blog.
