On this lesson we take a look at Webflow cms collections. How to identify your data entry fields in Webflow and what kind of data collections we will need in our Webflow project.
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 welcome back let's
continue with the content management
system
if we go over to our project settings
we're going to notice that on our
hosting
plan we need to have our plans set up
for cms
in order for us to have access to
creating cms items
or collections and have also access to
the site search
these are the three features that we're
going to require in order for us to run
our streaming platform and so if we
remember
going back to our initial flow in miro
we talked about how we were going to
index content including movies games and
search them by categories both by actors
or by genres so this if you haven't
already the ux
essentials course please go ahead and do
so so you can understand a little bit
better how
we've come up to this plan we also
created a series of wireframes that will
help us
identify what templates or pages we're
going to require
we're going to need a landing page where
we're going to display a slideshow
of the popular movies that we have
selected we're going to need like a
like a screen where we can display all
the data cards or the movies that we've
filtered by genre and we're going to
need
a landing page for the preview or the
player we have some
some data entry fields that we need to
start thinking about like the title of
the movie
the genre the score and some additional
information maybe
like what related actors we have on that
specific
entry point and the way we're going to
do that with webflow
is using something called collections so
let's jump into webflow
so the first thing i like doing is
bringing over the components that we
will need
and adding them into our playground page
and these components i've created based
out of the wireframe that we can see
here on our
figma document this wireframe gave us
some insights as to what kind of
fields we're going to require so right
away
that hero slideshow i'm going to need
the title of the movie
a rating or a score uh the genre
this is that our preview cards so where
movies are
actually going to show up like a
thumbnail and maybe a title
from there they click over to that page
and on that page we have some review
cards as well
so from there i created these components
over here i have like
the slideshow component so it's fairly
fairly simple i select this right here
you can see it's just a simple slideshow
it's not
that complicated at all i have a class
called pill which is going to
represent the genre a simple button to
add to my stuff that will be used in
craft in our next
course and then we can see some
additional stuff like
the rating and the scores i've added
three types of ratings so
uh the orange stands for low
the blue is okay and the green is is
high
i also added some tags for the rated r
you know for the type of audience
and just additional details maybe the
year of that movie
um the button in the play trailer so
that's pretty simple
then we have preview cards in these
preview cards we have the name
of the actor the role we have a
thumbnail
and i add it also for the movie the same
scorecard
repurposing these classes over in these
preview cards
okay and i also added a little bit of an
interaction so if i preview this
all it's doing is having a hover
interaction so as you hover
that little background scales up and it
scales back
down same thing i did with the review
card so i added some styling based on
the gradients we have created
and added some of those thumbnails for
the author
cool so now that we have an idea of what
kind of data we're going to be
looking at for every movie let's jump
into our cms settings
Coming Soon
Access our premium community including bonus tutorials, project files & weekly resources.
LIFETIME 💎 ACCESS