On this Webflow lesson we take a look at setting up tab components. How to use the tab component creatively in Webflow and how to position absolute elements to the center of the screen in Webflow.
All our project files for you to practice and play with along with some bonus materials.
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
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.
Coming Soon
Access our premium community including bonus tutorials, project files & weekly resources.
LIFETIME 💎 ACCESS