KreativePro Masterclass
Hello, {first_name}
Intro to Collections
Learn to build websites without code in Webflow
Oops! Something went wrong while submitting the form.
Browse Lessons

Access our premium community including bonus tutorials, project files & weekly resources.


Webflow CMS Collections

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.

It's your turn!

Take a moment to download this Webflow Template so you can practice, experiment and use however you want!

📥 Download Template

Webflow Project Files

All our project files for you to practice and play with along with some bonus materials.

Webflow Project Files


Being the best means investing in the best, no matter what level you are at, this course will take you through the entire process you need to be able to implement an idea and turn it into a fully functional business.
Manasés Padilla
Photographer & Entrepreneur
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.
Noel Hale
Founder of Slush Monkeys®
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!
Mae Green
Product Designer @ Dropbox

all right guys welcome back let's

continue with the content management


if we go over to our project settings

we're going to notice that on our


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


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


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


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


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


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


and i add it also for the movie the same


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

The future of the web without code
Digital Media Masterclass by Neftali Loria

Neftali Loria

Author & Instructor
KreativePro Masterclass Bundle

Access our premium community including bonus tutorials, project files & weekly resources.

Welcome to the Tribe! 💜 Something cool is coming your way...