Zum Hauptinhalt gehen

Landingpages - Teil 3: Bearbeiten der Einstellungen aller Elemente Ihrer Landingpage

ūüí° Gut zu wissen
Landingpages sind im Rahmen von Business- und Enterprise-Pl√§nen verf√ľgbar (die alten Premium- und Enterprise-Pl√§ne).

In diesem Artikel erkl√§ren wir Ihnen, wie Sie die Abschnitte und Elemente auf Ihrer Landingpage konfigurieren. Nachdem Sie die Abschnitte auf Ihrer Landingpage angeordnet haben, ist es nun Zeit, sie mit Elementen wie Text, Bildern oder Schaltfl√§chen zu f√ľllen.

Wir haben eine Reihe von Artikeln erstellt, die Ihnen beim Aufbau Ihrer Landingpages helfen:

Allgemeine Einstellungen

Einige Einstellungen gelten sowohl f√ľr Abschnitte als auch f√ľr Elemente. Zun√§chst erkl√§ren wir die allgemeinen Einstellungen, dann diejenigen, die f√ľr Abschnitte bzw. Elemente spezifisch sind.

Ausrichtung

mceclip6.png

Mit der Einstellung Ausrichtung können Sie wählen, wie ein Element ausgerichtet sein soll (horizontal oder vertikal):

Abstand

mceclip2.png

Mit der Einstellung Abstand können Sie den vertikalen und horizontalen Abstand um und in Abschnitten und Elementen festlegen:

  • Au√üenabstand erstellt einen Abstand um eine Komponente, au√üerhalb der definierten R√§nder.
  • F√ľllung erstellt einen Abstand in einer Komponente, zwischen dem Abschnitt oder Element und seinen R√§ndern.

Sie können zwischen verschiedenen Abstandgrößen wählen, von XS (klein) bis XL (sehr groß).

Sichtbarkeit

visibility_setting-en_us.png

F√ľr Abschnitte:

  • Mit der Einstellung Sichtbarkeit k√∂nnen Sie die Sichtbarkeit der Abschnitte Ihrer Landingpage basierend auf dem Ger√§t steuern, auf dem sie angezeigt wird. Sie k√∂nnen die Optionen Auf Mobilger√§t verbergen und/oder Auf Desktop verbergen w√§hlen.
  • Wenn Sie einen Abschnitt auf einem bestimmten Ger√§t verbergen, wird er im Editor durchgestrichen angezeigt und diese Nachricht erscheint: "Dieser Abschnitt ist auf einem Mobilger√§t/Desktop nicht sichtbar", je nach gew√§hlter Option.
mceclip0.png

F√ľr Elemente:

  • Mit der Einstellung Sichtbarkeit k√∂nnen Sie die Sichtbarkeit einiger Elemente Ihrer Landingpage basierend auf dem Ger√§t steuern, auf dem sie angezeigt wird. Sie k√∂nnen die Optionen Auf Mobilger√§t verbergen und/oder Auf Desktop verbergen w√§hlen.
  • Diese Einstellung hat keine visuellen Auswirkungen im Editor und beeinflusst nur die ver√∂ffentlichten Landingpages, um zu verhindern, dass Sie den √úberblick √ľber Inhalte im Editor verlieren.

 

Hintergrundfarbe

mceclip1.png Mit der Einstellung Hintergrundfarbe k√∂nnen Sie eine Hintergrundfarbe zu einem Abschnitt oder Element hinzuf√ľgen und seine Transparenz verwalten.
ūüí° Gut zu wissen
Die Textfarbe ändert sich abhängig von der Hintergrundfarbe des Abschnitts automatisch.

Hintergrundbild

mceclip2.png

Mit der Einstellung Hintergrundbild k√∂nnen Sie ein Bild aus Ihrer Bildbibliothek, √ľber eine URL oder von Ihrem Computer als Hintergrundbild eines Abschnitts oder eines Elements hinzuf√ľgen:

  • Entfernen: L√∂schen Sie das aktuelle Hintergrundbild.
  • Ersetzen: W√§hlen Sie ein neues Hintergrundbild, um das aktuelle zu ersetzen.
  • Hintergrundgr√∂√üe: W√§hlen Sie, wie sich das Hintergrundbild in den Abschnitt oder das Element einf√ľgen soll.
  • Hintergrund-Wiederholung: W√§hlen Sie, ob das Hintergrundbild im gesamten Abschnitt oder Element wiederholt werden soll.
  • Farb√ľberlagerung: W√§hlen Sie eine Farbe, die √ľber dem Inhalt des Abschnitts oder Elements hinzugef√ľgt werden soll, und verwalten Sie ihre Transparenz.

Abschnitt

Eigenschaften

name_section2-en_us.png

Mit der Einstellung Eigenschaften k√∂nnen Sie den Abschnitt umbenennen. Der Name Ihrer Abschnitte wird angezeigt, wenn Sie im Men√ľfeld Layout navigieren.
ūüí° Gut zu wissen
Wir empfehlen, Ihre Abschnitte zu benennen, um den √úberblick zu behalten und die Navigation zu erleichtern.

Stil

mceclip1.png

Über die Einstellung Stil können Sie das Erscheinungsbild des Abschnitts festlegen:

  • Kante zu Kante: Dies beeinflusst den horizontalen Abstand an den Seiten des Abschnitts.
  • Volle H√∂he: Zeigt das Bild als Vollbild an.
  • Hintergrund-Parallax: Parallax-Scrolling sorgt daf√ľr, dass das Hintergrundbild langsamer scrollt als der Inhalt im Vordergrund.

Hintergrundfarbe, Hintergrundbild und Abstand

Die Einstellungen Hintergrundfarbe, Hintergrundbild und Abstand werden im Abschnitt Allgemeine Einstellungen dieses Artikels beschrieben.

Zeile

Zeilen sind nur im klassischen Landingpage-Editor verf√ľgbar.

Sie k√∂nnen die Einstellungen einer Zeile bearbeiten, indem Sie √ľber das linke Men√ľfeld zur Registerkarte Layout navigieren. Details dazu finden Sie in Landingpages - Teil 2: Definieren der Struktur auf Ihrer Landingpage. Sie k√∂nnen au√üerdem die Brotkr√ľmelnavigation verwenden, die oben auf Ihrem Bildschirm angezeigt wird, wenn Sie auf ein Element klicken.

mceclip5.png

Hintergrundfarbe, Hintergrundfarbe, Abstand und Sichtbarkeit

Die Einstellungen Hintergrundfarbe, Hintergrundbild, Abstand und Sichtbarkeit werden im Abschnitt Allgemeine Einstellungen dieses Artikels beschrieben.

Erweitert

mceclip3.png
  • Zwischenr√§ume zwischen Spalten verbergen: Legen Sie die Gr√∂√üe der L√ľcke (Zwischenraum) zwischen den Spalten Ihrer Zeile fest.
  • Rundung der Ecken: Erm√∂glicht es Ihnen, die Ecken Ihrer Zeile abzurunden. 

Spalte

Spalten sind nur im klassischen Landingpage-Editor verf√ľgbar.

Sie k√∂nnen die Einstellungen einer Spalte bearbeiten, indem Sie √ľber das linke Men√ľfeld zur Registerkarte Layout navigieren. Details dazu finden Sie in Landingpages - Teil 2: Definieren der Struktur auf Ihrer Landingpage. Sie k√∂nnen au√üerdem die Brotkr√ľmelnavigation verwenden, die oben auf Ihrem Bildschirm angezeigt wird, wenn Sie auf ein Element klicken.

mceclip5.png

Stil

2020-11-12_12-04-05.png
  • Gr√∂√üe √§ndern: Legen Sie die Breite Ihrer Spalte fest.
  • Mobile Gr√∂√üe: Legen Sie fest, wie breit Ihre Spalte auf Mobilger√§ten sein soll.
  • Rundung der Ecken: Erm√∂glicht es Ihnen, die Ecken Ihrer Spalte abzurunden. 

Hintergrundfarbe, Hintergrundfarbe, Abstand und Sichtbarkeit

Die Einstellungen Hintergrundfarbe, Hintergrundbild, Abstand und Sichtbarkeit werden im Abschnitt Allgemeine Einstellungen dieses Artikels beschrieben.

Text

Neuer Landingpage-Editor
text_element-en_us.png
Klassischer Landingpage-Editor
mceclip0.png

Sie k√∂nnen ein Text-Element hinzuf√ľgen und Text auf Ihrer Landingpage formatieren. 

Format-Symbolleiste

Neuer Landingpage-Editor
mceclip4.png
Klassischer Landingpage-Editor
Text_set_up_EN.png

Mit der Format-Symbolleiste können Sie den Stil Ihres Texts ändern. Wählen Sie den Text aus, den Sie bearbeiten möchten, um die Format-Symbolleiste anzurufen, und klicken Sie auf die 3 Punkte rechts, um auf weitere Optionen zuzugreifen.

Ausrichtung und Abstand

Die Einstellungen Ausrichtung und Abstand werden im Abschnitt Allgemeine Einstellungen dieses Artikels beschrieben.

Bild

Neuer Landingpage-Editor
image_element-en_us.png
Klassischer Landingpage-Editor
mceclip1.png

Bilder sind eine gute M√∂glichkeit, um das Design Ihrer Landingpage anzupassen und interaktiver zu gestalten. Sie k√∂nnen ein Bild aus unserer Bildbibliothek oder von Ihrem Computer ausw√§hlen oder √ľber eine URL einf√ľgen.

Ausrichtung und Abstand

Die Einstellungen Ausrichtung und Abstand werden im Abschnitt Allgemeine Einstellungen dieses Artikels beschrieben.

Bild

mceclip0.png

Die Bild-Einstellungen ermöglichen es Ihnen, ein Bild auszuwählen und seine Größe zu verändern:

  • Bild-URL: Geben Sie die URL des Bildes ein, das Sie hinzuf√ľgen m√∂chten.
  • Entfernen: L√∂schen Sie das aktuelle Bild.
  • Ersetzen: W√§hlen Sie ein neues Bild, um das aktuelle zu ersetzen.
  • Gr√∂√üe anpassen: Legen Sie Gr√∂√üe des Bildes fest.

Stil

image_style-en_us.png

Über die Einstellung Stil können Sie das Erscheinungsbild des Bildes festlegen:

  • Schattierung: F√ľgen Sie einen Schatten zu Ihrem Bild hinzu.
  • Rundung der Ecken: Runden Sie die Ecken des Bildes ab.
  • Stil und Farbe der R√§nder und Farbe: F√ľgen Sie einen Rand zu Ihrem Bild hinzu und w√§hlen Sie seine Farbe.
  • Breite des Rands: Legen Sie fest, wie breiter der Rand des Bildes sein soll.
  • Rundung der Ecken: Legen Sie die Rundung der Ecken Ihres Bildes fest.

Logo

Neuer Landingpage-Editor
logo_element-en_us.png
Klassischer Landingpage-Editor
mceclip2.png

Logos sind ideal, um Ihre Marke auf Ihrer Landingpage hervorzuheben.

Ausrichtung und Abstand

Die Einstellungen Ausrichtung und Abstand werden im Abschnitt Allgemeine Einstellungen dieses Artikels beschrieben.

Bild

mceclip1.png

Über die Bild-Einstellung können Sie ein Logo auswählen und seine Größe ändern:

  • Bild-URL: Geben Sie die URL des Logos ein.
  • Entfernen: L√∂schen Sie das aktuelle Logo.
  • Ersetzen: W√§hlen Sie ein neues Logo, um das aktuelle zu ersetzen.
  • Alt: F√ľgen Sie ein Alt-Tag hinzu, um Ihr Logo mit beschreibenden Informationen zu versehen.
  • Link: F√ľgen Sie einen Weiterleitungslink zu Ihrem Logo hinzu.

Stil

Die Einstellung Stil ist nur im neuen Landingpage-Editor verf√ľgbar.

logo_style-en_us.png

Über die Einstellung Stil können Sie das Erscheinungsbild des Logos festlegen:

  • Stil und Farbe der R√§nder: F√ľgen Sie einen Rand zu Ihrem Logo hinzu und w√§hlen Sie seine Farbe.
  • Breite des Rands: Legen Sie fest, wie breit der Rand des Logos sein soll.
  • Rundung der Ecken: Legen Sie die Rundung der Ecken Ihres Logos fest.

Schaltfläche

Neuer Landingpage-Editor

button_element-en_us.png

Klassischer Landingpage-Editor
mceclip3.png

Sie k√∂nnen ein Schaltfl√§che-Element verwenden, um eine Website oder eine andere Unterseite Ihrer Landingpage zu verlinken. Durch das Hinzuf√ľgen von Schaltfl√§chen zu Ihrer Landingpage k√∂nnen Sie bestimmte Links hervorheben, auf die die Besucher klicken sollen. 

Ausrichtung, Abstand und Sichtbarkeit

Die Einstellungen Ausrichtung, Abstand und Sichtbarkeit werden im Abschnitt Allgemeine Einstellungen dieses Artikels beschrieben.

Eigenschaften

button_properties-en_us.png

Mit der Einstellung Eigenschaften können Sie den Link definieren, auf den die Schaltfläche verweisen soll:

  • Call-to-Action: Geben Sie den Text ein, der in Ihrer CTA-Schaltfl√§che angezeigt werden soll.
  • Eine Aktion w√§hlen: Sie k√∂nnen zwischen drei Aktionen w√§hlen: "Mit einer URL verlinken", "In einem Abschnitt verankern" oder "Mit einer Seite in diesem Funnel verlinken".
    Wenn Sie "Mit einem Abschnitt verankern" w√§hlen, w√§hlen Sie im Drop-down-Men√ľ den gew√ľnschten Abschnitt aus.
    Wenn Sie "Mit einer Seite in diesem Funnel verlinken" w√§hlen, w√§hlen Sie im Drop-down-Men√ľ die gew√ľnschte Seite aus.
  • Ein Ziel w√§hlen: Legen Sie fest, ob der Link in einem neuen Tab ge√∂ffnet werden soll.
  • URL (Link): F√ľgen Sie den Link hinzu, auf den die Schaltfl√§che verweisen soll.

Stil

mceclip4.png

Über die Einstellung Stil können Sie das Erscheinungsbild der Schaltfläche festlegen:

  • Farbe: W√§hlen Sie die Farbe der Schaltfl√§che aus.
  • Stil und Farbe der Au√üenlinien: W√§hlen Sie einen Typ f√ľr die Au√üenlinien der Schaltfl√§che und ihre Farbe.
  • Breite der Au√üenlinien: Legen Sie fest, wie breit die Au√üenlinien der Schaltfl√§che sein sollen.
  • Volle Breite: W√§hlen Sie, ob die Schaltfl√§che so breit sein soll wie Ihre Seite.
  • F√ľllung: W√§hlen Sie, ob die Schaltfl√§che ausgef√ľllt oder leer sein soll:
    mceclip0.png
  • Form: W√§hlen Sie, ob die Schaltfl√§che viereckig, rund oder oval sein soll.
  • Schattierung: F√ľgen Sie eine helle oder dunkle Schattierung zu der Schaltfl√§che hinzu.

Trenner

ūüí° Gut zu wissen
Es k√∂nnen nur horizontale Teiler hinzugef√ľgt werden.
Neuer Landingpage-Editor

divider_element-en_us.png

Klassischer Landingpage-Editor
mceclip4.png

Sie k√∂nnen au√üerdem ein Trenner-Element verwenden, um die verschiedenen Elemente und Abschnitte auf Ihrer Landingpage visuell zu trennen. 

Abstand

Die Einstellung Abstand wird im Abschnitt Allgemeine Einstellungen in diesem Artikel beschrieben.

Stil

mceclip5.png

W√§hlen Sie die Dicke des Trenners: D√ľnn, dick oder sehr dick.

Farbe

mceclip6.png

Wählen Sie die Farbe des Trenners.

Formular

Neuer Landingpage-Editor

form_element-en_us.png

Klassischer Landingpage-Editor
mceclip5.png

Sie k√∂nnen ein Formular-Element verwenden, um eine Landingpage zur Leadgenerierung zu erstellen. Weitere Informationen zu Formularen auf einer Landingpage finden Sie in dem Artikel Teil 4: Hinzuf√ľgen eines Formulars und Nutzung von erweiterten Optionen.

Icon

Neuer Landingpage-Editor

icon_element-en_us.png

Klassischer Landingpage-Editor
mceclip6.png

Sie k√∂nnen ein Icon-Element verwenden, um visuellen Content hinzuf√ľgen und Ihre Landingpage zu illustrieren.

Ausrichtung und Abstand

Die Einstellungen Ausrichtung und Abstand werden im Abschnitt Allgemeine Einstellungen dieses Artikels beschrieben.

Einstellungen

mceclip7.png

√úber die Einstellungen f√ľr Icons k√∂nnen Sie ein Icon ausw√§hlen und sein Erscheinungsbild anpassen:

  • Ersetzen: W√§hlen Sie ein neues Icon aus, um das aktuelle zu ersetzen.
  • Anpassen: Legen Sie Gr√∂√üe des Icons fest.
  • Hintergrund: F√ľgen Sie eine Hintergrundfarbe zum Icon hinzu.
  • Vordergrund: F√ľgen Sie eine Vordergrundfarbe zum Icon hinzu.
  • Stil und Farbe der R√§nder:  F√ľgen Sie einen Rand zum Icon hinzu und w√§hlen Sie seine Farbe aus.
  • Breite des Rands: Legen Sie fest, wie breit der Rand des Icons sein soll.
  • Rundung der Ecken: Legen Sie die Rundung der Ecken des Icons fest.
  • Link: F√ľgen Sie einen Weiterleitungslink zu Ihrem Icon hinzu.

Video

Neuer Landingpage-Editor

video_element-en_us.png

Klassischer Landingpage-Editor
mceclip7.png

Sie können ein Video-Element auf Ihrer Landingpage verwenden, um Ihre Marke oder Ihre Produkte zu präsentieren, ohne zu viel Text zu verwenden.

Abstand

Die Einstellung Abstand wird im Abschnitt Allgemeine Einstellungen in diesem Artikel beschrieben.

URL

mceclip8.png Mit der Einstellung URL k√∂nnen Sie den Link zum Video hinzuf√ľgen. Sie k√∂nnen ein Video verwenden, das auf YouTube, Vimeo, Dailymotion, Canal+, Wista, Twitch, Youku oder Coub gehostet wird.

Stil

video_style-en_us.png

Über die Einstellung Stil können Sie das Erscheinungsbild des Videos verwalten:

  • Stil und Farbe der R√§nder: F√ľgen Sie einen Rand zum Video hinzu und w√§hlen Sie seine Farbe aus.
  • Breite des Rands: Legen Sie fest, wie breit der Rand des Videos sein soll.
  • Rundung der Ecken: Legen Sie die Rundung der Ecken des Videos fest.

Container

Das Container-Element ist nur im neuen Landingpage-Editor verf√ľgbar.

container-element-en_us.png

Sie können ein Container-Element verwenden, um mehrere Elemente zu gruppieren und gleichzeitig zu verschieben oder in der Größe anzupassen.

Hintergrundbild, Abstand und Sichtbarkeit

Die Einstellungen Hintergrundbild, Abstand und Sichtbarkeit werden im Abschnitt Allgemeine Einstellungen dieses Artikels beschrieben.

Stil

mceclip10.png

Über die Einstellung Stil können Sie das Erscheinungsbild des Containers festlegen:

  • Hintergrundfarbe und Transparenz: F√ľgen Sie eine Hintergrundfarbe zum Container hinzu und verwalten Sie seine Transparenz.
  • Stil und Farbe der R√§nder: F√ľgen Sie einen Rand zum Container hinzu und w√§hlen Sie seine Farbe aus.
  • Position des Rands: Legen Sie fest, auf welcher Seite des Containers ein Rand hinzugef√ľgt werden soll.
  • Breite des Rands: Definieren Sie, wie breit der Rand des Containers sein soll.
  • Rundung der Ecken: Legen Sie die Rundung der Ecken des Containers fest.
  • Schattierung: F√ľgen Sie einen Schatten zu Ihrem Container hinzu.

Code

Neuer Landingpage-Editor

mceclip0.png

Klassischer Landingpage-Editor
mceclip8.png

Sie k√∂nnen ein Code-Element verwenden, um Code Snippets zu Ihrer Landingpage hinzuzuf√ľgen, zum Beispiel einen Facebook-Kommentarbereich

ūüí° Gut zu wissen
Der im Editor eingef√ľgte Code kann nur auf ver√∂ffentlichten Landingpages getestet werden.

‚Ź© 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.