Bilder in HubSpot-Content verwenden

Sie können Bilder zu Rich-Text-Modulen oder Bildmodulen in HubSpot contenthinzufügen. Rich-Text-Module unterstützen mehrere Arten von Inhalten (Bilder, Text, CTAs usw.), während jedes Bildmodul nur ein einziges Bild enthalten kann. 

Bilder hinzufügen

• Gehen Sie zu Ihrem Inhalt:

  • Website-Seiten: Gehen Sie in Ihrem HubSpot-Account zu Content > Website-Seiten.
  • Landingpages: Gehen Sie in Ihrem HubSpot-Account zu Content > Landingpages.
  • Blog: Gehen Sie in Ihrem HubSpot-Account zu Content > Blog..
  • Wissensdatenbank: Klicken Sie in Ihrem HubSpot-Account auf Service und dann auf Wissensdatenbank.
  • E-Mail: Gehen Sie in Ihrem HubSpot-Account zum Menüpunkt Marketing und klicken Sie dann auf E-Mail.
• Klicken Sie auf den Namen Ihres Inhalts. 

• So fügen Sie ein Bild in einer E-Mail hinzu:
  
  • Rich-Text-Modul: Für E-Mails, die den klassischen Editor verwenden, klicken Sie auf das insertImage iciBild-Symbol in der Symbolleiste für Rich-Text. Text-Module und benutzerdefinierte Rich-Text-Module im Drag-&-Drop-E-Mail-Editor dürfen keine Bilder enthalten.
  • Bild-Modul: E-Mails Klicken Sie im Drag-&-Drop-Editor für E-Mails auf das Bild-Modul und dann im Seitenleisten-Editor über dem Platzhalterbild auf "Ersetzen ".

Bitte beachten: Es können nur .png-, .ico-, .bmp-, .jpg- und .gif-Bilddateien zu Marketing E-Mails hinzugefügt werden

• So fügen Sie ein Bild zu einer Seite, einem Post oder einem Artikel hinzu: 
  • Rich-Text-Modul: Klicken Sie auf das Rich-Text Modul und dann auf das insertImage iciBild-Symbol in der Symbolleiste Rich-Text.
  • Bild-Modul: Klicken Sie auf das Bild-Modul und klicken Sie dann im Seitenleisten-Editor über dem Platzhalterbild auf "Ersetzen". 

• Ein Bild auswählen: 
  • Um ein vorhandenes Bild einzufügen, klicken Sie auf das Bild im rechten Bereich.

• • Um ein neues Bild von Ihrem Computer oder über die Datei-URL hochzuladen, klicken Sie im rechten Bereich auf „Bild hinzufügen“. Um ein neues Bild mit den Bearbeitungstools von Canva zu erstellen, klicken Sie auf Mit Canva designen. Klicken Sie dann auf das Bild, um es einzufügen.
• Bevor Sie ein Bild einfügen, können Sie das Bild hinsichtlich Ladezeit oder Auflösung optimieren. Bewegen Sie den Mauszeiger im rechten Bereich über das Bild und klicken Sie auf Details.
• Klicken Sie dann auf das Dropdown-Menü „Bildoptimierung“ und wählen Sie eine Optimierungsoption aus: 
  • Hoch: Das Bild wird mit höherer Auflösung, aber längerer Ladezeit geladen.
  • Standard: Das Bild wird sowohl für die Auflösung als auch für die Ladezeit optimiert.
  • Niedrig: Das Bild wird bei niedrigerer Auflösung, aber kürzerer Ladezeit geladen. Erfahren Sie in unserer Entwicklerdokumentation mehr über die Optimierung von Seiten hinsichtlich der Ladezeit .
     

Bilder bearbeiten

Nachdem Sie ein Bild zu Ihrem Content hinzugefügt haben, können Sie dessen Größe bearbeiten, ALT-Text hinzufügen, einen Link hinzufügen oder das Ladeverhalten festlegen. 

Ein Bild in einem Rich-Text-Modul bearbeiten 

• Gehen Sie zu Ihrem Inhalt:

  • Website-Seiten: Gehen Sie in Ihrem HubSpot-Account zu Content > Website-Seiten.
  • Landingpages: Gehen Sie in Ihrem HubSpot-Account zu Content > Landingpages.
  • Blog: Gehen Sie in Ihrem HubSpot-Account zu Content > Blog..
  • Wissensdatenbank: Klicken Sie in Ihrem HubSpot-Account auf Service und dann auf Wissensdatenbank.
  • E-Mail: Gehen Sie in Ihrem HubSpot-Account zum Menüpunkt Marketing und klicken Sie dann auf E-Mail.
• Klicken Sie auf den Namen Ihres Inhalts. 
• Klicken Sie im Inhaltseditor auf das Bild , um die Symbolleiste für die Bildbearbeitung anzuzeigen.
• Bearbeiten Sie das Bild: 
  • Um einzustellen, wie der Text um das Bild herumgeführt wird, klicken Sie auf die Ausrichtungssymbole inline . 

• • Um die Größe des Bildes anzupassen, klicken Sie auf die Pfeile für Breite und Höhe oder geben Sie einen Pixelwertein. 
  • Um den Abstand um Ihr Bild herum anzupassen, klicken Sie auf das Dropdown-Menü Abstand und geben Sie dann Pixelwerte um die Ränder des Bildsymbols herum ein.
• Um ein Bild aus einem Rich-Text Modul zu entfernen, klicken Sie auf das Bild und dann auf das Papierkorbsymbol delete . 

• Um ein Bild in einem Rich-Text-Modul zu ersetzen, klicken Sie auf das Bild , dann auf das Ersetzungssymbol replace repl und fügen ein neues Bild hinzu.

• Um das Bild zu verlinken, ALT-Text hinzuzufügen oder das Ladeverhalten einzustellen, klicken Sie auf das Bild , und dann auf das Bleistiftsymbol edit:
  • Um einen Link zum Bild hinzuzufügen, klicken Sie im Popup-Feld auf das Dropdown-Menü „Link zu“ und wählen Sie eine Link-Kategorie aus. Geben Sie im Feld darunter das Ziel des Links ein. Erfahren Sie mehr über die verschiedenen Typen von Links.

• • Geben Sie in das Feld ALT-Text text ein, um Suchmaschinen und Bildschirmlesern zu beschreiben, worum es sich bei dem Bild handelt. Sie können ALT-Text zu Bildern auch mit dem Tool Dateienhinzufügen. Das Hinzufügen von ALT-Text verbessert die Zugänglichkeit von und die Suchmaschinenoptimierung Ihrer Website. Erfahren Sie in unserer Entwicklerdokumentation mehr über Barrierefreiheit auf Websites.

Bitte beachten Sie: fügt einem Bild einen ALT-Text hinzu, nicht aber den Titeltext. ALT-Text wirkt sich auf Suchmaschinen-Rankings und die Barrierefreiheit aus, während Titeltext angezeigt wird, wenn ein Besucher den Mauszeiger über das Bild bewegt. 

• Um das Bildladeverhalten festzulegen und den Bildlinktyp für Suchmaschinen anzupassen, klicken Sie auf „Erweitert“. 
  • Um das Bildladeverhalten festzulegen, klicken Sie auf das Dropdown-Menü „Laden von Bildern“ und wählen Sie eine Option aus: 
    • Lazy: Das Bild wird nur geladen, wenn der Besucher diesen Teil der Seite erreicht. Dies verringert die Zeit, die Ihre Seite zum Laden benötigt, und verbessert die SEO. Standardmäßig werden Bilder mit dieser Einstellung geladen. 

• • • Browser-Standard: Das Ladeverhalten des Bildes wird durch die Browsereinstellungen des Besuchers bestimmt. 
    • Eager: Das Bild wird geladen, sobald die Seite geladen wird. 

• • Um den Typ des Bildlinks anzupassen, wählen Sie im Abschnitt „Linktyp“ ein oder mehrere Attribute aus: 
    
    • Regulär: dieser Link ist nicht gesponsert. 
    • No follow: dieser Link ist nicht mit Ihrer Website verknüpft.
    • Gesponsert: dieser Link ist ein gesponserter Link oder eine Anzeige.
    • Benutzergenerierte Inhalte: dieser Link führt zu benutzergenerierten Inhalten, wie z.B. einem Blog-Kommentar oder einer Forumsdiskussion. 
• Klicken Sie auf „Übernehmen“, um Ihre Änderungen auf das Bild anzuwenden.

• Um Ihre Änderungen live zu schalten, klicken Sie oben rechts auf Veröffentlichen oder Aktualisieren und dann im Dialogfeld auf Veröffentlichen oder Aktualisieren . 

Ein Bild in einem Bildmodul bearbeiten

• Gehen Sie zu Ihrem Inhalt:

  • Website-Seiten: Gehen Sie in Ihrem HubSpot-Account zu Content > Website-Seiten.
  • Landingpages: Gehen Sie in Ihrem HubSpot-Account zu Content > Landingpages.
  • Blog: Gehen Sie in Ihrem HubSpot-Account zu Content > Blog..
  • E-Mail: Gehen Sie in Ihrem HubSpot-Account zum Menüpunkt Marketing und klicken Sie dann auf E-Mail.
• Klicken Sie auf den Namen Ihres Inhalts. 
• Klicken Sie im Content Editor auf das Modul image. 
• Um das aktuelle Bild zu entfernen, klicken Sie im Abschnitt „Bild“ des Seitenleisten-Editors auf „Entfernen“. Dadurch wird das aktuelle Bild vom Bildmodul entfernt, das Modul wird jedoch nicht von der Seite entfernt. 

• Um das aktuelle Bild zu ersetzen, klicken Sie im Abschnitt „Bild“ des Seitenleisten-Editors auf „Ersetzen“ und fügen Sie dann ein neues Bild hinzu. 
• Geben Sie in das Feld ALT-Text text ein, um Suchmaschinen und Bildschirmlesern zu beschreiben, worum es sich bei dem Bild handelt. Sie können ALT-Text zu Bildern auch mit dem Tool Dateienhinzufügen. Das Hinzufügen von ALT-Text verbessert die Zugänglichkeit von und die Suchmaschinenoptimierung Ihrer Website. Erfahren Sie in unserer Entwicklerdokumentation mehr über Barrierefreiheit auf Websites.

Bitte beachten Sie: fügt einem Bild einen ALT-Text hinzu, nicht aber den Titeltext. ALT-Text wirkt sich auf Suchmaschinen-Rankings und die Barrierefreiheit aus, während Titeltext angezeigt wird, wenn ein Besucher den Mauszeiger über das Bild bewegt. 

 

• Um die Größe des Bildes auf verschiedenen Geräten einzustellen, klicken Sie auf das Dropdown-Menü Größe und wählen Sie eine Option:
  
  • Automatisch anpassen: das Bild wird in der Größe an das Gerät angepasst, auf dem es angezeigt wird. 
  • Exakte Höhe und Breite: Das Bild wird auf allen Geräten in der gleichen Größe angezeigt.
• Um eine Beschränkung für die Bildgröße festzulegen, klicken Sie auf das Dropdown-Menü Maximale Größe und wählen Sie eine Option : 
  • Originalgröße des Bildes: Das Bild wird nie größer als in seiner Originalgröße angezeigt. 
  • Benutzerdefiniert: Das Bild wird nie größer als eine bestimmte Breite und Höhe erscheinen, die in den Feldern width und height festgelegt wurden. 
• Um das Verhalten beim Laden von Bildern festzulegen, klicken Sie auf das Dropdown-Menü Bildladen  und wählen eine Optionaus: 
  • Browser-Standard: Das Ladeverhalten des Bildes wird durch die Browsereinstellungen des Besuchers bestimmt. 

• • Lazy: Das Bild wird nur geladen, wenn der Besucher diesen Teil der Seite erreicht. Dies verringert die Zeit, die Ihre Seite zum Laden benötigt, und verbessert die SEO. Standardmäßig werden Bilder mit dieser Einstellung geladen. 

• • Eifrig: das Bild wird so schnell wie möglich geladen. 
• Um einen Link zum Bild hinzuzufügen, geben Sie im Feld „Link (optional)“ eine Ziel-URL ein. Aktivieren Sie das Kontrollkästchen „Link in neuer Registerkarte öffnen“, um den Besucher in einer neuen Browser-Registerkarte zur Ziel-URL weiterzuleiten.
• Um Ihre Änderungen zu veröffentlichen, klicken Sie oben rechts auf Veröffentlichen oder Aktualisieren.