Skip to Main Content

How to create a 80 style style page with Elementor

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 600.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

The design of the 80 years - we love it! With all these geometric shapes, spatial backgrounds and neon light effects, our destination page for a special event (Christmas parties) could not be more radiant! Let's show ourselves how to do it.

Take off 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 80 design that nobody talks about. With all these geometric shapes, tons of patterns, spatial backgrounds with these cheap neon effects (this should remind you of good memories).

In fact, you can see it everywhere. From Netflix's "Strangers Things", MineCraft or Muse, which has just released an album to the taste of 80 - 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?

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

It's not just a theoretical tutorial. We have taken some elements for the Black Friday period, to give you tools to prepare your future events.

Opening section

Our opening section is a section of heroes. The first thing to note here is the title. I recommend putting a lot of effort in this area as this is the first thing your visitor will see.
Think about the exact message you intend to convey. Having your title broad and clear will capture people's attention. This first section should also encourage users to scroll down and scroll through the rest of the page.

Neon effect

Effect neon black friday elementor.jpg

At 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 "bright neon". To get this neon look, you need to add CSS to your design. CSS will add a lot of pink shadow to the text. That's the whole thing.

You must add a header widget, change the font size 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:

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

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 rose, simply change the number of the color 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 get this look, you must add an inner 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.

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [FREE]

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've finished working on the main message, start working on the background to give the text new impetus and give the 80 science fiction retro look a reality. Here, I added an image designed in Photoshop and used it as a hero background.
In this design, the background presents a geometric grid reminiscent of Tron with a touch of palm trees bent to the left and a main gradient of blue-purple-pink to get this retro feeling. There are also some small touches like the "DeLorean DMC-12" (you'll 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's a more complicated task when it comes to fashionable design like the retro 80.
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 aspect of "unknown objects" as we "explore" the page. Here you can see a title, 3 balls and a button. To create this floating 3D effect, I used a bit of Photoshop in combination with Elementor's Flip-box settings.

Staged on Photoshop

The first thing I did was to create the entire scene in Photoshop to see what it would look like before I started building it. In the title, you can see the appearance of the neon lights before, and under this one, 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 a TV look from the 80 years and a blur behind, to create a sparkling sci-fi look.
The icons also receive a neon look, as well as for the title at the bottom of the triangle. Add a floating effect in bold. The background has a smoky, cloudy and dark effect with the same line pattern as used for the triangle.
For 3D animation, the triangles will have a transparent background. This means that the text in the back will show when it is not covered. So I added a little black smoke on the sides of the triangle so that the cover mixes and always covers the back.
So, basically, there are three layers to integrate into the editor: the background, the icon and the title.

Build live

In the editor, I added the flip-box widget. In the content tab before, I chose an image as a graphic element and added the title. In the Background tab, in color, I changed the color to transparent and added the triangle that I designed in the image section, then I 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 go 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 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 get this amazing 3D effect.

CTA

The whole composition here is aimed at the button (because what you want is for the user to click on the button). Here you can see that the button is not bold and "in your face", but fits perfectly with the smoky background with a little glow around. But when you pass on 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 astonishment, now is the time for another party to speak.

Design

In this section, we have a comment 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 scrolling effect.
I wanted to give this section a "behind the scenes" look, so when you scroll down, you are exposed to it.

Price table section

price chart elementor.jpg
This section is the section Pricing table Here you can see all the elements that can support the sale. The title, the countdown and of course - the price chart.
This is the finish line of the landing page. Therefore, if your user does not click, something did not work.

Design

The design in this section has more than one contact of the 80-galaxy years. The background here has been changed in Photoshop, which gives it a bright radish-purple appearance and stands out from the black-black background that existed before, giving it a punch in the end.
Under the heading and slogan, there is a counter that indicates the time remaining until the end of the sale. Here I used a spacy font called "space mono" that I added via 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 like 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 model presented in this tutorial is now available in the Elementor library. So you can use it in one click.

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Cool WordPress Themes that I found on
And there are more 50 000 themes and models to choose from!

Back To Top
4 shares
Share4
tweet
Save
WhatsApp