In this video were to take a look at the call
to action module for Elementor to look at
all the settings to show you how to get those
really cool content grids and how to make
this goal and pretty much do whatever you
wanted to do this is a quick snapshot of what
we can learn how to do in this video were
to be able to make content grades like this
with all the hover effects like this with
all the hope or effects using this call to
action module to show you how to make a grid
like this with no gap in between and also
you're going to see an example of it right
here there's no gap in between the columns
in these columns are going to have different
sizing if you choose to do it that way and
you're also going to learn how to do columns
in the column here's an example of that this
is one big calm and there's a column in the
column you can learn how to do all of these
things in this video hi my name is Adam from
WPCrafter.com where I make WordPress tutorial
videos for non-techies if you knew your consider
clicking on the subscribe button if you don't
want to miss a thing click on the belt little
notification about YouTube let you know what
I have a new video links everything will be
in the video description down below let's
not waste any time let's jump right on in
rights let's try to unpack this powerful new
module that we have with Elementor and it's
the call to action element so let's first
talk about some of the use cases now so primarily
some of the best use cases are now this isn't
a comprehensive I'm not carved covering every
use case but the best you cases use cases
that I see are highlighting grouped contents
and also identifying some important notices
so group content could be may be a category
of products you have for sale or category
of content that you have for sale notices
could be to highlight certain important things
like your calendar a sale or to purchase or
something along those lines and when we look
at how they use that here on the Elementor
blog you can see there kind of following kind
of that same idea of some of the best use
case scenarios for it so when you scroll down
here this is kind of while this actually never
this is highlighting some features and you
can certainly use this for that but I would
I do I would imagine if this was kind of for
a travel site you would want it to be for
some the click here and then go to maybe travel
packages to the various locations and so these
are some of the best use case scenarios that
I find here would be great for e-commerce
if you're hiring groups of products and as
we go down that is kind of some the best use
case scenarios that I find with this element
now let's try to take a quick overview of
what the features that are going to be available
in the options in this module so we were actually
in the module it will all make sense so first
of all there's three pieces the content that
goes into a call to action element it's going
to be your background this could be a color
and images can of your content and this will
have a title ill have some body text and a
button and one of the features that I think
I'm so glad they actually added and this opens
up a whole realm of use case scenarios for
me is the ribbon so that would be that ribbon
off to the side so let me try to find an example
of that so here it is so we've got an image
we have our headlines are not using and that
example the body text or the button and then
we have that ribbon I really love the ribbon
here's an example with the ribbon and as you
can see you have side-by-side options on it
but we have our title our text in our button
those are the three main pieces of content
that go into each of these elements now you're
going to have to styles that's can it be classic
and covered let me just quickly show you the
difference this is cover and this is classic
so with the classic you're going to have an
image and though be a separate section in
the element for your content now for cover
your content is going to cover the image and
that's it you can see the different ways that
it was used here I finally cover more useful
because in this way of doing it right here
in the classic way you don't really get much
with the image other than it moving like that
so I kinda find this to be really the way
that I think most people will probably end
up using it so now let's look at the different
type of contact effects and that so funny
I just identified a typo in my slideshow there's
actually three content affects that's money
there is the entrance the reaction and the
exit and then each of those groups of effects
you have different ways of doing that so let
me show you what that is and is best demonstrated
using the cover style like this so right here
is the this one right here is using the entrance
effect and that means when you're looking
at it without hovering you don't see any of
that text when you hover you get that entrance
of the text and there's different options
on how it enters and so that's an example
of the entrance so as I scroll down this is
another entrance affect entrance affect like
that now there is let me find a good example
of the reaction so here is the reaction so
it's already showing but then when you hover
the text or in the content reacts so here
it's just lifting up a little bit and you
can see there it's going down a little bit
and down a little bit and that's reaction
now exit is going to be when there's already
text and you hover and then the text and the
content just goes and this is up disappears
so that's can I be your exit F effects for
the different contact content E fax right
there right I'm having some tongue twisters
today and that's fine okay and there's going
to be to mean a background effects in this
is going to be hover and it's going to be
blend and this was actually really easy to
demonstrate down here so this is a hover affect
right you have her and you get that movement
of the image others a great example down here
of the blend affects and this is the blend
effect right here so you see how there is
that different changing of the visual composition
of the image and is actually really need a
ministry there's these really nice controls
we control control blur in all these different
aspects of the color of your image and so
that's gonna be your blend and obviously we've
got our hover right here up there's the exit
effect when you hover you see your text disappears
just gets out of the way and there's different
ways of doing that and lastly I want to talk
about these content grids I think this is
what might have some confusion for people
so when you're looking at any of these examples
there it's all being shown in these content
grids now you can mistakenly think that a
feature of the element is the content grid
but it's not this is just standard Elementor
and how you set your section up so right here
you see there's three columns here and there's
this gap in between the columns and then there's
this equal gap within the different modules
in an individual column and that's all that
this is but I'm been a touch on that in this
video and show you how to make a content grid
like this and this is actually very important
because what you have here is you have a parent
section with two columns and then in this
column you have columns in a column Psalm
in a kind of explain how that is you see this
is one big column in the right here you have
two columns now and I'm also to show you how
to easily get this effect where each column
is edge to edge is actually very simple but
I just wanted to highlight that this element
doesn't create the grade for you you can create
the grid in any configuration that you like
and the call to action element is just one
piece one element in that column so I'll also
show you how to do this is this is essentially
three columns but here the element is there's
two of them in there and then in this column
there's two women there and there is no gap
between the columns or the elements and then
in this column you can actually set a minimum
height for the call to action element so you
can said exactly how tall it will be so dominant
cover that as well some actually started a
little bit of it right here so first I just
want to show you made this content grade right
here I want to show you how easy it is to
make one of these content grids and then I'm
gonna dig into the element itself so the first
thing you need to decide when you're making
a content grade is are you going to need columns
in a column if you're going to need columns
in a column what you need to do is first click
on add new section and choose how many of
the main columns there'll be so in that one
example there was two columns and then right
here there was a column in a column and this
is actually very simple to do you would click
right here and now I have two columns and
then you would go here to see your list of
elements and you would drag the column element
into a column and this is how you get columns
in a column however the other way you could
start a new section is you can just goes directly
to the columns element and drag it in there
so this creates a new section and two columns
but when you do it this way you cannot get
columns in a column sci-fi want to put this
the same columns of module right here in there
you can't do it you can't do it because you
have to start by clicking add new section
and choose right here how you want your columns
to be set up and then you could do columns
in a column such as one of those little intricacies
with Elementor to highlight so right here
let me show you how to get no gap so in this
is a section right here you need to go and
you need to change first the settings in this
section so I'll click right here to get into
my section settings and when you're in your
section settings there's an option right here
this is column gap now by default it is set
to default and this is what it looks like
by default you need to go here and hit no
gap and that will leave no spacing in between
the columns now by default in a single column
two elements will have a gap as well so you
have to eliminate that someone going to my
column settings and right here it's widget
space so by default that's how it looks there
is this 20 pixel spacing in between each module
that you drag-and-drop into a column she also
need to eliminate that by hitting zero and
that's how you get columns that have no gap
and it's very easy to just a couple mouse
clicks and I had to do the same thing for
this column right here to eliminate that widget
space so that's how you're in a get one of
those content grids that you saw beings demonstrated
right here okay now let me actually also show
you how I got the middle one to be taller
than these two right here so let me just go
ahead and delete this middle version of it
okay so this is how it looks now let me duplicate
this right here when a duplicated and then
I'm going to drag and drop it in there so
this is Outlook by default right three columns
and then in this column and in this column
I had the element appearing twice what's really
nice is this module is just so stinking flexible
so I can go into the settings for the call
to action to click on style right here in
that we have minimum height and you can see
right here I can make this is as whatever
the height I want and so I think for this
it was like 530 year something five sexy 560
right there you can see it just fits perfectly
like that and I have that content grade and
obviously look a lot better if I had contrasting
images is just the same it image across and
across okay so wanted to get through that
so let's go ahead and talk about the settings
that are available in side so I'll go ahead
and I'll start and content so like I said
in the presentation part of this video you
there's two different skins or styles and
so I have it set the cover but this is what
the classic looks like see you have your image
and then you have a content area and it's
all adjustable so it essentially took that
minimum height and I think it applied it here
to the content section which is fine all right
so you have layout options and so by default
it's image content but then you can have a
content image or then image content and a
perfect example of how that's being done is
right up here so this is just the one call
to action element but we have the image on
the left and the content on the right so if
I go like this you could see the images on
the left and the content is on the right and
that's all that that is here you can see little
better going like this that's all that is
and if I wanted to flip it I can go like that
where the contents on the left and the image
is on the right so that is what you can do
there with the classic skin and then we have
to set an image of this would be the image
here or if we are on the cover skin it would
just be the entire background image then we
have our content area right here and there
is heading and there's somebody content here
for the description but you don't have to
have some of these elements so if you didn't
want that you can just highlight it and get
rid of it and if you didn't want a button
you can just highlight and get rid of that
and now you've gotten rid of the buttons you
can have exactly as much content as you want
in there and then here's my favorite features
this ribbon is so let me just put something
in here and there it is 50% off sale and then
you have position options I can have the banner
he I mean the ribbon here on the left and
I can also have it there on the right and
you can change the style of it I made it green
by default it will be black okay so now let's
go ahead and click on style and see what some
of these options are security got a glimpse
we can adjust the height of the box and that's
how you're gonna get those though that grid
where you would have one that's double the
size of the other we have our alignment like
this and you see it's aligning the text and
you can also position it right now it's at
the middle but if I wanted to be on the top
or the bottom so I wanted the top left there
it is or the middle left I can do that and
those are options there and of course you're
familiar with our height patting that's going
to be self-explanatory there okay so we have
some content styling right here change your
fonts anyway that you like it's and one of
things is you might want the color of the
text to change based upon whether it's its
normal state or its hover state you have that
option as well the ribbon you have full control
over the ribbon so you can set your background
color I did said it to actually wait the green
might not of been default that see so here's
black whatever color you want for that ribbon
you can set it right there and you can also
set your text color of course this is kinda
nice you have a distance so if I wanted this
to poke it out just a little bit more you
can do that right there or by default it's
just can end up being perfectly placed rights
based upon the text that you have but if you
want a little bit more space on the top of
the bottom you have that distance option and
every topography and you can do little box
shadow if you wanted it to lift it up off
the page a little bit so right there you could
see it's lifted up a little bit based on this
box shadow right here and that gets rid of
it I would probably use it with the box shadow
so it kind of stands out a little bit right
now let's take a look at our hover effects
and so let's first take a look at the ones
that I said you have the three content effects
in the group so here's where it's his entrance
and here's your various entrance options here's
your reaction option so entrance there's going
to be by default no text but that when you
hover your see the text so here's a perfect
example you see Ike I chose this and the text
disappeared but now when I hover there is
my text okay next would be the reaction and
so that's when I hover it's going to go and
perform that animation and then hears exits
so when I do this and now when I hover the
text is going to go away now was really nice
and I wish this option was in some other modules
more like the animation module you have this
duration option in this is great so you can
choose how fast or how slow this is going
to happen now I kind of find that in my opinion
that's a little too slow I would like mine
a little faster you can see it's now a bit
faster so you have full control over that
now let's take a look at the background that
is going to be your hover animation and then
here is the blend mode animation now the blend
can be applied on normal or hover it's up
to you so for the background it's zoom it
is all self-explanatory move rights you see
how it moves right a little bit that's kind
of interesting right but then you really get
to have some fun with the blend mode right
here now you get these options but then you
also can do more with these CSS filters right
here you have these controls she can blur
bright contrast saturation you can tweak those
however you want this actually really neat
thing and I hope they add this to other parts
of Elementor I'm sure a lot of work went into
adding this CSS filters right here now remember
you can apply these based upon the normal
state or the hover state it's completely up
to you soliciting a look at these really neat
CSS filters okay so we have the blurry and
when you adjust this you see can blur and
you have full control over that we also have
brightness of the image we also have contrast
and we also have saturation so if you're comfortable
playing around with images you'll see that
you can do some really creative things with
this feature and I really liked when the way
they demonstrated it down here this looks
perfect for a team I mean it's great apps
perfect for a team or staff grid like this
you can do something where you're implementing
your brand's colors and then when someone
hovers over it the image will come into the
way it should normally look and you can reveal
the person's name and title I thought that
was a really great application for the module
so and lastly just you know these style options
they change based upon the skin you're using
so if you have the classic skin right here
you can see there's gonna be some additional
options for getting it to look how you wanted
to look so that's pretty much it for this
video on the call to action element that is
in Elementor Pro now if you don't have Elementor
Pro just visit WPCrafter.com/Elementor I have
a pretty nice set of goodies to help you get
the most out of Elementor when you purchase
Elementor Pro and all the information is going
to be right there is also linked in the video
description box down below and I'd like to
hear how you plan on using this call to action
Elementor some great use case scenarios that
you can think of for it down in the comment
section down below hey thanks for watching
this video and I'll see you in the next one
