On this Webflow lesson we take a look at the power of Flex layouts. How to align our elements vertically to the viewport in Webflow and how to add background images with fixed position using 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,
the next thing I wanna do is bring over
that background that we have from
our design in Figma, I've already exported
my assets so I'm just going to go ahead
and start selecting that image and adding
it into our assets, so this pano-cinema-zoom
I'm gonna click on that, it's gonna upload
it and boom... right away I know I
have that in my library and I can start
utilizing it in my canvas, remember the
body has a global class but we don't want
to have that actual background to be
in every single page we actually just
want it on this homepage, so for that
reason I'm gonna create a class called
"cinema-bg" and I like to just have a dash
on my names, just like that, cinema-bg
you can call it however you want but
this particular homepage is gonna
utilize that background image, so
the dark color from our swatches
notice how that is actually changing,
now everything is not visible the tittles
are gone because the tittles are using
the overall body styles.
I can change the typography to be white
so I can change that back to white, so
that all font sizes use the color white
so now we know that this cinema-bg
acts like our dark mode overall class,
so the cinema-bg is gonna take care
of the colors of the fonts and is also
gonna take care of that background
image, right know I've only selected
the color so I can click on the + icon
and over here you get a little pop-up
with additional settings, I'm gonna
click on choose image and find the
one that I just uploaded.
I click on that and just like Figma,
what Webflow does and HTML documents
do is they upload the image as a
background and start tiling it, so
repeating the pattern.
It doesn't matter what size it is,
it's always gonna do this by default
so because it does that by default
we wanna remove the tile horizontally
and vertically and just toggle it off
just like that so I don't want any
tiling but then the image is extremely
tiny, you can see it on that top left
I want actually make that expand
or cover the entire container, if I
click on preview notice now that
that background is tiling all the
way to the full with of that container.
But if I start scrolling down, well
what's happening is that the image
is not repeated anymore, the tiling
is gone, what we want is actually
to make that image fixed throughout
as we scroll down.
In order to do that, we simply select
the setting over here and make sure
that the image is selected as fixed
image.
Notice when I click on preview now
that image is gonna follow us and
it's almost that illusion of all the
other elements are in front of it.
Cool.
All right let's add now our logo.
We have a couple of items here and
we created an auto layout with some
of the elements and space between
of 16px, so we have the logo Stream VR
Video on demand now on VR and then
the paragraphs, so this could be an H1,
this is a paragraph, and this is a simple
button.
So, let's simply add that now so we
have here on the section, we can add a
just add by ⌘K we are gonna add an
image.
And on this image we wanna upload
the SVG that we've already exported.
There we go it's about 300px, we wanna
swap this out so that the logo is on top,
then this would be Video-on-demand
now on VR.
Ok, so we have the H1 heading, notice
there is no classes, let's add a paragraph
and the paragraph is...
...
And finally we are gonna add a button
so, like the button is gonna just say
Get started.
So this button we already have some
classes establish, if you remember on the
playground we are gonna call button
and we call the primary button because
this one has a nice gradient that we have
established.
Now, what I wanna do is I actually want to
align everything to the center.
The way Webflow allows us to do that
is by using something similar to how
the auto layout works, in Webflow this
is called The Grid, right.
So, we could use a grid to start adjusting
and adding some spacing between each
of these, notice how if I click on the add,
you have the grid component, but before
I actually show you the grid and how it
works there is another solution for this
and it's called flex layout, so on this
layout property panel, and by selecting
the section I can actually have this turn
into a flex layout, so just turns both the
children into a horizontal or into de
vertical axis similar to how auto layout
works, and what is happening as soon as
I created the section to become a flex
it starts to put all those elements into
columns, because right now we've
selected the horizontal by default,
but I actually want to have them
vertically to each other, so I can
click vertical and now they are stacking
one over the other and we can adjust some
of the alignment of each of these elements
just like we saw on previous lesson.
So I wanna center those and I wanna make
sure I am justifying everything to the
center, so justify is the actual setting
that allows everything to be completely
justified to the width or to the height
of the container.
Let's jump in to the next lesson so
we can take a look at how we can start
adding some of that space between
these elements.
I'll see you there.
Coming Soon
Access our premium community including bonus tutorials, project files & weekly resources.
UNLIMITED ACCCESS