On this Webflow lesson we take a look at the core features of our virtual reality streaming platform. How to create a slideshow component using Webflow similar to the one we designed in our Advanced UI Design course and we learn how to use the Grid layout 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!
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.
Coming Soon
Access our premium community including bonus tutorials, project files & weekly resources.
UNLIMITED ACCCESS