80s design - we love it! With all of these geometric shapes, spatial backgrounds and neon light effects, our landing page for a special event (Christmas parties) couldn't be more radiant! Let's show us how to do it.

Remove your headbands, turn on your neon lights and insert Tron into your VCR ... the 80 years are back!

As a designer, I've always had a soft spot for 80s design that nobody talks about. With all these geometric shapes, tons of patterns, space backgrounds with those cheap neon effects (it should bring back fond memories).

In fact, you can see it everywhere. From "Strangers Things" from Netflix, MineCraft or Muse, which just released an album with an 80s flavor - or even the remake of Tron.

So why not take advantage of this trend and show you how to implement it in a landing page created with Elementor ?

It is not just a theoretical tutorial. We have taken some elements for the current discount period (Black Friday), to give you tools to prepare for your future events.

Opening section

Our opening section is a hero section. The first thing to note here is the title. I recommend putting a lot of effort into this area because it is the first thing your visitor will see.
Think about the exact message you intend to convey. Having your title large and clear will grab people's attention. This first section should also encourage users to scroll down and browse the rest of the page.

Neon effect

Effect neon black friday elementor.jpg

In the center of the composition, I placed the logo, the message and the button.

You can see that the most important message is written in a "neon light". To get that neon look, you need to add CSS to your design. The CSS will add a lot of pink shadow to the text. That's the whole thing.

So you need to add a header widget, change the size of the chosen font to make it shine and set the color to white.

Then open the Advanced tab and paste it into 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 next to the pink, just change the color number after the pound sign. That's all.

Vertical title

Another interesting aspect of this design appears next to the letters "FRI", with the year attached to it appearing vertically (90 degrees).

To achieve this look, you need to add an interior section widget. This is done to implement the vertical effect only on one column.

After adding the inner section, add a title widget to each column.

Style your text and then open the advanced tab of the second column (the one you want 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); }

80 retro background

Once you are done working on the main post, start working on the background to give the text a boost and make the retro 80s sci-fi look a reality. Here I added an image designed in Photoshop and used it as a hero background.
In this design, the background features a geometric grid reminiscent of Tron with a touch of palm trees leaning to the left and a main gradient of blue-purple-pink to achieve that retro feeling. There are also some nice touches like the “DeLorean DMC-12” (you will probably recognize it in Back to the Future).
The car, as well as the shooting stars, all target the main text of our section, highlighting our main message.

Features section

information box elementor.gif
When designing a landing page, you need to think about the relationships between each section. It is a more complicated task when it comes to a fashionable design like retro 80s.
So, after designing an amazing first section and raising the bar, you must maintain the high level and keep the same design theme, while considering each section as a composition in itself.

Design

In this section, I designed a darker “unknown objects” look as we “crawl” the page. Here you can see a title, 3 bullets and a button. To create this floating 3D effect I used a bit of Photoshop in combination with Flip-box settings fromElementor.

Staged on Photoshop

So the first thing I did was create the whole scene in Photoshop to see what everything would look like before I started building it. In the title you can see the neon look from before, and under it I added 3 triangles with icons and a title (the circles).
I added a blue-purple-pink gradient to each triangle. Above, a line pattern gives it an 80s TV look and blur behind, to create a sparkling sci-fi look.
The icons also get a neon look, as well as the title at the bottom of the triangle. Add a floating effect in bold type. The background has a smoky, cloudy, and dark effect with the same line pattern used for the triangle.
For 3D animation, the triangles will have a transparent background. This means the text on the back will show when it's not covered. So I added a little black smoke to the sides of the triangle to make the blanket blend in and still cover the back.
So basically there are three layers to build into the editor: the background, the icon, and the title.

Build live

In the editor, I added the flip-box widget. In the front content tab, I chose an image as the graphic element and added the title. In the Background tab, in Color, I changed the color to transparent and added the triangle I designed in the image section, then changed the position so that it fits perfectly .
Then in the back tab I did the same thing but instead of adding a title I added the text. To move to the settings tab. Here I played with the height of the box. I used the VH unit because it is a relative unit, which will change the image relative to the screen as the visitor will use.
This makes it more responsive. In the effects part, I kept the Flip effect, changed the direction to the left and activated the 3D depth to achieve this amazing 3D effect.

CTA

The entire composition here is aimed at the button (because what you want is for the user to click the button). Here you can see that the button is not bold and 'in your face' but blends in nicely with the smoky background with a little glow around it. But when you walk over it, the pink color appears.

Critics Section

list of reviews elementor.jpg
If the user scrolls to the third section - it means you are doing something right. So, after talking about the product and its amazement, now is the time for another party to speak up.

Design

In this section we have a comments widget on a radical geometric background with a neon title. The background was designed in Photoshop and then placed in the background of the section as a fixed background to create a scrolling hover effect.
I wanted to make this section look 'behind the scenes', so that when you scroll down, you're exposed to it.

Price table section

price chart elementor.jpg
This section is the section Pricing table . Here you can see all the items that can support the sale. The title, the countdown and of course - the price table.
This is the finish line of the landing page. Therefore, if your user doesn't click, something went wrong.

Design

The design in this section has more than one contact 80s-galaxy. The background here has been edited in Photoshop giving it a bright radish purple look and standing out from the black-black background that existed before giving it a punch in the end.
Under the header and slogan there is a counter that shows the time remaining until the end of the sale. Here I used a spacy font called 'space mono' which I added through the custom font option.
In the price table below, each table has a light black background giving it a "floating in space" appearance. When you hover over it, the background darkens and there is a glow around it as a focal point that directs you to read the text inside.
When you move the mouse cursor over the button, the button changes color again. Once you have finished reading the information about our great shots,

Get this totally awesome model

The template shown in this tutorial is now available in the library Elementor. So you can use it with one click.