Usar imagens no conteúdo da HubSpot

Você pode adicionar imagens a módulos rich text ou módulos de imagem em Conteúdo HubSpot. Os módulos rich text suportam vários tipos de conteúdo (imagens, texto, CTAs, etc.), enquanto cada módulo de imagem pode conter apenas uma única imagem. 

Observe: módulos de texto e módulos de rich text personalizados no editor de e-mail arrastar e soltar não pode conter imagens. 

Adicionar imagens

• 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: Na sua conta da HubSpot, acesse Conteúdo > Central de Conhecimento.
  • E-mail: Na sua conta HubSpot, acesse Marketing > E-mail marketing.
• Clique no nome do conteúdo. 

Observe que apenas arquivos de imagem .png, .ico, .bmp, .jpg e .gif podem ser adicionados a emails de marketing

• Inserir uma imagem: 
  • Para adicionar uma imagem a um módulo rich text, clique no botão módulo de rich text e clique no insertImage iciícone de imagem na barra de ferramentas de rich text.
  • Para adicionar uma imagem a um módulo de imagem, clique no módulo de imagem e em Substituir no editor de barra lateral acima da imagem de espaço reservado. 
• Selecionar 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 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 a otimização de páginas para tempo de carregamento em nossa documentação de 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: Na sua conta da HubSpot, acesse Conteúdo > Central de Conhecimento.
  • E-mail: Na sua conta HubSpot, acesse Marketing > E-mail marketing.
• Clique no nome do conteúdo. 
• No editor de conteúdo, clique no botão imagem para exibir a barra de ferramentas de edição de imagem.
• Edite a imagem: 
  • Para ajustar como o texto se ajusta à imagem, clique no botão inline ícones de alinhamento. 

• • Para ajustar o tamanho da imagem, clique na largura e na altura Setas; flechas ou digite um valor de pixel. 
  • Para ajustar o preenchimento ao redor da sua imagem, clique no botão Espaçamento menu suspenso e digite valores de pixels ao redor das bordas do ícone da imagem.
• Para remover uma imagem de um módulo rich text, clique no botão imagem e clique no delete ícone da lixeira. 

• Para substituir uma imagem em um módulo rich text, clique no botão imagem e clique no replace replsubstituir ícone e adicione uma nova imagem.

• Para vincular a imagem, adicionar texto alternativo ou definir o comportamento de carregamento, clique no botão imagem, em seguida, clique 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 texto alternativo campo, digite texto para descrever aos motores de busca e leitores de tela o que é a imagem. Você também pode adicionar texto alternativo às imagens no ferramenta de arquivos. Adicionar texto alternativo melhorará o acessibilidade e SEO do seu site. Saiba mais sobre a acessibilidade do site na nossa documentação para desenvolvedores. 

Observe: adicionar texto alternativo a uma imagem não adiciona 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: 
    
    • Regular: este link não é patrocinado. 
    • Não siga: este link não está associado ao seu site.
    • Patrocinadas: este link é um link patrocinado ou um anúncio.
    • Conteúdo gerado por usuários: esse link leva ao conteúdo gerado pelo usuário, como um comentário em um blog ou uma discussão em um 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 HubSpot, acesse Marketing > E-mail marketing.
• Clique no nome do conteúdo. 
• No editor de conteúdo, clique no botão módulo de imagem. 
• 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 texto alternativo campo, digite texto para descrever aos motores de busca e leitores de tela o que é a imagem. Você também pode adicionar texto alternativo às imagens no ferramenta de arquivos. Adicionar texto alternativo melhorará o acessibilidade e SEO do seu site. Saiba mais sobre a acessibilidade do site na nossa documentação para desenvolvedores. 

Observe: adicionar texto alternativo a uma imagem não adiciona 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 botão Tamanho menu suspenso e selecione um opção:
  
  • Ajustar automaticamente: a imagem será dimensionada para caber no dispositivo em que é 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 botão Tamanho máximo menu suspenso e selecione um opção: 
  • Tamanho original da imagem : a imagem nunca parecerá maior que seu tamanho original. 
  • Personalizado : a imagem nunca aparecerá maior do que uma largura e altura específicas definidas no largura e altura Campos. 
• Para definir o comportamento de carregamento da imagem, clique no botão Carregamento de imagem  menu suspenso e selecione um 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. 

• • Ansioso : 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.
• Para colocar suas alterações em tempo real, clique em Publicar ou Atualizar na parte superior direita.