Bem vindo ao
Blog da FULL.

Aprenda, crie e cresça seu negócio na internet.

Encontre conteúdos, dicas, tutoriais e novidades sobre as principais ferramentas Wordpress

Como adicionar e alinhar imagens no WordPress Block Editor (Gutenberg)

Você está em:

Como adicionar e alinhar imagens no WordPress Block Editor (Gutenberg)

As imagens dão vida às suas postagens e páginas do WordPress, tornando-as mais atraentes. No entanto, muitos iniciantes lutam para alinhar imagens do jeito que gostam.

O novo editor de blocos do WordPress (Gutenberg) resolve esse problema tornando mais fácil adicionar e alinhar imagens no WordPress.

Neste artigo, mostraremos como você pode facilmente adicionar e alinhar imagens no WordPress para criar belos layouts de conteúdo.

Adicionando e alinhando corretamente imagens no WordPress

Alinhamento de imagem no editor do WordPress

Anteriormente, o WordPress usava uma área de texto com botões de edição como editor padrão. Um problema específico no antigo editor era o alinhamento de imagens.

Embora houvesse opções para alinhar imagens à esquerda, à direita ou ao centro, elas nem sempre pareciam boas. Às vezes, as imagens não se alinhavam, não tinham o tamanho exato ou pareciam estranhas.

O WordPress 5.0 introduziu um novo editor de postagem do WordPress chamado editor de blocos Gutenberg. Ele corrigiu vários problemas com o editor antigo, incluindo os problemas de alinhamento de imagem.

Vamos dar uma olhada em como você pode facilmente adicionar e alinhar imagens no novo editor para criar belos layouts para suas postagens e páginas.

Adicionar e alinhar imagens no WordPress

O novo editor vem com os seguintes blocos que você pode usar para adicionar imagens em suas postagens e páginas do WordPress.

  • Imagem
  • Imagem embutida
  • Galeria
  • Mídia e texto
  • Tampa

Vamos começar com um bloco de imagem simples primeiro.

Clique no botão ‘Adicionar novo bloco’ ou digite /imagem no editor de postagem para inserir um bloco de imagem.

Adicionando um novo bloco de imagem no editor de postagem do WordPress

Você verá três botões dentro do bloco de imagem em branco.

Você pode carregar uma imagem do seu computador, selecionar uma imagem já carregada da biblioteca de mídia ou inserir uma imagem fornecendo o URL do arquivo de imagem.

Em seguida, clique no botão ‘Upload’ e selecione a imagem que deseja enviar do seu computador.

Assim que você selecionar a imagem, o WordPress fará o upload para sua biblioteca de mídia e a inserirá no bloco de imagens.

Opções de imagem no editor de postagem do WordPress

Agora, você notará uma barra de ferramentas em cima de sua imagem e algumas configurações de bloco de imagem na coluna da direita. Para alinhar sua imagem, você usará a barra de ferramentas que aparece na parte superior da imagem.

Botões de alinhamento de imagem no editor de postagem do WordPress

O bloco de imagem oferece as seguintes opções de alinhamento de imagem como botões na barra de ferramentas.

  • Alinhar à esquerda
  • Centralizar
  • Alinhar à direita
  • Largura Larga
  • Largura completa

Se sua imagem for menor em largura, alinhá-la à esquerda ou à direita exibirá o texto ao lado da imagem. Alinhá-lo ao centro exibirá a imagem em sua própria linha sem texto em nenhum dos lados.

Centralizar uma imagem no WordPress

Escolher a opção de largura ampla tornará sua imagem mais larga do que a área de texto, e a opção de largura total a empurrará para as bordas direita e esquerda da tela do navegador.

Fazendo uma imagem de largura total no WordPress

Como alinhar perfeitamente uma imagem ao lado do texto

Muitas vezes você pode precisar alinhar perfeitamente uma imagem ao lado de algum texto. O editor de blocos do WordPress facilita isso adicionando o bloco de mídia e texto.

Este bloco basicamente adiciona uma área de duas colunas. Uma coluna para imagens (mídia) e a segunda coluna para conteúdo de texto.

Bloco de mídia e texto no editor de postagem do WordPress

Basta carregar sua imagem e adicionar o texto que deseja exibir ao lado dela.

Configurações de imagem e bloco de texto

Depois de adicionar a imagem e o texto, você notará mais opções para o bloco. Você pode tornar o bloco inteiro mais largo ou completo, também pode alternar os lados da imagem e do texto.

O alinhamento da imagem se ajustará automaticamente à altura do texto na próxima coluna.

O tamanho da imagem se ajusta para alinhar verticalmente

Como alinhar imagens da galeria no WordPress

O editor de postagem do WordPress também vem com um bloco para adicionar galerias de imagens. Isso permite exibir imagens facilmente em uma grade de linhas e colunas.

O bloco Galeria vem com opções de alinhamento semelhantes na barra de ferramentas.

Você pode alinhar todo o bloco da galeria à esquerda, ao centro ou à direita. Você também pode torná-lo largo ou alterá-lo para uma linha de largura total.

Alinhar imagens da galeria no editor de postagem do WordPress

O recurso de galeria padrão no WordPress é muito bom. No entanto, se você adiciona regularmente galerias de fotos às suas postagens e páginas do WordPress, considere usar um plug-in de galeria de fotos como o Envira Gallery .

Esses plug-ins oferecem mais opções para alinhar imagens em suas galerias de fotos, exibi-las no pop-up e estilizá-las de maneira diferente.

Como adicionar duas imagens lado a lado no WordPress

A maneira mais fácil de exibir duas imagens lado a lado em uma postagem do WordPress é adicionar as duas imagens em um bloco de Galeria.

Exiba duas imagens lado a lado em posts e páginas do WordPress

Basta selecionar um layout de 2 colunas para que o bloco de galeria exiba as duas imagens uma ao lado da outra. Você também pode marcar a opção ‘cortar miniatura’ para garantir que ambas as imagens tenham o mesmo tamanho.

Mais maneiras de adicionar e alinhar imagens no WordPress

Além da imagem, mídia e texto e do bloco de galeria, você também pode usar o bloco de capa para adicionar uma imagem de capa.

No web design moderno, as imagens de capa são usadas para criar layouts de conteúdo altamente envolventes. Essas imagens são usadas para destacar diferentes seções de uma página.

O bloco de imagem de capa vem com as mesmas opções de alinhamento que um bloco de imagem. Você pode adicionar texto sobre a imagem e escolher uma cor de sobreposição nas configurações do bloco. A melhor parte é que você pode marcar a opção ‘Fundo Fixo’ que cria um efeito de fundo de paralaxe .

Adicionando imagem de capa na postagem do WordPress

Para saber mais sobre como usar imagens de capa, confira nosso artigo sobre a diferença entre imagens em destaque e imagem de capa no WordPress .

Até agora, falamos sobre adicionar imagens diretamente às suas postagens e páginas. E as imagens de sites de terceiros?

O editor de blocos também facilita isso. Ele vem com blocos de incorporação para sites populares de compartilhamento social, incluindo Instagram, Flickr, Imgur, Photobucket e muito mais.

Por exemplo, se você deseja adicionar uma foto do Instagram, basta adicionar o bloco do Instagram ao editor de postagem e inserir o URL da postagem que deseja compartilhar.

Adicionando imagens do Instagram em posts e páginas do WordPress

O WordPress buscará automaticamente a postagem do Instagram e a incorporará para você. Depois disso, você poderá usar as opções de alinhamento na barra de ferramentas.

Incorporação do Instagram no WordPress

Os blocos de incorporação também permitem incorporar vídeos facilmente no WordPress . Depois disso, você pode usar as mesmas opções na barra de ferramentas para alinhar vídeos no WordPress.

Esperamos que este artigo tenha ajudado você a aprender como adicionar e alinhar imagens facilmente no editor de blocos do WordPress. Você também pode querer ver nosso guia sobre como otimizar imagens para acelerar o WordPress .

Se você gostou deste artigo, assine nosso canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook .

Uncategorized

Aprenda com a FULL.

Junte-se a mais de 50 mil pessoas que recebem em primeira mão as principais ferramentas e tecnologia para desenvolvimento web

plugins premium WordPress
Meu carrinho
🎁 Faltam R$300,00 para liberar o Cupom Secreto
Seu carrinho está vazio.

Parece que você não adicionou nada ao seu carrinho =(