Ultima atualização: Janeiro 19, 2023
Você pode adicionar imagens a módulos de rich text ou módulos de imagem no conteúdo do 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.
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 imagem
-
Acesse seu conteúdo:
- Páginas do site: Na sua conta da 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ço > Base de conhecimento.
-
- E-mail: Na sua conta da HubSpot, navegue até Marketing > Email.
- Passe o cursor do mouse sobre o conteúdo e clique em Editar.
Observação: apenas arquivos de imagem .png, .ico, .bmp, .jpg e .gif podem ser adicionados aos 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, no í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 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 da 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ço > Base de conhecimento.
- E-mail: Na sua conta da HubSpot, navegue até Marketing > Email.
- Passe o cursor do mouse sobre o conteúdo e clique em Editar.
- 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 ícones de alinhamento.
-
- Para ajustar o tamanho da imagem, clique nas setas de largura e altura ou insira 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 ícone de lixeira.
- Para substituir uma imagem em um módulo rich text, clique na imagem e, em seguida, no ícone de substituiçãoe 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
- 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. Isso melhora a acessibilidade e o SEO do seu site. Saiba mais sobre a acessibilidade do site na nossa documentação para desenvolvedores.
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 a acessibilidade, enquanto o texto de título é exibido quando um visitante passa o cursor do mouse sobre a 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.
- Rápido: a imagem será carregada assim que a página for carregada.
- Padrão do navegador: o comportamento de carregamento da imagem é determinado pelas configurações do navegador do visitante.
- 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.
- Para definir o comportamento de carregamento de imagem, clique no menu suspensoCarregamento de imagem e selecione uma opção:
- Clique em Aplicar para aplicar suas alterações à imagem.
- No canto superior direito do editor de conteúdo, clique em Atualizar ou Publicar para ativar suas alterações.
Editar uma imagem em um módulo de imagem
-
Acesse seu conteúdo:
- Páginas do site: Na sua conta da 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 > Email.
- Passe o cursor do mouse sobre o conteúdo e clique em Editar.
- No editor de conteúdo, 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 Texto alternativo, insira o texto para descrever o assunto da imagem para os mecanismos de pesquisa e leitores de tela. Isso melhora a acessibilidade e o SEO do seu site. Saiba mais sobre a acessibilidade do site na nossa documentação para desenvolvedores.
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 a acessibilidade, enquanto o texto de título é exibido quando um visitante passa o cursor do mouse sobre a imagem.
- Defina o tamanho da imagem. Você pode definir o tamanho automaticamente ou uma altura e largura personalizadas:
- 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.
- Definir um tamanho máximo:
- 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 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.
- 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 do editor de conteúdo, clique em Atualizar ou Publicar para ativar suas alterações.
