Rock U - Content Management - Content Component

Transcribed Video Content

Content components are a great way within Rock to allow your content creators to do exciting things with your web site without needing to be a web developer. Now, you will still need a web developer for some things, if you want to create new templates, and we'll show you what that looks in a minute. But it's gonna be quick and easy and fun. So let's dive in and check it out. And so from here on the main page, I'm going to click on the Resources tab just because this is a fairly simple page. And as you can see, by default right now we have not much on there. There's just some text and that's it. So let's spice it up a little bit. The first thing that we're going to do is down here in our toolbar, we're going to go to the page zones. And for this zone, which is the main zone, we're going to change the page content type from HTML content to Content component. And we're going to save that change and click done. So you'll notice that all that text that was there has gone away, and that's because we need to set up our content component. So to do that, we're going to go down to the block settings here. And for the page content, we're going to click on the configure gear. And here we have our content component configuration, which is blank right now because we haven't defined anything and we just set it up. So real quick, I'm gonna use some camera magic to fill this in. And here's an example of my setup. Now I'm going to walk you through just some of the highlights. So first of all, have our component name up here. We have the item cache duration and the output cache duration. I'm going to kind of gloss over those. You can use the help or check out our documentation for additional details on that. But for our purposes, we're going to keep it simple. The content component template is very important. I've chosen side by side. There are three that come with Rock, Hero, side by side, and Card. Again, I've chosen side by side, but we're gonna get into the templates in more detail in just a second. We have our title size, which I've set to heading one. We've got our content alignment, which I've set to center, and a foreground color of red and a background color of blue. Again, down here we have some filters and some advanced objects. Check out the documentation for a lot of details on those. We're just gonna use what we have now as an example and click save. Now even though I've saved, there's still no content here yet. So we've done the needed setup, but now that we have, I can go back to the block configuration and back to the page content, and now we can see the edit content button here next to the gear. This was not here before. So I can edit the content now. So, again, I'm gonna fill this out using some magic. And now we've got a little bit of content. So I'll quickly walk you through what we have. We, of course, have the title. We have the content itself, and there's a text editor in here. This is very user friendly. It has very familiar options for choosing the font and bold and italics, and you've seen probably blocks this in other areas, when you're composing an email. So again, this is relatively low tech. You don't need to be a web developer in order to use this. We've also added an image, and down here you can see our favorite color, which I have chosen green, which isn't necessarily my favorite color, but it's an option. This comes from the attributes that we're gonna set later. Lastly, content items. Because earlier in the setup we had checked the box to enable multiple items, we can have multiple content items. So we have our first one here and then our second one down below. And the second one doesn't have an image and also I haven't selected a favorite color. And you can reorder them from here using the you can click and drag using the hamburger button icons there. And however you do it, once you're done and you've saved each of your items individually, you can close this window. And now we've got some content. It's very ugly, but it works. So here's our title, and it's quite large and red. And then we have some content which is smaller and also red. And again, this is red on blue. And here we have our image that we chose. And going back to those same edit content settings that we saw before, you can tie all that stuff back. So there's the image and here's the title and the content. We would have to go back to the configuration to change, again, the content alignment, the background color of blue, the foreground color of red if we wanted to change that title side. This is where we would make those adjustments. And so I'm going go ahead and do that by picking a different background color and a different foreground color. And the title size, I'm going to make it a little bit smaller by making it heading five. I'm also going to change from side by side to card just so you can see what the difference is there. And I'm gonna save, and then as soon as I do, you can see several differences. Now, I haven't actually changed any of my content. I still have the same image, the same titles, the same contents, but with a completely different look compared to before. And last but not least, since we're in here, I'm gonna change from card to hero and save that. Now because there's no image on my second item down here, it's just got the purple background, but there is an image up here. This was a terrible color choice to use, but you get the idea of how it works. And obviously how different this looks from some of the other options, and it looks very, very different even though all I did was change a dropdown and click Save, and now we've got a completely different looking website. So now that you've seen some of the options that you have on the external website configuration and settings, let's take a look at the internal website to see what goes behind some of those items. So let's navigate first to admin tools and CMS configuration. And then from there, we're going to click on content component templates. And here we have the three templates that we saw on the external website, the hero, side by side, and card. And we saw an example of each of those when we were changing those settings in the external side. You can add new templates from here. However, for that to happen, we do recommend that a web designer be involved with that part because it gets a little bit technical. But once the templates are created, you've already seen how easy it is to use them on your website and to change between templates. If you are going to create a new template, we recommend adding a new value, but using one of the existing templates as a basis, you can copy and paste this display lava from here into your new template so you're not having to start from scratch. You may recall when I was editing the content on the external website that I chose my favorite color, and I think I chose green. But regardless, what was that? How did it get there? And how can it be used? Well, it was an attribute associated with the content component, And we're going to show how to set that up right now. So we're going to head to admin tools and CMS configuration. And we're going go to content channel types. And of course, one of our content channel types, the one that we're looking at here is content component. So I'm going to click on that. And there's a lot of different options here, but what we're interested in are the item attributes. And down here in the item attributes, can see two, and these are the two that we saw when we were editing the external website settings. We have image, and we uploaded an image in that example. And of course, we have the favorite color. Now, the favorite color item, I'm going to edit it to show you, first of all, that this is a pretty standard attribute. It has many settings that you're probably familiar with if you've ever set up an attribute before. But in particular, what I want to note is the category. The favorite color is associated with the side by side category. I'm going to cancel out of this and pull up the image attribute for comparison purposes. The image attribute has no category assigned. And so what does that mean? This means that you can create attributes that are specific to only a particular template. That means it will only be available for use with that template. And so to manage those categories, we're going to go to admin tools and under general settings, we're going to go ahead and click on attribute categories. And, of course, here we have our list of attribute categories. And if we go down to the bottom, you can see our side by side content channel item attribute category. And you can create as many as you need according to the number of templates that you have. What's important is that the name that you choose here matches the name of the template that you're using. And if it's a match, then the attribute that you create with this category will only be able to be used by this template. Otherwise, it can be used if you don't provide a category on any template. Real quick, let's head back to the external website so you can get a refresher on what that looks . So here we are on our Resources page with, again, this terrible color scheme that's been chosen. But regardless, we're going to go and edit our page content here. And you can see our image attribute is here, but the favorite color has disappeared. It's not on either of our content items. And I'm going to close this, and that's because, as we just saw, it's tied to the side by side category. And right now, we're using the card template and not side by side. So if I were to change to side by side and click save, first of all, does change the layout, which is, of course, what it's intended to do. But then if I go in to edit the content, now I can see that favorite color has appeared and that I can provide a value. And of course, since the whole layout is side by side, it applies to all of the content items within, and so I can have that attribute on either of my items. So Hopefully you can see how useful it is to use content components to manage the content on your site. It's pretty quick, pretty easy to make big changes to your site without needing to be a web developer or have any programming background or expertise. For more details, we encourage you to check out our documentation online, the Designing and Building Websites Using Rock. And of course, free to experiment on your own with the different settings and options that are available within Content Components. Thanks for watching.