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 21, 2022

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

Organisieren Sie Ihren Content

Im Seitenleisten-Editor sehen Sie eine Übersicht über die Abschnitte, Zeilen, Spalten und Module in Ihrem Inhalt. Dort können Sie sie dann umbenennen, bearbeiten, klonen, löschen oder ausblenden: 

  • 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 Seitenleisten-Editor auf die Registerkarte „Inhalt“. 
  • Sie können steuern, welche Seitenelemente im Seitenleisten-Editor angezeigt werden: 
    • Um nur die Abschnitte Ihrer Seite anzuzeigen, klicken Sie auf „Alle einklappen“. Dadurch werden alle Zeilen, Spalten und Module eingeklappt, sodass nur Abschnitte im Seitenleisten-Editor sichtbar sind. 
    • Um alle Inhalte auf Ihrer Seite anzuzeigen, klicken Sie auf Alle aufklappen. Dadurch werden alle Abschnitte, Zeilen, Spalten und Module im Seitenleisten-Editor angezeigt. 
    • Um ein einzelnes Seitenelement oder einen einzelnen Container anzuzeigen, klicken Sie auf das + Plus-Zeichen neben seinem Namen.
    • Um ein Element oder einen Container auszublenden, klicken Sie auf das - Minuszeichen neben dessen Namen. 
  • Sie können auch Seitenelemente bearbeiten, umbenennen, klonen, löschen und ausblenden: 
    • Um ein Element zu bearbeiten, klicken Sie auf seinen Namen
    • Um ein Element umzubenennen, klicken Sie auf die drei Ellipsenpunkte neben seinem Namen und wählen Sie dann [Element] umbenennen aus. Geben Sie im Dialogfeld einen Namen für das Element ein und klicken Sie auf „Speichern“
    • Um ein Element zu klonen, klicken Sie auf die drei Ellipsenpunkte neben seinem Namen und wählen Sie dann Klonen aus. Auf diese Weise wird eine exakte Kopie des angrenzenden Originalelements erstellt. 
    • Um ein Element zu löschen, klicken Sie auf die drei Ellipsenpunkte neben seinem Namen und wählen Sie Löschen aus
    • Um ein Modul auszublenden, klicken Sie auf die Ellipsen drei Punkte neben seinem Namen, und wählen Sie dann Dieses Modul ausblenden aus. Dadurch wird das Modul in der Seitenvorschau ausgeblendet, aber nicht im Seitenleisten-Editor. Um ein ausgeblendetes Modul auf der Seite anzuzeigen, klicken Sie auf die drei Ellipsenpunkte neben seinem Namen und wählen Sie dann Dieses Modul anzeigen aus

Abschnitte verwenden

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

Bitte beachten Sie: Es können nicht mehr als 50 wiederverwendbare Abschnitte gleichzeitig im Drag- & -Drop-Editor gespeichert werden. Um einen neuen wiederverwendbaren Abschnitt zu speichern, löschen Sie einen vorhandenen wiederverwendbaren Abschnitt. 

Einen Bereich erstellen

Sie können einen Abschnitt speichern, um ihn auf anderen Seiten mit demselben Design wiederverwendbar zu machen.

  • 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 Abschnitt aus

add-blank-layout-to-page

  • Ziehen Sie im Content-Editor ein Modul über das Layout und legen Sie es dort ab. Wiederholen Sie dies für jedes Modul Ihres Abschnitts. 

drag-and-Drop-onto-layout

  • Bewegen Sie den Mauszeiger über den Abschnitt, klicken Sie  auf das DownCarat Down-Symbol und wählen Sie dann Abschnitt speichern aus

abschnitt speichern

Bitte beachten: Vorhandene Seitenabschnitte und solche, die ohne Layout erstellt wurden, können auch 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

Abschnitt hinzufügen oder löschen

  • 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 Bereich über einen Abschnitt und klicken Sie auf „Auswählen“. Aus dem Drag- & -Drop-Editor gespeicherte Abschnitte werden unter Gespeicherte Abschnitte angezeigt, während die von Entwicklern erstellten Abschnitte unter Theme-Abschnitte angezeigt werden.  
  • Wenn Sie einen gespeicherten Abschnitt hinzufügen, der Smart Rules 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 das Plus-Symbol, um einen Abschnitt hinzuzufügen, bewegen Sie den Mauszeiger über den Abschnitt und klicken Sie auf das  Löschen-Symbol. 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

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.