Nota: Embora nossos guias mais populares tenham sido traduzidos para o português, alguns guias estão disponíveis apenas em inglês.
Image Blocks overview

Blocos de Imagem adicionam imagens individuais a páginas e postagens de blog. Você pode carregar suas próprias imagens ou licenciar imagens do banco do 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 exibe uma imagem de um dos lados e o texto do outro, parcialmente se sobrepondo à imagem. Adicione uma cor de fundo no título para um efeito de destaque. 

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

  • The Inline layout supports one basic caption. This is best for displaying an artist name, crediting a media outlet, or displaying the image title. Learn about caption style options, which are set automatically.
Note: Captions won't display if the Image Block is empty. 
  • 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
  • Style the text in the Site Styles panel
  • 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

In the Edit Image window, drag your image into the image uploader. You can also click Upload an Image to select a file from your computer. Click Apply.

add_your_own_image.jpg

Option 2 - Use a stock image

With our stock image integrations, you can add free and premium stock images directly from your site. This is a great option if you don't already have an image to use.

Click Search For Image to search, preview, and add a stock image for your thumbnail. To learn more, visit Searching and adding stock images

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

The Poster, Card, Overlap, Collage, and Stack Image Blocks have their own style settings in the Site Styles panel. The preview of the image on your page will change so you can view the changes in real time. We recommend playing around with the settings until you find a design you like.

Para saber mais, visite nossos guias de layout:

Add animation

We're testing new animation options on a small number of randomly selected sites. If you’re in this group, you can add visual effects to Image Blocks. Visitors will see the animations when they load or refresh the page.

To add animation:

  1. In any Image Block editor, click the Animations tab. (If you don't see the Animations tab, your site isn't in the test group.)
  2. Select an effect from the Animate Image Block drop-down menu to apply to the image and any text. As you select an option, you’ll see a preview of how it loads on the page.

Choose from:

  • Fade In - Block fades in
  • Focus In - Block looks blurry, then comes into focus
  • Slide Up - Block slides upward
  • Collide - Image and text slide inward from the sides
  • Reveal - Image and text slide outward from the center
  • Custom - Choose separate image and text animations
  1. To animate the image and text separately, select Custom, then select options for Animate Image and Animate Image Text.

Choose from:

  • Fade In - Image or text fades in
  • Slide Up - Image or text slides upward
  • Slide Down - Image or text slides downward
  • Slide from Left - Image or text slides in from the left
  • Slide from Right - Image or text slides in from the right

Animations are only available in a small number of sites, selected randomly. Since we’re currently testing this feature, we can’t add it to sites that don’t have it. We hope to add this feature to all sites in the near future.

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 imagem.
  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
Nota: As legendas sempre são exibidas em uma visualização em lightbox. Os lightboxes desabilitam links de URL. 

Editar a imagem com o Adobe Creative Cloud Image Editor

Clique em Edit (Editar) para girar, recortar ou adicionar filtros à imagem com o Adobe Creative Cloud Image Editor.

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 the Site Styles panel to customize the button. Scroll down to the section for that layout to adjust these tweaks:

  • 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.
  • With the exception of Inline and Stack layouts, captions maintain their set width relative to the image. This means that longer captions may be harder to read.
  • Captions for the Card, Collage, and Overlap layouts move from alongside the image to below the image.
  • The Card, Collage, Overlap, and Stack layouts have a Dynamic Font Sizing option in the Site Styles panel. When this is enabled, text won't resize smaller than 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 girar a imagem, é possível usar o Adobe Creative Cloud Image Editor, ou editá-la em um programa externo e recarregá-la.

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: 42 de 136
Image Blocks overview