by Adam Preiser updated August 20, 2017

Create Stylish Feature Boxes With Elementor Page Builder


Share on facebook
Share on twitter
Share on linkedin

Today Elementor released a new feature. Now I have never been so excited about a new feature like this before.

If you have a guess with that new feature is, it's gradients!

Gradients are one of the most popular design trends going on right now. In fact you see it all the time, except it's traditionally been very difficult to do. Or better yet difficult to do right.

What with this new feature you can do more than just gradients, as you'll see in this video.

If you like the feature boxes I created here is a link to download it.

Video Transcript

Elementor Design With Gradients

Welcome back to another video my name is Adam
from where I make WordPress

videos for non-techies like me and I will
show you how to do some really things today

with Elementor now if you’re not familiar
with Elementor take very popular very feature-rich

page builder and it just so happens to be
free although they do have a professional

version of it but everything I show you in
this videos can be done with the free version

of it but stay to the end of the video I have
a special promotion with the paid version

if you’re interested in that so what I want
to show you how to do is make some feature

boxes today so yesterday I did a review on
this new service from Studiopress you might’ve

seen the video maybe maybe not Anderson really
nice design elements in this page and one

of the things Studiopress is known for is
their keen eye for design and when you take

that in you.

Up with Elementor you can essentially create
a lot of the same design elements you see

that they’re doing but you can have it in
your Elementor based website because of the

features that Elementor has so one of the
things accepting several things on here that

I want to make videos on I want to make a
video on the text just coming off the page

here how to do that do a box like this with
Elementor but I wanted to start it with how

to make this and I really like this kind of
a feature box a kind of is pulled off the

page like this I thought this would be very
nice for lots of different reasons we maybe

have an image on one side and then you have
a bit of text to go with it and then it’s

lifted up off the page just a little bit so
I was playing around today with Elementor

and this is what I came up with I have two
different examples of that I’m a show you

how I did it in this video so that you can
do it as well and here’s the first example

right here you can see it’s very close to
what they have going on obviously I’m not

using their fonts and I think my blur is a
little tighter than their blur so you can

see here there is a blur it is lifted a little
bit but it’s a little bit more subtle and

we can tweak this to be however we wanted
with Elementor and plus the was Studiopress

they had some kind of a background element
there but anyways this is what I came up with

this example here I thought be great for any
kind of service were you you put an image

there and some text to go along with it and
then here’s another example but using the

gradient feature that was recently added to
Elementor this is such a powerful feature

in fact when you’re on the Studiopress website
you do see them using gradients right here

at the top you can see how it’s a darker blue
here in a lighter blue here will now you can

do that same exact thing with Elementor so
let’s go ahead and just get into the editor

so I can show you how I did this on my click
on edit with Elementor so we can get into

the page builder itself when my favorite things
about this page builder you make a change

it shows instantly on the side here so essentially
what this is is a column and for the column

I have a background image and I’m using that
gradient feature to use to to get this diagonal

sharp line here with a different color and
then these are two columns so this is a column

with just two text elements and I did push
it over a little bit in the margin let’s take

a look at the settings for the column summa
click on call them right here and what I did

is I chose a background image now this could
be any background image I could even change

it in this video let’s see what what I can
come up with just what’s there you deftly

want a wide image that is going to stretch
the whole width of that column there so let’s

take a look and see what I’ve God’s I actually
don’t have many options there is the one that

I used if I use this is going to show primarily
a plate there an empty plate you can see that

there doesn’t look good so I’m have to go
back with my image so anyways we got an image

and let’s go ahead and collapse this background
and border section because were in use this

background overlay section so today they released
a new feature that allows you to add gradients

to your backgrounds and it could be just the
gradient instead of an image or you could

put an image and you can overlay the gradient
and the same thing goes for videos you can

have a video playing in the background and
then you can overlay gradient on top of it

but with these gradient controls you can get
this sharp line and you can have it be at

any angle that you want so where I have background
and overlay you now have this new’s new option

here says gradients and with gradients you
choose to colors and then with the gradient

settings it blends those two colors together
so for the first color right here you can

click on this box I just chose white but then
I made a completely transparent with this

lighter here you can choose any color it doesn’t
really matter because you’re going to have

this transparency slider all the way down
so that image is totally transparent however

if you did want a little bit of a different
color on this side to make it pop you can

certainly do that and choose a color like
this and go over it with that it’s completely

up to you but I wanted just the image and
so IQ could choose any color and then have

the transparency side all the way down to
the bottom so the color isn’t shown let’s

remove that and then for the second color
I chose white obviously and it’s white but

you could choose any color you wanted that
made sense for you but I chose white and there’s

no transparency however I wanted to I can
do this in kind of blend in the image from

the background but that’s not the look I was
after and then we have this location and this

is where the blending begins so I wanted it
right in the middle so I put this at 50% but

if you wanted it over a little more this way
or that way you could do whatever you wanted

I wanted 50 now this is the location of the
other color going the other direction and

I left this at zero to get that sharp line
across so there’s two different types of gradients

this is linear and this is radial I’m not
going for the radio look someone to go back

to linear like that and then for the angle
a 90’b0 angle is straight up and down so

I have it set to 100 but if I had 90 you can
see it’s a straight up and down arrow like

that but I wanted a little style to it so
that’s why I put 100 and you can make that

be whatever you want you can see as you move
this slider it starts to move around so I

wanted that to be just at 100 and you can
have it be whatever you want and if I was

looking at here eyeballing this I would say
they are pretty close to hundred as well it

looks pretty much the same thing and then
here is opacity and this is the translucent

nests of the entire blended gradient color
and I have it at one which means there is

no transparency but this is another way right
could have added some transparency to it so

this is a really good way to highlight something
on your website that you want to highlight

so if there was a restaurant you can have
it be one of your main categories of food

or if it is a service that could be about
your a particular service that you offer if

it’s about carpet cleaning you can have a
picture of a guy cleaning the carpet and then

you could talk about on the side just a little
bit about what that image is showing to pull

it all together and lastly for the entire
column what I did is I added a shadow a box

shadow and it’s going to be found here when
I scroll down here’s the box shadow option

I enabled it in I sit at the 20 but we might
want to blur that out just a little bit more

and spread it out so it’s a little more subtle
cc as I got to say 50 the blur is a lot more

subtle when you’re here the blur is a lot
more subtle but it’s definitely there and

lastly there is a very thin border here so
I put a thin border around the entire column

and that is and that was right here under
border type I did solid and I made it the

color white and I had it ever so subtly around
just like that so this is how I accomplish

this and I think this it would be really good
on any websites to integrate some effects

like this and I don’t want to overdo it you
don’t want to million boxes like this with

the shadow and and all that kind of stuff
but you can definitely use this a lot on a

particular website now this is using a color
gradients that I’m actually blending into

colors together so let’s take a look at that
really quick so I had that same background

image let me collapse that now unlike the
first example up here I where I was using

the location for the first color this time
I have that said to zero and I’m using the

location for the second color which is this
blue and with the blue there’s a slight transparency

there so when you click on the blue color
you can see I just have it ever so slightly

so this is with no transparency and this is
with just a slight transparency down just

like that now what I’m doing here is I’m using
the location slider for the second color so

if I was the go all the way across it would
make it all that that blue color but I’m playing

around with it right here and I think it was
at about 50 or something like that I just

wanted there to be more of a solid color behind
the text and that’s how I was playing with

it that way and I have a slightly different
angle I had it set to 100 in the prior example

but you can see as I do it it starts to rotate
around my goal here was to have the color

be more solid underneath the text of the text
would be easier to read now if I wanted to

do that solid line a bit that you saw earlier
I could just go like this and see if I made

the same number as on up here as I have down
there you would see that it would be perfectly

solid like it is right now which is perfectly
solid but I wanted it to kind of spread and

blur out and just ease into the image like
you see now if I wanted this to be a different

color I can easily do that as well I could
go with something may be vibrance like this

and to go something like that maybe lighten
it up maybe have it be just a little different

like that and you can see there I have this
transparency going on that way so these are

just two ways were you can add a bit more
flair to your website to give it those nice

design touches that will really make it stand
out and take the typical text and images and

and mix them together and make them look a
lot better then other websites would have

and I think you should definitely experiment
with having a section like this like I said

I just got it from this this website right
here I was inspired and I re-created it and

that’s the best thing about Elementor as you
can really see anything in or just about anything

you can re-create with Elementor they are
really giving you those design tools now if

you’re not familiar with the Pro version of
Elementor that’s a lot of more features to

Elementor and then these are things that you
normally have to buy eggs additional plug-ins

to get these features like forms the probe
version as a full form builder in it and it’s

the most powerful visual form builder I’ve
ever seen you can create sliders you can create

pricing tables there’s a whole laundry list
of things that you can do with the Pro version

however everything I showed you in this video
you don’t need the Pro version for I have

a special promotion if you do purchase the
Pro version through my link, to give you access

to a course that I put together called Elementor
X essentials it’s ready for you right now

on my website if you liked some of the tips
that I showed you in this video urinal learn

a lot more in this course and it’s more than
just a course on Elementor it’s actually a

course on building websites and I just so
happen to use Elementor as the tool to build

websites in this course is a very powerful
course and if you’re building a website for

yourself it’s definitely worth it you could
purchase a course for $97 or if you purchase

Elementor through my link which you can find
in the pin comment section and then contact

me send me a copy of your receipt of verify
you did purchase it through my link and I

will get you enrolled in this course for free
because you made it to the end of the video

I have a free gift for you but before I talk
about that I want to ask you to do something

for me if you can give this video a thumbs
up down below that would really help me out

if you’re not subscribed to the channel go
ahead and click on the unsubscribe button

and become a subscriber and support this channel
and if you’d like you to notify you when I

upload new videos there’s a little bell next
to that subscribe button you can click on

that and set that up as well if you have any
questions or a comment about this video I’d

love to answer it there’s a comments section
down below all you have to do is put in your

question or comment I respond to every single
one I made a course just for you and it’s

called the three steps to WordPress success
and I want to give this to you if you’d like

to enroll in this course there’s a button
right here off to the right you go ahead and

click on that role as a student and that’s
just my way of saying thank you for supporting

me and making it to the end of this video
I make them just for you

My passion is making the best quality video tutorial online, for non-techies. When I am not behind the camera, I am usually helping out one of my YouTube subscribers.

Join The Conversation

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

  1. How does this look on tablet and mobile? It doesn’t look pretty for me and I’m curious how you’d make it look great on both tablet and mobile. Thanks!

  2. I love the effect and have been trying to recreate this. However I have to agree with CDIF, I am having a hard time setting things up like you have at the beginning of the video. Maybe also because apparently things have changed a bit with Elementor since this video was released. However the only way I am able to set this up is by using two columns next to each other, adding the gradient to the very right of the left column. But then I would have to add the box shadow to the whole section and even though it is set to “boxed” and the content is in fact boxed, the shadow goes all the way up to the edge of the screen, which looks weird.
    Maybe you could explain how you set up your section and columns a little bit further, that would be super helpful.
    Thank you!

    1. You need to create a section and then add an inner section. Add the box shadow to the two column inner section.

  3. You stated that everything done in the video would be with the free version of Elementor, but the free version does not have the column feature so I couldn’t use the method you showed. I believe that is a pro feature (given the fact that you’re using pro in the video)

  4. Hello,
    Can you show start of the box creation please?
    I don’t understand how to do it.


  5. Nice video but when you start with it already made it doesn’t really help figure it out.

      1. How have you embedded the transcript in this page so that it is scrollable within the box but doesnt scroll the whole page? I am assuming its done with elementor

Stay Up To Date

Enter your name and email for the latest news, updates, and tutorials.