Elementor Design With Gradients – Create Stylish Feature Boxes With Elementor Page Builder

Articles, Blog

Elementor Design With Gradients – Create Stylish Feature Boxes With Elementor Page Builder

Elementor Design With Gradients – Create Stylish Feature Boxes With Elementor Page Builder


Welcome back to another video my name is Adam
from WPCrafter.com 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

25 thoughts on Elementor Design With Gradients – Create Stylish Feature Boxes With Elementor Page Builder

  1. Here is a link to download the feature boxes I used in the video: https://www.dropbox.com/s/6b720391seek8d4/feature-boxes.json?dl=0
    Order Elementor Pro for free access to my Elementor Training Course: https://www.wpcrafter.com/elementor-page-builder

  2. Hey Adam!

    A great feature indeed! Just a note here about the gradient color location option explanation:
    This is basically a percentage value of where the color starts. This mean if you set first color to 50(%) the second color should be set to 50 as well to get the sharp line.

  3. Thank you once again for all these information. Elementor is the best at this moment. I will by the pro version.

  4. Hi Adam, how does one build a gallery of videos i.e. when you click on a thumbnail a pop up window opens playing the YouTube video embedded. Thanks In advance

  5. Nice video but what happens when you open this on mobile? I checked studio press and the image just gets hidden, is it the same here?

  6. When I create a 1-column section and I go to set the background, I am using a 1920 x 1080 image and nothing changes. (Following the same process you do at 3:40) The background remains white. I can change the background of the section, however without problems. I don't understand what the issue is. I had Divi + Divi Builder previously before, but switched themes to Nikkon. Any ideas on why I'm unable to change the column background? Thanks for the great tutorial btw.

    RESOLVED: For anyone with a similar issue, here's a quick rundown. In Elementor, make sure that when you create a new column you put some sort of module in it before trying to change the column background. I think this is why Adam put the 2 columns within the single columns. Then it'll let you go ahead and change the background. 🙂

  7. Where is the link to download Elementor Pro and get the free videos? I mean I go to https://www.wpcrafter.com/elementor-discount-bonus-offer/ and even in an incognito window it doesn't work. If I right click there is no option for incognito tab neither.

  8. Plz.. Upload A Video Tutorial For How We Can Use Image Header Slider In Elementor Free Version.How Many Slides Can We Use

  9. HI; I just signed up for your 3 steps to WordPress success. My question is that you speak very positively about Astra and Generatepress; I am new at this and I have a website that I have not set up yet and I am wondering about which should I go with as a newbie? I have down loaded the free Elementor as you suggested. I hope you can help me decide between the two themes using elementor. Thank You.

  10. hello there ! thank you so mush , i learned so many things from your youtube Chanel and free courses offered , I really appreciate your works , can you please make a video on how to create a  amazon affiliates website ? like recommended themes and plugins  to use in Amazon affiliate sites ,  thank you …

  11. Hi Adam, I just wanted to say that I use BB rather than Elementor, but after seeing this I wanted to see if I could replicate it in BB. It worked like a charm. Awesome! This video completely made my day. If I purchase Elementor down the road, I will definitely chase down your affiliate link first. Thanks for all you do!

  12. Hey Adam! your Elementor is just amazing, I'm new to it. I cannot place my columns anywhere of my article most convenient to me…. is it default? what can i do in this case?

Leave a Reply

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