Comment créer une page au style des années 80 avec Elementor

par Blair Jersyer | Elementor, Tutoriel WordPress

Le design des années 80 – nous l’adorons ! Avec toutes ces formes géométriques, arrière-plans spatiaux et effets de lumière néons, notre page de destination pour un événement spéciale (fêtes de noël) ne pourrait être plus radieuse ! Montrons-nous comment le faire.

Enlevez vos bandeaux, allumez vos néons et insérez Tron dans votre magnétoscope… les années 80 sont de retour !

En tant que designer, j’ai toujours eu un faible pour le design des années 80 dont personne ne parle. Avec toutes ces formes géométriques, des tonnes de motifs, des arrière-plans spatiaux avec ces effets de néon bon marché (cela devrait vous rappeler de bons souvenir).

En fait, vous pouvez le voir partout. De «Strangers Things» de Netflix, MineCraft ou Muse, qui vient de sortir un album au goût des années 80 – ou même le remake de Tron.

Alors, pourquoi ne pas profiter de cette tendance et vous montrer comment l’implémenter dans une page de destination créée avec Elementor ?

Ce n’est pas simplement un tutoriel théorique. Nous avons pris certains éléments pour la période de remise en cours (Black Friday), pour vous donner des outils pour préparer vos futurs événements.

Section d’ouverture

Notre section d’ouverture est une section de héros. La première chose à noter ici est le titre. Je recommande de mettre beaucoup d’efforts dans ce domaine car c’est la première chose que votre visiteur verra.
Réfléchissez au message exact que vous avez l’intention de transmettre. Avoir votre titre large et clair captera l’attention des gens. Cette première section doit également inciter les utilisateurs à faire défiler l’écran et à parcourir le reste de la page.

Effet néon

Effet neon black friday elementor.jpg

Au centre de la composition, j’ai placé le logo, le message et le bouton.

Vous pouvez voir que le message le plus important est écrit dans un «néon lumineux». Pour obtenir ce look néon, vous devez ajouter du CSS à votre conception. Le CSS ajoutera beaucoup d’ombre rose au texte. C’est tout le truc.

Vous devez donc ajouter un widget d’en-tête, modifier la taille de la police choisie pour la faire briller et définir la couleur sur blanc.

Ensuite, ouvrez l’onglet Avancé et collez-le dans l’onglet CSS personnalisé, ajoutez ce code:

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; }

Si vous souhaitez utiliser une nuance différente à côté du rose, changez simplement le numéro de la couleur après le signe dièse. C’est tout.

Titre vertical

Un autre aspect intéressant de cette conception apparaît à côté des lettres «FRI», avec l’année qui y est attachée apparaissant verticalement (90 degrés).

Pour obtenir ce look, vous devez ajouter un widget de section intérieure. Ceci est fait pour implémenter l’effet vertical uniquement sur une colonne.

Après avoir ajouté la section interne, ajoutez un widget de titre à chaque colonne.

Stylez votre texte et ensuite ouvrez l’onglet avancé de la deuxième colonne (celle que vous souhaitez faire pivoter) et dans l’onglet CSS personnalisé écrivez ce code:

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

Fond rétro 80

Une fois que vous avez fini de travailler sur le message principal, commencez à travailler sur l’arrière-plan pour donner un nouvel élan au texte et donner au look rétro de la science-fiction des années 80 une réalité. Ici, j’ai ajouté une image conçue dans Photoshop et je l’ai utilisée comme arrière-plan de héros.
Dans cette conception, l’arrière-plan présente une grille géométrique rappelant celle de Tron avec une touche de palmiers penchés à gauche et un dégradé principal de bleu-violet-rose pour obtenir ce sentiment rétro. Il y a aussi quelques petites attentions comme le «DeLorean DMC-12» (vous le reconnaîtrez probablement dans Back to the Future).
La voiture, ainsi que les étoiles filantes, visent toutes le texte principal de notre section, soulignant notre message principal.

Section Caractéristiques

boite à info elementor.gif
Lorsque vous concevez une page de destination, vous devez réfléchir aux relations entre chaque section. C’est une tâche plus compliquée s’agissant d’un design à la mode comme le rétro 80.
Ainsi, après avoir conçu une première section étonnante et élevé la barre, vous devez maintenir le niveau élevé et conserver le même thème de conception, tout en considérant chaque section comme une composition en soi.

La conception

Dans cette section, j’ai conçu un aspect plus sombre des «objets inconnus» au fur et à mesure que nous «explorions» la page. Ici, vous pouvez voir un titre, 3 balles et un bouton. Pour créer cet effet 3D flottant, j’ai utilisé un peu de Photoshop en combinaison avec les paramètres Flip-box d’Elementor.

Mise en scène sur Photoshop

La première chose que j’ai faite est donc de créer toute la scène dans Photoshop pour voir à quoi ressemblerait tout avant de commencer à le construire. Dans le titre, vous pouvez voir l’aspect des néons d’avant, et sous celui-ci, j’ai ajouté 3 triangles avec des icônes et un titre (les cercles).
J’ai ajouté un dégradé bleu-violet-rose à chaque triangle. Au-dessus, un motif de ligne lui donne un look de télévision des années 80 et un flou derrière, pour créer un look de science-fiction étincelant.
Les icônes reçoivent également un look de néon, ainsi que pour le titre en bas du triangle. Ajoutez un effet flottant en caractères gras. L’arrière-plan a un effet enfumé, nuageux et sombre avec le même motif de ligne que celui utilisé pour le triangle.
Pour l’animation 3D, les triangles auront un arrière-plan transparent. Cela signifie que le texte dans le dos montrera quand il n’est pas couvert. J’ai donc ajouté un peu de fumée noire sur les côtés du triangle pour que la couverture se mélange et recouvre toujours le dos.
Donc, fondamentalement, il y a trois couches à intégrer dans l’éditeur: l’arrière-plan, l’icône et le titre.

Construire en direct

Dans l’éditeur, j’ai ajouté le widget flip-box. Dans l’onglet de contenu avant, j’ai choisi une image comme élément graphique et ajouté le titre. Dans l’onglet Arrière-plan, en couleur, j’ai changé la couleur en transparent et ajouté le triangle que j’ai conçu dans la section d’image, puis j’ai modifié la position afin qu’elle s’adapte parfaitement.
Ensuite, dans l’onglet arrière, j’ai fait la même chose, mais au lieu d’ajouter un titre, j’ai ajouté le texte. Pour passer à l’onglet paramètres. Ici, j’ai joué avec la hauteur de la boîte. J’ai utilisé l’unité VH parce que c’est une unité relative, ce qui modifiera l’image par rapport à l’écran que le visiteur utilisera.
Cela le rend plus réactif. Dans la partie effets, j’ai conservé l’effet Flip, changé la direction à gauche et activé la profondeur 3D pour obtenir cet effet 3D étonnant.

CTA

La composition entière ici vise le bouton (car ce que vous souhaitez c’est que l’utilisateur clique sur le bouton). Ici, vous pouvez voir que le bouton n’est pas audacieux et «dans votre visage», mais s’intègre parfaitement à l’arrière-plan enfumé avec une petite lueur autour. Mais lorsque vous passez dessus, la couleur rose apparaît.

Section des critiques

liste des avis elementor.jpg
Si l’utilisateur fait défiler jusqu’à la troisième section – cela signifie que vous faites quelque chose de bien. Ainsi, après avoir parlé du produit et de son étonnement, il est maintenant temps pour une autre partie de prendre la parole.

La conception

Dans cette section, nous avons un widget de commentaires sur un fond géométrique radical avec un titre au néon. L’arrière-plan a été conçu dans Photoshop, puis placé à l’arrière-plan de la section en tant qu’arrière-plan fixe de manière à créer un effet de survol défilant.
Je voulais donner à cette section un aspect «en coulisses», de sorte que lorsque vous faites défiler l’écran, vous y êtes exposé.

Section du tableau des prix

tableau de prix elementor.jpg
Cette section est la section Table de tarification . Ici vous pouvez voir tous les éléments qui peuvent supporter la vente. Le titre, le compte à rebours et bien sûr – le tableau des prix.
C’est la ligne d’arrivée de la page de destination. Par conséquent, si votre utilisateur ne clique pas, quelque chose n’a pas fonctionné.

La conception

La conception dans cette section a plus d’un contact des années 80-galaxie. L’arrière-plan ici a été modifié dans Photoshop, ce qui lui donne un aspect violet radis brillant et se démarque de l’arrière-plan noir-noir qui existait auparavant, lui donnant un coup de poing à la fin.
Sous l’en-tête et le slogan, il y a un compteur qui indique le temps restant jusqu’à la fin de la vente. Ici, j’ai utilisé une police spacy appelée «space mono» que j’ai ajoutée via l’option de police personnalisée.
Dans le tableau des prix situé en dessous, chaque table a un fond noir clair lui donnant un aspect «flottant dans l’espace». Lorsque vous la survolez, l’arrière-plan s’assombrit et il y a une lueur autour comme un point focal qui vous dirige à lire le texte à l’intérieur.
Lorsque vous passez le curseur de la souris sur le bouton, le bouton change encore de couleur. Une fois que vous avez fini de lire les informations sur nos superbes plans,

Obtenez ce modèle totalement génial

Le modèle présenté dans ce didacticiel  est maintenant disponible dans la bibliothèque Elementor. Vous pouvez donc l’utiliser en un clic.

Poster le commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest