On this Webflow lesson we continue with the features slider component. How to space elements inside a Flex layout using Webflow. How to customize the slider arrows and pagination links 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.
The nest thing I wanna work on
is the preview of how the movies will
look like, so when you click on unlimited
movies, it will take us to this screen.
A little title the nice 3D shape that we
exported from Vectary and some
additional text.
So let's jump into our Webflow, there's not
a lot you can do with this pagination
but you can start modifying some of the
class properties, so that this instead of
being in the footer, we can have it on
the top.
And then we just need to set this to
position absolute
and set it to the top left, and we wanna
give it a width of 100% so it expands
all the way to the end, and maybe we
wanna expand this so that it matches
it stays within the viewport, so notice
right now it's hidden by the Navbar
so we can just add a little bit of spacing
maybe not percentage but maybe about 80px.
The way we change the size on this
pagination is simply by using the font
because this icons are actually squares
but they're using a font to create this
square shape,
so what we can do in this slider pagination
is change the 1rem, we can change that
to maybe 0.8 or 0.7rem and notice how
the sizing of these squares now looks a
little bit smaller.
We can also change some of the spacing
now it has some margin that we don't need
and some padding, so let's just reset
those spaces
and making sure that the size we have
the height to auto, so now is gonna
match whatever the size of that actual
element.
There we go, so we now have the pagination
ready, we can toggle this 2 to go from
one to the other.
And on the details what I like to do is
similar, I can start bringing some of
what we did already, we start to add
a container, so the way I get to the
second slide is simply by going to
the properties using the arrows
or selecting here on the section and
then you can get access to the
slideshow from here.
All right, so let's get started, right away
what I wanna do is change that tittle
to unlimited movies and TV shows.
And I wanna contain this
so make sure that the heading 1
stays within
we wanna add a paragraph.
Right now we could just copy the same
paragraph we have here
We'll be changing the content of
this later
so I'm gonna create a div block right here
and in this div block we are gonna start
stacking all the images of the covers
but instead of just putting images in
here, we wanna interact with this
so for example, when you click on them
I want them to open up a movie preview
and the way we can do that with Webflow
is utilizing the component called Lightbox
so if you open up the components and
select the lightbox what it does is creates
kind of like a wrapper, like a link wrapper
and inside that link wrapper it adds
the image that you wanna use, so we can
remove this one, and on the lighbox
settings, you can choose whether you wanna
to open up an image on the overlay or a
Youtube video, so let's link that to a
video just for now so we can test
and right away we sabe that and let's
select the image that we wanna use
so let's upload the image from our
graphics that we've exported already.
This one is pretty big so we might wanna
turn on the retina display so it's high
definition and goes back to the 1X and
if we preview this, and simply go to the
next slide and click, it automatically
opens a nice overlay modal or lightbox
with the player on top,
so all that extra Java Script and interaction
it being added by the actual component
itself so we don't have to worry about that
which is pretty cool.
And if we repeat that process...
so for example if I toggle this link
and i give it a name, so maybe this could
be "movies"
we can do the same thing with the first
lightbox we created
we call it the same name though "movies"
so that the name or the group name
gets linked and that way when we
actually play any of these lightboxes
we are gonna have a preview of the
other movie that's on the same
Lightbox family.
Ok, so let's remove the auto play because
we don't want the auto play to be happening
and let's remove this extra arrow on the
left, by simply removing this and
hiding at each end, hiding arrows at the
end,
so that now, we won't see the arrow at
the end of the right and we won't see the
arrow at the end of the left.
Ideally what we are going to do in another
lesson is set up a way for us to click here
and take us directly into the next one
using a little bit of Java Script
but for now let's keep it simple and
continue.
All right guys, let's make this a flex
layout, and add some spacing between
each element.
So we are gonna select the div block we
created, and we are gonna rename this
I'll make this a flex layout with
horizontal
if you've notice, we've actually been
using this style of flex a lot throughout
so if we are gonna use flex, many times
across, what I recommend we do is just
call it a class name "flex" and that way
anytime we need to use this flex grid
we can just call it by the class name
I'm gonna rename it flex and then anytime
we need to do or align elements horizontally
we can start using this class.
All right, so now lets add some spacing
on each of these,
now I think that we won't need to add
the margin on all of them, instead we
just need some margin on the middle
one
so what I like to do is similar to how we
did our margin utilities classes of
margin bottom and all the way up to
40px, we can do something similar
for margin left and margin right, and
everything that is X or horizontal
we use the X value or the X label, and
everything that's vertical we use the Y value
so, if I wanted to create a class that
spaces out some of these elements
just the middle one
I could use the margin x and then I add
dash and the value that I want to add that
spacing, so we could say mx-12 and I want
the margin on the sides, on this particular
element to have...
12/16rem
and same on the other side
12/16rem
and boom...
just like that we just created a utility
class for margin right and left using mx-12
and there is no need to add a class in
these other elements because we just
want some spacing between the left and
the right of the middle one.
Ok, let's continue by adding now another
element and that element is the 3D shape
so we can call in the image
and because this image
is really big, we wanna try to
keep it as small as possible so we can
reference back the sizing that we are
using here it's about 300px so we can
go like this
and notice there is some spacing on the
right that's because of the shadow,
we can't see the shadow right now
but we can imagine that shadow kind
of working around, we can start moving
around this shape similar to how we did
with position absolute but instead of
making this shape float we are going to
actually change the position to be
relative and it's relative to all the
other elements rather that static,
which is the default.
So relative to all the other elements
I wanna start changing some of
these value, so for example I could
start moving this around a little bit
just to center it, right in the middle
and I can also use negative values
so that I can start putting and placing
things above it.
The actual space that you have here is
still gonna remain the same because
using the position relative, it's relative
to itself and so all the values that I'm
adding is almost like a ghost version,
I'm moving things around the space
that is already containing.
So, what we wanna do is, instead of using
these values of the top and left
relative to itself, we wanna use the actual
spacing, so notice how I start changing
the value of margin, it starts to offset
but it also brings out some of those
elements above it, down.
And this is exactly what I'm trying to
accomplish here.
I think this X is still a little bit too big
so let's make this about 250, that
looks a little bit better
and then negative for the margin right
is just gonna make sure that we center it
to the very middle of these layout.
All right so we wanna make sure that
is just barely above it and let's check
out the design, this looks good.
All right cool, this is exactly what we
wanted, if we preview this we can see
now that we have created a grid for
the detail page and the intro page
for the unlimited movies and games.
In another lesson we are gonna take a
look at adding some interactions
including a 3D flip, in another lesson
also I wanna show you how we are gonna
make this cards look a little bit more
like 3D.
All right let's continue over to our next
section which is the products.
Coming Soon
Access our premium community including bonus tutorials, project files & weekly resources.
UNLIMITED ACCCESS