Grid Layout and Slider in Webflow

Cool guys.
Welcome back

I want to show you now what we can do
for the features section

if we look back at our design from Figma
course, we designed a quick layout where

we would have a set of cards, one for
movies, one for games and one to create

watch parties as a feature, and we

designed this visual grid that we want to
replicate with webflow, that's inside a

slideshow, so when you click on the
arrows, those arrows take you to

another section, in total there is 3 slides
so you can see here there is 3 little

pagination items.

What we wanted to do is create a design
where this cards would flip when you

hover your mousse over them, and so
that there is the front side of the card

and there is the back side of the card.

We designed both sides and so we now
have exported our assets

so let's take a look at how we can start
creating this with Webflow.

Ok, back here what I wanna do is
I want to first include the component

element that we will need and that
is a slider

simply by clicking on the slider it would
be inserted into our section and right

away we can see that the slider comes
with a few layers underneath of it

so we have a mask layer, we have the
left arrow , the right arrow and some

pagination,
those are all by default stylized so we

don't see the properties here but we can
see some of the properties that come by

default, so for example the font size,
the color and... but the actual

positioning of this does not show up.

So it's kind of weird that Webflow does
that, but by default these components

have some settings that we need to
overwrite to match our design.

If I keep opening up some of this
layers I can see that inside the

slideshow there is a slide1 and there
is a slide2 so, ideally what would

happen is, the content that your gonna
work on, is gonna live in these 2 containers

ok?
so I'm gonna grab the heading that I

already created here, I'm gonna drag it
inside the slide 1, that way we have a

better idea of what these are
gonna look like

so if I put this intro and I copy and
paste this and drop it into slide 2

I know that on slide 2 if I click slide 2
then select the text, I can just say

this is going to be some details right?

so right now, right away if I preview this
and I use the arrows, the slideshow is

working, there is 2 slides the intro and
the details, that is of course the intro like

right here and the details right here,

ok so lets expand this slide show so

that it matches the size of this container.

This section class has already got the
100vh, we wanna do the same thing to

the actual slider, so we can simply call
this slider "section" to repurpose that

and we wanna make sure that the size
and width also matches that, so the

width of the section is 100%
ok?

Now that expanded across so this is
looking good.

Now when I scroll to the next I can see
details and I can see Intro, but the actual

content inside, the actual slider does not
expand 100%

so let's go ahead and take a look, this
whole section is this slider that has the

class section, we no longer need this parent
container, we can pull this out of here and

remove this from the navigator

but we would have to make sure that we
call this section, we set up the ID that

we had original set on the other element
so this one would be called Features

that way this link is actually linking to
features, so whenever we actually

scroll down to that It'll scroll to that
section.

All right so we've call this section and
these slides are actually not expanding

out to the full width because the section
that we have created initially has all

the direction vertical and the alignment
to the center so, right now what we wanna

do is expand this section to stretch but
not on this because then it will affect

all of our other elements that you
sectioned, so instead what I wanna do

is create a combo class call stretch.

Is gonna stretch out all the elements
within this flex layout to fit 100%.

So, right away we can see that if I were
to preview this, now I have both the

details and the intro utilizing this
section being stretch fully.

But I wanna get rid of this background
color so I click on the color, background

color and choose transparent.

Now I can see that it doesn't affect any
other section because all the other

sections are transparent and we want to
be able to see the background image.

So, just like that I was able to do that

but now I wanna start centering all of
our content just like we did over here

so in order for us to do that we need
to add a section because we've remove

the actual section component, we are
gonna just add a section here and we are

gonna just move over the heading inside
the section and do the same thing with

the details, so we are gonna add section
and we are gonna add the heading inside

the section.
All right so now on the section we are

just gonna call the class "section" and do

the same over her because section by
default has a flex vertical alignment

center and everything inside of it is
gonna be centered.

And with that we just created a nice
slideshow without requiring a lot

of class names or classes in our style
manager.

So if we go in here, our style manager
stays clean, relatively small because

we are not using so many class names
to defined some of the settings that we

are already using with the section class.

Next stop we are going to add the
component layout called grid.

This grid allows us to add or stack
content in a grid matter

so for example here let me just add
this grid and lets give it a name

so this name, this grid name is going
to be called features grid

so we can see some settings on the
panel on the right and we can see some

additional settings when we click edit
grid.

Right away we can have multiple columns
added to have as many columns as we

want or we could have as many rows as
we'd like

and this is predefined so that means that,
right now there is no content inside of

the grid, but the moment we start adding
elements into that grid is gonna start

stacking in this way so 1,2,3,4 then it goes
down and etcetera.

But what we wanna do is try align or
match this layout, so we have 1,2 and 3

and the 3rd one is actually gonna expand
across 2 rows, so we have 2 columns but

then this one is gonna expand across the
2 rows on the left.

So let's remove some of this, and let's
remove some of these right.

Ok
And I'm gonna start including some

of the photos that we are gonna add
in this grid, so we are gonna choose

the photos that we've already exported.

We are gonna open this up

just so that we can see the functionality
of the actual layout.

Ok
And we can start adding more photos

so I can add image and I'm going to
choose the secondary one.

There we go.
And we can add another one.

This 3rd one is just a placeholder and
it's gonna be our party.

Now right of the bat this looks really
big and it's expanding and we can't

really move things around because we
have everything under a vh height

so what I like to do is, I like to bring in
again another container to contain things

and we are gonna move that features grid
inside the container, because the container

we know for sure that it's always gonna
be within that 940 width, max width of 940

is not gonna go past it, so this grid
that we are just creating is not gonna be

expanding across to the edges, rather than
is gonna be contained to guide's flow

we have established.

Ok so looking at this it feels closer
to our Figma design.

All right,

so this looks good because I've toggle
on the overlay, guide overlay and we

know right know that the 460px wide
is the size of this image which is ok

but now what I wanna use is the grid
settings for each individual item,

so for example this image right
here, which is the card party I want

that to expand across 2 of these rows
so I can just simply select here the

settings to expand across 2 rows and
I just need to swap the orders so that

this one comes in second, so now
what's happening is first we have the

first card and then we have the second
item in our grid list system, so we

created 2 columns and then the 3rd
is gonna actually start to the bottom

so it's gonna go back to the bottom.

So this one is first, then second, then
third, notice that this one has not

been created because there is no
fourth item

and this one is actually expanding across
2 different rows.

The thing is we can actually get rid of
this heading now because we don't really

need it and if we toggle on the settings
on the grid right away we see that there

is some spacing happening between
the columns and the rows

if we were to have a 0 gap then we
wouldn't be aligning our elements

along the grid that we have set so
16 is actually not the correct size

because the gutter on the actual
overlay is 20 so you wanna set that

up to 20 so that all the cards actually
align similar to the design that we have

over on our Figma, based on the
gutter size, the gutter of 20.

All right
This is looking good

You can also change the gutter
spacing between each of this

cards in rows, in this case am just
gonna keep it at 0 because I don't

want the space that we already created
is visible thought the transparency

of the card that we have.

Also, notice how this is not completely
align to the cards on the left, and that's

because every little column or block
has additional settings of alignment

if we were to move this card or this
particular watch party card I can

move them to the center or align them
to the bottom and just by simply

aligning it to the bottom it's doing
that to match the left cards, because

this cards have an excess or an
offset because of the 3D shape

and this one doesn't, it ok if we
actually use the alignment tool

to try to match the edges, so now
this is looking good because is actually

aligning to the bottom.