Usar imagens no conteúdo da HubSpot

Você pode adicionar imagens a módulos de rich text ou módulos de imagem no conteúdo da HubSpot. Módulos de rich text são compatíveis com vários tipos de conteúdo (imagens, texto, CTAs etc.), enquanto cada módulo de imagem pode conter apenas uma única imagem. 

Adicionar imagem

• Acesse seu conteúdo:

  • Páginas do site: Na sua conta da HubSpot, acesse Conteúdo > Páginas do site.
  • Landing Pages: Na sua conta da HubSpot, acesse Conteúdo > Landing pages.
  • Blog: Na sua conta da HubSpot, acesse Conteúdo > Blog.
  • Central de conhecimento: No seu portal da HubSpot, acesse Atendimento > Central de Conhecimento.
  • E-mail: Na sua conta da HubSpot, navegue até Marketing > E-mail.
• Clique no nome do conteúdo. 

• Para adicionar uma imagem em um e-mail: 
  
  • Módulo em rich text: para e-mails que usam o editor clássico, clique no insertImage iciícone de imagem na barra de ferramentas de rich text. Os módulos de texto e os módulos rich text personalizados no editor de e-mail de arrastar e soltar não podem conter imagens. 
  • Módulo de imagem: e-mails que usam o editor de e-mail arrastar e soltar, clique no módulo de imagem, em seguida, clique em Substituir no editor de barra lateral acima da imagem de espaço reservado.

Observação: apenas arquivos de imagem .png, .ico, .bmp, .jpg e .gif podem ser adicionados aos e-mails de marketing

• Para adicionar uma imagem a uma página, postagem ou artigo: 
  • Módulo rich text: clique no módulo rich text e, em seguida, clique no insertImage iciícone de imagem na barra de ferramentas de rich text.
  • Módulo de imagem: clique no módulo de imagem e clique em Substituir no editor de barra lateral acima da imagem de espaço reservado. 

• Selecione uma imagem: 
  • Para inserir uma imagem existente, clique na imagem no painel direito.

• • Para fazer upload de uma nova imagem do seu computador ou via URL do arquivo, clique em Adicionar imagem no painel direito. Para criar uma nova imagem com as Ferramentas de edição do Canva, clique em Design com o Canva. Em seguida, clique na imagem para inseri-la.
• Antes de inserir uma imagem, você pode otimizá-la para o tempo de carregamento ou a resolução. No painel direito, passe o mouse sobre a imagem e clique em Detalhes.
• Em seguida, clique no menu suspenso Otimização de imagem e selecione uma opção de otimização: 
  • Alta: a imagem será carregada em alta resolução, mas com um tempo de carregamento maior.
  • Padrão: a imagem será otimizada para resolução e tempo de carregamento.
  • Baixa: a imagem será carregada em resolução mais baixa, mas com um tempo de carregamento menor. Saiba mais sobre como otimizar as páginas para o tempo de carregamento em nossa documentação para desenvolvedores.
     

Editar imagens

Depois de adicionar uma imagem ao seu conteúdo, você pode editar o tamanho, adicionar um texto alternativo, adicionar um link ou definir o comportamento de carregamento. 

Editar uma imagem em um módulo de rich text 

• Acesse seu conteúdo:

  • Páginas do site: Na sua conta da HubSpot, acesse Conteúdo > Páginas do site.
  • Landing Pages: Na sua conta da HubSpot, acesse Conteúdo > Landing pages.
  • Blog: Na sua conta da HubSpot, acesse Conteúdo > Blog.
  • Central de conhecimento: No seu portal da HubSpot, acesse Atendimento > Central de Conhecimento.
  • E-mail: Na sua conta da HubSpot, navegue até Marketing > E-mail.
• Clique no nome do conteúdo. 
• No editor de conteúdo, clique na imagem para exibir a barra de ferramentas de edição de imagem.
• Editar a imagem: 
  • Para ajustar como o texto se ajusta à imagem, clique nos inline ícones de alinhamento. 

• • Para ajustar o tamanho da imagem, clique nas setas de largura e na altura ou digite um valor de pixel. 
  • Para ajustar o preenchimento da imagem, clique no menu suspenso Espaçamento e insira um valor de pixel ao redor das bordas do ícone da imagem.
• Para remover um ícone de um módulo de rich text, clique na imagem e, em seguida, no delete ícone de lixeira. 

• Para substituir uma imagem em um módulo rich text, clique na imagem e, em seguida, no replace replícone de substituição e adicione uma nova imagem.

• Para vincular a imagem, adicionar texto alternativo ou definir o comportamento de carregamento, clique na imagem e, em seguida, no ícone de lápis edit:
  • Para adicionar um link à imagem, clique no menu suspenso Link para na caixa pop-up e selecione uma categoria de link. No campo abaixo, insira o destino do link. Saiba mais sobre os diferentes tipos de links.

• • No campo Texto alternativo, insira o texto para descrever o assunto da imagem para os mecanismos de pesquisa e leitores de tela. Você também pode adicionar texto alternativo às imagens na ferramenta de arquivos. Adicionar texto alternativo melhorará a acessibilidade e a SEO do seu site. Saiba mais sobre a acessibilidade do site na nossa documentação de desenvolvedor. 

Observação:adicionar texto alternativo a uma imagem não adicionará texto de título. O texto alternativo afeta as classificações do mecanismo de pesquisa e acessibilidade, enquanto o texto de título aparece quando um visitante passa pela imagem. 

• Para definir o comportamento de carregamento da imagem e personalizar o tipo de link da imagem para os mecanismos de pesquisa, clique em Avançado. 
  • Para definir o comportamento de carregamento de imagem, clique no menu suspensoCarregamento de imagem e selecione uma opção: 
    • Lento: a imagem será carregada somente se o visitante acessar essa parte da página. Isso diminui o tempo necessário para carregar sua página e melhora o SEO. Por padrão, as imagens serão carregadas com essa configuração. 

• • • Padrão do navegador: o comportamento de carregamento da imagem é determinado pelas configurações do navegador do visitante. 
    • Rápido: a imagem será carregada assim que a página for carregada. 

• • Para personalizar o tipo de link da imagem, na seção Tipo de link, selecione um ou mais atributos: 
    
    • Normal: este link não é patrocinado. 
    • Sem acompanhamento: este link não está associado ao seu site.
    • Patrocinado: este é um link ou anúncio patrocinado.
    • Conteúdo gerado pelo usuário: este link leva ao conteúdo gerado pelo usuário, como um comentário de blog ou uma discussão de fórum. 
• Clique em Aplicar para aplicar suas alterações à imagem.

• Para ativar suas alterações, clique em Publicar ou Atualizar no canto superior direito e clique em Publicar ou Atualizar na caixa de diálogo. 

Editar uma imagem em um módulo de imagem

• Acesse seu conteúdo:

  • Páginas do site: Na sua conta da HubSpot, acesse Conteúdo > Páginas do site.
  • Landing Pages: Na sua conta da HubSpot, acesse Conteúdo > Landing pages.
  • Blog: Na sua conta da HubSpot, acesse Conteúdo > Blog.
  • E-mail: Na sua conta da HubSpot, navegue até Marketing > E-mail.
• Clique no nome do conteúdo. 
• No editor de conteúdo, clique no módulo personalizado. 
• Para remover a imagem atual, clique em Remover na seção Imagem do editor da barra lateral. Isso removerá a imagem atual do módulo de imagem, mas não removerá o módulo da página. 

• Para substituir a imagem atual, clique em Substituir na seção Imagem do editor da barra lateral e, em seguida, adicione uma nova imagem. 
• No campo Texto alternativo, insira o texto para descrever o assunto da imagem para os mecanismos de pesquisa e leitores de tela. Você também pode adicionar texto alternativo às imagens na ferramenta de arquivos. Adicionar texto alternativo melhorará a acessibilidade e a SEO do seu site. Saiba mais sobre a acessibilidade do site na nossa documentação de desenvolvedor. 

Observação:adicionar texto alternativo a uma imagem não adicionará texto de título. O texto alternativo afeta as classificações do mecanismo de pesquisa e acessibilidade, enquanto o texto de título aparece quando um visitante passa pela imagem. 

• Para definir o tamanho da imagem em diferentes dispositivos, clique no menu suspenso Tamanho e selecione uma opção:
  
  • Ajustar automaticamente: a imagem será dimensionada para se adaptar ao dispositivo em que for visualizada. 
  • Altura e largura exatas: a imagem será exibida com o mesmo tamanho em todos os dispositivos.
• Para definir um limite para o tamanho da imagem, clique no menu suspenso Tamanho máximo e selecione uma opção: 
  • Tamanho original da imagem: a imagem nunca aparecerá maior que seu tamanho original. 
  • Personalizado: a imagem nunca aparecerá maior do que uma largura e altura específicas definidas nos campos largura e altura. 
• Para definir o comportamento de carregamento de imagem, clique no menu suspenso Carregamento de imagem e selecione uma opção: 
  • Padrão do navegador: o comportamento de carregamento da imagem é determinado pelas configurações do navegador do visitante. 

• • Lento: a imagem será carregada somente se o visitante acessar essa parte da página. Isso diminui o tempo necessário para carregar sua página e melhora o SEO. Por padrão, as imagens serão carregadas com essa configuração. 

• • Rápido: a imagem é carregada o mais rápido possível. 
• Para adicionar um link à imagem, insira uma URL de destino no campo Link (opcional). Marque a caixa de seleção Abrir link na nova guia para direcionar o visitante para a URL de destino em uma nova guia do navegador.
• No canto superior direito, clique emPublicarou Atualizar para ativar suas alterações.