Tab Components in Webflow

All right guys.
So let's keep this simple for the

products section I have the tabs component
we are going to use

where you click each one of these and
then you get some details or summary

of that headset

so, the first screen is going to be the
intro screen, we have here some

headsets on the sides, that are gonna be
floating, we have a nice background

the inicial headsets buttons, so let's
start there

ok, so let's go back to our Webflow
and on the section we wanna add

a background that is of that tilted
movie screen we have designed

and there is like a little fade and
also add that directly on the

background right now,
so if we go back to the homepage,

to the body, cinema-bg we have a
background that is the panoramic

cinema zoom, but I wanna fade that
out, they way I like to do that is by

adding another layer overlay so,
right here a color overlay will

give us the ability to change that
of a color from the swatch, and just

fade that out, just enough until the
actual background or the cinema

is barely visible, so around 70 or
73 is pretty good, I think we will

keep it there.
Now I can add a combo class say

this one we can call it "products"
and the reason why I'm adding

this as a combo class is so that I can
simply change the background image.

There we go.
And we remove the tiling and we don't

want it fix, we just want it to cover the
entire screen, and we want to fade this

one as well so we can do the overlay
as a secondary background

so let's do that, let's make that overlay
the same and make that fade to 70%

opacity, I think it might need a little
bit more because is still very visible

so I think about 80 is a good number
right there.

So if we were to preview this, we
have the nice background fix on

the end of the cinema.

Let's add a container

and inside this container we want to
remove this heading and instead

we wanna replace it with the tab
component.

So the tab component is actually
very simple it just got some tabs

that as soon as you start tapping
away you get to see some of the hidden

content, there is many ways to make
this... turn this into a creative component

I thought about this could either be a
slideshow and so right now we want

the first tab to have this title and the
second tab to have this cards.

All right so, let's go ahead and turn
those tabs into headsets by importing

our images the way the tab structure
is, you have the tabs components

wrapper, the main container
you have the tabs menu where you

have up to three tabs and then you
have the tab mask, this is where

everything is contained including
the panes, so each pane you can see

here is tab1, 2 and 3. Right now we
don't have any content but we can start

adding a header...

Make sure we use the class that we've
already establish, "button" and this is

gonna be "secondary" because we want
it to be orange, we can also bring the

scroll icon from the very top,
so scroll icon...

And here again we can use additional
global classes for spacing,

margin bottom 40 to add that space
between this 2 elements.

All right,
and then these tabs components we

can start adding some padding, and
notice we don't have a class yet created

but we are gonna just not worry about
that just yet, let's continue adding

our tabs, so instead of having a text
block over here, I'm just gonna simply

add the images...

and of course they are massive so we
wanna re-scale them so that they are

a little bit smaller, they match the size
over here, so this one is about 190

so that looks good, but then there
is also some spacing here happening

let's remove this text block and this
spacing is happening because the

tab link is by default adding those
properties

ok, so what we wanna do is remove this
property, let's make this transparent

but notice how is selecting the current
tab, this is not what we want, what we

want is to actually choose the tab link
and start removing this color so let's

change this to transparent, and we are
gonna change the name of this

and we are gonna change the spacing also
so that is 0 on all sides.

We are gonna do that over here
so we are gonna say vr-tab and this

tab that we created accidentally
we are gonna remove it and we are

gonna call this tab, there we go
and we are going to remove the

class that we created vr-tab...
this one, this class we don't need it

so let's remove it...

ok, and again this vr current does not
have a...

let's see why is having a background...

ok, let's add the image into each of
these tabs, remove the text block

and paste the image, remove the text
block, like that

and we could start changing some of
these values to the images that we want

so this one like that, and this one can be
the blue one and this one can be the orange

all right, let's see how this matches here

blue, the color and the orange at the end...

this first tab still has those colors, so let
me make sure that we don't have any

backgrounds set... on the VR headset

so we have no background here, so that
looks good...

and what we wanna do es make sure that
the active state does not have a background

this one has an active state so the
current is actually using a different

background, so if I select that then
I go back to transparent there we go

ok, this is good so let's check this out

and if I click each tab we can't really
see any states happening because

haven't set any state for each one of
these buttons, but at least we got

it to work.

Let's add some padding across this
container, or the tab pane #1

what I like to do is again go back
to the utilities and just simply add a

class called padding and then the value
of the amount of padding we are gonna

add, so in this case I wanna have
20 padding, so that means I would

have to create all these, move it over
up to 20, so just like that now we have

a class that's global called padding 20
that's gonna affect all of the 4 sides

of that box.

Let's make this just a little bit
smaller, I feel like these VR tabs

are still really big, so we are gonna
eventually separate each element

so that we can add some animation
down on another lesson, but for now

I just wanna make sure that we fit
them within that space so that they

don't look so massive.

And we are gonna add some spacing
between them as well

so the spacing between them can be
done the same way we did with the

movie covers, so we would have
a class that we have for spacing

only the right and left and that
global class is called mx-12

so if I use that mx-12 those styles
that I've already establish on that

global class is now being applied
over here.

Next stop, what I like to do is add
the side headsets that we see on

our design, these headsets were rotated
about 45º roughly on our design

but I don't want to export them
already rotated because they

would take a huge amount of space
if I were to export this as a PNG

if you look at the preview there is
an excess of empty transparency

on both top and bottom, so what I wanna
do instead is just simply export that

directly from the original file and these
files are actually a little bit smaller

and they don't have that much extra
space and transparency making that

file a lot smaller in size, so I've already
exported this both, and let me go ahead

and add them into our navigator panel.

I start by adding a div-block

so let's call this headset and I'm gonna
add the image inside of it and right

away of course this is a massive image
it's actually really big, but it's has been

compress so we have a little bit of
a smaller size, so we wanna change that

to absolute, this one is going to be our
right headset, I'm just gonna call it "right"

ok, this is gonna be our right headset
and we can start defining some properties

like the rotation, the way we rotate any
element is by going into effects and then

on 2D and transforms we select the...
we click on + and simply start changing

the rotation on the Z index, so if
I start moving this around this rotation

is gonna occur.

So, this is looking good I'm gonna
rotate it about 45º so -45 and because

this has a combo class the "right" combo
class in the headset, is only taking care

of this value, but I also wanna move
it to the right, so if I move this over

to the right, it's immediately disappear
because it's position absolute relative

to the body, but what we wanna do is
make it relative to the actual section

right?
so the section over here we need to

change the section on the combo class
products to be a position relative

and right away our headset is back on
the screen

ok?
so now that it's align to the right

we are gonna use the same technic that
we used for the top hands

where we wanted to align to the center
and then offset it from the right

and from the left, so we do that by
selecting the headset, we are gonna

align this to the 50%, so he is gonna
scale it of course because there is

no width value, we haven't define
a size, so the first thing I'm gonna do

is just set up a simple width for
this element, it's gonna be 900px

if I were to hide this, and this is where
it's gonna start, so if we wanna center

this completely to the middle we need
to offset whatever the 50% of 900px

900/2 is 450 so if we were to do -450
now the image is going to offset -450px

which is the exact half of 900px and
that immediately make's that center

in the middle, the next thing I wanna do
is bring back that rotation...

so tun on the rotation and continue
adding some of those settings for

the center of this screen, so 50%
to the top and the height doesn't

need to be set when we set the 50%
but we can start kind of giving it

an offset based on what we see on
the screen, so just around there

I feel like it's a good place to be
but we don't want it to actually

be align to the middle, instead
we wanna start offsetting it

way out of the middle, so we are
gonna have to move this even more

further out until we have more visibility
of these elements.

All right let's do the same with the
other side...

But the problem with doing this is
that whenever you create a floating

element, that is extremely long and
starts to fall outside of the canvas

view, this is gonna happen, we are gonna
start seeing an excess of that graphic

coming out of the section that we have
defined, and this is not good because

then you have both horizontal and
vertical scrollers and it can get really

really confusing and frustrating for users.

A simple way to fix this kind of issues
when elements start to fall out is to

select your section, in this case the
products and there is an option

under the size category that it's
call overflow so anything that is

overflowing this content, we can
hide it, what that does it almost creates

a mask around the section and as you can
see that immediately fixes the problem

of having that coming out of the section

but then we have another issue, which
is because that behaves like a mask

now is cutting off the overlap that we
wanted on the devices handles.

So, what I'd like to do instead of setting
that overflow on the actual section

I'd like to set that all the way to the
body, so going back to the cinema-bg

we know that any excess of elements
will probably want to be cut off

horizontally, so let's turn that overflow
on, and notice that it's gone

but then we still have that overlapping
that really cool overlapping feature on

the sections.