80’s design – we just love it! With all those geometric shapes, space backgrounds, and neon light effects, our Black Friday landing page couldn't look more rad! Let's show you how to do it.
Take off your headbands, turn on your neon lights, and put Tron in your VCR… the 80’s are back!
As a designer, I always had that fetish that nobody talks about – 80’s design. With all those geometric shapes, tons of patterns, space backgrounds with those cheap neon light effects.. (come on, you know you like it too).
Actually, you can see it everywhere. From Netflix’s “Strangers Things”, MineCraft, or Muse that just released an album with an 80’s flavor – or even the remake of Tron. Everything screams 80’s, and we love it!
So why not take this hot trend and show you how to implement it in a landing page built with Elementor?
This is not just a theoretical tutorial. We took elements from Elementor’s own upcoming Black Friday 80’s-style campaign and incorporated them in the design. Totally tubular!
Opening Section
Neon Effect
In the center of the composition, I placed the logo, message, and button.
You can see that the most important message is written in a bright “neon light”. To get to this neon look, you need to add some CSS to your design. The CSS will add a lot of pink shadow to the text. That’s the whole trick.
So what you need to do is add a heading widget, change the weight of your chosen font to light and set the color to white.
Then, open the advanced tab and paste in the custom CSS tab, add this 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;
}
If you want to use a different shade beside pink, simply change the number of the color after the pound sign. That’s all.
Vertical Headline
Another cool aspect of this design appears next to the “FRI” letters, with the year attached to it appearing vertically (90 degrees).
To get this look, you need to add an Inner Section Widget. This is done to implement the vertical effect only on one column.
After adding the inner section, add a heading widget to each column.
Style your text and then open the advanced tab of the second column (the one that you wish to rotate) and in the custom CSS tab write this code:
selector {
float: left;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
Retro 80’s Background
Features Section
The Design
Setting the Stage on Photoshop
Building It Live
CTA
Reviews Section
The Design
Pricing Table Section
The Design
Get This Totally Awesome Template
It’s like, totally bitchin’! The template shown in this tutorial is now available in Elementor library, so you can use it with a click.
“Modern retro” will always look amazing. ironically, these days, we use all the best hi-tech tools to fashion a low-tech design. It will make some of your visitors remember their youth and for some of them to think how cool this era was.
But you know what? It’s soo cool so who cares?!? Psych!
14 Responses
Great.
I really like the hover effect on the “Features Section”. I will try to re-use it on a next project.
Oh, something different, thank you so much!
Amazing, Best Builder wordpress plugin
Great tutorial Hadas! Thank you
Congrats Hadas, a very interesting vision 😉
Hi Hadas, thanks for the tutorial. But I need to ask you about use the code for the pink shadow in Slide widget of Elementor only in the title, not in all the text and the button. Could you help me with it? What I need to change? thanks again.
Hey Fernando, what you need to do is quite easy. if you preview the page and use inspect element to the headline you will find its name (“.elementor-slide-heading”). Change the name of the class in the css code.
AMAZING Site/Demo/Style!! I am a major 80s Fan… ever since the 80s! Curious, if we are Pro member how can we download the Theme? https://library.elementor.com/black-friday-80s-style I’m logged into my account, go to that link and don’t see any download option, curious what am I missing or do you need to be a Pro Business not Personal member?
Yes Hadas!! Thank you very much!! Cheers!
Hi Hadas
Really interested tutorial for CSS, I will use for my client website its easy to work on it.
Thanks for sharing great tutorials.
thanks for sharing.
https://www.mathauditor.com/
https://www.shrugemojilist.com/
https://freeblackmartapk.com/
https://www.wittyballs.com
https://rickandmortyseason3.com/a
Hi Hadas, I am having the same issue with my WooCommerce products having the pink shadow on all lettering …. would it be the same fix as for Fernando?
Thank you.,
Alistair
Hi, what are you trying to do that is not working? can you give me some more details? 🙂