KreativePro Masterclass
Hello, {first_name}
Sections & Fields
Learn to Build Websites with Craft Cms
Oops! Something went wrong while submitting the form.
Browse Lessons

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


Sections and Custom Fields

On this Craft Cms lesson we're going to create our entries using channels and setup the custom fields.


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. So craft has a lot of similarities to webflow. Some of them, of course, being called sections or content blocks, as opposed to webflow we have collections. In this collections you will remember we have different custom fields. So if you click on any of these fields, we can see the fields that are pre-populated for us,the ones we looked at were kind of like the movie genres, score, images, and you could kind of pre-select a bunch that they give you, but imagine if we could customize and make our own. That's where craft comes in.
If we go over to our fields, we can create a new field and choose from a dropdown a series of really cool custom fields.
So like plain text, assets, categories, checkbox, color. Pretty much similar to what webflow has. But, they're called a little bit different and there's even more fields that webflow does not support. So for example, the switch it's called the light switch, and you could even have tables. You could have even users when you actually upgrade to a full craft plan, and then the matrix field.
What I'm going to do here is I'm just going to create a new field and, this field is gonna help us start kind of playing around with the similarities of what we want. I'm going to choose cast members as one of the first examples. So if we look at here, we have an avatar image and we're going to need a role kind of dropdown or a multi-select and a biography field.
So this is the three types of fields that we need to create. So let's go back to Craft and start creating these field's.
Great. So the first fiel is going to be accessing our avatar. So I'm going to call this one, the same name, avatar, and the handle is something we're going to refer back to when we do the templating.
So don't worry about that yet. We're going to select the dropdown to be assets. And we can just add some instructions, like little helper, text below it just like Webflow does. So this is an image of the actor or a cast member. This is if the editor needs some help. We're going to restrict the uploads three single folder.
We can choose either from local images or cloud images. I'm going to go ahead and click on cloud images just to test that out. So we're going to go ahead and skip some of these toggle or check boxes. These are additional settings that we want to add. We do want to limit it to one single element. So you can only choose one image.
The view mode is just when we actually show it to the editor. How does that look? Large thumbnails or a list. So let's go ahead and click safe.
Alright. And we've created our first custom field. The cool thing about Craft is that it allows us to create groups. So I'm going to go ahead and create a group and call it actors.
Or actually let me call that cast. I'm going to actually assign it to that group. So simply by clicking group dropdown cast that will now appear on that group. The next field I'm going to do is biography. I'm going to choose the actual plain text for now, and I'm going to make sure that we have additional line breaks. So we are going to toggle that on. I'm just going to leave it at four by default let's click safe.
All right. So we've created two fields now and just the final one is going to be roles. We just need to go back to our craft again, do the same steps, create a field that will have, or contain multiple selection.
We're going to call this field role. Just the same.
And notice how we have the options here. We can actually add as many as we want, similar to how webflow does, we can set a default option and we can even drag them around. So if we want to have the user, see them in a specific order, we can do that. Let's go ahead and click save. And there we go. We've got our cast custom fields ready to go.
So there is a little bit of a step because, you know, in this case we're kind of making our own group of fields first, and then the next step would be to create, a section. So let's click on section and we're going to create a new section called actors or cast members. The handle. We'll took a look at on templating in another  lesson.
And we're going to select the type it's going to be a channel type for now. I just want you to get a sense of what the preview of this section is going to look like. So let's click safe. So the next step is to decide what field types are we going to use? All we have to do is click on the entry field type, and then on the field layout here, we have the different fields that we just created.
And it's just as simple as dragging and dropping. And we can organize them however we want. That's really cool. All right. So we go over to the entries, your notice that is now added into our left panel. We have channels and cast members is one of the entries. So think about this as a table of elements or entries, and these are our collection items. So the first of course is going to be you know, Joaquin Phoenix, we can create that. You're going to see on the right panel we have the slug, we have post date and time. And the cool thing here is you can modify that as opposed of webflow. You can't really do that.
It kind of sucks. You know, you can really modify that, but you can also set up an expiry date and just have a toggle to enable it or disable it. So let's jump into the avatar. Right here if I click on add an asset, a pop-up appears with my library of all the cloud images that we've set up already.
Or we can just directly upload a file straight from here without having to go and browse. Biography and our role selection. Now it's one thing though that the role is actually a multi selection. And as opposed, you know, in webflow, we have that as a dropdown. So what I'm going to do is I'm going back into my field type and I'm going to change the multi-select down into a dropdown menu.
I have to re upload the same values or options because now it gets kind of reset and you need to be very careful with this because they may result in data loss. All right now that we've created that now into a dropdown, we can go back into our entries. And continue adding our first one, in this case you'll see now it's a drop down menu.
Another thing I want to do is that, notice that we had access to cloud images, but that doesn't make sense. So what I'm going to do is create a volume called actors. That way, whenever we upload a thumbnail of that actor, it's actually going to be uploaded to a sub folder of our Amazon S3. So we go ahead and use our variables we have already.
Same process. We select the bucket that we have created. Then on the sub folder, we just add in the name of the folder. We want those images to go in. We can go ahead and skip the other settings and make sure you toggle on the same base that we have in our variables.
All right.
That's pretty much it. And now we have our volume, which is great because now we can actually manage our assets directly. So let's save this image into my desktop. So go back into assets. Notice how we have a folder now called actors. We can upload our Joaquin Phoenix thumbnail right here. And boom, we can even click on it, renamed that file so that it doesn't have such a you know, extended weird name or a number. We can save that we can preview.
And you'll notice the URL is now using a sub folder for actors, which is awesome. We're going to keep things organized as we start creating this platform. So actually we, what we want to do is go back into our avatar custom field. And from there, we're going to make sure that the assets folder is going to be actors, the new volume we just create it. Let's click save.
And now when we go to create our new entry, it's going to make more sense to have things organized in the correct way. Over here I'm just going to copy in that name of the actor. For the avatar we've already uploaded the image thumbnail. So we just need to select it. There we go. We want to fill in the biography and the role is a dropdown now preselected with the actor. We click create.
And boom right there.
We have created our first entry within the cast members channel in craft CMS. All right. So imagine doing this for all the actors, it would be a lot of work, right? So what I want to do is on the next lesson, I want to teach you how we can import from webflow the database and be able to speed up the process.
So let's go ahead and jump in.

Coming Soon

Designers ultimate weapon of choice
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...