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 dos Blocos de Imagem

Blocos de Imagem adicionam imagens individuais a páginas e postagens de blog. Você pode dar upload em suas próprias imagens ou licenciar imagens do banco do Getty Images.

Há seis layouts do Bloco de Imagem. Seus designs e respostas 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 seis layouts de Blocos de Imagem, com exemplo de como dar estilo a cada um.

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, sobre uma cor de fundo opcional.

stack.jpg

Inline

Bloco de Imagem Inline 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

  • O layout Inline comporta apenas uma legenda básica. Ela é ótima para exibir o nome de um artista, creditar um meio de comunicação ou exibir o título da imagem. Saiba mais sobre as opções de estilo de legenda, que são definidas automaticamente.
  • 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: 

Inline Todos os outros layouts
  • Um campo de legenda
  • Os estilos de texto são definidos automaticamente (geralmente seguem o corpo de texto)
  • Pode exibir com efeito hover
  • A legenda se transforma em atributo "alt" automaticamente
  • Texto com dois campos: um título e um subtítulo
  • Dê estilo ao texto no Editor de Estilo
  • 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 Layouts de Imagem, selecione Pôster, Cartão, Sobreposição, Colagem, ou Empilhado. Para o layout Inline, selecione Imagem na seção Básica.

image-block-menu.jpg

Passo 2 - Adicione uma imagem

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

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

Na janela Editar Imagem, arraste a imagem para o carregador de imagem. Também é possível clicar no carregador de imagem para selecionar um arquivo do computador. Clique em Apply (Aplicar).

add-image.jpg

Opção 2 - Usar uma Getty Image

Através de nossa parceria com a Getty Images, é possível licenciar imagens de acervo individuais por US$ 10. Essa é uma ótima opção se você ainda não possuir uma imagem para usar.

Clique em Getty Image para pesquisar, pré-visualizar e comprar uma imagem de acervo para sua miniatura. Para saber mais, acesse visão geral Getty Images e Squarespace.

add-getty-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 definiçõ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 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 Pôster, Cartão, Sobreposição, Colagem e Empilhado têm suas próprias definições de estilo no Editor de Estilo. A pré-visualização da imagem na sua página irá mudar de forma que você possa ver as alterações em tempo real. Recomendamos tentar usar as diferentes configurações, até encontrar seu desenho favorito.

Para saber mais, visite nossos guias de layout:

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
  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 as respostas 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 inline 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 Inline)

Layout Inline

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 Inline 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 Editor de Estilo para personalizar o botão. Role para baixo para a seção pertinente de forma a ajustar o layout:

  • 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 Inline 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 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 Inline:

  1. Abra o editor do bloco.
  2. Na aba Design, escolha o layout Inline.
  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 Inline permanecerá como texto com atributo "alt".
Dica: Se você não encontrar o texto Escreva aqui no layout Inline, temporariamente troque o estilo da legenda para 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.

  • Com exceção dos layouts Inline e Empilhado, as legendas manterão suas larguras definidas em relação À imagem. Isso significa que legendas mais longas podem ficar mais difíceis de ler. 
  • Para ver qual será o aspecto dos Blocos de Imagem , utilize o Simulador de Dispositivos.
  • Múltiplos Blocos de Imagemse empilham verticalmente no celular.
  • Os layouts de Cartão, Colagem, Sobreposição e Pilha têm opções de Dynamic Font Sizing (Redimensionamento de Fonte Dinâmica) no Editor de Estilos. Quando esta opção é habilitada, o texto não será redimensionado para um tamanho menor que 14 pixels.

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: 40 de 131
Visão Geral dos Blocos de Imagem