Doorgaan naar artikel
Let op: De Nederlandse vertaling van dit artikel is alleen bedoeld voor het gemak. De vertaling wordt automatisch gemaakt via een vertaalsoftware en is mogelijk niet proefgelezen. Daarom moet de Engelse versie van dit artikel worden beschouwd als de meest recente versie met de meest recente informatie. U kunt het hier raadplegen.
Landing Pages

Gebruik afbeeldingen in HubSpot inhoud

Laatst bijgewerkt: augustus 30, 2021

Geldt voor:

Marketing Hub Professional, Enterprise
CMS Hub Professional, Enterprise
Legacy Marketing Hub Basic

U kunt afbeeldingen toevoegen aan rich text modules of afbeeldingsmodules in HubSpot content. Rich text modules ondersteunen meerdere soorten content (afbeeldingen, tekst, CTA's, etc.), terwijl elke afbeeldingsmodule slechts één afbeelding kan bevatten.

Let op: tekstmodules en aangepaste rich text modules in de drag and drop e-mail editor kunnen geen afbeeldingen bevatten.

Afbeeldingen toevoegen

  • Navigeer naar uw inhoud:

    • Website Pagina's: Navigeer in uw HubSpot-account naar Marketing > Website > Websitepagina's.
    • Landingspagina's: { local.navLandingPages }}
    • Blog: { local.navBlog }}
    • Kennisbank: { local.navKnowledgeBase }}
    • Email: { local.navEmail }}
  • Beweeg de muis over uw inhoud en klik op Bewerken.

Let op: alleen.png,.ico,.bmp,.jpg, en.gif afbeeldingsbestanden kunnen worden toegevoegd aan marketing e-mails


  • Een afbeelding invoegen:
    • Als u een afbeelding wilt toevoegen aan een rijke tekstmodule, klikt u op de rijke tekstmodule en vervolgens op hetpictogram Afbeelding invoegenop de werkbalk voor rijke tekst.
    • Om een afbeelding aan een afbeeldingsmodule toe te voegen, klikt u op deafbeeldingsmodule en vervolgens op Vervangenin de zijbalkeditor boven de plaatshouderafbeelding.
  • Selecteer een afbeelding:
    • Om een bestaande afbeelding in te voegen, klikt u op de afbeelding in het rechterpaneel.
    • Om een nieuwe afbeelding te uploaden vanaf uw computer of via een bestands-URL, klikt u op Afbeelding toevoegen in het rechterpaneel. Om een nieuwe afbeelding te maken met Canva's bewerkingstoolste maken, klikt u op Ontwerpen met Canva. Klik vervolgens op de afbeelding om deze in te voegen.

Voordat u een afbeelding invoegt, kunt u de afbeelding optimaliseren voor laadtijd of resolutie door op Details te klikken op de afbeelding in het rechterpaneel. Klik vervolgens op hetvervolgkeuzemenu Afbeelding optimaliserenen selecteer eenoptimalisatieoptie:

    • Hoog: de afbeelding wordt geladen met een hogere resolutie, maar met een verhoogde laadtijd.
    • Standaard: de afbeelding wordt geoptimaliseerd voor zowel de resolutie als de laadtijd.
    • Laag: de afbeelding wordt met een lagere resolutie geladen, maar met een kortere laadtijd. Meer informatie over het optimaliseren van pagina's voor laad tijd vindt u in onze developer documentatie.
set-image-optimization-for-rich-text-content

Afbeeldingen bewerken

Zodra u een afbeelding aan uw inhoud hebt toegevoegd, kunt u de grootte ervan bewerken, alt-tekst toevoegen, een link toevoegen of het laadgedrag ervan instellen.

Een afbeelding bewerken in een rijke tekstmodule

  • Navigeer naar uw inhoud:

    • Website pagina's: { local.navWebsitePages }}
    • Landingspagina's: { local.navLandingPages }}
    • Blog: { local.navBlog }}
    • Kennisbank: { local.navKnowledgeBase }}
    • Email: { local.navEmail }}
  • Beweeg de muis over uw inhoud en klik op Bewerken.
  • Klik in de inhoudseditor op de afbeelding om de werkbalk voor het bewerken van afbeeldingen weer te geven.
  • Bewerk de afbeelding:
    • Om aan te passen hoe tekst rond de afbeelding loopt, klik je op de inline uitlijningspictogrammen.
    • Om de grootte van de afbeelding aan te passen,klikt u op depijlenbreedte enhoogte of voert u een pixelwaardein.
    • Om de vulling rond uw afbeelding aan te passen, klikt u op het vervolgkeuzemenu Spatie en voert u pixelwaarden in rond de randen van het pictogram van de afbeelding.
  • Als u een afbeelding uit een rijke tekstmodule wilt verwijderen, klikt u op de afbeelding en vervolgens op hetpictogram Prullenbakverwijderen .
  • Als u een afbeelding in een rijke tekstmodule wilt vervangen, klikt u op de afbeelding, klikt u vervolgens op hetpictogramvoor vervangenen voegt u een nieuwe afbeelding toe.
edit-image-in-rich-text-module
  • Om de afbeelding te linken, alt-tekst toe te voegen of het laadgedrag in te stellen, klikt u op de afbeelding en vervolgens op het potloodpictogram bewerken:
    • Om een link naar de afbeelding toe te voegen, klik op het Link naardropdown menu in het pop-up venster en selecteer een link categorie .In het veld eronder voert u debestemming van de link in. Meer informatie over de verschillende soorten koppelingen.
    • Voer in het veld Alt-tekst tekstin om aan zoekmachines en schermlezers te beschrijven wat de afbeelding is. Dit zal de toegankelijkheid en SEO van uw site verbeteren. Meer informatie over toegankelijkheid van websites vindt u in onzedocumentatie voor ontwikkelaars.

Let op: alt-tekst toevoegen aan een afbeelding doetniettiteltekst toe. Alt-tekst beïnvloedt de positie in zoekmachines en de toegankelijkheid, terwijl titeltekst verschijnt wanneer een bezoeker met de muis over de afbeelding beweegt.

  • Om het laadgedrag van de afbeelding in te stellen en het linktype van de afbeelding aan te passen voor zoekmachines, klikt u op Geavanceerd.
    • Om het laadgedrag van afbeeldingen in te stellen, klikt u op het vervolgkeuzemenu Afbeelding ladenen selecteert u een optie:
      • Lazy:de afbeelding wordt pas geladen als de bezoeker dat deel van de pagina bereikt. Dit verkort de laadtijd van je pagina en verbetert de SEO. Standaard worden afbeeldingen met deze instelling geladen.
      • Eager:de afbeelding wordt geladen zodra de pagina wordt geladen.
      • Browser standaard:het laadgedrag van de afbeelding wordt bepaald door de browserinstellingen van de bezoeker.
    • Om het linktype van de afbeelding aan te passen, selecteert u in de sectie Linktypeeen of meerattributen:
      • Regulier:deze link wordt niet gesponsord.
      • Niet volgen: deze link is niet geassocieerd met uw website.
      • Gesponsord:deze link is een gesponsorde link of een advertentie.
      • Door gebruiker gegenereerde inhoud:deze link leidt naar door gebruikers gegenereerde inhoud, zoals een reactie op een blog of een forumdiscussie.
  • Klik opToepassen om uw wijzigingen op de afbeelding toe te passen.

add-link-and-alt-text-to-rich-text-image

  • Klik rechtsboven in de inhoudseditor opBijwerkenofPubliceren om uw wijzigingen live te zetten.

Een afbeelding bewerken in een afbeeldingsmodule

  • Navigeer naar uw inhoud:

    • Website pagina's: { local.navWebsitePages }}
    • Landingspagina's: { local.navLandingPages }}
    • Blog: { local.navBlog }}
    • Email: { local.navEmail }}
  • Ga met de muis over je inhoud en klik op Bewerken.
  • Klik in de inhoudseditor op de afbeeldingsmodule.
  • Om de huidige afbeelding te verwijderen, klik op Verwijderen in de Afbeelding sectie van de zijbalk editor. Hiermee verwijdert u de huidige afbeelding uit de afbeeldingsmodule, maar wordt de module niet van de pagina verwijderd.
  • Als u de huidige afbeelding wilt vervangen, klikt u opVervangen in de sectie Afbeelding van de zijbalkeditor en voegt u een nieuwe afbeelding toe.
  • Voer in het veld Alt-tekst tekstin om aan zoekmachines en schermlezers te beschrijven wat de afbeelding is. Dit zal de toegankelijkheid en SEO van uw site verbeteren. Meer informatie over toegankelijkheid van websites vindt u in onzedocumentatie voor ontwikkelaars.

Let op: alt-tekst toevoegen aan een afbeelding doetniettiteltekst toe. Alt-tekst beïnvloedt de positie in zoekmachines en de toegankelijkheid, terwijl titeltekst verschijnt wanneer een bezoeker met de muis over de afbeelding beweegt.

replace-or-remove-image-in-image-module
  • Stel de grootte van de afbeelding in. U kunt de grootte automatisch instellen of door een aangepaste hoogte en breedte in te stellen:
    • Automatisch aanpassen:de afbeelding wordt aangepast aan de grootte van het apparaat waarop het wordt bekeken.
    • Exacte hoogte en breedte: de afbeelding wordt op alle apparaten op dezelfde grootte weergegeven.
  • Stel een maximale grootte in:
    • Oorspronkelijke grootte van de afbeelding: de afbeelding zal nooit groter worden weergegeven dan de oorspronkelijke grootte.
    • Aangepast: de afbeelding zal nooit groter worden weergegeven dan een specifieke breedte en hoogte ingesteld in debreedteenhoogte velden.
  • Om het laadgedrag van afbeeldingen in te stellen, klikt u op het vervolgkeuzemenu Afbeelding ladenen selecteert u een optie:
    • Lui:de afbeelding wordt pas geladen als de bezoeker dat deel van de pagina bereikt. Dit verkort de laadtijd van uw pagina en verbetert de SEO. Standaard worden afbeeldingen met deze instelling geladen.
    • Browser standaard:het laadgedrag van de afbeelding wordt bepaald door de browserinstellingen van de bezoeker.
  • Om een link naar de afbeelding toe te voegen, voert u eenbestemmings-URLin het veldLink (optioneel) in. Vink het vakje Link openen in nieuw tabbladaan om de bezoeker naar de bestemmings-URL te leiden in een nieuw browsertabblad.
set-size-link-and-loading-in-an-image-module
  • Klik rechtsboven in de inhoudseditor opBijwerkenofPubliceren om uw wijzigingen live te zetten.