Bilder in HubSpot-Content verwenden

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

Bitte beachten: Textmodule und benutzerdefinierte Rich-Text-Module im Drag-&-Drop-Editor für E-Mails dürfen keine Bilder enthalten. 

Bilder hinzufügen

• Gehen Sie zu Ihrem Content:

  • Website-Seiten:Gehen Sie in Ihrem HubSpot-Account zu Marketing > Website > Website-Seiten.
  • Landing-Pages: Navigieren Sie in Ihrem HubSpot-Account zu Marketing > Landing-Pages.
  • Blog: Gehen Sie in Ihrem HubSpot-Account zu Marketing > Website > Blog.
  • Wissensdatenbank: Gehen Sie in Ihrem HubSpot-Account zu Service > Wissensdatenbank.

• • E-Mail: Gehen Sie in Ihrem HubSpot-Account zu Marketing > E-Mail.
• Bewegen Sie den Mauszeiger über Ihren Content und klicken Sie auf „Bearbeiten“. 

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

• Ein Bild einfügen: 
  • Um ein Bild zu einem Rich-Text-Modul hinzuzufügen, klicken Sie auf das Rich-Text-Modul und klicken Sie dann in der Rich-Text-Symbolleiste auf das insertImage iciBild-Symbol.
  • Um ein Bild zu einem Bildmodul hinzuzufügen, klicken Sie auf das Bildmodul und 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 entwerfen“. Klicken Sie dann auf das Bild, um es einzufügen.

Bevor Sie ein Bild einfügen, können Sie das Bild hinsichtlich der Ladezeit oder Auflösung optimieren, indem Sie im Bild im rechten Bereich auf „Details“ klicken. 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 das Optimieren von Seiten für die 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 Content:

  • Website-Seiten:Gehen Sie in Ihrem HubSpot-Account zu Marketing > Website > Website-Seiten.
  • Landing-Pages: Navigieren Sie in Ihrem HubSpot-Account zu Marketing > Landing-Pages.
  • Blog: Gehen Sie in Ihrem HubSpot-Account zu Marketing > Website > Blog.
  • Wissensdatenbank: Gehen Sie in Ihrem HubSpot-Account zu Service > Wissensdatenbank.
  • E-Mail: Gehen Sie in Ihrem HubSpot-Account zu Marketing > E-Mail.
• Bewegen Sie den Mauszeiger über Ihren Content und klicken Sie auf „Bearbeiten“. 
• Klicken Sie im Content-Editor auf das Bild, um die Symbolleiste für die Bildbearbeitung anzuzeigen.
• Bearbeiten Sie das Bild:  
  • Klicken Sie auf die inline Ausrichtungssymbole, um die Anordnung des Texts um Ihr Bild anzupassen. 

• • Um die Größe Ihres Bildes anzupassen, klicken Sie auf die Pfeile für Breite und Höhe oder geben Sie einen Pixel-Wert ein. 
  • Um den Abstand Ihres Bildes anzupassen, klicken Sie auf das Dropdown-Menü „Abstand“ und geben Sie dann in die Felder um das Bildsymbol herum Pixel-Werte ein.
• Um ein Bild aus einem Rich-Text-Modul zu entfernen, klicken Sie auf das Bild und klicken Sie dann auf das deletePapierkorb-Symbol. 

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

• Um das Bild zu verknüpfen, ALT-Text hinzuzufügen oder das Ladeverhalten festzulegen, klicken Sie auf das Bild und klicken Sie dann auf das Bleistift-Symboledit:
  • 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 im Feld „ALT-Text“ den Text ein, der das Bild für Suchmaschinen und Bildschirmlesegeräte beschreibt. Dadurch werden die Barrierefreiheit und die SEO Ihrer Website verbessert. Erfahren Sie in unserer Entwicklerdokumentation mehr über Website-Barrierefreiheit. 

Bitte beachten: Beim Hinzufügen von ALT-Text zu einem Bild wird kein Titeltext hinzugefügt. 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. 
    • Eager: Das Bild wird geladen, sobald die Seite geladen wird. 
    • Browser-Standard: Das Ladeverhalten des Bildes wird durch die Browsereinstellungen des Besuchers bestimmt. 
  • Um den Typ des Bildlinks anzupassen, wählen Sie im Abschnitt „Linktyp“ ein oder mehrere Attribute aus: 
    
    • Normal: Dieser Link ist nicht gesponsert. 
    • Nicht folgen: Dieser Link ist nicht mit Ihrer Website verknüpft.
    • Gesponsert: Dieser Link ist ein gesponserter Link oder eine Werbeanzeige.
    • Nutzergenerierter Content: Dieser Link führt zu nutzgenerierten Inhalten, z. B. zu einen Blog-Kommentar oder einer Forumsdiskussion. 
• Klicken Sie auf „Übernehmen“, um Ihre Änderungen auf das Bild anzuwenden.

• Klicken Sie oben rechts im Content-Editor auf „Aktualisieren“ oder „Veröffentlichen“, um Ihre Änderungen live zu schalten. 

Ein Bild in einem Bildmodul bearbeiten

• Gehen Sie zu Ihrem Content:

  • Website-Seiten:Gehen Sie in Ihrem HubSpot-Account zu Marketing > Website > Website-Seiten.
  • Landing-Pages: Navigieren Sie in Ihrem HubSpot-Account zu Marketing > Landing-Pages.
  • Blog: Gehen Sie in Ihrem HubSpot-Account zu Marketing > Website > Blog.
  • E-Mail: Gehen Sie in Ihrem HubSpot-Account zu Marketing > E-Mail.
• Bewegen Sie den Mauszeiger über Ihren Content und klicken Sie auf „Bearbeiten“. 
• Klicken Sie im Content-Editor auf das Bildmodul.
• 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 im Feld „ALT-Text“ den Text ein, der das Bild für Suchmaschinen und Bildschirmlesegeräte beschreibt. Dadurch werden die Barrierefreiheit und die SEO Ihrer Website verbessert. Erfahren Sie in unserer Entwicklerdokumentation mehr über Website-Barrierefreiheit. 

Bitte beachten: Beim Hinzufügen von ALT-Text zu einem Bild wird kein Titeltext hinzugefügt. 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.

• Legen Sie die Größe des Bildes fest. Sie können die Größe automatisch festlegen oder indem Sie eine benutzerdefinierte Höhe und Breite angeben: 
  
  • Automatisch anpassen: Das Bild wird in der Größe so skaliert, dass es dem Gerät entspricht, auf dem es angezeigt wird. 
  • Genaue Höhe und Breite: Das Bild wird auf allen Geräten in der gleichen Größe angezeigt.
• Legen Sie eine maximale Größe fest: 
  • Originalgröße des Bildes: Das Bild wird niemals größer als seine ursprüngliche Größe dargestellt. 
  • Benutzerdefiniert: Das Bild wird niemals größer als eine bestimmte in den Feldern „Breite“ und „Höhe“ festgelegte Breite und Höhe angezeigt. 
• 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. 
• 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. 

• Klicken Sie oben rechts im Content-Editor auf „Aktualisieren“ oder „Veröffentlichen“, um Ihre Änderungen live zu schalten.