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

2.10 Setting Up for the “Footer Two” Panel Entry

Hey, welcome back to you building landing pages with Craft CMS. We are almost done, we're down to the very last panel, our Footer Two panel right at the bottom here. So looking at the content that we have down here, we can figure out what fields we're gonna need. Hover on the left here. We've got a copyright message, that's gonna be fairly straightforward. All we really need is just a plain text field. Over on the right though, we have social icons and that's gonna need something a little bit extra because for each social icon, the user is gonna need to be able to specify the icon they wanna use and the URL that, that social icon should be linked to. So to achieve that, we're gonna use something called a matrix field, so let's jump over into our dashboard and get that started. We'll go into our fields area, we'll create a new group to keep everything organized, we'll call it Footer Two Panel. Create a new field, and first one we'll do is a straightforward one. So we'll just call this, Copyright Message. And that just needs to be a plain text field. You don't need to change anything else for this one. Just save that out. Now create another field to handle less social icons. We'll call it, Social Icons. And now, down here, we can then choose matrix. And what a matrix gives you the ability to do is basically nest multiple types of field under a parent field. And that parent field is called a block. I'll show you how that works. First, we're gonna create a new block type, and this is that parent that I'm talking about. We'll call it, Social Icon. Create. Now you can see here, we've got the ability to add fields underneath this parent block. So this is where we can set up our ability to add an icon and the URL. And these fields work just like the field that you've been adding so far. We'll make this first one our icon. So we'll call it, Font Awesome Icon. [SOUND] And we'll set this one up the same way that we did with the field for our pricing entry type. We're gonna include the same little instructions message. And then leave everything else as it is, so that's the first field. Now we head up here and we'll add another field. And this one's gonna be for the URL, that the icon should link to. So we'll call this one, Social Media URL. Just add a little instructional message. Add a social Media URL, e.g. to your Twitter profile. And then we'll leave this as plain text as well. So these matrix feels a really great when you need to have one item that has multiple properties. So save that up and that is, all we need as far as fields go for the Footer Two Panel. Now, let's set up the entry type. Go into sections. Create another entry type. And we'll call it, Footer Two. Give a new tab a name of Footer Two. And then we'll add our fields, so we've got our copyright message. And our Social Icons. So that's it, we can save that out. And now that's all of our set up for the back end, for our Footer Two Panel. So in the next lesson, we'll add the associated entry. We'll set up a copyright message and some social icons in it. Then we'll create up the last template that our site is going to need, so I'll see you in the next lesson.

Back to the top