Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:13Length:1.3 hours
Craft l 3
  • Overview
  • Transcript

2.2 Setting Up for the “Hero” Panel Entry

Hey, welcome back to building landing pages with Craft CMS, and we're going to start the process of building out all the panels for our landing page. And we're going to start with this hero panel at the top of our site. And we're going to break this into two phases, one in this video, and one in the next. In this first video, we're going to be setting up all the back end stuff. So, we're gonna set up an asset source for this background image. We're gonna set up a custom section. We're gonna set up an entry type, and we're gonna set up all the fields. And then in the next lesson, we're gonna go through and create the entry to actually get the required content into the back end, and then we're going to create the template to show it all in the front end. So first, let's set up that asset source. Now, we're going to create a folder just for hero images. So, if a user decides they want to change this image up on the top of this to a different hero image, then they can do so pretty easily. So, I'll start inside our HT Docs folder. We're going to create a new folder named Images, and then aside that, we'll create another folder, and we'll name it Hero. So then all the Hero images are going to go into this folder. Now, we'll head into our Craft admin area. We're gonna go into Settings and Assets. And we're just using the exact same process that we went through in the small example in the course, before this up and running with Craft CMS. So, we'll set up a New Asset Source. We're gonna name it Hero Images And if you notice here that we've automatically handled generated hero images, and we're going to be using this later to make these hero images appear in a templates. Then we'll fill in the file system path, and that would be images/hero/, and just like in the last post, there's no leading slash in this path, but there is a trailing slash. And then also, like in the last course, we're gonna use a variable in this URL field. That way, when this offline site is deployed online, it won't be necessary to go through and update all the URLs in the asset sources. So, here we're in the craft config general.php fog just like in the last course, and we're going to add in the same environment variable that we did in the last course. So, we've got our base URL variable set here with the URL of our local host server that we're working with offline, then when the site's deployed, that can just be changed from live to main. Then back in the asset source that we're setting up, the URL becomes curly brackets with baseUrl inside. And then, we add the rest of our file system path. So, we'll save that. And that is good to go. Now we're gonna move on and create a new section. So we'll go to Settings and sections. And what we're going to do is have one section that's going to hold five different entry types, one for each of our panels. In the last course, we went through three different section types that you can use, we talked about singles, which you use for one off types of content, this isn't going to be that, we need five different types of panels, so singles aren't suitable. There are channels which is for content that's going to be updated ongoing on a regular basis, like a blog. But we just want to set up our home page once, rather than continuing to post to it all the time. So, a channel doesn't suit either. Then there's structures, which when you have more than one piece of content, but it's gonna be relatively static, and it needs to be organized, and that's the perfect fit for the panels that we wanna have in our front page. So for our home panels, we're gonna go the structure section type. So let's create a new section. We're gonna call it home panels. We'll choose structure. And we don't need to ever access any one of these panels individually, so we are going to uncheck entries in this section have their own URLs. So, that's it. We'll head up here and press save. And now that home panel section is ready to hold each of the five custom entry types we need for our panels. And there's already been one entry type created by default. This just happens automatically. So, we're gonna be editing this one into our hero panel. But before we can, we need to make sure that we have all the fields set up that we need in order to structure the hero panel entry type in a way that will let the user control the content in this panel, so that's going to be hero image in the back. This title here this description, a label for this button, and a link on this button. Now, all entry types will automatically have a title field anyway, so we can kind of ignore this one. That means we're going to need four other fields. So, we'll need a field where they can upload an image, we need a plain text field for this description. Another plain text field for the label on this button. And another plain text field for our URL that these buttons should connect to. So, let's go back and set all of those up. So we'll go back up into Settings, we'll choose Fields. Now, we're going to set up all of these fields in one group so that we know they're related to the hero panel. So, we'll set up a new group. We'll name it hero panel. Now we'll set up a new field. We'll make the first one one where they can upload an image. So, this is connecting in with the hero image I said that we just created. So, we'll call this hero image. [SOUND] That's filled in Handle. We'll use that later to pull the image out for our template. You can fill some instructions in here if you want. We'll skip that for now though. And then in field type, we're gonna choose assets. Now, we don't want people to be able to choose from any image in the images folder. We just want them to be able to slip from our here images folder. So, I've unselected all. Now I'll select hero images. We also, I only want to have one hero image showing in the background at a time. So we'll set that to one, and we'll just change that's to large thumbnails. So, it's a bit easier to see what the options are. So, we'll save that. Now that's our first field all done. Now we'll set one up to hold the description that will appear in the hero panel. So hit up another new field, we'll name this one Description, and this one's just plain text. So, you can just leave that exactly as it is and save it out. We need another one for the label that should appear on the button. We'll call this one Button Text. And once again, that's plain text already, so we'll save that, and has everything we need. And then the last one is the button URL, and that can just be plain text also, so save that. Now, that's all four fields that we need in order to make everything here editable by the user. You might have wondered why we haven't set up anything to allow the user to modify the menu. And the reason is each of the panels that are in this site are fixed. It's not going to be possible for a user to add extra panels, or remove panels. So, that in turn means there's not going to be any reason to change that navigation menu. So, that's one of the cool things with being able to set up a site exactly how you need it to be. You can make sure that you control exactly what the user is able to modify so that they don't have to worry about accidentally changing something that they didn't mean to change. All right, so now we have a left field set up. We can finish setting up our hero panel entry time. So, we're going to go back into the sections. We already have one entry type that's been automatically set up. This happens as soon as you create a new section. So, we're just going to edit this one, and turn it into our hero panel. So, we're going to rename it. We'll call it hero panel. We're going to update this handle. Change that to hero panel in camelcase. We'll leave show the title field checked, and that's going to be, we'll create this headline here, and now if we scroll down, we can add in the fields that we just created. So, I set up a new tab, call it hero panel. And now we just drag and drop. So, drag in our hero image. Add description, button text, and button URL. And then we save. So now that is all the back end stuff set up for our first panel. So, in the next lesson, we're going to create an entry for our hero panel, and then we're going to create the template that will make it appear in the front end. And then that will have laid out the whole workflow that we're going to be using for all the other panels for the rest of the site. So, I'll see you in the next lesson.

Back to the top