On this Webflow lesson we take a look at creating and importing data. How to create our collection fields in Webflow and how to import .CSV data correctly using 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!
so over on the panel here on the left
property panel
you'll click on cms so let's click on
create a new collection i'm going to
call these
all these entries webflow gives you some
templates you can use from
so these templates are the common things
or ways that you could use in any
project
so like having a listings a recipe shows
songs
but right now i'm gonna do this with a
database that i've already pulled
so we can actually see how it works
second thing i see is the entry
url that's just a folder name where that
template page is going to be created
so we'll see that in a little bit um so
let's jump in and start adding our
fields
when you click on add a field this is
referring to a form
field this is the type of fields that
they provide us they give us some
plain text rich text or an image maybe a
gallery we can use multi-image
a video link if we want to refer to the
trailer in this instance
so let's go ahead and select that and
i'm just going to call this label
i'm going to label this the trailer so
on the right side you can see the
preview
of what i'm creating this is very
helpful because you can see right away
what type of field you're gonna get okay
and
let's save that then we create a new
field we're gonna call these
this one the number because this number
is going to be the
the year of the movie so when that movie
came out this one is just to give you
some help
text so if you're working on a project
for a client
and you want to explain to the client
hey uh this
is for the movie year that little label
that you've added will
appear on the editor so they can
understand what this field was maybe
they don't remember
or maybe the label is not clear enough
you can set a minimum number or a
maximum number so it's just some
limitations
and a format if it's integer decimal or
any other format
right now we don't really need to worry
about that
and also there's some additional
settings if you want to make a field
required or not so say maybe you want
to show you want to make sure that this
field is never empty you want to toggle
this on
that way that field is even though
if they start creating fields like
maniacs
they won't be able to because webflow
will tell you hey that field is
is required i'm going to add another
field
this one's going to be
the plain text field for the summary or
the plot
of the movie this can be in a single
line
format or it can be a multi-line format
that way it's a little bit easier to
start
typing longer descriptions okay so let's
make a field for the score
so that can be a number score this can
be the imdb
score that we're pulling from the
database because we have score
we might want to give also another we
want to create another field called
the grade field and this is going to be
three
options that the user can choose from so
let's select an
option which gives us the ability to add
multiple
options in our drop down so over here
i've selected the grade and i'm going to
add the option
low okay or medium
and then this one is going to be high
this is okay and finally we're going to
add
genre we're just going to make this a
normal text plain text field
for now and another one for actor
okay so now that we have that collection
let's go ahead and create it
right away we get no entries but again
webflow gives us the ability to add
some temporary or dummy items as they
call it
because i've already downloaded that csv
i'm going to import that
the first thing it does it asks me if
you want to upload the csv
and if it has a header if we if we have
created that csv
manually typically you would have a
header row
just for the name what the secondary
column is
etc etc so if it does have a header you
want to
toggle this on if it doesn't just toggle
it off
then when you go to continue you'll see
something like this
a little bit overwhelming but it's
actually pretty simple
on this side it's asking you to
configure the field
from that database notice that we have
displaying items one two three four five
this is from the database that or the
csv file
and all it's doing it's it's asking us
where does this
field that is called name where do you
want to assign it to
so you want to create a new field or do
you want to map it to an existing field
in this case we do because the name want
we want to map it to the field that we
have created already
which is actually called name so we want
to do that
and on the right we have kind of a
preview of that same
data being stored on our form fields
so maybe we don't need to have all this
published on these are these are other
fields we don't need so we can omit just
ignore those
and then for the cover over here we
could have this map to an existing
we want to change that to our thumbnail
so right away we see that image being
applied to that
that specific item we can swap this out
like this just by going through
each one and over in general
we want to make sure we had map this
over to
our genre field this one we're going to
ignore for now because this is using the
multi-reference field we haven't seen
that yet
okay so we're going to skip that and the
summary we're gonna make sure we add the
summary
over here the year we want to map it
to the year the score
to the score
if we have a link to trailer that will
pop up in there
all right let's go ahead and import
these items
all right once you've uh imported all
the entries into your
collection you can toggle each one of
these all the fields that we have
created are now filled in
with the appropriate data let's go and
check out how this would look like
in a normal page all right i'm going to
create a new page here
called entries just to try this out i'm
going to create it
and from here i can start adding the
component
collection list so from collection list
this is the only way we can start
pulling and
pulling the feed or the entries into our
pages
so once you've selected this it's going
to display a couple demo placeholders
and it's going to ask you the source
where do you want this data to come from
so you select the entries that we just
created
so it gives us just a couple of
placeholders but
right now we've called the collection
list what we need to start doing
is putting some of the elements that
represent each of those field types
so notice right away on the navigator i
have
three different wrappers the con the
collection list wrapper which contains
all the settings
we have the collection list and we have
the collection
item so this particular wrapper or this
little element here is what's going to
be repeated
uh 50 times because that's how many
items we have
in our entries bucket so
over here in this collection item that's
where we want to start adding some
basic elements like so let's say we want
the title here
this one we're using the titles h1s
just to try it and you get a little
purple
checkbox that asks you where you want to
pull this text from so you select that
and then it drop down appears so you can
choose
out of all the fields that you just
created which field do you want to
use to replace this h1 with
so right now it's we're only going to
see two of these
entry fields because the rest of the
entries that we have
are set as drafts until we set these
or publish these gonna just do a couple
of these and stage them
for publish just to show you guys a
little bit
a couple more items or examples
over here
okay and then and if we go back into our
collection list we can see some of these
items showing up here
on the right panel we can see the layout
we can play with
depending on how many items you have you
can start aligning
items in a column in different
columns but because we don't want to use
this type of layout
we actually want to start using our own
type of layout so
we could use the grid we can use the
flex and we can stylize right now let's
just keep them all vertical so we can
start
looking at the different data fields
that we've created
let's add another element i'm going to
add this element as a paragraph
and i'm going to pull the summary or the
plot
so we can see here we have the title the
plot
we can start adding as many fields as we
need
in this case we want to have a text
label
for the year so we have here the year
and we could even put in here an
image it's going to pull the source
from the thumbnail that we have created
and of course you're going to see this
huge image being pulled from the
and source it across you might want to
set a size for that
just for the demo there we go
so as you can see this is how we're
actually utilizing the power of webflow
collections right you can just
pull in that element drop it into your
into your page select the settings of
where that source is coming from or
where the data is coming from
and then start playing around with how
you want to display that
with simple elements like the paragraph
the titles
and and so forth
Coming Soon
Access our premium community including bonus tutorials, project files & weekly resources.
LIFETIME 💎 ACCESS