Blocos

Blocos » Bloco de imagem

Use o bloco de imagem para inserir uma imagem na sua página ou post. Neste guia, você verá como inserir uma imagem e usar todas as configurações disponíveis para controlar como ela será exibida.

Sumário

Adicionar um bloco de imagem

Para adicionar um bloco de imagem a uma página, clique no ícone + e pesquise o bloco. Se preferir, digite /imagem e pressione Enter:

O texto /image foi digitado e a opção de adicionar rapidamente um bloco de imagem é exibida.
Adicione imagens com um comando de barra.

Você encontra instruções detalhadas sobre como adicionar blocos neste link.


Adicionar uma imagem

O painel com as opções de mídia será carregado com três opções: Fazer upload, Selecionar imagem e Inserir a partir da URL.

Há três maneiras de adicionar imagens: Fazer upload, Selecionar imagem e Inserir a partir da URL.
  • A opção Fazer upload permite que você escolha uma imagem do seu computador e a carregue no seu site.
  • Selecionar imagem permite escolher uma imagem a partir das imagens existentes no seu site (Biblioteca de mídia), do Google Fotos ou da biblioteca de fotos gratuita do Pexels.
  • Inserir a partir da URL permite usar uma imagem disponível na Internet.

Barra de ferramentas do bloco

Cada bloco tem seus controles específicos para você alterá-lo diretamente pelo editor. Veja a seguir como é a barra de ferramentas do bloco de imagem:

Barra de ferramentas exibida acima de um bloco de imagem.

Os ícones na barra de ferramentas do bloco de imagem são, da esquerda para a direita:


Alinhar imagens

Use as opções de alinhamento para exibir a imagem à esquerda, à direita ou centralizada. Talvez você veja também opções “amplo” e “largura total”, se forem compatíveis com seu tema.

GIF mostrando como alinhar uma imagem à esquerda de um parágrafo, conforme descrito no texto abaixo desta imagem.

Se quiser alinhar uma imagem em um parágrafo para que o texto a contorne, insira-a logo acima do texto. Clique na imagem e selecione o alinhamento à direita ou à esquerda para que ela seja exibida ao lado do bloco de parágrafo. Por fim, você pode redimensioná-la de acordo com a altura e largura que quiser.


As configurações de links permitem hiperlinks em suas imagens. Você pode optar por clicar em uma imagem para abrir uma página de anexos, o arquivo de mídia original ou uma URL personalizada à sua escolha.

Para redirecionar o usuário a uma URL específica, insira a URL para redirecionamento na caixa de texto exibida. Clique na seta para baixo ao lado dessa caixa para escolher se o link será aberto ou não em uma nova guia.

Se você preferir vincular uma imagem a uma página ou post no seu site, comece a digitar no campo de pesquisa o título da página ou do post. Depois, você pode selecioná-los nos resultados e vincular a imagem a eles.

Sua imagem pode ser vinculada a uma página de anexo, a um arquivo de mídia ou a uma URL personalizada.
Recortar e outras ferramentas de edição de imagem

Clique no ícone de recorte na barra de ferramentas. Uma seleção de ferramentas de edição será exibida:

Ferramentas de edição do bloco de imagem mostrando as opções de zoom, proporção de tela, rotação, aplicação e cancelamento.

Da esquerda para a direita, as ferramentas são:

  • Zoom: você pode ampliar o zoom na sua imagem em até 300% e clicar e arrastar para controlar qual parte será ampliada.
  • Proporção: controle a proporção entre a largura e a altura de uma imagem. As opções disponíveis são:
    • Original
    • Quadrado
    • Paisagem: 16:10, 16:9, 4:3 ou 3:2
    • Retrato: 10:16, 9:16, 3:4 ou 2:3
  • Girar: gire a imagem em 90°, 180°, 270° ou 360°.
  • Aplicar: confirme as alterações na imagem.
  • Cancelar: saia das ferramentas de edição e cancele as alterações.

As edições aplicadas criarão uma nova cópia da imagem na Biblioteca de mídia. Assim, caso a imagem seja usada em outro lugar no seu site, ela não será afetada. Isso também significa que você terá a imagem original se precisar.


Redimensionar imagens

Após adicionar as imagens ao editor, é possível redimensioná-las e alinhá-las para que se adaptem melhor ao conteúdo ao redor delas.

Redimensionar uma imagem arrastando as alças.
Redimensione uma imagem arrastando as alças.

Para redimensionar uma imagem, clique nela para revelar as alças (pontos azuis ao redor da imagem). Depois, clique em uma dessas alças e arraste a imagem até o tamanho desejado.

Se preferir, ajuste as dimensões de largura e altura nas configurações do bloco, à direita. Há também opções úteis ali para ajustar a imagem com 100%, 75%, 50% e 25% do tamanho original.

Controles de tamanho da imagem nas configurações do bloco
Controles de tamanho da imagem nas configurações do bloco

Legendas

É possível adicionar legendas às imagens de duas formas. Caso deseje adicionar uma legenda a uma única instância de uma imagem, basta inseri-la no espaço reservado para a legenda no editor.

Se você escrever uma legenda para uma imagem na Biblioteca de mídia e então adicionar um bloco de imagem, o bloco será exibido com a legenda. No entanto, se você adicionar uma legenda à imagem na Biblioteca de mídia após adicionar o bloco de imagem, a legenda não será exibida. Nesse caso, você pode digitar a legenda manualmente no bloco de imagem ou remover e adicionar o bloco novamente para que ele use a legenda da Biblioteca de mídia.


Configurações do bloco

Cada bloco tem opções específicas na barra lateral do editor, que podem fornecer mais personalização que as opções encontradas na barra de ferramentas do bloco. Caso não esteja visualizando a barra lateral, clique no ícone de engrenagem, ao lado do botão Publicar.

As configurações do bloco estão na barra lateral.
As configurações do bloco estão na barra lateral.

Configurações da imagem

Configurações do bloco de imagem

As configurações do bloco de imagem contêm as seguintes opções:

  • Escolha o estilo da imagem, que pode ser definido como Padrão (para que imagem seja exibida como você a inseriu) ou Arredondado (para que a imagem seja exibida com bordas arredondadas caso fosse originalmente quadrada/retangular).
  • Um campo de texto para adicionar uma descrição de texto alternativo, que é importante para fins de acessibilidade e de SEO.
  • Opções de tamanho de imagem, descritas acima.
  • Um botão Substituir para trocar uma imagem por outra.

Avançado

Na guia Avançado, você adiciona uma classe CSS ao seu bloco, permitindo a gravação de CSS personalizado e a estilização do bloco de imagem conforme você julgar melhor. Saiba mais.

A seção Avançado permite adicionar uma classe CSS ao bloco.
A seção Avançado permite adicionar uma classe CSS ao bloco.

Opções adicionais de AMP disponíveis nos planos Negócios e eCommerce

Nos planos eCommerce e Negócios, o bloco de imagem inclui as seguintes opções:

  • Noloading da AMP: ative essa opção se quiser ocultar o símbolo de carregamento exibido enquanto a mídia incorporada é carregada na página da AMP.
  • Efeito lightbox da AMP: ative essa opção para permitir o componente de lightbox, que possibilita a expansão de imagens da AMP para preencher o viewport.
Configurações AMP em um bloco de imagem de um site no plano Negócios ou eCommerce

Além disso, há diversas opções para definir as configurações do layout da AMP. Esta página sobre layout HTML da AMP explica esses atributos.