Como construir blocos de layout de imagem reutilizáveis para adicionar imagens com divis a postagens de Gutenberg
Publicados: 2020-02-16O Bloco de Layout do Divi pode ser usado como um bloco de layout de imagem reutilizável para adicionar imagens no estilo Divi às postagens do blog de Gutenberg. Isso combina as poderosas opções de design e funcionalidade do Divi (para criar belas imagens) com a conveniência de escrever mensagens (e adicionar blocos) com Gutenberg.
Neste tutorial, demonstraremos como usar o Divi Layout Block para projetar alguns layouts de imagens impressionantes. Em seguida, adicionaremos esses layouts como blocos reutilizáveis em Gutenberg. Com essa técnica, seremos capazes de adicionar praticamente qualquer recurso de design Divi às nossas imagens (planos de fundo, lightbox, filtros, animações, efeitos de rolagem e muito mais). Então, podemos usar esse design fabuloso como um modelo de imagem conveniente para adicionar imagens a postagens futuras criadas com Gutenberg.
Vamos começar!
Espiada
Baixe os Blocos de Layout de Imagem Reutilizáveis GRATUITAMENTE
Para colocar suas mãos sobre os blocos de layout deste tutorial, primeiro você precisará baixá-los 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!
Como usar o download para importar esses blocos de layout em seu site
Para importar esses blocos reutilizáveis de layout de imagem Divi para o seu site, primeiro você precisa descompactar o arquivo de download. Lá você encontrará os três arquivos JSON que precisará importar para o seu site.
Vá para editar uma postagem usando o editor padrão (Gutenberg). Abra o menu “Mais ferramentas e opções” no canto superior direito da página e selecione “Gerenciar todos os blocos reutilizáveis”.
Em seguida, clique no botão Importar de JSON. Escolha um dos arquivos JSON da pasta de download e clique no botão importar.
Repita esse processo para importar todos os três arquivos JSON.
Uma vez feito isso, adicione um novo bloco em Gutenberg. Poderemos encontrar os blocos de layout Reutilizáveis importados no botão Alternar opção Reutilizável. Basta clicar naquele que você deseja adicionar à sua postagem.
É isso!
Vamos para o tutorial, vamos?
O que precisamos para começar
Para começar, precisaremos fazer o seguinte:
- Se ainda não o fez, instale e ative o Divi Theme.
- Crie uma nova postagem no WordPress e use o editor padrão (Gutenberg) para adicionar algum conteúdo fictício (título, cabeçalhos, parágrafos, imagem em destaque, etc.). Basicamente, precisamos de uma postagem de teste para construir os blocos de layout de imagem no estilo Divi.
Depois disso, estamos prontos para começar.
Parte 1: Criando a imagem de largura total com bloco de layout Divi reutilizável de legenda
Adicionar Bloco de Layout Divi
Para começar, adicione um Bloco de Layout Divi à sua postagem.
Em seguida, clique em “Build New Layout”.
Projetando o layout da imagem Divi
No Editor de Bloco de Layout, comece a projetar o layout adicionando uma linha de uma coluna.
O Módulo de Imagem
Adicione um módulo de imagem à linha.
Em seguida, atualize as configurações da seguinte forma:
- Abrir no Lightbox: SIM
Isso permitirá que nossa imagem seja exibida em uma mesa de luz ao clicar.
- Sobreposição de imagem: ON
- Cor do ícone de sobreposição: #ffffff
- Hover Overlay Color: rgba (120,47,130,0,57)
Para criar algum espaço ao redor de nossa imagem, atualize as configurações de linha da seguinte forma:
- Usar largura de calha personalizada: SIM
- Largura da calha: 1
- Largura: 90%
- Largura máxima: 90%
- Preenchimento: 5% superior, 5% inferior
Isso nos dará 5% de espaçamento ao redor da imagem. Este também será o espaço que exibirá o gradiente de fundo que adicionaremos à seção.
Abra as configurações da seção e atualize o design com um gradiente de fundo da seguinte maneira:
- Cor esquerda do fundo gradiente: # 782f82
- Cor certa do fundo gradiente: # fe756b
- Direção do gradiente: 90 graus
Para fazer a imagem se estender um pouco além do contêiner de conteúdo da postagem do blog, podemos dar à seção uma largura personalizada da seguinte maneira:
- Largura: 110%
- Largura máxima: 100%
- Margem: -5% restante
- Preenchimento: 0 px superior, 0 px inferior
Por fim, dê à seção um toque criativo adicionando uma sombra de caixa interna da seguinte maneira:
- Sombra da caixa: veja a imagem
- Posição horizontal da sombra da caixa: 5vw
- Posição vertical da sombra da caixa: 5vw
- Cor da sombra: rgba (255,255,255,0,7)
Se quisermos ter um layout de imagem sem legenda, podemos parar por aqui, mas para adicionar uma legenda ao layout da imagem, adicione um módulo de texto abaixo da imagem.
Em seguida, adicione algum conteúdo de preenchimento para servir como o texto da legenda.
Em seguida, atualize as seguintes configurações de texto:
- Fonte do texto: Montserrat
- Peso da Fonte do Texto: Semi Negrito
- Cor do texto do texto: #ffffff
- Largura: 80%
- Alinhamento do Módulo: direito
- Margem: 5% superior
Quando terminar, certifique-se de salvar o layout com Ctrl + S ou abra a barra de configurações na parte inferior e clique em “Salvar e Sair”.
Adicionando o Layout de Imagem a Blocos Reutilizáveis
Para adicionar o layout aos blocos reutilizáveis, clique no menu “Mais opções” acima do bloco e selecione “Adicionar aos blocos reutilizáveis”.
Dê um nome ao bloco reutilizável e clique em “Salvar”.
Agora, a imagem de largura total com layout de legenda foi adicionada aos blocos reutilizáveis e estará disponível na lista de blocos ao construir uma postagem.
Não se esqueça de atualizar / salvar a postagem para salvar as alterações.
Parte 2: Criando a imagem à esquerda com bloco de layout Divi reutilizável de legenda
Agora que a imagem de largura total com layout de legenda foi adicionada aos blocos reutilizáveis, podemos usar esse bloco para criar nossa imagem esquerda com layout de legenda.
Converter Bloco Reutilizável em Bloco Regular
Para começar, abra o menu “Mais opções” na parte superior do bloco reutilizável que contém o layout de imagem de largura total. Em seguida, selecione “Converter em bloco regular”.
Não se preocupe, isso não removerá o bloco de layout que acabamos de criar dos blocos reutilizáveis (no entanto, há uma opção para isso). Isso simplesmente tornará o bloco reutilizável um bloco regular para que possamos editar e usar o bloco para uma única instância.
Layout de atualização
Quando o bloco estiver regular, clique no botão Editar Layout acima do bloco.
No editor de layout, abra as configurações da seção e atualize a largura da seguinte forma:
- Largura: auto
- Largura máxima: 500px
Isso é tudo que precisamos fazer dentro do editor de layout. Certifique-se de salvar e sair do layout.
Com o bloco selecionado, abra a barra lateral de configurações principais e selecione a guia de bloqueio para mostrar as configurações de bloqueio. No botão de alternância avançado, adicione a seguinte classe:
- Classe CSS de adição: alignleft
Esta classe é nativa do WordPress e irá flutuar o bloco à esquerda, o que também irá flutuar nossa imagem à esquerda do conteúdo dentro de nossa postagem.
Depois que a classe for adicionada, abra o menu “Mais opções” do bloco e clique em “Adicionar aos blocos reutilizáveis.
Dê um nome ao bloco reutilizável (ou seja, “Imagem à esquerda com legenda”) e clique em salvar.
Agora, o bloco de layout Imagem à esquerda com legenda foi adicionado à lista de blocos reutilizáveis para fácil acesso.
Parte 3: Criando a "Imagem Certa com Legenda" Bloco de Layout Divi Reutilizável
Até agora, temos uma imagem de largura total com um bloco de layout de legenda e uma imagem à esquerda com um bloco de layout de legenda. Agora podemos adicionar a imagem certa com o bloco de layout da legenda.
Converter Bloco Reutilizável em Bloco Regular
Para fazer isso, abra o menu “Mais opções” na imagem à esquerda com o bloco reutilizável de legenda. Em seguida, selecione “Converter em bloco regular”.
Layout de atualização
Uma vez que o bloco é um bloco de layout regular, clique para editar o layout.
Em seguida, abra as configurações da seção e retire a margem esquerda.
Salve e saia do editor de layout.
Em seguida, atualize a classe CSS adicional do bloco com o seguinte:
- Classe CSS adicional: alignright
Depois que a classe for adicionada, adicione o bloco de layout aos blocos reutilizáveis.
E dê um nome ao Bloco Reutilizável (ou seja, “Imagem certa com legenda”) e salve-o.
Agora clique em um dos ícones azuis de mais sob um bloco na postagem para adicionar um novo bloco. Em seguida, no pop-up da lista de bloqueios, abra o botão de alternância Reutilizável. Agora temos nossos três blocos de layout de imagem reutilizáveis prontos para serem usados.
Parte 4: Usando os blocos de layout de imagem reutilizáveis em uma postagem.
Embora tenhamos nossos Blocos de Layout de Imagem criados, eles existem (para nossos propósitos) apenas como um modelo para iniciar o processo de adição de uma imagem a uma postagem. Portanto, cada vez que quisermos adicionar uma imagem real a uma postagem usando esses blocos de layout, precisaremos primeiro convertê-la em um bloco regular antes de adicionar a imagem e a legenda ao layout.
Veja como fazer.
Etapa 1: adicionar o bloco de layout reutilizável
Adicione um dos blocos reutilizáveis de layout de imagem Divi à postagem.
Etapa 2: converta em um bloco regular
Abra o menu “Mais opções” e selecione “Converter em bloco regular”.
Etapa 3: edite o bloco de layout com uma nova imagem e legenda
Quando o bloco estiver regular, clique para editar o layout.
Atualize o layout com uma imagem de sua escolha.
Em seguida, atualize o texto da legenda no módulo de texto.
Etapa 4: salvar o bloco de layout
Quando terminar, salve e saia do editor de layout.
Continue esse mesmo processo para adicionar os outros dois layouts de imagem à postagem.
Resultado final
Pensamentos finais
Assim que pegarmos o jeito de usar o bloco de layout Divi, ficará óbvio o quão valioso ele pode ser para a vida do nosso blog. Nesta postagem, cobrimos como usar o bloco de layout para adicionar algumas imagens bem legais no estilo Divi a uma postagem do blog do Gutenberg. O truque é salvar os layouts como um bloco reutilizável primeiro. Então, quando estivermos prontos para adicionar imagens a uma postagem do blog, podemos facilmente converter o bloco reutilizável em um bloco regular para que possamos adicionar nossa imagem e legenda.
Esperançosamente, isso fornecerá alguma inspiração para levar as imagens do seu blog a um nível totalmente novo.
Estou ansioso para ouvir de você nos comentários.
Saúde!