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. 

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 zum Bereich Marketing, klicken Sie dann auf den Punkt Website und abschließend auf Website-Seiten.
  • Landingpages: Klicken Sie in Ihrem HubSpot-Account auf Marketing und dann auf Landingpages.
  • Blog: Gehen Sie in Ihrem HubSpot-Account zum Bereich Marketing, klicken Sie dann auf den Punkt Website und abschließend auf 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.
• Bewegen Sie den Mauszeiger über Ihren Inhalt und klicken Sie auf „Bearbeiten“. 

Bitte beachten Sie: nur .png,.ico,.bmp,.jpg, und.gif Bilddateien 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 dann auf das insertImage iciBildsymbol in der Rich-Text Symbolleiste.
  • 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 Canva-Bearbeitungswerkzeugen zu erstellen, klicken Sie auf Design mit Canva. 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 zum Bereich Marketing, klicken Sie dann auf den Punkt Website und abschließend auf Website-Seiten.
  • Landingpages: Klicken Sie in Ihrem HubSpot-Account auf Marketing und dann auf Landingpages.
  • Blog: Gehen Sie in Ihrem HubSpot-Account zum Bereich Marketing, klicken Sie dann auf den Punkt Website und abschließend auf 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.
• Bewegen Sie den Mauszeiger über Ihren Inhalt und klicken Sie auf „Bearbeiten“. 
• 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 mehr über die Zugänglichkeit von Websites in unserer Entwicklerdokumentation. 

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 Content:

  • Website-Seiten: Gehen Sie in Ihrem HubSpot-Account zum Bereich Marketing, klicken Sie dann auf den Punkt Website und abschließend auf Website-Seiten.
  • Landingpages: Klicken Sie in Ihrem HubSpot-Account auf Marketing und dann auf Landingpages.
  • Blog: Gehen Sie in Ihrem HubSpot-Account zum Bereich Marketing, klicken Sie dann auf den Punkt Website und abschließend auf Blog.
  • E-Mail: Gehen Sie in Ihrem HubSpot-Account zum Menüpunkt Marketing und klicken Sie dann auf E-Mail.
• Bewegen Sie den Mauszeiger über Ihren Inhalt und klicken Sie auf „Bearbeiten“. 
• 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 mehr über die Zugänglichkeit von Websites in unserer Entwicklerdokumentation. 

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 live zu schalten, klicken Sie oben rechts auf Veröffentlichen oder Aktualisieren .