Du möchtest eine Landingpage erstellen?
In diesem Artikel erfährst du Schritt für Schritt, wie du deine eigene Landingpage anlegst, gestaltest und veröffentlichst.
Inhalt
- Landingpage anlegen
- Landingpage Builder: Editor
- Landingpage Builder: Design
- Landingpage Builder: Einstellungen
Landingpage anlegen
Um eine neue Landingpage zu erstellen, rufe den Menüpunkt Landingpages auf und klicke in der Übersicht auf + Neue Seite.
Anschließend kannst du entscheiden, ob du eine Vorlage verwenden oder mit einer leeren Seite starten möchtest.
Wenn du mit einer leeren Seite beginnst, klicke unterhalb der leeren Seite auf Start.
Möchtest du dagegen eine Vorlage nutzen, kannst du dir die verschiedenen Vorlagen zunächst über den Button Vorschau ansehen, sie öffnen sich dann in einem neuen Fenster. Wenn du dich für eine Vorlage entschieden hast, kehre zum vorherigen Fenster zurück und klicke bei der gewünschten Vorlage auf Start.
Deine Landingpage wird nun erstellt und direkt für die Bearbeitung geöffnet.
Landingpage Builder: Editor
Sofern du mit einer leeren Seite beginnst, befinden sich im Reiter Editor zunächst noch keine Elemente.
Über den Button + Element hinzufügen (oder die Taste A auf deiner Tastatur) kannst du Überschriften, Texte, Bilder, Videos und weitere Inhalte einfügen.
Arbeitest du mit einer Vorlage, ist die Grundstruktur bereits vorhanden. Du kannst bestehende einzelne Elemente und ineinander verschachtelte Elemente per Drag-and-Drop verschieben. Über das Dreipunkt-Menü eines Elements kannst du zusätzliche Aktionen ausführen, wie das Element duplizieren, in der Bibliothek als Vorlage für später speichern, verschieben oder löschen.
Um ein Element zu bearbeiten, klicke direkt auf seinen Namen oder im Dreipunkt-Menü auf Bearbeiten. Anschließend öffnet sich das Bearbeiten-Fenster für dieses Element.
In den Reitern Inhalt, Stil und Layout findest du unterschiedliche Einstellungen für das ausgewählte Element:
-
Inhalt
Hier bestimmst du, welche Inhalte das Element anzeigen und welche Funktionalität es haben soll. Die verfügbaren Einstellungen hängen vom gewählten Elementtyp ab. Bei einem Text-Element kannst du beispielsweise den Text im Editor eingeben, formatieren und mit Links versehen. Bei einem Bild-Element hingegen kannst du hingegen ein Foto hochladen oder eines von Unsplash (einer Webseite für lizenzfreie Bilder) auswählen. Außerdem lassen sich unter anderem Bildbreite und -höhe, das Seitenverhältnis und eine URL zur Verlinkung festlegen. -
Stil
In diesem Bereich legst du das Aussehen und das Verhalten des Elements fest. Bei einem Text-Element gehören dazu zum Beispiel Schrift- und Linkfarbe, Hintergrundfarbe sowie die Textausrichtung. Zusätzlich kannst du deinem Text-Element ein Hintergrundbild zuweisen und dieses über weitere Optionen detailliert konfigurieren.Hinweis: Im allgemeinen Bereich Design kannst du globale Stile hinterlegen, damit das Design deiner Landingpage und der Element grundsätzlich einheitlich wird. Abweichende Einstellungen lassen sich anschließend über den Reiter Stil für einzelne Elemente individuell regeln.
-
Layout
Über die Einstellungen im Reiter Layout kannst du die Größe, Position und Form des Elements auf der Seite verändern. Du kannst dabei unter anderem Abstände, die Breite und Höhe, den Eckenradius sowie die Sichtbarkeit (Desktop/Mobil) anpassen.
Alle Änderungen siehst du immer sofort in der Live-Vorschau auf der rechten Seite, sodass du jederzeit erkennst, wie deine Landingpage später aussehen wird.
Landingpage Builder: Design
Im Reiter Design kannst du das grundsätzliche Erscheinungsbild deiner Landingpage an dein Branding anpassen. So entsteht ein einheitliches Gesamtbild, ohne dass du jedes Element einzeln bearbeiten musst.
Es stehen die folgenden Unterpunkte zur Verfügung:
-
Seitenlayout
Lege fest, wie der Hauptbereich deiner Landingpage, in dem sich deine Elemente befinden, aussehen soll. Dazu zählen unter anderem die Seitenbreite, die Innen- und Außenabstände sowie Rahmen und Eckenradius. -
Typografie
Bestimme die Schriftarten sowie Schriftgrößen und weitere Optionen für deine Texte und die unterschiedlichen Überschriften (H1–H6). -
Farben
Definiere die Farben für Texte, Links und den Seitenhintergrund. -
Hintergrundbild
Lade ein Hintergrundbild hoch und nimm individuelle Einstellungen dafür vor. -
Primärer & Sekundärer Button
Gestalte deine Buttons einheitlich, indem du zwei verschiedene Designs hinterlegst, die du für verschiedene Verwendungsarten nutzen kannst. Du kannst hier unter anderem die Hintergrundfarbe, Schriftfarbe, Größe, Eckenradius, Textausrichtung und Hover-Effekte festlegen.
Landingpage Builder: Einstellungen
Im Reiter Einstellungen findest du die Bereiche Veröffentlichen, SEO und Eigener Code.
Veröffentlichen
Hier legst du fest, ob sich deine Landingpage im Entwurfsmodus befindet oder Live geschaltet und damit veröffentlicht werden soll.
Zusätzlich kannst du einen Titel für deine Landingpage vergeben, der nur für dich in der Produktübersicht angezeigt wird sowie die URL festlegen, unter der deine Kund:innen die Landingpage aufrufen können.
Die URL beginnt immer mit deiner Domain, daran schließt der von dir gewählte Pfad/Name an.
Beispiel: Wenn deine Shop-URL meinshop.tentary.com lautet und du den Pfad summer-sale wählst, lautet der vollständige Link: meinshop.tentary.com/summer-sale.
Unterhalb des URL-Feldes kannst du zudem ältere Versionen deiner Landingpage wiederherstellen.
SEO
In diesem Bereich kannst du den Seitentitel, die Seitenbeschreibung und ein Vorschaubild hinterlegen.
Der Titel wird deinen Besucher:innen im Browserfenster angezeigt und zusätzlich zur Seitenbeschreibung von Suchmaschinen für die Darstellung der Ergebnisse genutzt.
Tipp: Wähle einen klaren, aussagekräftigen Titel und eine präzise Beschreibung, die den Inhalt deiner Landingpage genau widerspiegelt.
Wenn du den Link zu deiner Landingpage teilst, wird in den meisten Apps ein Vorschaubild angezeigt, das du hier hochladen kannst.
Eigener Code
Bei Bedarf, kannst du deinen eigenen JavaScript-, CSS- oder HTML-Code einfügen. Du kannst den Code sowohl im Header- als auch im Footer-Tag deiner Seite einbetten.
Hinweis: Der eingefügte Code wird nicht von uns überprüft. Fehlerhafter Code kann die Funktion deiner Landingpage einschränken. Verwende diese Option nur, wenn du dir sicher bist, dass dein Code korrekt ist.
Teilen
Mit dieser Funktion kannst du anderen Tentary-Nutzer:innen erlauben, deine Landingpage als Vorlage zu verwenden. Setze dazu einfach ein Häkchen bei Teilen aktivieren und gebe den darunter stehenden Link an die Personen weiter, die deine Vorlage nutzen dürfen. Über den Link können andere die Landingpage als Ausgangspunkt für ihre eigenen Seiten verwenden, ohne dass deine Originalseite dabei verändert wird.
