Nota: Embora nossos guias mais populares tenham sido traduzidos para o português, alguns guias estão disponíveis apenas em inglês.
Visão geral de Blocos de Imagem

Os Blocos de Imagem adicionam imagens individuais às páginas e às publicações do blog. Você pode carregar suas próprias imagens ou obter licença das fotos de acervo da nossa integração Unsplash ou Getty Images.

Há seis layouts do Bloco de Imagem. Seus designs e estilo são consistentes por todos os templates.

Nota: Os estilos das legendas para o layout Inline são determinados pelo template.
Dica: Outras formas de adicionar imagens ao seu site incluem imagens do banner, imagens de fundo, Blocos de Galeria, e Páginas de Galeria.

Assistir a um vídeo

Comparação de Bloco de Imagem

Aqui está uma visão geral das diferenças entre os seis layouts de Blocos de Imagem, com exemplo de como cada um pode ser estilizado.

Pôster

Bloco de Imagem Pôster exibe texto sobre a imagem.

poster.jpg

Cartão

Bloco de Imagem Cartão alinha o texto à direita ou à esquerda da Imagem.

card.jpg

Sobreposição

Bloco de Imagem sobreposição mostra uma imagem de um lado e o texto do outro, sobrepondo-se parcialmente à imagem. Adicione uma cor de fundo ao título para destacar.

overlap.jpg

Colagem

Bloco de Imagem Colagem exibe uma imagem de um lado e o texto sobre um cartão de fundo, cobrindo e se sobrepondo à imagem.

collage.jpg

Stack (Pilha)

Bloco de Imagem Empilhado exibe uma imagem com o texto embaixo, com uma cor de fundo opcional.

stack.jpg

Alinhado

Bloco de Imagem Alinhado exibe uma imagem simples com legenda opcional (nosso Bloco de Imagem Clássico).

inline.jpg

Misturar e combinar

Você pode misturar e combinar diversos estilos de Blocos de Imagem em uma página ou postagem.

  • Cada layout tem suas próprias opções de estilo.
  • As opções de estilo de layout são universais para o site. Por exemplo: cada Bloco de Imagem Pôster no seu site terá o mesmo estilo.

mixed-layout.jpg

Legendas x títulos e subtítulos

Atenção: a legenda não aparece se o Bloco de Imagem estiver vazio.
  • Todos os outros layouts oferecem campos para títulos e subtítulos. Eles têm mais opções de estilos e dão grande ênfase no texto, criando mais interação entre as imagens e as palavras. Para saber mais, visite os guias para os layouts PôsterCartãoSobreposiçãoColagem, e Empilhado .

Os estilos de layout têm vantagens diferentes: 

Alinhado Todos os outros layouts
  • Um campo de legenda
  • Os estilos de texto são definidos automaticamente (geralmente seguem o corpo de texto)
  • Pode exibir ao passar o mouse.
  • A legenda se transforma em atributo "alt" automaticamente
  • Texto com dois campos: um título e um subtítulo
  • Estilize o texto no painel Estilos do Site
  • Diferentes opções de exibição dependendo do seu layout
  • Adicione texto com atributo "alt" manualmente

Passo 1 - Adicione um Bloco de Imagem

Para adicionar qualquer Bloco de Imagem:

  1. Abra um editor de página ou postagem.
  2. Clique em Ponto de Inserção ou no +.
  3. Dentro de Image Layouts (Layouts de Imagem), selecione Poster (Pôster), Card (Cartão), Overlap (Sobreposição), Collage (Colagem), ou Stack (Empilhado). Para o layout Inline (Alinhado), selecione Image (Imagem) na seção Basic (Básica).

Image_Blocks.jpg

Passo 2 - Adicione uma imagem

Dica:Para melhores resultados, recomendamos que você mantenha suas imagens abaixo de 500 KB . Para saber mais, visiteFormatar suas imagens para exibição na web.

Opção 1 - Adicionar sua própria imagem

Na janela de Editar imagem, arraste a sua imagem até o uploader de imagem. Você também pode clicar em Carregar imagem para selecionar um arquivo do seu computador. Clique em Aplicar.

add_your_own_image.jpg

Opção 2 - Use uma cena de banco de imagem

Com as nossas integrações de bancos de imagem, você pode adicionar imagens gratuitas e premium diretamente do seu site. Essa é uma ótima opção caso ainda não tenha uma imagem para usar.

Clique em Buscar imagem para pesquisar, visualizar e adicionar uma cena de banco de imagem para compor sua imagem em miniatura. Para saber mais, acesse Pesquise e adicione cenas de bancos de imagem.

search_for_an_image.jpg

Passo 3: Adicione e dê estilo aos textos (opcional)

Clique em Escreva aqui para adicionar uma legenda ou título e subtítulo à imagem.

Os campos de texto e as opções de estilo variam de acordo com o layout:

Para melhor exibição, mantenha o texto curto. Tente limitar os subtítulos a uma ou duas frases. Isso mantém um equilíbrio agradável entre as palavras e as imagem. Isso também mantém o texto visível em dispositivos móveis.

Dica: Também é possível criar um texto com atributo alt para ajudar os mecanismos de busca a reconhecerem a sua imagem.

Passo 4: Ajuste as configurações de design

Na aba Design:

  • Para o layout Inline, configure a exibição de legendas, definições do lightbox e um link URL.
  • Para os layouts Pôster, Cartão, Sobreposição ou Empilhado, use o menu suspenso do Image Link (Link da Imagem) para adicionar um botão ou link URL.
  • Defina a Posição da Imagem para os layouts Cartão, Sobreposição ou Colagem.

Passo 5 - Salvar

Clique em Apply (Aplicar) para salvar as alterações feitas no bloco.

Passo 6: - Personalize o design

Os Blocos de Imagem de Pôster, Cartão, Sobreposição, Colagem e Empilhado têm suas próprias definições de estilo no painel Estilos do Site. A pré-visualização da imagem na sua página mudará para exibir as alterações em tempo real. Recomendamos explorar as configurações até achar um design de sua preferência.

Para saber mais, visite nossos guias de layout:

Adicione animações

Adicione uma animação que o visitante vê ao carregar ou atualizar a página.

Para adicionar animações:

  1. Em qualquer editor de Bloco de Imagem, clique na aba Animações
  2. Selecione um efeito no menu suspenso Animar Bloco de Imagem para aplicar à imagem e qualquer texto. Ao selecionar uma opção, você verá uma prévia de como ele carrega na página.
  3. Para animar a imagem e o texto separadamente, selecione Personalizado e, em seguida, selecione as opções para Animar imagem e Animar texto da imagem.

animations_options.jpg

Escolha entre estas opções de animação para a imagem, o texto ou o bloco inteiro:

  • Fade In - o bloco, a imagem ou texto aparece gradualmente
  • Deslizar para cima - o bloco, a imagem ou texto desliza para cima
  • Deslizar para baixo - a imagem ou texto desliza para baixo
  • Clipe horizontal - o bloco ou a imagem carrega em camadas horizontais
  • Clipe vertical - o bloco ou a imagem carrega em camadas verticais
  • Inclinar para cima - o bloco ou a imagem aumenta com inclinação para cima
  • Inclinar para baixo - o bloco ou a imagem aumenta com inclinação para baixo
  • Foco - o bloco aparece borrado e depois entra em foco
  • Colidir - imagem e texto deslizam de fora para dentro pelos lados
  • Revelar - imagem e texto deslizam do centro para fora
  • Deslizar da esquerda - a imagem ou texto aparece deslizando pela esquerda
  • Deslizar da direita - a imagem ou texto aparece deslizando pela direita

Recomendamos testar as diferentes opções até achar a melhor animação para sua imagem e texto. 

Veja o exemplo de um Bloco de Imagem com estas configurações:

  • Animar Imagem de Bloco - personalizar
  • Animar imagem - deslizar da direita
  • Animar texto da imagem - deslizar da esquerda

Image_Block_animation.gif

Mova o Bloco de Imagem

Após salvar a imagem, arraste e solte o bloco em qualquer lugar da página. Também é possível usar esse método para colocar o texto em volta da imagem. Para saber mais, acesse Mover blocos.

moving_a_block.gif

Configurar a imagem para abrir em um lightbox

Somente o layout Alinhado é compatível com um lightbox. Para abrir a sua imagem em um lightbox:

  1. Clique duas vezes na imagem para abrir o editor de bloco.
  2. Clique na aba Design.
  3. Certifique-se de que seu layout está definido como Inline (Alinhado)
  4. Marque  Enable Lightbox (Habilitar Lightbox).
  5. Escolha o seu estilo de lightbox com o menu suspenso Tema do Lightbox
Atenção: as legendas sempre aparecem em lightbox. Os lightboxes desativam as URLs de clickthrough.

Edite a imagem 

Clique em Editar para rodar, cortar ou adicionar filtros à imagem com o Editor de imagem integrado.

edit.jpg

Remova ou substitua a imagem

Para apagar um bloco, clique no ícone da lixeira no editor da página ou da postagem.

Para remover a imagem sem remover o bloco, abra o Editor do Bloco de Imagem e clique em Remover. Você pode, então, substituí-la com outra imagem

remove.jpg

Mude o layout

Você pode trocar o design por um layout diferente na aba Design do Editor do Bloco. Dessa forma, você pode mudar o design e o estilo da sua imagem sem precisar apagar o bloco e adicioná-lo de novo.

  1. Dê um duplo clique no bloco na editor da página.
  2. Clique na aba Design.
  3. Selecione o novo layout.
  4. Ao fazer a seleção, a pré-visualização da imagem na sua página irá mudar de forma que você possa ver as alterações em tempo real.
Dica: Ao trocar o layout Alinhado por outro qualquer, você precisará inserir de novo o texto da imagem.

Adicione um link ou botão de imagem

Há duas maneiras de criar um link no Bloco de Imagem:

  • Transformar a própria imagem em um link clicável.
  • Adicionar um botão abaixo do título e subtítulo (todos os layouts, exceto o Alinhado)

Layout Alinhado

Adicione um link URL na aba Design do editor do bloco para criar um link para a imagem.

  • Habilitar um lightbox desabilita links URL.
  • O layout Alinhado não suporta botões.

Todos os outros layouts

Na aba Design do editor do bloco, defina um link a partir do menu suspenso do Link de Imagem. Escolha dentre:

  • Nenhum - Sem link
  • Na Imagem - A imagem inteira vira um link clicável
  • Botão - Adicione um botão inline com texto, abaixo do título e subtítulo.

Use o campo Link URL para definir o link para a imagem ou botão. Você pode criar um link para a imagem apontando para outra página de seu site, de um site externo ou um arquivo.

Use o painel Estilos do Site para personalizar o botão. Role para baixo até a seção desse layout para acessar os ajustes:

  • Fonte do Botão - Define a fonte e o tamanho do botão
  • Cor da Fonte do Botão
  • Cor de Fundo do Botão
  • Cor da Borda do Botão - Ajusta a cor da borda definida com o ajuste do Largura da Borda do Botão
  • Largura da Borda do Botão
  • Preenchimento do Botão
  • Arredondamento do Botão 
  • Separação do Botão - Ajusta a posição do botão

button.png

Redimensione ou recorte a imagem

Para todos os layouts:

Cada layout oferece opções adicionais de redimensionamento e recorte:

Crie texto com atributo "alt"

O texto com atributo "alt" ajuda mecanismos de busca a reconhecer usa imagem.

Legendas adicionadas no layout Alinhado se tornam textos com atributo "alt" para a imagem. Para adicionar um texto com atributo "alt", mas não uma legenda, adicione o texto da legenda e depois selecione Do Not Display Caption (Não Exibir Legenda).

Para todos os outros layouts, as legendas não se tornam texto com atributo "alt", mas você pode configurar manualmente usando o layout Alinhado:

  1. Abra o editor do bloco.
  2. Na aba Design, escolha o layout Inline (Alinhado).
  3. Use o campo de legenda para adicionar o texto com atributo "alt".
  4. Troque para qualquer outro layout e adicione qualquer texto que deseja exibir como legenda. O texto que você adicionou no layout Alinhado permanecerá como texto com atributo "alt".
Dica: Se você não encontrar o texto Write here (Escreva aqui) no layout Alinhado, temporariamente troque o estilo da legenda para Caption Below (Legenda Abaixo) na aba Design.

Use uma imagem como um banner de página

Para dicas sobre usar um Bloco de Imagem como um banner de página, consulte Adicionando imagens de banner.

image-block-as-a-banner.png

Blocos de imagem em celular

Cada layout de Bloco de Imagem mantém seu formato no celular. O texto se moverá no celular para caber no dispositivo e manterá uma posição similar em relação à imagem.

  • Para ver qual será o aspecto dos Blocos de Imagem , utilize o Simulador de Dispositivos.
  • Com exceção dos layouts Inline e Empilhado, as legendas mantêm sua largura definida em relação à imagem. Isso significa que legendas extensas podem ser mais difíceis de se ler.
  • Nos layouts Cartão, Colagem e Sobreposição, a posição das legendas encontram-se abaixo da imagem, e não ao lado da imagem.
  • Os layouts de Cartão, Colagem, Sobreposição e Empilhado oferecem a opção de Redimensionamento dinâmico de fontes no painel Estilos do Site. Com essa opção ativada, o texto não pode ser redimensionado para um tamanho menor do que 14 pixels.
  • Múltiplos Blocos de Imagemse empilham verticalmente no celular.

Perguntas Frequentes

A imagem está na lateral

Isso pode acontecer se a imagem original tiver sido fotografada com o dispositivo virado e carregada direto sem girá-la em um programa de edição de imagens.

Para rodar a imagem, use o Editor de imagem ou um programa externo e recarregue-a.

Minhas imagens estão aparecendo em cores diferentes

Isso acontece quando a imagem é salva em CMYK e não em RGB.

Sempre salve as imagens em RGB ou sRGB. A cor do modo RGB é um formato seguro para a web, enquanto que o CMYK serve para impressão e não é renderizado na maioria dos navegadores. Para mais dicas de formatação de imagens, acesse Formatar imagens para exibição na web.

Qual o tamanho recomendado do arquivo?

Para melhores resultados, quando o Bloco de Imagem tem um tamanho de arquivo limite de 20 MB, recomendamos que você mantenha as imagens abaixo de 500 KB . Para saber mais, acesse Formatar imagens para exibição na web.

Esse artigo foi útil?
Usuários que acharam isso útil: 47 de 143
Visão geral de Blocos de Imagem