by Adam Preiser updated August 20, 2017

Elementor Tutorial – How To Use The Flip Box Module ????


Share on facebook
Share on twitter
Share on linkedin

Learn how to use the flip box module for Elementor Pro. This new module will add professional touches to your website, if used right.

Elementor Pro is the fastest page builder for WordPress. It is very easy to learn how to use and master.

Video Transcript

Elementor Tutorial – How To Use The Flip Box Module ????

Welcome back to another video I’m Adam from where I make WordPress videos

for non-techies and in this video to show
you a new module that was just released for

the Elementor Pro plug-in now Elementor is
the free page builder for WordPress and it’s

the most feature-rich freely available page
builder for WordPress but they also have a

Pro version right here and you can go here
and find out information about a link down

below I also have a coupon code if you’re
interested in purchasing it and I have a free

bonus offer where I am giving you access to
my Elementor essentials course it’s a $97

course but you’re going to get that for free
let’s take a look at this new flip box a feature

that was recently added to Elementor now one
of the things I like about Elementor first

off let’s just get this out there when they
started selling the Pro version of their plug-in

actually let me scroll down to where it is
here’s the page for their plover Pro version

came out December 2016 and they haven’t released
everything for it yet that they wanted to

these Pro modules so you can see all these
Pro modules here that they really wanted to

release but they had in yet and they are making
good on what they said they would do so there

showing a carousel of flip box twitter feed
MailChimp and they’re doing more than that

but they’re actually making good on that so
this is the flip box that was just released

so you can find it after you update your to
find it in your Pro elements in its own right

here called flip box now this update actually
has some other updates as well that I’ll show

you but right now it is just the flip box
so go ahead and drag and drop it in there

now this is obviously probably not how you
would use your flip box you would probably

have maybe a section that has maybe three
or four columns in it let’s go ahead and do

that now, click on add new section let’s just
go with three columns and then I am going

to drag and drop this into the column here
okay here’s my flip box and let’s just duplicate

that a little bit and move it around so now
I have a section with three flip boxes now

let’s talk a little bit about flip box etiquette
I actually don’t like flip boxes like this

you see how just flips I actually kinda find
it a little annoying if I’m on a website and

I just hover my mouse and you get this crazy
flip here now the good thing about Elementor

Pro is the flip box feature that they have
has different actions of for the instead of

flipping’s you don’t have to just flip sauna
click on it here and get into the settings

and then I’m going to collapse this and go
to the settings of this particular flip box

and see you get this flip effect here and
you can see it comes with the six different

effects so I’m not really out of flip type
a guy so let’s see what the slide looks like

it’s okay it’s kind of dramatic so that probably
wouldn’t be my first pick either the push

this is the push you so the difference is
it’s pushing the content up and so that’s

a push and you also have directions you can
push it different direction so I wanted to

push it left like that you can see it’s a
little easier on the eye than the flip let’s

see the slide I had options for that as well
now let’s look at some the other one zoom

in now like the zoom in this type of effect
it has a more subtleness to it it’s a bit

more elegant in my opinion let’s look at the
zoom out so there’s the zoom out I really

like to zoom in and zoom out and then this
is probably the most elegant of them all is

a simple fade when you hover over it you get
a nice simple fade like that now each of these

sides you have settings that you can use so
the first side is just side a now for each

side you have to layers the top layer is good
to be your content layer and the bottom layer

is good to be your background and when you
choose a background you have your typical

options you can have it be classic which is
an image and then maybe a cover overlaid over

that or you could go straight to a gradient
if you wanted so for me I will choose the

classic and I’m going to go and pick a background
image I have some good food images here so

let’s go ahead and choose maybe this image
right there and then you can see though when

you do then you have text on it you you kind
of want to put a color overlay so it makes

it easier to read that text so to doing a
color overlay you just scroll down here to

cover all overlay let’s try to pick a nice
bright color be something like this and then

we have to adjust our opacity so we can have
it be a little bit of a see-through like that

so you can really have a do whatever you want
if you want some color like this you could

do that and that will make the text a little
easier to read just like that and then you

can come to content and choose whatever content
you want your title your description now it’s

one of my favorite things about Elementor
is they have this file tab and you can style

everything you can style your font your text
every aspect of this can be styled so that

is the basics of using a flip box let’s take
a look at this one right here and see if we

can actually create something that’s useful
so let me go he had and choose the classic

let’s choose an image I’m in a choose a darker
image maybe this pizza right here and I want

a color overlay but this time I’m going to
go with a darker cover color someone go black

and then let’s just make it a little see-through
like that so you can really see that text

I’m probably not a fan let me go back to content
probably not a fan of having an icon it also

many get rid of the icon like that you don’t
have to have one and technically you don’t

actually have any kind of text I can get rid
of the title and description if I just wanted

an image there now I’m a go with the fate
of fact I’m kind of thinking that that’s gonna

be my favorite effect I like subtle transitions
like that so let me just jump in there and

change the effect to it fade like that and
then let it fade into something different

that’s great so now what I’m in a dues I’m
going to slide B and die let’s go ahead and

set that background I’m in a choose an image
and so I did the pizza this time actually

not be interesting if you hovered and the
color just changed that might be a real creative

use for it so when I’m hovering right now
we don’t see any kind of change but let’s

see if I make that overlay a more prominent
color so let’s go with the green here and

let’s maybe go like that so and then some
opacity in there so there we go let’s see

what happens when we do that so let’s click
back to slide a and then let’s collapse the

interface here and see what happens when I
cover it like that hover over it like that

you can see the color overlay is changing
and the text is changing so it’s a more elegant

way to use a flip box and have it be more
of a subtle transition to AB display some

more information so this is the flip box I
thinking you can do some very creative things

with it I think it’s a very powerful add on
that was just included in the Pro version

of Elementor now if you don’t have Elementor
Pro I’ve got some great news for you I have

a special discount code that is valid right
now I don’t know how long it’s gonna be valid

for but with this coupon code your to be able
to take 10% off the cost of Elementor Pro

know what you need to do is click on the link
down below in the pin common or the link in

the description head over to Elementor’s website
choose the package for Elementor Pro that

you want and when you’re checking out enter
WP tend to save 10% now what you want to do

if you want access to the course you would
like me to enroll you in this course for free

just go ahead and contact me forward me a
copy of your receipt of verify that you purchased

it through the link that I provided and I’ll
gladly enroll you in the course and I’d love

to see in the comments them below what you
do with this flip box box feature or if you

have any links to websites that have really
good examples of using a flood box in an elegant

way I would really love to see those that
we can kind of put our minds together on the

best way to use this powerful new feature
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 that subscribe button and

become a subscriber and support this channel
and if you’d like YouTube 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. Hey
    I’ve noticed that you can’t create a new line on the flip the back of the flip box. Pressing return does nothing. Any idea how I can sort this?

    1. You may need to use a little HTML in some places. To create a new line you just need to add this code:

Stay Up To Date

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