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.
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.
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.
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.
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.
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.
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.
Basta carregar sua imagem e adicionar o texto que deseja exibir ao lado dela.
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.
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.
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.
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 .
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.
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.
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 .
