Usar imagens no conteúdo da HubSpot

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

Observação: os módulos de texto e os módulos de rich text personalizados no editor de e-mail do tipo arrastar e soltar não podem conter imagens. 

Adicionar imagens

• Acesse seu conteúdo:

  • Páginas do site: Na sua conta HubSpot, navegue até Marketing > Site > Páginas do site.
  • Landing Pages: Na sua conta da HubSpot, navegue até Marketing > Landing Pages.
  • Blog: Na sua conta da HubSpot, navegue até Marketing > Site > Blog.
  • Central de conhecimento: Na sua conta da HubSpot, navegue até Serviços > Central de Conhecimento.

• • E-mail: Na sua conta da HubSpot, navegue até Marketing > E-mail.
• Passe o cursor do mouse sobre o conteúdo e clique em Editar. 

Atenção: apenas .png,.ico,.bmp,.jpg, e.gif ficheiros de imagem podem ser adicionados a e-mails de marketing

• Inserir uma imagem: 
  • Para adicionar uma imagem a um módulo de rich text, clique no módulo de rich text e, em seguida, clique no ícone de imagem insertImage ici 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 o Canva. Em seguida, clique na imagem para inseri-la.

Antes de inserir uma imagem, você pode otimizá-la para tempo de carregamento ou resolução, clicando em Detalhes da imagem no painel direito. 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 HubSpot, navegue até Marketing > Site > Páginas do site.
  • Landing Pages: Na sua conta da HubSpot, navegue até Marketing > Landing Pages.
  • Blog: Na sua conta da HubSpot, navegue até Marketing > Site > Blog.
  • Central de conhecimento: Na sua conta da HubSpot, navegue até Serviços > Central de Conhecimento.
  • E-mail: Na sua conta da HubSpot, navegue até Marketing > E-mail.
• Passe o cursor do mouse sobre o conteúdo e clique em Editar. 
• No editor de conteúdos, clique na imagem para apresentar a barra de ferramentas de edição de imagens.
• Editar a imagem: 
  • Para ajustar a forma como o texto envolve a imagem, clique nos ícones de alinhamento inline . 

• • Para ajustar o tamanho da imagem, clique nas setas de largura e altura ou introduza um valor de píxeis . 
  • Para ajustar o preenchimento em torno da imagem, clique no menu pendente Spacing e introduza os valores de píxeis em torno das extremidades do ícone de imagem.
• Para remover uma imagem de um módulo de rich text, clique na imagem e, em seguida, clique no ícone do lixo delete . 

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

• Para ligar a imagem, adicionar texto alternativo ou definir o comportamento de carregamento, clique na imagem , e, 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 campo Alt text , introduza text para descrever aos motores de busca e leitores de ecrã o que é a imagem. Também pode adicionar texto alternativo às imagens na ferramenta de ficheiros . A adição de texto alternativo melhorará a acessibilidade e a SEO do seu sítio. Saiba mais sobre a acessibilidade do sítio Web na nossa documentação para programadores . 

Nota: 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: esta hiperligação não é patrocinada. 
    • No follow: este link não está associado ao seu sítio Web.
    • Patrocinado: esta ligação é uma ligação patrocinada ou um anúncio.
    • Conteúdo gerado pelo utilizador: esta ligação conduz a conteúdo gerado pelo utilizador, como um comentário num blogue ou uma discussão num fórum. 
• Clique em Aplicar para aplicar suas alterações à imagem.

• Para ativar as suas alterações, clique em Publicar ou Atualizar no canto superior direito e, em seguida, 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 HubSpot, navegue até Marketing > Site > Páginas do site.
  • Landing Pages: Na sua conta da HubSpot, navegue até Marketing > Landing Pages.
  • Blog: Na sua conta da HubSpot, navegue até Marketing > Site > Blog.
  • E-mail: Na sua conta da HubSpot, navegue até Marketing > E-mail.
• Passe o cursor do mouse sobre o conteúdo e clique em Editar. 
• No editor de conteúdos, clique no 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 campo Alt text , introduza text para descrever aos motores de busca e leitores de ecrã o que é a imagem. Também pode adicionar texto alternativo às imagens na ferramenta de ficheiros . A adição de texto alternativo melhorará a acessibilidade e a SEO do seu sítio. Saiba mais sobre a acessibilidade do sítio Web na nossa documentação para programadores . 

Nota: 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 menu pendente Size e seleccione uma opção:
  
  • Ajustar automaticamente: a imagem será dimensionada para se adaptar ao dispositivo em que é visualizada. 
  • Altura e largura exactas: a imagem será apresentada com o mesmo tamanho em todos os dispositivos.
• Para definir um limite para o tamanho da imagem, clique no menu pendente Tamanho máximo e seleccione uma opção : 
  • Tamanho original da imagem: a imagem nunca aparecerá maior do que o seu tamanho original. 
  • Personalizado: a imagem nunca aparecerá maior do que uma largura e altura específicas definidas nos campos width e height. 
• Para definir o comportamento de carregamento de imagens, clique no menu pendente Carregamento de imagens  e seleccione 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. 

• • Ansioso: a imagem é carregada o mais rapidamente 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 ativar as suas alterações, clique em Publicar ou Atualizar no canto superior direito e, em seguida, clique em Publicar ou Atualizar na caixa de diálogo.