Springe zum Hauptinhalt

So erstellen Sie eine 80-Stilseite mit Elementor

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

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.

Nutzen Sie diesen Trend und zeigen Sie sich, wie Sie ihn auf einer mit Elementor erstellten Zielseite implementieren können.

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.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Eröffnungsabschnitt

Unsere Eröffnungssektion ist eine Heldensektion. Das erste, was hier zu beachten ist, ist der Titel. Ich empfehle, sich viel Mühe zu geben, da dies das erste ist, was Ihr Besucher sehen wird.
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

Effekt neon black Friday elementor.jpg

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.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

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.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

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

Infobox elementor.gif
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.

Design

In diesem Abschnitt habe ich ein dunkleres Erscheinungsbild von "unbekannten Objekten" entworfen, als wir die Seite "erkundet" haben. Hier sehen Sie einen Titel, 3 Aufzählungszeichen und einen Knopf. Um diesen schwebenden 3D-Effekt zu erzeugen, habe ich ein bisschen Photoshop in Kombination mit den Flip-Box-Einstellungen von Elementor verwendet.

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 auf der Registerkarte "Zurück" dasselbe getan, aber anstatt einen Titel hinzuzufügen, habe ich den Text hinzugefügt. So wechseln Sie zur Registerkarte Einstellungen. 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, den der Besucher verwenden wird.
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

Liste der Rezensionen elementor.jpg
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.

Design

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

Preisdiagramm elementor.jpg
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.

Design

Das Design in diesem Abschnitt hat eher einen Hauch von 80er-Galaxie. Der Hintergrund hier wurde in Photoshop geändert, sodass er glänzend in Radieschenviolett aussieht und sich von dem zuvor existierenden schwarz-schwarzen Hintergrund abhebt, was ihm am Ende einen Schlag verleiht.
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

Das in diesem Tutorial vorgestellte Modell  ist jetzt verfügbar in der Elementor-Bibliothek. Sie können es also mit einem Klick verwenden.

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
2 Aktien
Aktie2
tweet
Registrieren