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: April 30, 2021

Produkte/Lizenzen

Alle

Im Drag-&-Drop-Seiten-Editor können Benutzer benutzerdefinierte Hintergrundstile neu anordnen und auf verschiedene Abschnitte Ihrer Seite anwenden. Die Bearbeitung per Drag-&-Drop ist auf Seiten verfügbar, die mit Starter-Vorlagen, Standard-Designvorlagen von HubSpot 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. Diese Module können in horizontalen Zeilen oder in vertikalen Spalten angeordnet werden. Zeilen und Spalten können in Elementbereiche gruppiert werden.

Indem Sie diese Elemente zusammen gruppieren, können Sie eine Reihe von Hintergrundstilen auf einen Bereich einer Seite anwenden. Sie können auch ganze Zeilen, Spalten oder Abschnitte per Drag-&-Drop verschieben, um das Layout Ihrer Seite neu zu gestalten.

  1. Modul: Ein einzelner Block an Website-Inhalt. Einige Module wie das Rich-Text-Modul können mehrere Typen von Inhalt enthalten. 
  2. Spalte: ein vertikaler Stapel aus mehreren Modulen oder Zeilen. Sie können Spalten auf Ihrer Seite verschieben oder neu anordnen oder eine Hintergrundfarbe bzw. einen Hintergrundstil auf eine gesamte Spalte anwenden.
  3. Zeile: eine horizontale Zeile von Modulen oder Spalten. Sie können Zeilen auf Ihrer Seite verschieben oder neu anordnen oder eine Hintergrundfarbe bzw. einen Hintergrundstil auf eine gesamte Zeile anwenden.
  4. Abschnitt: eine Gruppe mehrerer Zeilen oder Spalten. Sie können einen gesamten Abschnitt verschieben oder eine Hintergrundfarbe oder einen Hintergrundstil auf einen gesamten Abschnitt anwenden.

overview-of-drag-and-drop

Modulinhalte bearbeiten

Um Inhalte in einem Modul anzupassen, bewegen Sie den Mauszeiger über das Modul und klicken Sie auf ein Symbol:

  • edit Modul bearbeiten: Bearbeiten Sie die Inhalte Ihres Moduls im Content-Editor oder im linken Bereich. 
  • styles Modul formatieren: Verwalten Sie die Stile dieses Moduls im Seitenleisten-Editor. Die meisten Modulstile können auf der Registerkarte „Stil“ verwaltet werden, einige für Ihr Design spezifische Stiloptionen sind jedoch auf der Registerkarte „Optionen“ verfügbar.
  • clonduplicate Modul klonen: Erstellen Sie eine Kopie dieses Moduls auf Ihrer Seite.
  • delete Modul löschen: Entfernen Sie dieses Modul von Ihrer Seite.

edit-module

Zeilen, Spalten oder Abschnitte bearbeiten

Sie können die Stile einer gesamten Zeile, einer gesamten Spalte oder eines gesamten Abschnitts an Elementen bearbeiten. Sie können beispielsweise Ihre Inhalte zentrieren, ein paar Hintergrundbild anwenden oder den Abstand um die Elemente auf Ihrer Seite bearbeiten.

So bearbeiten Sie Stile für eine Zeile, eine Spalte oder einen Abschnitt:

  • Bewegen Sie den Mauszeiger im Seiten-Editor über die Zeile, die Spalte oder den Abschnitt und klicken Sie dann auf das Pfeil-Symbol. Wählen Sie dann styles „[Zeile/Spalte/Abschnitt] formatieren“ aus.
  • Um die Auffüllung und den Rand um die Zeile, die Spalte oder den Abschnitt anzupassen, klicken Sie im Seitenleisten-Editor auf „Ausrichtung und Abstand“.
  • Um den Hintergrund eines Abschnitts 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. 
  • Um eine Kopie eines vorhandenen Elements zu erstellen, bewegen Sie den Mauszeiger über das Element und klicken Sie auf das Pfeil-Symbol. Wählen Sie dann duplicate „[Zeile/Spalte/Abschnitt] kopieren“ aus.
  • Um ein Element von Ihrer Seite zu löschen, bewegen Sie den Mauszeiger über das Element und klicken Sie auf das Pfeil-Symbol. Wählen Sie dann delete „[Zeile/Spalte/Abschnitt] löschen“ aus.

remove-a-column

Module zu Ihrer Seite hinzufügen

Um Ihrer Seite ein Modul hinzuzufügen, klicken Sie im Seitenleisten-Editor auf das Modul und ziehen Sie dann das Modul über die Seite an die gewünschte Stelle. 

add%20a%20common%20module%20to%20a%20page

Layout Ihrer Seite anpassen

Sie können die Breite der Elemente auf Ihrer Seite anpassen, indem Sie auf den vertikalen Trenner zwischen Spalten klicken und ihn die gewünschte Stelle ziehen.

edit%20column%20width%20in%20page

Seitenstile bearbeiten

Um die Farben, Schriftarten oder Abstände auf Ihrer Seite zu bearbeiten, klicken Sie in der Seitenleiste des Editors auf die Registerkarte „Design“.
  • Wenn Sie eine Starter-Vorlage verwenden, können Sie die Schriftarten, Stile und Farben ändern, die auf Ihren Text, Ihre Formulare und Ihre Schaltflächen angewendet werden.
  • Wenn Sie eine von einem Entwickler erstellte Code-Vorlage mit einem Drag-&-Drop-Bereich verwenden, können Sie die Stiloptionen verwenden, die von Ihrem Entwickler in Ihrer Vorlage berücksichtigt wurden.
  • Wenn Sie eine Designvorlage verwenden, können Sie Ihre Designeinstellungen aufrufen und bearbeiten.

design-tab-options