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: August 19, 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 hinzufügen

Entwickler können wiederverwendbare Seitenabschnitte erstellen, die im Drag-&-Drop-Editor verfügbar sind. Erfahren Sie in unserer Entwicklerdokumentation mehr über das Erstellen wiederverwendbarer Abschnitte. Im Drag-&-Drop-Editor sind außerdem auch leere Layouts für Abschnitte verfügbar. 

  • 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

  • Um einen benutzerdefinierten Abschnitt hinzuzufügen, wählen Sie im rechten Bereich den Abschnitt aus. 

add-custom-section

add-blank-layout-to-page

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