On this Webflow lesson we import our Figma assets. How to float elements on our page using Webflow's position absolute and the difference between position relative and absolute 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.
Next stop, we are gonna add a couple
of the other assets that we have created.
The left hand and the right hand, the
scrolling icon and some of the brand
icons or brand logos that we have in the
very footer.
Let me actually toggle off the grid so
we can see them clearly, and I can start
adding all the images that I need into
the actual canvas.
As soon as I do that, we are gonna
start seeing all the assets added now
into my library.
Let's go ahead and just replace,
make sure that I replace this
with the image, this is a really big
image so, what we wanna do is just
duplicate this 2, make sure that they are
the correct order.
And what's happening, everything
is being push down but everything
is being push down because of course this
is using a 100vh and it's not gonna go
past that, everything else gets hidden
above it, so if I were to toggle this off
then it just go back to the auto, so
whatever elements that are inside
it will expand down.
But then everything else of course
all the other sections are no longer
expanded 100%.
But that's ok so like for example these
2 hands we want them to be actually
floating on top of our boxes, but in order
for us to do that, we need to change their
box behavior so they're no longer position
in a static way, similar to how all the other
boxes are stacking one next to each other
or above each other.
The way we do this is by, we establish the
class name on each of these hands
so I'm gonna call these vr-hands, I am gonna
call this class vr-hand.
And we are gonna do that same thing
with this one vr-hand, what is the
properties that this 2 will share? well we
are gonna change their position to become
an absolute element by utilizing the
position absolute we are now no longer
viewing these elements on the X and Y
but now they are on the Z index.
You would have Z index going positive
numbers and Z index negative numbers
so ain't no matter how I organize these,
these elements that now are on the Z index
they won't be affected by the stacking of
the box model.
They are now on their own, they are
now floating above the box model.
So I'm gonna go back here to my
reference of Figma and I know their
sizing here is about 130px...
so let me just scale this down...
so 130, making sure both of them
are the same, and we can toggle back
on the section with the vh so 100vh height
on the section, just so that we can see
that being expanded to 100%.
Next, because we have identified this
as position, we've change the values to
an absolute position, we can decide where
we want to align these hands based on
the route of this document or in this
case the body, if we wanted to align
for example these hands relative to
the actual container or to the section
we would then need to create each of
this sections position to become relative
the best way to explain this is if I move
this 2 hands over into the container
like that, and let's say I wanted to align
these hands to the top of this container
I would have to change the position of
this container to become relative
so the actual position of these hands
would always be relative to whatever
it's contain to, so because we have 2
different hands but they both share
the same properties here of the
position I wanna make sure I select
the right hand and add a combo class
so I can say this is going to be the
right hand, and I can change the
property of that one...
ops actually I selected the wrong
one...
so let me just change this and select
this one, and just add the class name
right hand and notice now that the
right hand combo class has the
position over to the right and now
they are position relative to the
container but if I remove container
from being the relative and just remove
or reset this, then those hands are going
to be align to the root or relative to the
body. So this is exactly what we want,
If I stretch this and I preview this
our hands are now completely align to the
top right and the top left, and I wanna
make sure I align actually this one
to the bottom and this one to the
bottom right.
Just like that.
Ok
So that's the main difference between
position relative and position absolute
that we are now utilizing the Z index
to align and position our elements
above our box model, if I started to
play around with the combo class
with the 50% I can see the hand moving
in and out from, moving on top and
overlaid on top of all the other elements
and I were to do the same with the
other hand what would happens is,
I could start changing the values of
the left hand.
We don't want to have the VR hands
start changing some of the original
values of the percentage and position
because that same class is being used
on the right hand, so instead what we
wanna do is we wanna make sure that
we have reset kind of our styles here
so that we don't have really any position
establish for the vr-hand like so...
We only want the position absolute
to be establish on the vr-hand.
But we are gonna create a combo class
called left hand and then this one we
can start playing with the actual position
so, something like this. Right.
But because we are using percentages
that's gonna change based on the
percentage and how wide your browser
is, so right now if the browser window
was a bit smaller like for iPads, then
this would be 60% to the left and this
would be 60% to the right and this is
not useful because we want this...
if this gets really really really wide then
the hand will probably not stay in the
middle, it won't stay near the actual
title.
What I wanna do is make sure that these
hands align and stay near the center of
the screen, so the way I like to do it
is with using percentage.
I'm gonna change the left hand to
be at 50% and I'm going to change
the value to a negative pixel value
until it reaches the point that I want it
to start, so right about there let's say
maybe -400px from the 50% where it
starts, go out negative 400px and I'll
do the same thing with the right hand
I wanna place that 50% to the middle
and from the middle I wanted to place
margin right -400.
So now no matter how large
the device or the window it gets
those elements or those floating
hands will always remain in the middle
no matter what, because it's actually
defined by the 50% and I'm offsetting
it using the margin properties.
All right let's just adjust a little bit
so on the right hand I want the botton
to be just a little bit hidden maybe
like 5%
same here 5% to the bottom
and it's starting to match our design.
Great, we can do the same thing over
with our scroll icons and our logos
let's take a look at that.
What I want to do is add those
icons or those brands on the footer
to match our Figma document, in
Figma we have the Vive the Oculus
and the PS4 logo and I've already
uploaded them into my assets so
the first thing I'm gonna do is go
back to my section and I'm going
to add a div block which is just an
empty block similar to what a container
or a section does except that these 2
you can't have them nested within each
other, as opposed to the div block you
can have div block inside a div block
and then another div block, so in
this div block that I've just created
it's position to be static so it's adapting
to, it's pushing all the elements around
up and down and I'm just going to start
adding the images that I pulled over here.
And I can copy and paste, change the value
to different logo, and just like that
change it to this value.
Now, I'm gonna call this div block "brands"
and this brands div block I'm going to make
it a flex, I'm gonna make this a layout
of the type of flex similar to how we did
the section, we are gonna make it
horizontal and we are gonna make sure
that everything we align it, all the
elements are align to the center and
justify to the center as well.
And what I wanna do is expand this
to 100%, so notice now this brands
is actually expanding all the way to the
root of the document, of the body
and I wanna place them to the bottom of
this kind of section right.
So in order for me to align them to the
bottom of the section, I have to use the
Z index and for that I need to change
this position to an absolute and change
the value of the bottom to 0 and boom...
right away I get that fixed to the very bottom.
Ok that looks pretty good.
Cool, now I can just simply change some
of the values here, maybe I want this
to be 15px away from the bottom,
so it's not completely touching the
edge and what I also want to do is
make each individual one of these...
each one of these have some spacing
between each other, so let's just create
a class for each one of these, I'm gonna
call this tiny brand logo, the properties
are going to be... so I go to spacing
and I say: I want these to be both
about 20px between each other, and
I also wanna change the effect so that
the opacity matches the one over here
in our Figma.
So the opacity that I have here is about
20% so we wanna change those opacity
levels to 20% and boom...
Now we just need to copy and paste
that class over to each one of these.
And just like that we created a nice
set of logos using the properties from
Figma and they are all nicely align thanks
to the flex layout that we have on the
brands and they are fixed on position
absolute so everything is on top of
every element and it's not pushing away
and affecting the content in the middle
which I wanted to be completely centered
using flex as well.
All right now, to finish off there is
2 ways we can do this extra section
here of adding a nice gradient texture
like we did on Figma, we can export this
whole section, this part of the design.
Export that out and then I can import it
over here as a background image.
So, remember we created a class called
"Bold text" so that we can make this a
block element, I'm going to change this
vod-tittle or gradient maybe, yeah
gradient makes sense, ok and the gradient
we are gonna replace this text with a
background image so I can go in here
and choose the image, I have already
exported this as an image "Video on
Demand" I can change some of the
settings so is no longer a tile instead
it's covering, so it covers or expands.
But right now we can't really see it
because the text is of course going
to always gonna be on top of whatever
is in the box, so that's actually being
shown in the back, how can we hide
this text in front of it?
A simple solution is, if you click
on typography and the you go
to more type settings, you're gonna
see something called text indentation
of course text indentation works just
like any Word document where you
put 15px and starts indenting the text
however you like.
But there's a simple hack that it's been
used for so many years a long time
in CSS was that they would hide text
by simply changing this to -999em
and so what would happen is, all
those text blocks, all those little
characters would then disappear
because it's going in negative space
so, but then what would happen is
this little vod-gradient does not have
a size to kind of use as a reference
and we can simply change or look
for the size over here, so it's about
675px the image that we just exported
so we can actually change the size of
these, so 675px and there we go.
This is one way to to this but it's not
the best way to do it because it's not
SEO friendly, what I mean by that is that
google spiders actually crawl the content
and they'll notice that you are using this
hack to hide this text and won't be as
important for them, they will notice
right away and they won't considere that
tittle which is a very important tittle
it's an H1 and star indexing the way
we want it on Google.
So, a way to fix this is instead of
using the text indent and the width
we can actually do this clipping
an image as a background.
So let's take a look at this option.
I'm going to change the settings
here I'm going to reset the width
reset the text indent and I'm just
gonna remove this background
and instead what I did is I exported
the mask image, the mask gradient
on it's own, so you can see that mask
gradient, that exact same square mask
is what I exported and I'm gonna bring
it in as a background image and I'm going
to have that image not tile but I want it
to cover so it nicely to the top and now
what I want to do is without affecting
the actual text so that's it's readable
through Google is instead use this
little option called clipping and if
I click on clipping I just have to select
clip the background that I just added
over to the text that's in front, which
is really cool, just like that we created
that mask utilizing a gradient, a texture
gradient.
But the problem is that sometimes
fonts don't behave the best way,
you can see right here a little bit
of that font is being clipped and
it's not your fault and it's probably
just the way the font was build,
it creates a little bit of a clipping
on the left, a simple way to fix
that is by adding some padding,
so we can have that left padding
space out, so we bring that V that
is being clipped.
So let's go ahead and do that
and it's just very subtle it's maybe
just 10px and that's it, we've created
a beautiful homepage intro with
both the section, the container, and
we've added some really cool effects
like adding clipping to a text field,
we've added position elements to
the Z index so they are floating
above each other and we've align
this using of course the grid system,
the overlay grid system that comes
with Webflow so that it matches our
design on Figma.
This is exciting guys, let's jump
into our next lesson so we can start
building out the top navigation bar.
Coming Soon
Access our premium community including bonus tutorials, project files & weekly resources.
UNLIMITED ACCCESS