Como adicionar um bloco de layout de CTA Divi embutido e animado à postagem do blog do Gutenberg
Publicados: 2020-02-05Quando você está otimizando a forma como cria postagens em seu site, há grandes chances de incluir um CTA atraente em algum lugar dentro de sua postagem. Agora, com a nova integração de bloco de layout do Divi Gutenberg, você pode adicionar facilmente um novo bloco construído pelo Divi em qualquer lugar dentro de sua postagem no blog do Gutenberg. Isso permite que você mantenha o conteúdo geral da postagem do blog dentro do ambiente Gutenberg, enquanto ainda cria um Divi CTA personalizado usando as opções integradas do Divi. O melhor dos dois mundos! Neste tutorial, mostraremos como adicionar um bloco de layout Divi CTA inline e animado à sua postagem de Gutenberg. Também compartilharemos o arquivo JSON do bloco de layout do Divi CTA de graça!
Vamos lá.
Antevisão
Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.
Área de Trabalho
Móvel
Baixe o bloco de layout de CTA Inline & Animated Divi GRATUITAMENTE
Para colocar suas mãos nas seções gratuitas de heróis, primeiro você precisa baixá-las 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.
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.
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!
Vamos começar a recriar!
Use o modelo de postagem do Third Theme Builder Pack
Baixe o Third Theme Builder Pack
É hora de começar a criar do zero! Em primeiro lugar, o design que estamos recriando corresponde ao terceiro pacote de construção de temas que foi lançado no blog Divi. Vá para a postagem e baixe os arquivos JSON deste pacote de construção de tema.
Vá para Divi Theme Builder
Depois de fazer o download do terceiro pacote de criação de tema, você pode ir para Divi Theme Builder.
Carregar modelo de postagem
Faça upload do modelo de postagem do pacote de criação de temas 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 alterações do construtor de tema também. Neste ponto, atribuímos o modelo de postagem do blog do pacote do construtor de tema a todas as nossas postagens.
Abra uma postagem 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 uma postagem existente ou crie uma nova.
Adicionar Novo Bloco Divi Inline
Uma vez dentro da postagem, você poderá adicionar um novo bloco de layout Divi.
Construir Novo Layout Dentro do Bloco Divi
Então, você terá duas opções. Selecione a opção 'Construir Novo Layout'.
Configurações da seção
Espaçamento
Uma vez dentro do editor de blocos de layout Divi, você notará uma seção. Abra essa seção e adicione alguns 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 coluna:
Dimensionamento
Sem adicionar nenhum módulo ainda, abra as configurações de linha e aumente a largura e a largura máxima.
- Largura: 100%
- Largura máxima: 100%
Adicionar divisor # 1 à coluna
Visibilidade
É hora de adicionar módulos, começando com um módulo divisor. Certifique-se de que a opção 'Mostrar divisor' esteja habilitada.
- Mostrar divisor: Sim
Linha
Vá para a guia de design do módulo e altere as configurações de linha da seguinte forma:
- Cor da linha: # fc526e
- Estilo de linha: Sólido
- Posição da linha: topo
Dimensionamento
Modifique as configurações de dimensionamento também.
- Peso do divisor: 3px
- Largura: 30%
- Alinhamento do Módulo: Direito
- Altura: 3px
Animação
E modifique as configurações de animação de acordo:
- Estilo de animação: slide
- Direção da animação: esquerda
- Duração da animação: 2.000 ms
- Atraso de animação: 500ms
- Intensidade de animação: 100%
- Opacidade inicial da animação: 100%
Adicionar divisor # 2 à coluna
Visibilidade
Passe para o próximo Módulo Divisor. Novamente, certifique-se de que a opção 'Mostrar divisor' esteja habilitada.
- Mostrar divisor: 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 de linha: Sólido
- Posição da linha: topo
Dimensionamento
Modifique as configurações de dimensionamento do módulo a seguir.
- Peso do divisor: 3px
- Altura: 3px
Espaçamento
Adicione alguns valores de espaçamento personalizados também.
- Margem Esquerda: 10%
- Margem direita: -20%
Animação
E conclua as configurações do módulo, modificando as configurações de animação da seguinte forma:
- Estilo de animação: slide
- Direção da animação: esquerda
- Duração da animação: 2.000 ms
- Atraso de animação: 500ms
- Intensidade de animação: 100%
- Opacidade inicial da animação: 100%
Adicionar divisor # 3 à coluna
Visibilidade
Para o próximo e último Módulo Divisor de que precisamos nesta linha. Certifique-se de que a opção 'Mostrar divisor' esteja habilitada.
- Mostrar divisor: Sim
Linha
Em seguida, vá para a guia de design e altere as configurações de linha da seguinte forma:
- Cor da linha: # fc526e
- Estilo de linha: Sólido
- Posição da linha: topo
Dimensionamento
Modifique o tamanho do módulo também.
- Peso do divisor: 3px
- Altura: 3px
Espaçamento
Junto com as configurações de espaçamento.
- Margem inferior: 100px
- Margem esquerda: -20%
- Margem direita: 10%
Animação
E conclua as configurações do módulo alterando as configurações de animação.
- Estilo de animação: slide
- Direção da animação: direita
- Duração da animação: 2.000 ms
- Intensidade de animação: 100%
- Opacidade inicial da animação: 100%
Adicionar linha # 2
Estrutura da Coluna
Adicione outra linha à seção usando a seguinte estrutura de coluna:
Dimensionamento
Sem adicionar nenhum módulo ainda, abra as configurações de linha e altere as configurações de dimensionamento da seguinte forma:
- Usar largura de calha personalizada: Sim
- Largura da calha: 1
- Largura: 70%
- Alinhamento de linha: centro
Adicionar Módulo de Texto # 1 à Coluna
Adicionar conteúdo H2
Em seguida, adicione um primeiro Módulo de texto à coluna da linha com algum conteúdo H2 de sua escolha.
Configurações de texto H2
Vá para a guia de design e modifique as configurações de texto H2 de acordo:
- Cor do texto do título 2: # fc526e
- Tamanho do texto do título 2: 28 px
Espaçamento
Adicione alguns valores de preenchimento personalizados a seguir.
- Enchimento superior: 50 px
- Preenchimento inferior: 50 px
- Preenchimento esquerdo: 50 px
Fronteira
Estamos usando uma borda esquerda também.
- Largura da borda esquerda: 2 px
- Cor da borda esquerda: # fc526e
Animação
E complete as configurações do módulo adicionando uma animação personalizada.
- Estilo de animação: Flip
- Direção da Animação: Centro
- Atraso de animação: 1500ms
Adicionar Módulo de Texto # 2 à Coluna
Adicionar conteúdo
Adicione outro Módulo de Texto logo abaixo do anterior com algum conteúdo de sua escolha.
Espaçamento
Vá para a guia de design do módulo e modifique os valores de preenchimento de acordo:
- Enchimento superior: 50 px
- Preenchimento inferior: 50 px
- Preenchimento direito: 50 px
Fronteira
Adicione uma borda superior e direita a seguir.
- Borda superior e direita: 2 px
- Cor da borda superior e direita: # fc526e
Animação
E conclua as configurações do módulo, modificando as configurações de animação da seguinte forma:
- Estilo de animação: Flip
- Direção da Animação: Centro
- Atraso de animação: 1700ms
Adicionar Módulo de Botão à Coluna
Adicionar cópia
O próximo e último módulo de que precisamos nesta linha é um Módulo de Botão. Adicione alguma cópia de sua escolha.
Configurações de botão
Vá para a guia de design do módulo e modifique as configurações do botão da seguinte forma:
- Usar estilos personalizados para botão: Sim
- Tamanho do texto do botão: 13px
- Cor do texto do botão: #ffffff
- Gradient Color 1: # ff5b84
- Gradient Color 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: 1px
- Fonte do botão: Montserrat
- Peso da fonte do botão: Semi negrito
- Estilo da fonte do botão: maiúscula
Espaçamento
Adicione um pouco de preenchimento personalizado superior e inferior a seguir.
- Preenchimento superior: 16 px
- Preenchimento inferior: 16 px
Animação
E complete as configurações do módulo adicionando a seguinte animação:
- Estilo de animação: Flip
- Atraso de animação: 1900ms
Clone a linha nº 1 e coloque na parte inferior da seção
Depois de concluir a primeira e a segunda linha, você pode clonar a primeira linha e colocar a duplicata na parte inferior da seção.
Alterar ordem do divisor
Troque de lugar para o primeiro e o último Módulo Divisor.
Alterar o espaçamento do divisor # 1
Em seguida, abra o primeiro Módulo divisor em sua linha e modifique as configurações de espaçamento.
- Margem superior: 100px
- Margem Esquerda: 10%
- Margem direita: -20%
Alterar o espaçamento do divisor # 2
Altere também as configurações de espaçamento do segundo módulo divisor.
- Margem esquerda: -20%
- Margem direita: 10%
Alterar o tamanho do divisor # 3
Em seguida, abra o terceiro Módulo Divisor e use o alinhamento do módulo à esquerda nas configurações de dimensionamento.
- Alinhamento do Módulo: Esquerda
Remova o retardo de animação do divisor # 3
Remova também o atraso de animação do terceiro Módulo Divisor e pronto! Depois de concluir o bloco de layout do Divi CTA, certifique-se de salvar as alterações e atualizar sua postagem.
- Atraso de animação: 0ms
Antevisão
Agora que já passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.
Área de Trabalho
Móvel
Pensamentos finais
Nesta postagem, mostramos como aproveitar as vantagens da nova integração do Divi com o Gutenberg e adicionar um bloco de layout de CTA Divi inline e animado à postagem do seu blog do Gutenberg. Esta é uma ótima maneira de destacar o CTA de sua escolha enquanto os visitantes estão lendo o conteúdo da postagem do seu blog. Você também pode baixar o arquivo JSON do bloco de layout do Divi CTA gratuitamente! Se você tiver alguma dúvida, fique à vontade para deixar um comentário na seção de comentários abaixo!
Se você está ansioso para aprender mais sobre o Divi e obter mais brindes do Divi, certifique-se de assinar nosso boletim informativo por e-mail e canal no YouTube para que você sempre seja uma das primeiras pessoas a saber e obter os benefícios desse conteúdo gratuito.