Zum Hauptinhalt
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

Seiteninhalte in einem Drag-&-Drop-Bereich bearbeiten

Zuletzt aktualisiert am: September 28, 2021

Produkte/Lizenzen

Alle

Im Drag-&-Drop-Seiten-Editor können Benutzer benutzerdefinierte Stile neu anordnen und auf verschiedene Abschnitte einer Seite anwenden. Die Bearbeitung per Drag-&-Drop ist für Seiten verfügbar, die mit Starter-Vorlagen, einigen Designvorlagen oder Code-Vorlagen mit einem Drag-&-Drop-Bereich erstellt wurden. 

Der Drag-&-Drop-Editor

Drag-&-Drop-Bereiche bestehen aus Blöcken an Website-Inhalt, Module genannt. Module können in horizontaler Zeilen oder in vertikalen Spalten angeordnet werden, die dann in Abschnitte gruppiert werden können. 

Durch Erstellen von Zeilen, Spalten und Abschnitten können Sie die Stile neu anordnen oder auf mehrere Module gleichzeitig anwenden. Erfahren Sie mehr über das Anpassen von Stilen für Drag-&-Drop-Content.  

  1. Modul: ein einzelner Block an Website-Content. Einige Module wie Rich-Text-Module können mehrere Typen von Content enthalten. 
  2. Zeile: eine horizontale Zeile von Modulen. Sie können Stile auf eine gesamte Zeile anwenden oder ihre Position auf einer Seite neu anordnen. 
  3. Spalte: ein vertikaler Stapel aus mehreren Modulen. Sie können Stile auf eine gesamte Spalte anwenden oder ihre Position auf einer Seite neu anordnen. 
  4. Abschnitt: eine Gruppe mehrerer Zeilen oder Spalten, die die gesamte Breite der Seite abdecken. Sie können Stile auf einen gesamten Abschnitt anwenden oder ihre Position auf einer Seite neu anordnen. 

edit-drag-and-drop-areas-in-page-editor

Abschnitte verwenden

Im Drag-and-Drop-Editor können Sie wiederverwendbare Seitenabschnitte erstellen, indem Sie Module auf ein leeres Abschnittslayout ziehen. Entwickler können diese Abschnitte auch mithilfe unserer Entwicklerdokumentationerstellen. Einmal erstellte Abschnitte können auf jeder Seite verwendet werden, die Drag & Drop-Bearbeitung unterstützt. Gespeicherte Abschnitte, die intelligente Regeln enthalten, verwenden diese Regeln, wenn sie zu einer Seite hinzugefügt werden. 

Bitte beachten Sie es können nicht mehr als 25 wiederverwendbare Abschnitte aus dem Drag & Drop-Editor auf einmal gespeichert werden. Um einen neuen wiederverwendbaren Abschnitt zu speichern, löschen Sie einen vorhandenen wiederverwendbaren Abschnitt

Einen Bereich erstellen

  • 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.
  • Bewegen Sie den Mauszeiger über eine Seite und klicken Sie auf „Bearbeiten“
  • Bewegen Sie den Mauszeiger im Content-Editor zwischen zwei Abschnitte und klicken Sie auf das das Plus-Symbol

add-a-page-section

  • Klicken Sie im rechten Bereich auf die Registerkarte Layouts und wählen Sie ein Layout für Ihren Abschnittaus. 

add-blank-layout-to-page

  • Ziehen Sie im Inhaltseditor ein Modul über das Layout und legen Sie es an der gewünschten Stelle ab. Wiederholen Sie dies für jedes Modul Ihres Abschnitts. 

ziehen und Ablegen auf das Layout

  • Bewegen Sie den Mauszeiger über den Abschnitt und klicken Sie auf das nach unten gerichtete Symbol und wählen Sie dann Abschnitt speichern

abschnitt speichern

Bitte beachten Sie vorhandene Seitenabschnitte und solche, die ohne Layout erstellt wurden, können ebenfalls als wiederverwendbare Abschnitte gespeichert werden


  • Geben Sie im rechten Bereich einen Namen und eine Beschreibung für Ihren Abschnitt ein und klicken Sie dann auf Speichern

Einen Abschnitt 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.
  • Bewegen Sie den Mauszeiger über eine Seite und klicken Sie auf „Bearbeiten“
  • Bewegen Sie den Mauszeiger im Content-Editor zwischen zwei Abschnitte und klicken Sie auf das das Plus-Symbol

add-a-page-section

  • Bewegen Sie den Mauszeiger im rechten Fenster auf einen Abschnitt und klicken Sie auf Auswählen. Abschnitte, die mit dem Drag & Drop-Editor gespeichert wurden, erscheinen unter Gespeicherte Abschnitte, während die von Entwicklern erstellten Abschnitteunter Themenabschnitte erscheinen.  
  • Wenn Sie einen gespeicherten Abschnitt hinzufügen, der intelligente Regeln enthält, werden diese Regeln auf den neu hinzugefügten Abschnitt angewendet. Diese Abschnitte werden als Smart bezeichnet
  • Um einen Abschnitt zu löschen, klicken Sie auf dasPlus-Symbol zum Hinzufügen eines Abschnitts, bewegen Sie dann den Mauszeiger über den Abschnitt und klicken Sie auf das Symbol  "Löschen".  Klicken Sie im Dialogfeld auf „Löschen“

add-smart-section

Zeilen, Spalten oder Abschnitte bearbeiten

  • Bewegen Sie den Mauszeiger im Seiten-Editor über die Zeile, die Spalte oder den Abschnitt und klicken Sie dann auf das edit Bearbeiten-Symbol
  • Um die Auffüllung und die Ränder um die Zeile, die Spalte oder den Abschnitt anzupassen, klicken Sie im Seitenleisten-Editor auf „Ausrichtung und Abstand“.
  • Um den Hintergrund eines Bereichs zu bearbeiten, klicken Sie im Seitenleisten-Editor auf „Hintergrund“ und wählen Sie eine Stiloption aus: 
    • Keine: Entfernen Sie alle Hintergrundfarben oder -bilder.
    • Farbe: Legen Sie eine einzelne Farbe als Hintergrund fest. Geben Sie einen Hexadezimalwert ein oder klicken Sie auf die Farbauswahl und wählen Sie eine Farbe aus. Geben Sie dann einen Wert für die Transparenz ein. 
    • Bild: Legen Sie ein Bild als Hintergrund fest.  Um eine neues Bild hochzuladen, klicken Sie auf „Hochladen“, um ein Bild von Ihrem Computer hinzuzufügen, oder klicken Sie auf „Bilder durchsuchen“, um aus Ihren Dateien ein Bild auszuwählen. 
    • Farbverlauf: Legen Sie den Übergang von einer Farbe in eine andere als Hintergrund fest. Klicken Sie auf das Dropdown-Menü „Richtung“ und wählen Sie eine Richtung für den Farbverlauf aus. Geben Sie für jede Farbe einen Hexadezimalwert ein oder klicken Sie auf die Farbauswahl und wählen Sie eine Farbe aus. Geben Sie dann einen Wert für die Transparenz ein. 
edit-background-for-a-page-section
  • Um eine Kopie von einem vorhandenen Element zu erstellen, bewegen Sie den Mauszeiger über das Element und klicken Sie auf das duplicate ccKlonen-Symbol.
  • Um ein Element von der Seite zu entfernen, bewegen Sie den Mauszeiger über das Element und klicken Sie auf das delete Löschen-Symbol

edit-column-icons

Module hinzufügen und 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.
  • Bewegen Sie den Mauszeiger über eine Seite und klicken Sie auf „Bearbeiten“
  • Klicken Sie im Content-Editor auf das Modul im Seitenleisten-Editor und ziehen Sie es dann an die gewünschte Stelle auf der Seite. 
  • Um die Breite eines Moduls anzupassen, klicken Sie auf den vertikalen Trenner zwischen Spalten und ziehen Sie ihn an die gewünschte Stelle.

adjust-column-size-in-drag-and-drop-editor

  • Um Inhalte in einem Modul anzupassen, bewegen Sie den Mauszeiger über das Modul und klicken Sie auf ein Symbol:
    • edit Modul bearbeiten: Bearbeiten Sie den Content des Moduls.
    • clonduplicate Modul klonen: Erstellen Sie eine Kopie dieses Moduls auf der Seite.
    • delete Modul löschen: Entfernen Sie dieses Modul von der Seite.

edit-module-icons