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 de imagem. Se preferir, digite /imagem e pressione Enter.

O texto /imagem 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:

A barra de ferramentas do bloco de imagem dispõe de diversos botões de opções, incluindo para alterar o tipo de bloco e substituir a imagem.

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


Filtro duotônico

A opção do filtro duotônico permite que você defina as cores da imagem na barra de ferramentas do bloco. Pense em fotos preto e branco, mas em qualquer combinação de cores que você quiser. Para começar, selecione o botão do filtro duotônico na barra de ferramentas, depois selecione um dos exemplos mostrados ou defina suas próprias cores.

Um gif de uma imagem sendo clicada no editor e, em seguida, diversos filtros duotônicos sendo aplicados, para ver como ficam.

Para definir suas próprias cores, selecione os pontos nas barras de cores:

Uma captura de tela, destacando onde clicar na configuração do filtro duotônico para definir uma cor personalizada, na barra de cores.

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.

Leitura complementar: alinhar imagens a um texto


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: recorte a imagem nas proporções específicas da largura de uma imagem, de acordo com a sua altura. 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: salve suas alterações na imagem.
  • Cancelar: saia das ferramentas de edição e cancele as alterações.

Veja uma demonstração de como operar a funcionalidade de zoom:

Use a ferramenta de zoom para recortar a imagem de acordo com o tamanho e o conteúdo que você deseja visualizar.

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. Se a barra lateral não for exibida, 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:

  • O estilo da imagem, que pode ser definido como Padrão (para que a imagem seja exibida como você a inseriu) ou Arredondado (para que a imagem seja exibida com bordas arredondadas caso fosse originalmente 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.