Landingpages – Teil 2: Definieren der Struktur auf deiner Landingpage

💡 Gut zu wissen
Landingpages stehen für Business- und Enterprise-Angebote zur Verfügung.

In diesem Artikel erfährst du, wie du deine Landingpage aufbauen kannst. Du kannst deine Landingpage strukturieren, indem du Seiten, Bereiche und Elemente hinzufügst, verschiebst, duplizierst und löschst.

Wir haben eine Reihe von Artikeln verfasst, um dir bei der Erstellung deiner Landingpages zu helfen:

Gut zu wissen

Der neue Landingpage-Editor bietet eine andere Struktur als der klassische Landingpage-Editor. Vergewissere dich, dass du dem richtigen Bereich in diesem Artikel folgst, je nachdem, welchen Landingpage-Editor du verwendest:

mceclip6.png

mceclip6.png

Neuer Landingpage-Editor

Klassischer Landingpage-Editor

Neuer Landingpage-Editor

Eine Landingpage setzt sich aus Seiten, Bereichen und Elementen zusammen.

Seiten

Du kannst zusätzliche Seiten zu deiner Landingpage hinzufügen, wie z. B. eine Dankeschön-Seite, die du mit deiner Haupt-Landingpage verlinken kannst. Um eine neue Seite hinzuzufügen, klickst du im Bedienfeld Seiten auf + Create a new page (+ Neue Seite erstellen).

Weitere Informationen zu Unterseiten findest du in unserem Artikel Verwalten von Unterseiten auf deiner Landingpage.

Bereiche

Innerhalb einer Seite kannst du Bereiche hinzufügen, um deinen Inhalt zu organisieren, z. B. einen Bereich im Header, einen Bereich im Textkörper und einen Bereich im Footer. Du kannst deiner Seite einen Bereich über die Menüs Sections (Bereiche) oder Layout hinzufügen.

Du kannst verschiedene Arten von Bereichen zu deinem Entwurf hinzufügen:

  1. Du kannst einen leeren Bereich hinzufügen, um ihn von Grund auf neu zu gestalten.
  2. Wir bieten auch vorkonfigurierte Bereiche an, die du zum Aufbau deiner Landingpage hinzufügen kannst:
    • Header
    • Cover
    • Vorteile
    • Funktionen
    • Video
    • Social-Nachweis
    • Call-to-action
    • Team
    • Footer
    • Referenzen
    • Formulare
    • FAQ
    • So funktioniert es
💡 Gut zu wissen
Alle neuen Bereiche erscheinen am unteren Rand deines Entwurfs.

Umbenennen eines Bereichs

Um einen Bereich deiner Landingpage umzubenennen, klicke auf einen Bereich und gib einen Namen in das Feld Name this section (Benennen dieses Bereichs) ein. Die Umbenennung deiner Bereiche ist nützlich, um einen klaren Überblick über die Struktur deiner Landingpage zu haben.

Verschieben eines Bereichs

Um dein Design zu reorganisieren, kannst du die Bereiche deiner Landingpage verschieben. Ziehe den Bereich aus dem Layout-Menü in die gewünschte Reihenfolge und lege ihn ab.

move_section.gif

💡 Gut zu wissen
Wenn du dir nicht sicher bist, welchen Bereich du verschieben musst, beachte, dass er in deinem Entwurf animiert wird, wenn du mit dem Mauszeiger über einen Bereich in der Liste fährst.

Duplizieren eines Bereichs

So kannst du einen Bereich auf deiner Landingpage duplizieren und wiederverwenden:

  • Bewege den Mauszeiger im Layout-Panel über einen Bereich und klicke auf das Symbol Duplizieren.
  • Klicke in deinem Entwurf auf Bereich und wähle das Symbol Bereich kopieren aus.
💡 Gut zu wissen
Der duplizierte Bereich wird am unteren Rand deines Entwurfs angezeigt.

Tauschen eines Bereichs

Du kannst einen ganzen Bereich deines Designs durch einen leeren oder vorgefertigten Bereich deiner Wahl ersetzen:

  1. Klicke direkt in deinem Entwurf auf Bereich und wähle das Symbol 🔁 Bereich tauschen.
  2. Wähle einen leeren oder vorgefertigten Bereich aus, um ihn zu ersetzen.
💡 Gut zu wissen

Wenn du einen Bereich austauschst, wird sein gesamter Inhalt gelöscht. Diese Änderung kann nur mit der Schaltfläche ⟲ Undo wieder rückgängig gemacht werden.

Löschen eines Bereichs

So löschst du einen Bereich von deiner Landingpage:

  • Wähle direkt in deinem Entwurf ein Element aus und klicke auf das Symbol 🗑️ Löschen.
  • Klicke in deinem Entwurf auf Bereich und wähle das Symbol 🗑️ Bereich löschen aus.

Elemente

Innerhalb eines Bereichs kannst du Elemente wie beispielsweise einen Container, Text, eine Schaltfläche, ein Bild, ein Video, eine Trennlinie, ein Logo, ein Symbol, einen Code und ein Formular hinzufügen. Weitere Informationen über die Arten von Elementen, die auf einer Landingpage verfügbar sind, und wie du ihre Einstellungen bearbeitest findest du in Teil 3: Bearbeiten der Einstellungen aller Elemente deiner Landingpage.

Um ein Element zu einem Bereich hinzuzufügen, klicke auf + Elemente und ziehe das Element deiner Wahl in den Bereich.

add_elements.gif

Verschieben eines Elements

Um den Entwurf zu reorganisieren, kannst du die Elemente auf deiner Landingpage verschieben. Um ein Element zu verschieben, ziehst du es an die gewünschte Stelle auf deiner Landingpage und legst es dort ab.

move_element.gif

Ändern der Größe eines Elements

So änderst du die Größe eines Elements auf deiner Landingpage:

  1. Bewege den Mauszeiger über das Element, dessen Größe du ändern möchtest.
  2. „Greife“ die blaue untere rechte Ecke des Elements und ziehe es auf die gewünschte Größe.

    resize_element.gif

Duplizieren eines Elements

Um ein Element in deiner Landingpage zu duplizieren und wiederzuverwenden, wähle es aus und klicke auf das Symbol Duplizieren.

Löschen eines Elements

Um ein Element von deiner Landingpage zu löschen, wähle es aus und klicke auf das Symbol 🗑️ Löschen.

Klassischer Landingpage-Editor

Layout deiner Landingpage

Lass uns herausfinden, wie du eine mit unserem Editor erstellte Landingpage gestalten kannst. Hier ist der Aufbau der Landingpage:

Bereich > Zeilen > Spalten > Elemente

Bereiche

Jede Seite besteht aus verschiedenen Bereichen, was den Landingpage-Editor einfach und flexibel macht. Beispielsweise hast du einen Bereich im Header, einen Bereich im Textkörper und einen Bereich im Footer.

Du kannst zwei Bereiche auswählen, die du zu deinem Entwurf hinzufügen möchtest:

  1. Du kannst einen leeren Bereich hinzufügen, um ihn von Grund auf neu zu gestalten
  2. Wir bieten auch vorkonfigurierte Bereiche an, die du zur Erstellung deiner Landingpage hinzufügen kannst.

Du kannst die einzelnen Bereiche umbenennen, um sie beim Aufbau deiner Landingpage noch übersichtlicher zu gestalten. Klicke dazu einfach auf den Bereich und fülle das Feld Name this section (Benennen dieses Bereichs) im rechten Feld aus.

Du kannst einen Bereich auch unter Sections > Section X > ⚙️ benennen . Auf der rechten Seite erscheint der Bereich zum Bearbeiten.

Zeilen und Spalten

Innerhalb eines Bereichs gibt es Zeilen, die in mehrere Spalten unterteilt werden können. 

Innerhalb der Spalten kannst du Elemente wie Text, Bilder, CTA-Schaltflächen, Trennlinien, Formulare, Symbole, Videos, Logos und HTML-Code hinzufügen. Weitere Informationen findest du in unserem Artikel Teil 3: Bearbeiten der Einstellungen aller Elemente deiner Landingpage.

Hinzufügen eines Bereichs, einer Spalte oder einer Zeile

Es gibt verschiedene Möglichkeiten, Zeilen oder Bereiche hinzuzufügen. Du kannst dies direkt im Entwurf oder über das linke Bedienfeld (entweder Bereiche oder Layout) tun.

Hinzufügen eines Bereichs oder einer Zeile direkt aus dem Entwurf

  1. Fahre mit der Maus über einen Bereich.
  2. Am unteren Ende des Bereichs findest du die Schaltfläche ADD ROW OR SECTION (ZEILE ODER ABSCHNITT HINZUFÜGEN).
  3. Klicke darauf und dann auf ADD ROW (ZEILE HINZUFÜGEN) oder ADD SECTION (BEREICH HINZUFÜGEN)

  4. Für Zeilen: Wähle aus, welches Template deine neue Zeile haben soll (bis zu 4 Spalten)
  5. Für Bereiche: Das linke Fenster öffnet sich und du kannst auswählen, ob du einen leeren Bereich oder einen vorkonfigurierten Bereich aus der Liste hinzufügen möchtest. Bereiche können auch direkt über das Bedienfeld Bereiche auf der linken Seite hinzugefügt werden. Sie werden direkt über dem Bereich des Footers eingefügt oder am Ende deines Entwurfs, wenn du bei Null angefangen hast.

Du kannst dort keine Spalten hinzufügen. Sieh dir den folgenden Bereich an, um zu erfahren, wie du Spalten hinzufügen kannst.

Hinzufügen eines Bereichs, einer Spalte oder einer Zeile aus dem Layout-Bedienfeld

Du kannst auch direkt aus dem Layout-Bedienfeld Bereiche oder Zeilen hinzufügen, während du durch den Entwurf navigierst. Bei jedem Schritt siehst du entweder die Schaltfläche + Add section (+ Bereich hinzufügen), + Add column (+ Spalte hinzufügen) oder Add row (+ Zeile hinzufügen)

Verschieben von Bereichen, Zeilen, Spalten und Elementen

Da du jetzt weißt, wie du Bereiche, Zeilen und Spalten hinzufügen kannst, möchtest du diese vielleicht beim Erstellen deines Entwurfs neu anordnen. Um etwas verschieben zu können, musst du zum Layout-Bedienfeld gehen.

Von dort aus kannst du die verschiedenen Elemente einfach per Drag & Drop (Ziehen und Ablegen) verschieben. Hier ein Beispiel mit den Elementen einer Spalte:

move_section_classic.gif

💡 Gut zu wissen
Wenn du dir nicht sicher bist, welchen Bereich / welche Zeile / welche Spalte / welches Element du verschiebst, denk dran, dass der betreffende Block jedes Mal, wenn du mit der Maus über das Element in der Liste fährst, in deinem Entwurf animiert wird.

Duplizieren oder löschen von Bereichen, Zeilen, Spalten und Elementen

Jedes Element deiner Landingpage kann dupliziert werden:

  • Du kannst Bereiche, Zeilen, Spalten und Elemente aus dem Layout-Bedienfeld duplizieren, indem du mit der Maus über das Element fährst und auf das Symbol Duplizieren klickst.
  • Du kannst auch einen Bereich oder ein Element über das Menü Edit (Bearbeiten) auf der rechten Seite duplizieren, indem du auf den Bereich oder das Element klickst. Unten rechts findest du die Option Duplizieren.

Hinzufügen einer Seite

Um eine neue Seite hinzuzufügen, klickst du in der linken Seitenleiste auf die Registerkarte Pages (Seiten) und dann auf die Schaltfläche + Create a new page (+ Eine neue Seite erstellen). Weitere Informationen findest du hier auf den Unterseiten.

⏩ Nächste Schritte

🤔 Sie haben eine Frage?

Wenden Sie sich bei Fragen an unser Support-Team: Erstellen Sie einfach ein Ticket über Ihr Konto. Wenn Sie noch kein Konto haben, können Sie uns hier kontaktieren.

Wenn Sie Unterstützung bei einem Projekt mit Brevo suchen, können wir Sie mit der richtigen zertifizierten Brevo-Partneragentur verbinden.

💬 War dieser Beitrag hilfreich?

2 von 9 fanden dies hilfreich