Our team at Elementor created a truly BODACIOUS 80’s campaign for Black Friday. In this video, we share the awesomeness and show you how to create a retro style landing page for Black Friday.
hey they’re only nerds jocks and valley
girls
that’s from Elementor here and today
I’ll show you how to give your page a
cool 80s retro design look this will
make your page look weakened so let’s
begin our first section here is a hero
section here want to make myself stand
out more a tea style and what’s more an
attention grabber than a flashing neon
lights so let’s choose the cell headline
and go to the Advanced tab in the CSS
classes give it a name I’ll call it cell
and under there and then under the
custom CSS I’ll write this code to get
the neon light effect inside the curly
brackets I will add text shadow on top
of a text shadow the code is built like
this the first number is the horizontal
shadow the second number is the vertical
shadow and the third number is the blur
radius so after you put all the numbers
you need to pick the shadows color and
here because I want to make the neon
light effect I will start with the white
color and finish it with a flashing pink
so the code goes like this next I want
to make a small adjustment to the year
number and flip it so it will be
vertical first let’s add an intersection
and put the fry in one column and the
year in the second column then click on
the Year column and in the Advanced tab
give it a name after that open the
custom CSS tab and write this code here
you can see that I have different kinds
of browsers in my code so to look the
same in each browser also if you want to
flip the number to the other side just
need to add the minus at the beginning
that’s it
so first section is ready you can really
see the difference
usually people tend not to use CSS but
rather use images instead it’s a shame
because it’s really easy to create it as
a live text plus it looks way better and
it also renders faster too so it’s a big
plus here moving on to our next section
the bullet section so the first thing I
did was to create the entire
staging Photoshop to see how everything
will look like before I start build it
in the headline you can see the neon
light effect from before and underneath
it I added three three angles with an
icon and a title so for the 3d animation
the triangles will have a transparent
background it means that the text in the
back will appear when it’s not covered
by a layer so I added some black smoke
on the sides of the triangle so the
cover will blend in and still will cover
the back basically there are three
layers two built in the editor the
background the icon and the title let’s
see how it’s done in the editor drag in
the flip box widget in the front contact
tab choose an image add a graphic
element and a title
in the background tab choose color and
change the color to transparent then add
the triangle to the image section and
change the position so it will fit
perfectly in the back tab I did the same
thing but instead of adding the title I
added the text moving on to the setting
tab here you can play with the height of
the box
I use the VH unit because it’s a
relative unit so it will change the
image and relative to the visitors
screen it makes it more responsive in
the effect part I kept the flipped
effect change the direction to the left
and switch on the 3d depth so it will
get this amazing 3d effect so now when
we hover over the triangle we can
already see the effect I could do this
for hours okay next in the last two
sections I use their new and improved
widgets the first one is the reviews
widget with this widget you can add all
your comments that you get from your
social networks by adding a star rating
and social links that makes everything
more reliable next is the countdown
widget in the countdown widget we have a
new option called evergreen timer with
this new option the countdown starts
every time the user goes to your website
and give the user an extra push to buy
your product now let’s preview the page
to see how everything will look like
that is so radical so you can see with
some small adjustments we can change the
entire page and give it an 80 touch that
will make ourselves really stand out I
hope you enjoyed this tutorial and don’t
forget to subscribe to our YouTube
channel to get all the latest updates
and tutorials
