So erstellen Sie eine 80-Stilseite mit Elementor

80er Design - wir lieben es! Mit all diesen geometrischen Formen, räumlichen Hintergründen und Neonlichteffekten könnte unsere Landingpage für ein besonderes Ereignis (Weihnachtsfeiern) nicht strahlender sein! Zeigen wir uns, wie es geht.

Nehmen Sie Ihre Stirnbänder ab, schalten Sie Ihre Neonlichter ein und setzen Sie Tron in Ihren Videorecorder ein ... die 80-Jahre sind zurück!

Als Designer hatte ich immer eine Schwäche für das Design der 80er Jahre, über die niemand spricht. Mit all diesen geometrischen Formen, Tonnen von Mustern, Weltraumhintergründen mit diesen billigen Neon-Effekten (es sollte schöne Erinnerungen wecken).

In der Tat kann man es überall sehen. Aus "Strangers Things" von Netflix, MineCraft oder Muse, die gerade ein Album mit 80er-Jahre-Flair veröffentlicht haben - oder sogar das Remake von Tron.

Warum also nicht diesen Trend nutzen und Ihnen zeigen, wie Sie ihn in einer mit erstellten Landingpage umsetzen können Elementor ?

Es ist nicht nur ein theoretisches Tutorial. Wir haben einige Elemente für den aktuellen Rabattzeitraum (Black Friday) übernommen, um Ihnen Tools zur Vorbereitung auf Ihre zukünftigen Veranstaltungen zu bieten.

Eröffnungsabschnitt

Unser Eröffnungsabschnitt ist ein Heldenabschnitt. Das erste, was hier zu beachten ist, ist der Titel. Ich empfehle Ihnen, viel Mühe in diesen Bereich zu stecken, denn er ist das Erste, was Sie tun Besucher werden sehen.

Denken Sie an die genaue Botschaft, die Sie vermitteln möchten. Wenn Sie Ihren Titel groß und klar haben, wird dies die Aufmerksamkeit der Leute auf sich ziehen. Dieser erste Abschnitt sollte Benutzer auch dazu ermutigen, nach unten zu scrollen und den Rest der Seite zu durchsuchen.

Neon-Effekt

In der Mitte der Komposition platzierte ich das Logo, die Nachricht und den Button.

Sie können sehen, dass die wichtigste Nachricht in einem "Neonlicht" geschrieben ist. Um diesen Neon-Look zu erhalten, müssen Sie Ihrem Design CSS hinzufügen. Das CSS fügt dem Text viel rosa Schatten hinzu. Das ist das Ganze.

Sie müssen also ein Header-Widget hinzufügen, die Größe der ausgewählten Schriftart ändern, damit sie leuchtet, und die Farbe auf Weiß setzen.

Öffnen Sie dann die Registerkarte "Erweitert" und fügen Sie sie in die benutzerdefinierte Registerkarte "CSS" ein. Fügen Sie diesen Code hinzu:

selector { text-shadow: 0 0 20px #fff, 0 0 10px #fff, 0 0 50px #ff0fad, 0 0 50px #ff0fad, 0 0 40px #ff0fad, 0 0 100px #ff0fad, 0 0 75px #ff0fad; }

Wenn Sie einen anderen Farbton neben dem Rosa verwenden möchten, ändern Sie einfach die Farbnummer nach dem Nummernzeichen. Das ist alles.

Vertikaler Titel

Ein weiterer interessanter Aspekt dieses Entwurfs erscheint neben den Buchstaben "FRI", wobei das daran angehängte Jahr vertikal (90 Grad) erscheint.

Um diesen Look zu erzielen, müssen Sie ein Widget für den Innenbereich hinzufügen. Dies geschieht, um den vertikalen Effekt nur für eine Spalte zu implementieren.

Fügen Sie nach dem Hinzufügen des inneren Abschnitts jeder Spalte ein Titel-Widget hinzu.

Gestalten Sie Ihren Text und öffnen Sie die erweiterte Registerkarte der zweiten Spalte (die Sie drehen möchten). Schreiben Sie auf der benutzerdefinierten CSS-Registerkarte den folgenden Code:

selector { float: left; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); }

80 retro Hintergrund

Wenn Sie mit der Arbeit am Hauptbeitrag fertig sind, beginnen Sie mit der Arbeit am Hintergrund, um dem Text einen Schub zu verleihen und das Retro-Sci-Fi der 80er Jahre Wirklichkeit werden zu lassen. Hier habe ich ein in Photoshop entworfenes Bild hinzugefügt und es als Heldenhintergrund verwendet.

In diesem Design kennzeichnet der Hintergrund ein geometrisches Gitter, das an Tron erinnert, mit einem Hauch von Palmen, die sich nach links lehnen, und einem Hauptverlauf von Blau-Lila-Rosa, um dieses Retro-Gefühl zu erzielen. Es gibt auch einige nette Details wie den „DeLorean DMC-12“ (Sie werden ihn wahrscheinlich in Back to the Future erkennen).

Sowohl das Auto als auch die Sternschnuppen zielen auf den Haupttext unseres Abschnitts und heben unsere Hauptbotschaft hervor.

Features-Bereich

Beim Entwerfen einer Zielseite müssen Sie über die Beziehungen zwischen den einzelnen Abschnitten nachdenken. Es ist eine kompliziertere Aufgabe, wenn es um ein modisches Design wie Retro 80er geht.

Nachdem Sie also einen erstaunlichen ersten Abschnitt entworfen und die Messlatte höher gelegt haben, müssen Sie das hohe Niveau beibehalten und das gleiche Designthema beibehalten, während Sie jeden Abschnitt als eine Komposition für sich betrachten.

Die Technologie

In diesem Abschnitt habe ich einen dunkleren Look für „unbekannte Objekte“ entworfen, während wir die Seite „crawlen“. Hier sehen Sie einen Titel, 3 Aufzählungszeichen und einen Button. Um diesen schwebenden 3D-Effekt zu erzeugen, habe ich ein bisschen Photoshop in Kombination mit Flip-Box-Einstellungen verwendetElementor.

In Photoshop inszeniert

Als erstes habe ich die gesamte Szene in Photoshop erstellt, um zu sehen, wie alles aussehen würde, bevor ich mit dem Erstellen begonnen habe. Im Titel sehen Sie das Aussehen der Neonlichter von zuvor, und darunter habe ich 3 Dreiecke mit Symbolen und einem Titel (die Kreise) hinzugefügt.

Ich habe jedem Dreieck einen blau-lila-rosa Farbverlauf hinzugefügt. Darüber zeigt ein Linienmuster einen TV-Look der 80er Jahre und eine Unschärfe dahinter, um einen funkelnden Sci-Fi-Look zu erzielen.

Die Symbole erhalten auch einen Neon-Look sowie den Titel am unteren Rand des Dreiecks. Fügen Sie einen schwebenden Effekt in Fettdruck hinzu. Der Hintergrund hat einen rauchigen, wolkigen, dunklen Effekt mit demselben Linienmuster wie für das Dreieck.

Bei 3D-Animationen haben die Dreiecke einen transparenten Hintergrund. Dies bedeutet, dass der Text auf der Rückseite angezeigt wird, wenn er nicht abgedeckt ist. Also fügte ich ein wenig schwarzen Rauch an den Seiten des Dreiecks hinzu, damit sich die Decke einfügt und trotzdem den Rücken bedeckt.

Grundsätzlich gibt es drei Ebenen, die in den Editor integriert werden müssen: Hintergrund, Symbol und Titel.

Baue live

Im Editor habe ich das Flip-Box-Widget hinzugefügt. Auf der Registerkarte "Inhalt vorne" habe ich ein Bild als grafisches Element ausgewählt und den Titel hinzugefügt. Auf der Registerkarte "Hintergrund" habe ich in Farbe die Farbe in "transparent" geändert und das Dreieck hinzugefügt, das ich im Bildbereich entworfen habe. Anschließend habe ich die Position so geändert, dass sie perfekt passt .

Dann habe ich im hinteren Tab das Gleiche gemacht, aber anstatt einen Titel hinzuzufügen, habe ich den Text hinzugefügt. Um zur Registerkarte „Einstellungen“ zu wechseln. Hier habe ich mit der Höhe der Box gespielt. Ich habe die VH-Einheit verwendet, da es sich um eine relative Einheit handelt, die das Bild relativ zum Bildschirm ändert Besucher wird benutzen.

Dies macht es reaktionsschneller. Im Effektteil habe ich den Flip-Effekt beibehalten, die Richtung nach links geändert und die 3D-Tiefe aktiviert, um diesen erstaunlichen 3D-Effekt zu erzielen.

CTA

Die gesamte Komposition hier ist auf die Schaltfläche ausgerichtet (da der Benutzer auf die Schaltfläche klicken soll). Hier können Sie sehen, dass der Knopf nicht fett und "in Ihrem Gesicht" ist, sondern sich gut in den rauchigen Hintergrund einfügt und ein wenig leuchtet. Aber wenn Sie darüber gehen, erscheint die rosa Farbe.

Kritiker-Abschnitt

Wenn der Benutzer zum dritten Abschnitt blättert, bedeutet dies, dass Sie etwas richtig machen. Nachdem wir über das Produkt und sein Erstaunen gesprochen haben, ist es jetzt an der Zeit, dass sich eine andere Partei zu Wort meldet.

Die Technologie

In diesem Abschnitt haben wir ein Kommentar-Widget auf einem radikalen geometrischen Hintergrund mit einem Neon-Titel. Der Hintergrund wurde in Photoshop entworfen und dann als fester Hintergrund im Hintergrund des Abschnitts platziert, um einen Bildlauf-Hover-Effekt zu erzielen.

Ich wollte diesen Abschnitt "hinter die Kulissen" schauen lassen, damit Sie ihm ausgesetzt sind, wenn Sie nach unten scrollen.

Preistabelle Abschnitt

Dieser Abschnitt ist der Abschnitt Preistabelle . Hier sehen Sie alle Artikel, die den Verkauf unterstützen können. Der Titel, der Countdown und natürlich die Preistabelle.

Dies ist die Ziellinie der Zielseite. Wenn Ihr Benutzer nicht klickt, ist daher ein Fehler aufgetreten.

Die Technologie

Das Design in diesem Abschnitt hat mehr als eine Kontakt 80er-Galaxie. Der Hintergrund hier wurde in Photoshop bearbeitet, was ihm einen hellen Rettich-Lila-Look verleiht und sich von dem schwarz-schwarzen Hintergrund abhebt, der existierte, bevor er am Ende einen Schlag erhielt.

Unter der Überschrift und dem Slogan befindet sich ein Zähler, der die verbleibende Zeit bis zum Ende des Verkaufs anzeigt. Hier habe ich eine räumliche Schriftart namens "Space Mono" verwendet, die ich über die Option "Benutzerdefinierte Schriftart" hinzugefügt habe.

In der Preistabelle unten hat jede Tabelle einen hellschwarzen Hintergrund, der ihr ein "im Raum schwebendes" Aussehen verleiht. Wenn Sie mit der Maus darüber fahren, wird der Hintergrund dunkler und es leuchtet als Brennpunkt herum, der Sie anweist, den Text darin zu lesen.

Wenn Sie den Mauszeiger über die Schaltfläche bewegen, ändert sich die Farbe der Schaltfläche erneut. Nachdem Sie die Informationen über unsere großartigen Aufnahmen gelesen haben,

Erhalten Sie dieses total fantastische Modell

Die in diesem Tutorial gezeigte Vorlage ist jetzt in der Bibliothek verfügbar Elementor. So können Sie es mit einem Klick nutzen.

So erstellen Sie eine 80-Stilseite mit Elementor