How to Use the Flip Box Widget on Elementor Page Builder [Pro Feature]

hi this is David from elemental and
today I’m going to show you how to use
the flip box widget the fill box widget
lets you create an astounding clip
effects while being hovered in this
tutorial we’re going to go through
designing our background editing our
content such as title and description
and of course the flip box animations to
begin with let’s search for our fly box
widget let’s drag the widget to area
once we put the widget in place you’ll
see the content tab and start app let’s
go back to content now note that there
are two tabs content and background
let’s go back to content now if you wish
to change the icon or the graphic
element you can click on none it’s going
to disappear or you can click on image
pick an image let’s say this one and you
can choose an icon from our list now as
you can see there are more options such
as view you can choose stacked or framed
and you can choose a shape square or
circle now if you wish to change the
title or description you can change the
titles here and right click box and you
can change the description right here
now let’s go over to background in
background we have two types of
backgrounds my classic and the gradient
let’s go over to classic in classic we
have color you can choose a solid color
such as blue green
and you can take an image now most of
the time the image will be positioned
not so right so you can choose to Center
the image by clicking here there’s also
attachment you can choose close or fix
and you can choose options from repeat
and let’s pick the size of cover or a
very nice feature we have here is the
color overlay this can make your image
much nicer you can reduce the opacity
now I’ll show you the gradient
ingredients you have two types of cause
you have the first color and you have
the second color for each color you can
choose the location
and you can choose the type of the
gradient radial or Linea and you can
choose a position of it by click on
position now as you can see there’s also
a cover over here but we’re not going to
go into it right now now let’s go to
side beam now it’s important for me to
mention that if you click on side B you
won’t have any clip effect only to click
on side a side beam is quite similar to
side a but the main difference is that
you have an option to put a button here
let’s write on bottom text clip box now
this is also an option to put a link
inside now as we put your link inside
you’ll see more options apply link on
you can apply your link on button only
and whole box and you can also open it
in community tab by pressing this one
now let’s go over to settings it is
height and border radius let’s set the
height and that’s set for the radius to
be more rounder
now the most important thing are the
clip effect there is flip there is the
slide there is push zoom in and zoom out
and lastly face let’s go back to flip
now flip has also directions has right
left up and down now the most unique
thing about the flip effect is that it
has 3d effect I’ll turn it on let’s see
you can choose direction let’s go to the
other slides as you can see they also
have directions right up and down and
that’s it for the settings now it’s
important for me to mention that if you
click on side B you won’t have any food
effect only if you click on side a let’s
go to the style tab but before let me
just change the height so you can see
the changes better let’s go and change
the background solid and let’s go to the
style now in style you have a front side
and a back side let’s go to the front
side now in front side you have padding
we have alignment and you have vertical
position let’s change the padding to 13
let’s set the alignment you can set all
left or center or right
you can choose the vertical position to
be top or middle or bottom next we have
the both type you can choose solid or
double dotted or dashed you can choose
the width you can pick a color now next
we have the icon setting you can set the
spacing between the icon and the title
you can set the primary color you can
set the secondary color and you can set
the icon size to be like this and the
icon padding you can rotate the icon and
you can play with the border width you
can also choose to set the border radius
to be square now as we go along we can
set the spacing for the title the
spacing between the title and
description you can change the text
color to be let’s say yellow you can
choose to turn all the typography and
check out the typography settings you
have size we have family wait transform
style line height and letter spacing
turn it off you can also set text color
for description and the typography now
let’s go over to the back side here you
have padding alignment and vertical
position it’s all the same if you scroll
down you see there’s an option to design
the button something that wasn’t before
so you have an option to create an extra
small and extra small small medium large
and extra large in this mode you can
also turn on the typography here you
have more options like text color you
can choose a text color to be blue you
can choose a background color to be
yellow and for the choir to be
you can set the board with and bow the
radius to be circle also you have the
hover it’s the same options you can set
text quality here and then you will see
what you hover it changes I hope you
enjoyed our video for more videos and
tutorials please subscribe to our
youtube channel