On this Craft Cms lesson you'll learn about the singles and structure types of sections. We setup a few examples using the powerful WYSYWIG editor called Redactor.
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!
All right guys, on this lesson, we want to go over the difference between a singles and a structure section. The first thing we want to use a single for would be for the homepage, for example, because that's a single page, that's just going to contain static information. So let's make that create a new section and simply call it the home page.
We can toggle on that little home icon. Just meaning that that's the first page that's going to load for the index. Over at the field types, I've already added SEO title and SEO description, but it's so basic, all you have to do is grab in all the code from the homepage, from Webflow, dump it into the index.twig that's on the templates folder.
And there we go. We just refresh the homepage of our SVR deploy.test and it works perfectly. All right. So now what we want to do is create a structure for the inside pages. Like the footer, navigation, the about us, terms and conditions and all that. We want to create a rich text editor or sorry, install the plugin.
So there's a really popular one called redactor. Once it's installed, we can go over to our common group and we're just going to call this the rich text area and make sure that we select. Under the type of field that it is a redactor. We want to make sure we select the cloud images. As the volumes, we click save.
We're going to create a new section
and this section is going to be global or inside pages. However you'd like to call it. Make sure it's the type of structure and let's pass into template that we want to use. We'll need to create a template for this particular structure. Let's go ahead and first create our template for the insight page.
I'm just going to copy what we did for the profile. So we want to do is just clean it up. Get rid of some of the extra tax that we don't need. Get rid of the form because we copied this over from the profile. Just keep the container and make sure we changed the H one to the entry title, because this would be whatever page we create.
It's going to have that title. And right below our title, we can include our rich text field just simply by calling the object of entry.rich text area. Now for the template, we'll use the inside template. For the entry types we want to go ahead and calling our field, the rich text area, which we just created.
When we head over to the entries we'll see now that things are divided by structure by channels and by singles. Right away we can see that our structure has nothing inside. So let's go ahead and create some of those pages in the footer. The cool thing about structure is that you can start nesting things over.
So by clicking on the parent, you can choose, which is going to be the parent. I can also duplicate directly from here. So anytime I duplicate and click on the little green dot I can quickly create and modify the template itself. And start adding as many pages as I like.
Just one note is that whenever you duplicate a page, the only information you're modifying is the title and the fields. But the actual slug is not getting updated. So you need to be aware of that. Redactor allows you to upload images, change the title, caption and link. For example, you can add in the links that exist already inside your structure from an entry.
We can toggle open and close these parents are structured trees. You can add alternative text links can embedded video from YouTube. You can go full screen. If you're creating a full editorial or blog post, you can add order lists, and you can add, you know, all type of things for the format, even access to the HTML, which I think it's really cool.
If you are more advanced you need to give more power to the users. So what I've done here is just I'm organizing the site map to match a little bit more of the footer. And I don't think we should call this anymore "about" let's called the structure site map. So it makes more sense. Right?
The next thing I want to clarify is entry URI format but by adding a variable of parents and if we open up one of this entry pages, whenever we access the URL of that page, we want it to have the name of the parent along with the children inside of it, rather than just a single slug. Right? So we want to have the same structure that appears in the tree. Notice how we have this little capital letter on the first segment of that URL on community.
A simple way to fix this it's making sure that when we go to the structure of the site map settings, we call in the parent.uri insted of the title. And just like that, it's going to start pulling the slug rather than the title itself. So now you should have a good understanding of creating singles and creating a structure to manage your site.
On the next lesson, we're going to take a look at the navigation of the footer and make sure we can add those links in a clever way. We're going to use a plugin for this. So I'll see you guys on the next lesson.
Access our premium community including bonus tutorials, project files & weekly resources.LIFETIME 💎 ACCESS