Hinweis: Dieser Artikel wird aus Kulanz zur Verfügung gestellt. Er wurde automatisch mit einer Software übersetzt und unter Umständen nicht korrekturgelesen. Die englischsprachige Fassung gilt als offizielle Version und Sie können dort die aktuellsten Informationen finden. Hier können Sie darauf zugreifen.
Landing Pages

Seiten mit dem Drag-&-Drop-Editor (Beta-Version) erstellen und bearbeiten

Zuletzt aktualisiert am: November 5, 2019

In Beta

Produkte/Lizenzen

Marketing Hub  Starter

Mit dem Drag-&-Drop-Editor können Sie Layout und Aussehen Ihrer HubSpot-Seiten einrichten und anpassen, ohne dass Sie dazu Stylesheets oder Vorlagen benötigen. Um Ihre Seite auf einer bestimmten Domain zu hosten, verknüpfen Sie Ihre Domain in HubSpot.

  • Gehen Sie in Ihrem HubSpot-Account zu „Marketing“ „Landing-Pages“.
  • Klicken Sie oben rechts auf „Erstellen“.
  • Bewegen Sie den Mauszeiger über eine Vorlage und klicken Sie auf „Vorschau“.
  • Um die Vorlage für Ihre Seite auszuwählen, klicken Sie auf „Diese Vorlage verwenden“. Klicken Sie auf „Zurück“, um weitere Optionen anzuzeigen.
  • Geben Sie einen Namen für Ihre Seite ein und klicken Sie anschließend auf „Seite erstellen“.

Content

Drag-&-Drop-Vorlagen bestehen aus Modulen, die in horizontale Zeilen oder vertikale Spalten gruppiert werden können. Diese Module, Zeilen oder Spalten können in Elementbereiche gruppiert werden. Auf der Registerkarte „Content“ können Sie den Inhalt, den Abstand und das Layout für die Elemente auf Ihrer Seite anpassen.

  • Um Ihrer Seite ein Modul hinzuzufügen, klicken Sie darauf und ziehen Sie es von der Registerkarte „Hinzufügen“ in das linke Fenster. Eine blaue Linie weist darauf hin, an welcher Stelle das Modul platziert wird.

add%20module%20to%20dnd%20template

  • Um ein Modul, eine Zeile, eine Spalte oder einen Bereich zu verschieben, ziehen Sie das jeweilige Element an die gewünschte Stelle und legen Sie es dort ab.
  • Um die Breite von Elementen in einer Spalte innerhalb desselben Bereichs anzupassen, klicken Sie auf die vertikale Abgrenzung zwischen diesen Modulen und ziehen Sie sie an die gewünschte Stelle.
  • Sie können eine Aktion rückgängig machen oder erneut ausführen, indem Sie oben links auf die Pfeilsymbole klicken.

edit%20layout%20of%20dnd%20template2

  • Zeigen Sie in der Vorschau auf der rechten Seite mit dem Mauszeiger auf ein Modul, um es anzupassen, zu duplizieren oder zu löschen.
    • Um den Content des Moduls zu bearbeiten, klicken Sie auf das edit Bleistiftsymbol. Nehmen Sie im linken Fenster Änderungen am Content, den Bildern usw. vor. Rich-Text-Module können ebenfalls innerhalb der Seitenvorschau auf der rechten Seite bearbeitet werden.
    • Um das Aussehen und die Position des Moduls zu ändern, klicken Sie auf das styles Pinselsymbol.
    • Passen Sie im linken Fenster die Hintergrundfarbe, die Form und die Rahmenstile des Moduls an. Die verfügbaren Styling-Optionen hängen von der Art des Moduls ab.
    • Um eine Kopie von einem Modul innerhalb derselben Spalte zu erstellen, klicken Sie auf das duplicate Kopiersymbol.
    • Um ein Modul von Ihrer Seite zu löschen, klicken Sie auf das delete Papierkorbsymbol.
  • Um die Stile für eine Gruppe von Elementen zu bearbeiten, bewegen Sie den Mauszeiger über die Zeile, die Spalte oder den Bereich, klicken Sie auf das Dropdown-Menü und wählen Sie „[Element] formatieren“ aus.
    • Wählen Sie auf der Registerkarte „Hintergrund“ einen Hintergrundtyp aus und passen Sie dessen Einstellungen an. Die Vorschau wird entsprechend den vorgenommen Änderungen aktualisiert.
      • Keine: Wählen Sie diese Option aus, um alle Hintergrundfarben oder -bilder zu entfernen.
      • Farbe: Wählen Sie diese Option aus, um eine einzelne Farbe als Hintergrund festzulegen. Geben Sie einen Wert für die Hintergrundfarbe sowie einen Prozentsatz für die Transparenz ein.
      • Bild: Wählen Sie diese Option aus, um ein Bild als Hintergrund festzulegen. Wenn in der Vorlage ein Bild als Standard festgelegt ist, klicken Sie auf „Ersetzen“, um das Bild zu ändern. Klicken Sie auf „Hochladen“, um ein Bild von Ihrem Computer hochzuladen, oder klicken Sie auf „Bilder durchsuchen“, um aus Ihren Dateien ein Bild auszuwählen.
      • Farbverlauf: Wählen Sie diese Option aus, um den Übergang von einer Farbe in eine andere als Hintergrund festzulegen. Legen Sie die Richtung des Verlaufs fest. Geben Sie einen Hexadezimal-Wert ein und legen Sie die Transparenz für die einzelnen Farben fest.
    • Klicken Sie auf die Registerkarte „Abstand“, um die Größe und den Abstand Ihrer Zeile, Ihrer Spalte oder Ihres Bereichs zu ändern.
      • Geben Sie eine maximale Breite für Content in diesem Element auf Ihrer Seite ein.
      • Klicken Sie auf die Registerkarten „Auffüllung“ und „Rand“, um den Abstand um Ihren Content herum zu ändern. Mit „Auffüllung“ legen Sie fest, wie viel Platz um ein Element auf Ihrer Seite frei bleibt. Mit „Rand“ legen Sie den Abstand zwischen Ihrem Content und dem Rahmen des Elements fest.
  • Um eine Kopie von einem vorhandenen Element zu erstellen, bewegen Sie den Mauszeiger über das Element, klicken Sie auf das Dropdown-Menü und wählen Sie dann „[Element] klonen“ aus.
  • Um ein Element von Ihrer Seite zu löschen, bewegen Sie den Mauszeiger über das Element, klicken Sie auf das Dropdown-Menü und wählen Sie dann „[Element] löschen“ aus.

Beim Bearbeiten Ihrer Seite werden Ihre Änderungen automatisch gespeichert. Wenn Sie eine vorherige Version wiederherstellen möchten:

  • Bewegen Sie den Mauszeiger oben links über „Automatische Speicherung“.
  • Klicken Sie in der angezeigten Warnung auf „Revisionen“, um zuvor gespeicherte Versionen Ihrer Seite anzuzeigen.
  • Wählen Sie im Fenster links die wiederherzustellende Version anhand von Datum und Zeitstempel aus. Auf der rechten Seite wird eine Vorschau der Version angezeigt.
  • Um die ausgewählte Version wiederherzustellen, klicken Sie auf „Diese Version wiederherstellen“. Um stattdessen zur aktuellen Version zurückzukehren, klicken Sie auf „Zurück“.

Design

Sie können die standardmäßige Textformatierung und das Aussehen von Formularen und Schaltflächen auf Ihrer Seite insgesamt ändern:

  • Klicken Sie auf die Registerkarte „Design“, um das linke Fenster zu öffnen.
    • Bearbeiten Sie im Bereich „Typografie“ die Schriftarten und Schriftstile für den Text und die Überschriften auf Ihrer Seite. Es werden nur Google-Schriftarten unterstützt.
      • Haupttext: Passen Sie die Schriftart, die Schriftgröße und die Schriftfarben für den Hauptteil Ihrer Seite an:
        • Klicken Sie auf das Dropdown-Menü „Haupttext“, um eine Schriftart auszuwählen.
        • Klicken Sie auf die Pfeiltasten, um die Schriftgröße auszuwählen.
        • Klicken Sie auf das Farbfeld, um eine Farbe für Ihre Schriftart auszuwählen. Um eine benutzerdefinierte Farbe festzulegen, klicken Sie auf die Registerkarte „Erweitert“ und geben Sie einen Hexadezimal-Wert ein.
      • Überschriften: Passen Sie die Schriftart und Schriftfarbe für jeden Text in Ihren Modulen mit einem Heading-Tag an.
        • Klicken Sie auf das Dropdown-Menü „Überschriften“, um eine Schriftart auszuwählen.
        • Klicken Sie auf das Farbfeld, um eine Schriftfarbe auszuwählen.
      • Link-Text: Passen Sie die Schriftarten und Farben für Links auf Ihrer Seite an.
        • Klicken Sie auf das Dropdown-Menü „Link-Text“, um eine Schriftart auszuwählen.
        • Klicken Sie auf das Farbfeld, um Ihre Schriftfarbe zu ändern.
        • Klicken Sie auf die Styling-Schaltflächen oder das Dropdown-Menü, um die Stile für Ihren Link-Text auszuwählen. Dies umfasst auch die Option, ob Ihre Links auf der Seite unterstrichen angezeigt werden sollen.
        • Um anzupassen, wie Links dargestellt werden, wenn Besucher mit Ihrer Seite interagieren, können Sie die Link-Farbe und -Transparenz ändern.
          • Farbe des Links beim Daraufzeigen: Passen Sie die Farbe und Transparenz von Link-Text an, wenn ein Besucher den Mauszeiger auf Links auf Ihrer Seite bewegt.
          • Farbe des aktiven Links: Passen Sie die Farbe und Transparenz von Link-Text an, bevor der Link angeklickt wird.
          • Farbe des besuchten Links: Passen Sie die Farbe und Transparenz von Link-Text an, nachdem ein Besucher den Link angeklickt hat.
    • Passen Sie im Bereich „Schaltflächen“ die Art und Weise an, wie Schaltflächen-Module und Formular-Schaltflächen auf der Seite mit Stilen formatiert sind.
      • Button-Hintergrundfarbe: Passen Sie die Farbe für den Hintergrund Ihrer Schaltflächen an.
        • Geben Sie einen Hexadezimal-Wert ein oder klicken Sie auf das Farbfeld, um eine Farbe auszuwählen.
        • Geben Sie einen Prozentwert ein oder klicken Sie auf die Pfeiltasten, um die Transparenz der Hintergrundfarbe Ihrer Schaltflächen festzulegen.
      • Button-Textfarbe: Die Farbe für den Text von Schaltflächen auf Ihrer Seite.
        • Geben Sie einen Hexadezimal-Wert ein oder klicken Sie auf das Farbfeld, um eine Farbe für den Text auszuwählen.
        • Geben Sie einen Prozentwert ein oder klicken Sie auf die Pfeiltasten, um die Transparenz der Textfarbe Ihrer Schaltflächen festzulegen.
      • Button-Eckenradius: Passen Sie die Form Ihrer Formular-Schaltflächen an, indem Sie einen Wert eingeben oder den Schieberegler ziehen. Ein höherer Wert bedeutet, dass die Schaltflächen auf Ihrer Seite abgerundete Ecken aufweisen. Ein Wert von Null bedeutet, dass Ihre Schaltflächen rechteckig sind.

Einstellungen

Passen Sie Ihre Seiteneinstellungen an, um die Seitendetails zu bearbeiten, die intern und im Webbrowser Ihres Besuchers angezeigt werden.

  • Klicken Sie auf die Registerkarte „Einstellungen“, um Ihre Seitendetails anzupassen:
    • Interner Seitenname: Der Name Ihrer Seite für die interne Verwendung. Dieser Name wird in Ihrem Seiten-Dashboard angezeigt.
    • Seitentitel: Ihr Seitentitel wird in der Titelleiste des Browsers und in den Suchergebnissen angezeigt.
    • Seiten-URL: Passen Sie die URL für Ihre Seite an. Erfahren Sie, wie Sie Ihre Website-Domain mit HubSpot verknüpfen.
    • Meta-Beschreibung: Fügen Sie eine Meta-Beschreibung hinzu, damit Benutzer auf der Suchergebnisseite sehen können, worum es auf Ihrer Seite geht.
    • Feature-Bild: Fügen Sie ein Feature-Bild hinzu, das in einer Vorschau angezeigt wird, wenn Ihre Seite über Social Media geteilt wird.

Optimierung

Klicken Sie auf die Registerkarte „Optimierungen“, um Empfehlungen anzuzeigen, mit denen Sie Ihren Seiten-Content für die Suchmaschinenoptimierung (SEO) verbessern können. Erfahren Sie mehr über Best Practices für die Suchmaschinenoptimierung (SEO) und wie sich diese Tipps auf organischen Traffic Ihrer Seite auswirken.

Vorschau

So zeigen Sie eine Vorschau an, wie Ihre Seite für Besucher aussieht:

  • Klicken Sie oben rechts auf „Vorschau“, um den Vorschaumodus zu öffnen. Auf der rechten Seite wird eine aktualisierte Vorschau Ihres Contents angezeigt.
    • Gerätetyp: Wählen Sie einen Gerätetyp aus, um zu sehen, wie Ihre Seite auf Desktopgeräten oder bei verschiedenen Ausrichtungen auf einem Mobilgerät oder Tablet angezeigt wird.
    • Vorschau der Seite für einen bestimmten Kontakt anzeigen: Um eine Personalisierung zu testen, klicken Sie auf das Dropdown-Menü „Vorschau der Seite für einen bestimmten Kontakt anzeigen“ und wählen Sie in Ihrem CRM einen Kontakt aus.
    • Teilbare Vorschau: Klicken Sie auf „In neuem Fenster öffnen“, um eine teilbare Version Ihrer E-Mail in einem Browserfenster anzuzeigen, oder klicken Sie auf „Kopieren“, um den Vorschaulink zur Freigabe in Ihre Zwischenablage zu kopieren.
  • Um zum Content-Editor zurückzukehren, klicken Sie oben rechts auf „Vorschaumodus verlassen“.

Veröffentlichen

Um Ihre Seite zu veröffentlichen, klicken Sie oben rechts auf „Veröffentlichen“.

/de/cms-general/create-and-edit-pages-with-the-drag-and-drop-editor