Webflow CMS Collections

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

‍