Stöbere durch 15 professionell gestaltete Landing Page-Vorlagen unseres Softwarepartners Elementor, welche dir helfen können einfach und schnell ein Webdesign für deine nächste Website zusammenzustellen.
Da der Verkaufsrausch zum Jahresende immer näher rückt, dachten wir, es wäre der perfekte Zeitpunkt, um unseren Expert-Benutzern 15 umwerfende neue Landing Page-Vorlagen anzubieten.
Dieses Landing Page-Paket dient zwei Zwecken:
- Du kannst sie nutzen, um deine nächste Kampagne zu erstellen.
- Du kannst auch das wunderschöne Design jeder Landing Page erkunden und deine Elementor-Design-Fähigkeiten aufpolieren.
Du fragst dich, warum du von unseren Vorlagen lernen solltest?
Es gibt keinen besseren Weg, als unserer Liste von Landing Pages zu folgen und auf den besonderen Designeffekt zu achten, den wir für jede Seite notieren. Abgesehen von der Design-Inspiration, die diese Seiten bieten, kannst du von ihnen auch eine Menge über die richtige Verwendung von Elementor lernen. Unsere Designer erstellen diese Landing Pages nach den strengsten Elementor Best Practices und nutzen dabei die neuesten Funktionen.
Bist du bereit? Schauen wir mal, was diese Liste enthält…
Inhaltsverzeichnis
- The Roasted Bean‘ Landing Page für den Kaffeeverkauf
- Die HT Akupunktur“ Klinik Landing Page
- Kunst & Kultur Magazin‘ Landing Page in Kürze
- DMAgency“ Landing Page einer Agentur für digitales Marketing
- Interiors“ Landing Page für Innenarchitektur
- Landing Page ‚Der Pflanzenladen
- Landing Page ‚Sporty Home‘ Fitnessgeräte
- Landing Page ‚LeaderKey‘ Webinar
- Lenglish‘ Englischkurs Landing Page
- A/B Space‘ Landing Page für gemeinsam genutzten Arbeitsraum
- Barnes Dentalt‘ Zahnkorrektur Landing Page
- Hunde-Rettung‘ Landing Page
- beppp‘ Demnächst erscheinender Design-Blog
- Färöer Inseln‘ Reise Landing Page
- Glampi‘ Camping Landing Page
1. The Roasted Bean‘ Landing Page für Kaffeeverkauf
The Roasted Bean“ ist eine elegante Vorlage, die hellgrüne Farben verwendet, die die Farben von rohen, frischen Kaffeebohnen angenehm ergänzen.
Wenn du mit dem Mauszeiger über das Hero-Bild fährst, wird ein einzigartiger Hover-Effekt sichtbar, der den weißen Rahmen um die linke und untere Seite des Bildes ausblendet. Diese Landing Page enthält Produkte, so dass du sie nutzen kannst, um unsere neuesten Dynamische WooCommerce-Tags.
2. Die HT-Akupunktur-Klinik“ Landing Page
Diese Vorlage ist ein großartiges Beispiel dafür, wie man Fotografie mit abstraktem Liniendesign kombinieren kann. Beachte den fließenden Übergang zwischen der Nadel auf dem Bild und der Wellenlinie im Hintergrund. Die Einbindung der Wellenlinien trägt dazu bei, dass die Seite und der Service sanft und beruhigend wirken.
Das helle Farbschema wird hier verwendet, um eine freundliche und beruhigende Atmosphäre zu schaffen, die sehr gut zu einer Landing Page für alternative Medizin passt.
Diese Vorlage ist auch nützlich, wenn du auf der Suche nach einer eher konversionsorientierten Landing Page bist, bei der der Hero-Abschnitt ein Lead-Capture-Formular enthält. Deine Besucher gelangen auf deine Landing Page und können sofort ihre Kontaktinformationen eingeben.
3. Kunst- und Kulturmagazin“ Baldige Landing Page
Diese Landing Page für das Art & Culture Magazine zeigt eine abstrakte Komposition im flachen Stil, die als Hero-Image präsentiert wird und mit dem Thema der Landing Page für das Art & Culture Magazine korreliert.
Der Rotationseffekt wird bei „Hover“ für das Bild und die CTA-Schaltfläche verwendet und verleiht dieser „above the fold“-Seite Bewegung und Interaktion.
4. DMAgency“ Landing Page für eine digitale Marketingagentur
Mit ihren hellen, fröhlichen und einprägsamen Farbtönen trägt diese Landing Page dazu bei, die fröhliche Stimmung einzufangen, die so viele Marketing-Agenturen zu präsentieren versuchen. Dieser frische Look wird durch die breite Verwendung von trendigen Farbverläufen auf der gesamten Seite noch unterstrichen.
Hier eine überraschende Tatsache: Die wirbelnde Farbverlaufslinie besteht aus 3 separaten Symbolen. Sie bewegen sich synchron mit der Jello-Eingangsanimation.
5. Landing Page ‚Innenräume‘ für die Innenarchitektur
Für die Landing Page „The Interiors“ wurden Rahmen und einfache dünne Linien verwendet, um die Designer-Atmosphäre zu verstärken und eine schlanke Benutzeroberfläche zu schaffen.
Beachte den einzigartigen Look des Textstreifens, der durch die Verwendung eines negativen Randes auf der linken und rechten Seite erreicht wurde, damit der Text bis zum Rand und darüber hinaus reicht.
6. Landing Page ‚Der Pflanzenladen‘
Diese Pflanzenboutique bietet ein anspruchsvolles Design mit einer Vielzahl von typografischen und visuellen Elementen und Ebenen, die proportional über die Seite verteilt sind.
Dieser raffinierte „Boutique“-Look wird durch die Verwendung transparenter Typografie auf dem Hintergrund des Helden noch verstärkt. Ein weiteres auffälliges Merkmal ist die unkonventionelle Produktbildkomposition innerhalb der Karten, bei der jedes Produkt auf einer anderen Seite des Hintergrunds angebracht ist.
7. Landing Page ‚Sporty Home‘ für Fitnessgeräte
Diese lebendige Landing Page zeichnet sich durch eine leuchtend violette Farbpalette aus. Die Seite zeigt auch ein klebriges Heldenbild, das den Besuchern folgt, wenn sie beginnen, die Seite nach unten zu scrollen.
Beachte das Formularfeld im unteren Bereich der Seite, das über zwei Spalten zu schweben scheint. Dies wird dadurch erreicht, dass das Formular in einem inneren Abschnitt innerhalb der rechten Spalte des Abschnitts platziert und ein negativer Rand für die Spalte, die das Formular enthält, festgelegt wurde.
8. Webinar-Landingpage „LeaderKey
Da es sich bei dieser Seite um ein digitales Webinar handelt, wird das quadratische Rasterdesign verwendet, um der Seite ein digitales Sendegefühl zu verleihen.
Die quadratischen Formen im Heldenbereich werden mit Abstandshaltern erstellt. Sie bewegen sich horizontal und vertikal mit dem entsprechenden Bildlaufeffekt. Darunter wird das weiße Quadrat im Hintergrund neben dem Bereich „Zeitmanagement – Der Schlüssel zum Erfolg“ mit dem Bewegungseffekt Scale-Up animiert, der auf dem Spacer-Widget eingestellt ist.
9. Landing Page für den Englischkurs ‚Lenglish
Die „Lenglish“-Landing Page beinhaltet verschiedene Animationstechniken, die auf die verschiedenen Formen, die auf dem Bildschirm erscheinen, angewendet werden. Diese Seite verwendet eine Art „Gamification“-Design mit dem Ziel, das Thema Bildung freundlicher und spielerischer und nicht zu langweilig und akademisch zu gestalten.
Durch die Verwendung separater SVG-Symbole hat jede Form im Heldenbereich ihre eigene Eingangsanimation und Scrolleffekte. Die Feder hüpft, das Rechteck dreht sich und der Kreis dehnt sich aus.
10. Landing Page für den gemeinsam genutzten Arbeitsbereich ‚A / B Space
Das Design dieser Seite für gemeinsam genutzte Arbeitsbereiche ist sehr hochwertig und elegant. Beachte die Form der Bilder – rechteckig mit abgerundeten Ecken – die für Bögen, Fenster, Räume und Architektur stehen. Dies passt zu dem Thema des gemeinsam genutzten Raums, der auf der Seite angeboten wird.
Das Bogendesign für das Heldenbild wird durch die Festlegung eines Radius für den oberen rechten und linken Rand erreicht. Und die stilvolle grüne Silhouette hinter dem Bild im zweiten Abschnitt wurde durch die Verwendung des Box Shadow-Effekts erreicht.
11. Barnes Dentalt“ Landing Page für Zahnkorrekturen
Mit dieser Vorlage hat der Designer versucht, den Stress, der mit der Zahnbehandlung verbunden ist, zu reduzieren. Dazu wurden ruhige, blaue Farbtöne, weiche abstrakte Formen und eine freundliche, nicht einschüchternde Schriftart verwendet. Das Design ist außerdem recht sauber und steril, was dem Eindruck entspricht, den Zahnärzte vermitteln möchten.
Der Stempel „100 % Qualität“ sorgt für den sozialen Beweis und ein allgemeines Gefühl des Vertrauens. Hierfür wurden 2 Widgets verwendet, Text- und Icon-Widgets, die denselben Bewegungseffekt haben. Der Text hier ist ein „Live-Text“, der mit dem Titel-Widget erstellt wurde, so dass du ihn jederzeit ändern kannst.
12. Landing Page ‚Hunde-Rettung‘
Um die Verspieltheit des besten Freundes des Menschen widerzuspiegeln, haben unsere Designer Quadrate mit abgerundeten Ecken verwendet, um diese Landing Page zur Adoption von Hunden zu gestalten. Alle Formen, die im Hintergrund erscheinen, wurden mit dem Spacer-Widget erstellt.
Beachte den Logostreifen, der sich bewegt, wenn du auf der Seite nach unten scrollst. Hierfür wurde das Widget Icon List verwendet, wobei rechts und links ein negativer Rand eingestellt wurde, damit er über den Bildschirm hinausgeht.
13. beppp‘ Demnächst erscheinender Design-Blog
Auf dieser künstlerischen Landing Page ist eine Menge los. Wenn du nach einer „Coming Soon“-Seite suchst, die die Aufmerksamkeit deiner Besucher auf sich zieht, brauchst du nicht weiter zu suchen! Generell ist dies eine Vorlage, die du auf jeden Fall als Lesezeichen speichern solltest, um in Zukunft mit Bewegungseffekten Aufmerksamkeit zu erregen.
Da es sich um eine Seite für einen Design-Blog handelt, werden moderne abstrakte Muster für die Seite verwendet. Animationen wurden verwendet, um die Seite lebendiger und pulsierender zu machen. Die farbenfrohe Palette soll den Eindruck erwecken, dass bald etwas Cooles kommt.
Wissenswertes: Die Formen sind alle mit einer Mischung aus Icons und Spacer Widgets erstellt.
14. Färöer Inseln“ Reise-Landing Page
Dieses Design ist von einem Zeitungslayout inspiriert. Zeitungen vermitteln den Eindruck von etwas Abenteuerlichem, etwas Aufregendem mit einer Geschichte dahinter.
Beachte das Etikett „Tage“, das an jeder der Reisen angebracht ist. Dies erforderte lediglich die Verwendung eines Überschriften-Widgets, einen schwarzen Hintergrund und ein wenig Spielerei mit dem Padding.
15. Glampi“ Camping Landing Page
Zu guter Letzt haben wir noch Glampi – eine Landing Page für Campingunterkünfte, die eine breite Palette von Bildern und Videos aus der Natur zeigt.
Ein kohärentes Design wurde durch die Einbeziehung von Elementen aus der Wildnis in das Design erreicht. Beispiele dafür sind das Logo und das Textrad, die beide auf Elemente der Tipi-Zelte verweisen. Die einfache Farbpalette lässt die Fotos für sich selbst sprechen und enthält erdige Töne.
Genau wie die Wälder, die sie zeigt, ist diese Landing Page definitiv eine weitere Erkundung wert. Erstens gibt es verschiedene einzigartige Element-Layouts auf der Seite. Diese sind nicht die typischen symmetrischen 2-3-Spalten-Layouts und sind ein schönes Beispiel für gebrochenes Rasterdesign.
Zweitens laden wir dich ein, auf der Seite nach unten zu scrollen und die breite Verwendung von animierten Elementen zu bemerken. Da ist das Bild oben, das sich beim Scrollen ausdehnt, der Titel, der über einem Video erscheint, und die aufeinanderfolgenden Titel, die die Seite von gegenüberliegenden Seiten aus betreten.
Klicken Sie auf „Mit Elementor bearbeiten“ und probiere sie aus
Welche Landing Page hat dich beeindruckt? Jetzt hast du die Chance, sie für dein nächstes Projekt zu nutzen! Wir hoffen, dass du die Vorteile dieser Landing Pages nutzt und sie in deine eigene Kreation verwandelst.
Übersetzt von Verena Jütte
von Website Freiburg
Quelle, unser Websoftware Partner Elementor Pro:
www.elementor.com/blog/new-landing-page-templates
