Quando mudamos para o editor de blocos do WordPress pela primeira vez, até tarefas simples como adicionar e alinhar imagens pareciam diferentes.
Depois de ajudar tantos usuários através do WPBeginner, notamos que este é um dos obstáculos mais comuns que as pessoas enfrentam ao fazer a transição para o Gutenberg.
A boa notícia é que trabalhar com imagens no editor de blocos se tornou mais intuitivo – uma vez que você sabe onde procurar.
Neste guia, mostraremos exatamente como adicionar e alinhar imagens no editor de blocos do WordPress. Estas são as mesmas técnicas que usamos todos os dias no WPBeginner, explicadas em termos simples que qualquer um pode seguir.
Alinhamento de Imagens no Editor do WordPress
Anteriormente, o WordPress usava uma área de texto com botões de edição como seu editor padrão. Um problema específico no editor antigo era o alinhamento de imagens, que podia dificultar o alinhamento correto em seu site WordPress.
Embora houvesse opções para alinhar imagens à esquerda, à direita ou ao centro, elas nem sempre ficavam boas. Às vezes, as imagens não se alinhavam, tinham o tamanho errado ou simplesmente pareciam fora do lugar.
O WordPress 5.0 introduziu um novo editor de posts do WordPress chamado editor de blocos Gutenberg. Ele corrigiu vários problemas com o editor antigo, incluindo os problemas de alinhamento de imagens.
Nas seções a seguir, explicaremos como adicionar e alinhar imagens facilmente no novo editor para criar layouts bonitos para os posts e páginas do seu blog WordPress.
Aqui está um resumo rápido de todos os tópicos que compartilharemos:
- Como Adicionar e Alinhar Imagens no WordPress
- Como Alinhar Perfeitamente uma Imagem ao Lado do Texto
- Como Alinhar Imagens de Galeria no WordPress
- Como Adicionar Duas Imagens Lado a Lado no WordPress
- Mais Maneiras de Adicionar e Alinhar Imagens no WordPress
- Dica Bônus: Como Centralizar um Vídeo no WordPress
- Perguntas Frequentes Sobre Alinhamento de Imagens no WordPress
Vamos começar!
Como Adicionar e Alinhar Imagens no WordPress
O editor vem com vários blocos que você pode usar para adicionar imagens às suas postagens e páginas do WordPress. Neste guia, focaremos nos mais populares:
- Imagem
- Galeria
- Mídia e Texto
- Capa
Vamos começar primeiro com um bloco de imagem simples.
Você pode clicar no botão 'Adicionar novo bloco' ou digitar /imagem no editor de postagens para inserir um bloco de imagem.
Isso ativará os 3 botões dentro do bloco de imagem em branco.
Agora, você pode fazer upload de 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 carregar do seu computador.
Assim que você selecionar a imagem, o WordPress a carregará para sua biblioteca de mídia e a inserirá no bloco de imagem.
Agora, você notará uma barra de ferramentas no topo da sua imagem e algumas configurações do bloco de imagem na coluna da direita.
Para alinhar sua imagem, você usará a barra de ferramentas que aparece no topo da imagem.
O bloco de imagem oferece várias opções de alinhamento. Dependendo do seu tema do WordPress, você pode ver todas as seguintes:
- Nenhum: O alinhamento padrão, que coloca a imagem em linha com seu texto.
- Alinhar à esquerda: Empurra a imagem para a esquerda, permitindo que o texto a envolva em seu lado direito.
- Alinhar ao centro: Centraliza a imagem na coluna de conteúdo principal.
- Alinhar à direita: Empurra a imagem para a direita, permitindo que o texto a envolva em seu lado esquerdo.
- Largura ampla: Torna a imagem mais larga que a área de conteúdo principal para um visual mais dinâmico.
- Largura total: Estica a imagem para preencher toda a largura do navegador, de ponta a ponta.
Clique no botão ‘Alinhar ao centro’ para centralizar sua imagem em sua postagem.
Como Alinhar Perfeitamente uma Imagem ao Lado do Texto
Muitas vezes, você pode precisar alinhar uma imagem ao lado do texto perfeitamente. O editor de blocos do WordPress facilita isso com o bloco 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.
Simplesmente carregue sua imagem clicando no botão ‘Upload’.
Em seguida, você pode adicionar o texto que deseja exibir ao lado dela.
Se você precisar de uma descrição mais longa, pode digitá-la.
O alinhamento da imagem se ajustará automaticamente à altura do texto na coluna seguinte.
Como Alinhar Imagens de Galeria no WordPress
O editor de blocos do WordPress também inclui um bloco para adicionar galerias de imagens. Isso permite que você exiba facilmente imagens em uma grade de linhas e colunas.
O bloco Galeria vem com opções de alinhamento semelhantes na barra de ferramentas. Por padrão, o bloco exibirá as imagens em um layout de 3 colunas.
Portanto, sua galeria de imagens pode ficar assim:
Você pode ajustar o layout da galeria movendo o controle deslizante para a esquerda ou para a direita. Alternativamente, você pode simplesmente digitar o número de colunas que deseja na caixa.
Aqui, experimentamos o layout de 4 colunas:
Se sua galeria não ficar boa devido a diferenças nos tamanhos das imagens, você precisará ajustar seu alinhamento.
No editor de posts, você pode clicar na galeria. Em seguida, você pode clicar no ícone ‘Selecionar bloco pai: Galeria’ para abrir o painel de personalização.
A partir daqui, vamos garantir que a opção ‘Cortar imagens para ajustar’ esteja ativada.
Assim que você fizer isso, o WordPress ajustará a galeria ao centro.
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 plugin de galeria de fotos como o Envira Gallery.
Esses plugins lhe darão mais opções para alinhar imagens em suas galerias de fotos, exibi-las em pop-up e estilizar de maneiras diferentes.
Para mais detalhes, veja nosso tutorial sobre como adicionar uma galeria de imagens no WordPress.
Como Adicionar Duas Imagens Lado a Lado no WordPress
A maneira mais fácil de exibir 2 imagens lado a lado em uma postagem do WordPress é adicionar ambas as imagens a um bloco de Galeria.
Para abrir a opção de personalização do bloco de Galeria, você pode clicar na galeria e, em seguida, novamente no ícone ‘Selecionar bloco pai: Galeria’.
Isso abrirá o painel de personalização no lado direito.
A partir daqui, basta selecionar um layout de 2 colunas para o bloco de galeria exibir ambas as imagens lado a lado.
Você também pode ativar a opção ‘Cortar imagens para ajustar’ para garantir que ambas as imagens tenham o mesmo tamanho e estejam centralizadas.
Mais Maneiras de Adicionar e Alinhar Imagens no WordPress
Além dos blocos que já abordamos, você também pode usar o bloco Capa.
Seu principal objetivo é permitir que você coloque texto diretamente sobre uma imagem, o que é perfeito para criar cabeçalhos de seção chamativos e chamadas para ação.
O bloco Capa tem as mesmas opções de alinhamento de uma imagem comum.
Você também pode adicionar uma sobreposição de cor para facilitar a leitura do seu texto e até mesmo marcar a opção 'Fundo Fixo', que cria um efeito de rolagem parallax interessante.
Para saber mais sobre o uso de imagens de capa, confira nosso artigo sobre a diferença entre imagens destacadas e de capa no WordPress.
Até agora, falamos sobre adicionar imagens diretamente às suas postagens e páginas. E quanto a imagens de sites de terceiros?
O editor de blocos também facilita isso. Você pode adicionar imagens de sites populares de compartilhamento social, incluindo Instagram, Facebook, Flickr, Imgur, Photobucket e muito mais.
Por exemplo, se você quiser adicionar uma foto do Instagram, basta adicionar o bloco do Instagram ao editor de postagens e inserir o URL da postagem que deseja compartilhar.
Em seguida, você pode simplesmente clicar no alinhamento desejado na barra de ferramentas. Os blocos de incorporação também permitem que você incorpore facilmente vídeos no WordPress.
Para mais detalhes, consulte nosso guia sobre como incorporar o Instagram no WordPress.
Dica Bônus: Como Centralizar um Vídeo no WordPress
Assim como com imagens, você pode querer alterar o alinhamento de seus vídeos. Felizmente, os blocos de vídeo no WordPress usam as mesmas ferramentas de alinhamento.
Seja incorporando um vídeo do YouTube ou enviando o seu próprio, basta clicar no bloco de vídeo. Você verá a barra de ferramentas de alinhamento familiar aparecer no topo.
Basta clicar no botão 'Alinhar ao centro' para centralizar todo o player de vídeo na sua área de conteúdo. Isso cria um layout muito mais limpo e polido para sua página.
Para saber mais, você pode ler nosso guia sobre como centralizar um vídeo no WordPress.
Perguntas Frequentes Sobre Alinhamento de Imagens no WordPress
Aqui estão algumas perguntas que nossos leitores frequentemente fazem sobre o alinhamento de imagens no WordPress:
Qual é o melhor tipo de arquivo de imagem para o WordPress?
Para fotografias, JPEG é geralmente a melhor escolha porque equilibra qualidade e tamanho de arquivo pequeno. Se sua imagem precisar de um fundo transparente, como um logotipo, você deve usar o formato PNG.
Como faço para tornar minhas imagens responsivas em dispositivos móveis?
O editor de blocos do WordPress cuida disso automaticamente para você. Qualquer imagem que você adicionar será responsiva, o que significa que ela se ajustará ao tamanho da tela de qualquer dispositivo.
Posso envolver texto em torno de uma imagem?
Com certeza. Basta adicionar um bloco de Imagem e usar a opção 'Alinhar à esquerda' ou 'Alinhar à direita' na barra de ferramentas. O texto do parágrafo que se segue envolverá automaticamente a imagem.
Como adiciono uma legenda à minha imagem?
Assim que você inserir uma imagem, verá um campo “Adicionar legenda” diretamente abaixo dela. Basta clicar nesta área e digitar o texto que deseja usar para sua legenda.
Por que as imagens da minha galeria não estão alinhadas corretamente?
Isso geralmente acontece quando as imagens da sua galeria têm alturas ou larguras diferentes. Para corrigir isso, selecione o bloco Galeria e ative a opção ‘Cortar imagens para ajustar’ no painel de configurações à direita. Isso tornará todas as imagens da galeria de tamanho uniforme.
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 alterar a altura e a largura dos blocos no WordPress e perguntas comuns sobre o Gutenberg respondidas.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Jiří Vaněk
O Gutenberg ainda é um grande desconhecido para mim. Admito que só comecei a descobri-lo depois que o WordPress 6.4 chegou e li estas páginas. Por muito tempo, por exemplo, não consegui descobrir como colocar uma imagem e um texto lado a lado (no Elementor era uma questão completamente simples). Depois de ler este artigo, consigo fazer um pouco mais com o Gutenberg. Obrigado por isso.
WPBeginner Support
You’re welcome
Admin
fred dugas
isso funcionará com Iframes? Eu edito um bloco de HTML personalizado e adiciono um iframe e o salvamento e a adição estão alinhados à esquerda, onde todos os outros blocos estão centralizados.?
WPBeginner Support
Dependeria do iframe, mas normalmente os iframes não terão opções de alinhamento automáticas.
Admin
Harry Goldhagen
Como você alinha as Imagens em Destaque que aparecem na página de Blog gerada automaticamente e na página de Categoria? Clicar na imagem abre a postagem, e não parece haver uma configuração de alinhamento para a imagem em destaque ao preencher as configurações da postagem.
WPBeginner Support
Para a imagem em destaque, isso seria determinado pelo seu tema. Se você verificar com o suporte do seu tema específico, eles deverão ser capazes de ajudar com o alinhamento da sua imagem em destaque.
Admin
john McIntyre
Eu desejo que todas as legendas do meu site tenham o mesmo tamanho e fonte.
Como isso é alcançado?
WPBeginner Support
A menos que seu tema tenha uma configuração específica para isso, a maioria dos temas deve ter o texto uniforme se for apenas a legenda da imagem e não um bloco de texto diferente.
Admin
Sharon
Quero mudar o padrão para que o upload de uma imagem seja centralizado sempre. Mudar cada imagem que eu carrego para centralizar cada vez que adiciono uma imagem é muito demorado. Posso mudar o padrão para centralizar?
WPBeginner Support
Não há um método simples que recomendaríamos para iniciantes no momento, mas ficaremos atentos a algo que possamos recomendar.
Admin
Amanda A.
Estou tentando usar o Editor de Blocos para exibir duas imagens lado a lado. Usei o recurso de duas colunas e depois blocos de imagem em cada coluna. Durante o design, ele é exibido corretamente, mas quando clico em “visualizar em nova aba”, as colunas lado a lado desaparecem e as imagens ficam empilhadas. O que estou fazendo de errado? Isso é um problema comum? Como posso corrigir isso?
WPBeginner Support
Você pode querer garantir que as imagens não sejam muito grandes para ficarem lado a lado em seu tema específico, pois esse é o motivo mais comum para esse problema.
Admin
Sheryl Zeiset
Estou tentando aprender a usar o novo editor de blocos. Quando clico no botão Adicionar bloco e escolho imagem para adicionar uma foto, só tenho a opção ‘inserir de URL’ e não consigo encontrar uma maneira de adicionar fotos da minha Biblioteca de Mídia. Você pode me ajudar?
WPBeginner Support
Você deve verificar atentamente para encontrar o texto ao lado do botão de upload para selecionar a imagem da sua biblioteca de mídia
Admin
Luther Mckinnon
I have been publishing a blog for many years. I have learned to dread the introduction of a new system. Doing a simple thing like adding photographs is now very difficult.
WPBeginner Support
Hopefully, once you are comfortable with the new system it becomes easier for you
Admin
Ward
Great information, problem is that back end it works but front end it always aligns to the left. Would it be possible that this has something to do with my Elementor template?
WPBeginner Support
If you are using a page builder there is a chance that your page builder is overriding the styling and you can reach out to your builder’s support for assistance.
Admin
tanmay
absolutely amazing feature its not every cup of tea to use HTML editor
WPBeginner Support
Glad you like the block editor feature
Admin
Louie Adem
just started WordPress yesterday. Totally a beginner and so happy wpbeginner provided me the “trainer wheels” to jumpstart. The education in this website is so valuable. Can’t thank you enough.
WPBeginner Support
Glad we could help get you started
Admin
BadlyDrawmWolf
Thank you for this little gold nugget – really struggling getting in to the “new” way of handling my blog and almost giving up and searching for other alternatives….
WPBeginner Support
Glad our article could help, for another helpful article you may want to take a look at our article below:
https://www.wpbeginner.com/beginners-guide/how-to-use-the-new-wordpress-block-editor/
Admin
Karen
You mention “Inline Image”, but I don’t see any such block. Your article was written awhile ago but supposedly updated in Jan. 2020 – did that block go away and you forgot to remove it from this article? Or a better question: How can I add an inline image within another block like Paragraph or Heading?
WPBeginner Support
The inline image block is not currently available but you can normally recreate the formatting with the text and image or the standard image block
Admin
Ted Strutz
When I add an image from my media the image toolbar does not come up to align left or right. I can change size of image.
WPBeginner Support
Você gostaria de garantir que não o definiu para estar no topo da página em vez de como o temos no momento.
Admin
Hannah
Olá, alinhei todas as imagens usando o editor de blocos e tudo parece bem até que eu visualizo?
Então, algumas imagens ficaram muito maiores do que as outras, tenho uma galeria de duas imagens de repente em cima de uma única imagem. Tudo se moveu aleatoriamente!
Mesmo quando publiquei, ainda estava tudo errado. Gostaria muito da sua ajuda, obrigado!
WPBeginner Support
Você deve entrar em contato com o suporte do seu tema para garantir que não haja conflito de estilo, caso contrário, você pode tentar desativar seus plugins para ver se também é um conflito de plugin.
Admin
Harry
Olá, estou querendo alinhar shortcodes um ao lado do outro como você descreve com as imagens, isso é possível? Muito obrigado
WPBeginner Support
Isso dependeria dos próprios shortcodes
Admin
Ap
Olá,
Como você organiza o posicionamento do título para os blocos de capa?
Você tem essa opção na sua barra, mas por algum motivo, quando clico no bloco de capa, não há opção de alinhamento de texto.
Alguma ideia sobre isso?
Obrigado pelo ótimo artigo.
WPBeginner Support
Você deve verificar o topo da sua página, pois esse seria o outro local das opções de alinhamento, em vez de flutuar sobre o elemento.
Admin
Cheryl
Como tornar uma imagem clicável com um link clicável? Tenho procurado tutoriais e todos pareciam baseados em um bloco Gutenberg anterior que, desde então, mudou e os tutoriais não correspondem mais ao bloco.
WPBeginner Support
Você deve verificar a barra de ferramentas superior para o local atual onde adicionar um link a uma imagem.
Admin
Alejandro
Olá, é possível escrever uma legenda de imagem logo abaixo da imagem ao usar o "bloco Mídia e Texto"?
WPBeginner Support
Dependeria do seu tema específico para o estilo, mas você deve ser capaz de
Admin
Lancer Kind
Legal! Muito obrigado!
WPBeginner Support
You’re welcome
Admin
Pete Newman
Existe um problema existente de incompatibilidade entre o Gutenberg e os temas. Você tem uma lista de temas compatíveis com o Gutenberg (e que permitem a funcionalidade completa do Gutenberg)?
Obrigado e cumprimentos,
Pete.
WPBeginner Support
Deveria haver menos problemas com isso à medida que os temas são atualizados, mas para temas especificamente amigáveis ao Gutenberg, você pode dar uma olhada em nossa lista aqui: https://www.wpbeginner.com/showcase/gutenberg-friendly-wordpress-themes/
Admin
Pete Newman
Eu uso o WordPress há anos, mas estive um pouco ausente ultimamente. O Gutenberg é um nó na cabeça. Sigo estas instruções, mas simplesmente não consigo alinhar imagens em um bloco de imagem/texto. Quando vou para a pré-visualização, a imagem está alinhada à extrema esquerda da página, sem margem alguma. Alguma solução a oferecer?
Obrigado!!
WPBeginner Support
Se as configurações estão sendo ignoradas, você pode precisar verificar com o suporte do seu tema para garantir que ele não esteja substituindo sua estilização. Se você quisesse tentar reverter para o editor clássico, temos nosso guia aqui: https://www.wpbeginner.com/plugins/how-to-disable-gutenberg-and-keep-the-classic-editor-in-wordpress/
Admin
Pete Newman
Obrigado! Excelente suporte. Adicionei o plugin do editor clássico e o plugin de desativar Gutenberg e consegui criar uma aproximação do que eu quero. Ansioso para o Gutenberg funcionar como pretendido e os desenvolvedores alcançarem - é uma ótima ideia.
WPBeginner Support
Glad we could help
Jimmie
Mas você não pode linkar imagens em uma galeria? Isso torna a função de galeria menos atraente
WPBeginner Support
If each image needs its own link then setting up columns would likely be what you’re looking to do
Admin
Roxana Snedeker
What is the best way to add multiple images at once, I can’t seem to add more than one at the time
WPBeginner Support
Se você quiser adicionar várias imagens na mesma área, você deve dar uma olhada no bloco de galeria para adicionar várias imagens em uma seção
Admin
Aaranja
Como adicionar uma imagem diretamente no “Editor de Código”, sem passar pelo “Editor Visual”?
WPBeginner Support
Você poderia desativar o editor visual em Usuários>Seu Perfil, mas isso o impediria de usar o editor visual para outras seções.
Admin
Alice
Estou centralizando todas as minhas imagens corretamente no editor, mas todas aparecem alinhadas à esquerda na prévia e nas postagens ativas, não importa o quê. Você sabe o que pode estar causando isso? Isso está me deixando louco!
WPBeginner Support
Seu tema pode estar substituindo o estilo que você está definindo. Se você entrar em contato com o suporte do seu tema, eles devem ser capazes de ajudar.
Admin
Anne
Eu gostaria de ter uma imagem ao lado de um arquivo (pdf) – tudo na mesma linha. Posso fazer isso em um bloco, ou precisaria criar dois? Obrigado!
WPBeginner Support
Você precisaria adicionar o bloco de colunas para dividir o conteúdo e permitir que você exiba o conteúdo dessa forma.
Admin
Suzy Algar
Estou tendo problemas para criar legendas para imagens e downloads que aparecem nos meus arquivos. Não sei para onde ir depois que a imagem está nos meus arquivos.
WPBeginner Support
Se você está tentando adicionar a imagem a uma postagem ou página, normalmente você adicionaria um bloco de imagem e, em seguida, selecionaria o arquivo que deseja usar no bloco.
Admin
Roxana Safipour
Então, como você faz o "sem alinhamento", onde a imagem fica à esquerda e não tem texto ao redor dela? Isso costumava ser fácil com a opção de sem alinhamento, que agora desapareceu. Por favor, traga isso de volta! Estou ficando louco tentando descobrir como colocar minha imagem à esquerda (não centralizada) e sem texto ao lado dela, mas o texto continua envolvendo-a automaticamente!
WPBeginner Support
Pelo que parece que você quer, se você não definir especificamente o alinhamento de uma imagem, a imagem deve se ajustar dessa forma.
Admin
Ben
Apenas um rápido acompanhamento sobre isso, pois estava me incomodando também. Há uma resposta simples, mas não é tão óbvia, pois eu estava procurando por uma configuração – basta pressionar o botão de alinhamento selecionado novamente para desativar o alinhamento e reverter para o sem alinhamento padrão.
Jesse
Ótima postagem, muito útil. Fiz o upgrade para o WordPress 5.1, mas agora tenho problemas para vincular imagens a URLs. Você pode me ajudar?
WPBeginner Support
Se você estiver usando o editor de blocos, nas configurações do bloco de imagem, deve haver uma seção de Configurações de Link para você definir para onde uma imagem será vinculada.
Admin