February 18 UNL CMS Training
Aaron Coleman
Author
02/18/2025
Added
5
Plays
Description
Learn the basics of building a site in UNL CMS, including content types, components, media library and more.
Searchable Transcript
Toggle between list and paragraph view.
- [00:00:00.640]And share my screen.
- [00:00:02.220]And then we will get this going.
- [00:00:04.480]All right.
- [00:00:13.520]So there you can see the Sandbox site, which is the one that you're probably logged into.
- [00:00:18.780]So if you logged in, you know, when you first come to the site, it's just, you can tell everybody's been messing with this site, right?
- [00:00:25.540]It looks kind of haywire.
- [00:00:28.320]Everybody, you can add pages to this and don't feel bad about it, you know?
- [00:00:31.980]So once you log in, you see the CMS toolbar at the top here.
- [00:00:35.720]You see the tabs appear and things like that, which is very similar to how it worked in the old system.
- [00:00:40.420]Just as a really quick question, how many people have experience working in the old system that's completely gone now?
- [00:00:48.420]A few people, yeah.
- [00:00:52.380]So this is a little bit different.
- [00:00:57.820]The biggest difference is that it is basically a no-code environment.
- [00:01:06.320]So if you're familiar with the old system, a lot of those old pages were just a huge blob of code.
- [00:01:11.400]You had a WYSIWYG editor and you either viewed it as it was viewed by the browser
- [00:01:19.640]or you had a tab to change it to HTML code.
- [00:01:24.340]And the HTML code was pretty unwieldy.
- [00:01:27.320]It was very easy to break things.
- [00:01:29.640]So this new system is just a lot of fields and you upload images
- [00:01:33.560]and then there's internal templating that will render everything.
- [00:01:36.560]Makes it a lot more simple.
- [00:01:38.260]So here we are on the sample site, our onboarding site.
- [00:01:43.860]I assume everybody can see this site of all the students running out of the tunnel here.
- [00:01:48.660]So once you're logged in, you kind of have these tabs along the top
- [00:01:52.580]and you have these tabs on each respective page that you're on.
- [00:01:55.720]So I'm going to first start.
- [00:01:57.240]Talking about content here.
- [00:01:58.560]So if I go to add content, I can either hover over that
- [00:02:03.200]and then choose one of these pieces to add.
- [00:02:05.020]Or if I just click add, it gives me a list of the pieces of content,
- [00:02:10.340]types of content that I can add to the site.
- [00:02:12.880]So a builder page is probably the one that you're going to use the most.
- [00:02:17.280]And that's the one we're going to go to kind of last in the training.
- [00:02:20.200]It's kind of like two pages in one.
- [00:02:22.300]And I'll get to that when we get to it.
- [00:02:26.040]And then these other pieces of content are a little more specific.
- [00:02:29.500]They're a little more specific to the type of content that you're adding to the site.
- [00:02:33.580]So book page is very much good for, as it says, handbooks or tutorials or documentation, things like that.
- [00:02:42.160]A news item is exactly what it says it is.
- [00:02:44.640]It's a news item, something like you'd see in Nebraska Today.
- [00:02:47.740]A person is a person page.
- [00:02:50.980]It creates kind of a bio page for someone.
- [00:02:53.360]And then a web form is exactly what.
- [00:02:56.020]It says it is.
- [00:02:56.720]It's a way to collect data from users.
- [00:02:58.820]And then you can download that data.
- [00:03:00.740]And, you know, it's good for RSVPs and things like that.
- [00:03:03.820]So we're going to start our day by adding a person.
- [00:03:07.200]So I'm going to just go and add myself here.
- [00:03:13.340]And you'll see I'm only going to fill out two fields.
- [00:03:15.680]So this first person, this is a field.
- [00:03:19.840]And then this is actually a reference that's referencing UNL directory.
- [00:03:23.880]So you'll see that that auto-completes when I start typing my name in.
- [00:03:27.980]So I'm going to choose that.
- [00:03:29.340]And when I choose that, you can see that it chooses my UNL ID here.
- [00:03:33.160]So I'm just going to click save so you can see what happens.
- [00:03:35.520]I've only filled in two fields here.
- [00:03:37.420]So by adding, just by filling in two fields, I already have a basic page for myself.
- [00:03:48.900]I will say that the new system, in addition to being no code,
- [00:03:53.400]a no code environment, it's also much more modular.
- [00:03:57.960]The systems that we use, our web applications, it's much more in tune with those
- [00:04:05.880]and how it pulls data and shares data between them.
- [00:04:08.600]So you could see I filled in my name, and then I filled in my directory field.
- [00:04:13.520]And by filling in my directory field, it is pulling all of this contact information
- [00:04:18.640]and this photo from UNL directory.
- [00:04:22.340]So I only filled in two fields, and it is basically creating a page for me.
- [00:04:28.560]So if I come back in here, there's a lot of other fields I can fill out.
- [00:04:32.640]I can override any of those fields that are pulling from directory,
- [00:04:37.980]which is good to have if, you know,
- [00:04:40.320]sometimes people's job titles aren't always super clean in directory,
- [00:04:45.160]and so you might want to actually put, or somebody's job title might have changed,
- [00:04:48.840]but it hasn't changed in directory, so this is where you can...
- [00:04:52.200]where you can change that.
- [00:04:53.660]Or maybe, you know, you're creating a page where somebody is on a committee
- [00:04:58.860]or a group, and their title in the group is different than it is in directory,
- [00:05:03.660]but you want to list their affiliation within that group.
- [00:05:06.600]So, like today, let's just say, you know, for today,
- [00:05:10.980]I'm a lead trainer, right?
- [00:05:14.680]I'm not going to be a senior web developer,
- [00:05:17.060]but for this purposes, I'm going to be a lead trainer.
- [00:05:19.120]And then I can put in a bio, right?
- [00:05:22.140]So I can just come down here and I can say, you know, Aaron.
- [00:05:25.000]So I added a couple more fields and I will save that.
- [00:05:48.220]And.
- [00:05:52.120]Now you can see it overrode my job title with lead trainer and it added a
- [00:05:57.180]little bit of bio information here.
- [00:05:59.240]So we've got a nice page for myself.
- [00:06:01.300]No HTML.
- [00:06:02.500]Again, there's a ton of other fields you can go in there.
- [00:06:05.100]They're also good for, you know, those fields are good.
- [00:06:08.420]If you have need to create a person page for somebody who doesn't have a
- [00:06:12.520]UNL ID, all you would do is go in and fill in those overrides.
- [00:06:15.700]So maybe you have a visiting lecturer who's not going to have a UNL ID,
- [00:06:19.820]but you want to put them on your site with a person.
- [00:06:21.900]You'd go in and you would just fill in the title field and then
- [00:06:26.760]you'd fill in those override fields.
- [00:06:28.260]And they could still have a page that looks like everybody else at UNL.
- [00:06:30.900]So that is a person page.
- [00:06:33.520]And now we're going to go to news item.
- [00:06:35.960]So again, this is fill in all these fields, news item for training.
- [00:06:49.040]And as I scroll down, you can see.
- [00:06:51.680]You can see all these different fields, and we're going to roll through these.
- [00:06:54.080]So in our news item, we have a lead image.
- [00:06:57.500]And anytime you have an image or a file on your site, when you add that,
- [00:07:05.000]you can see that it was opening a media, this thing called media library.
- [00:07:09.420]So this is one of the other big differences between the old CMS and the new one.
- [00:07:15.680]In the old CMS, we had a structure, like a structure,
- [00:07:21.460]a structure of files and folders that you'd, you know,
- [00:07:25.200]you'd create folders and you could create folders within those folders and you
- [00:07:28.160]could upload images and files to those folders.
- [00:07:30.380]And then you had to find the URL if you wanted to reference them in the code
- [00:07:35.620]and to link them. And it was, you know,
- [00:07:39.380]is basically the system going back to DOS, which, you know,
- [00:07:44.560]it worked okay, but is a little bit tricky at times.
- [00:07:49.320]So in the new system,
- [00:07:51.240]we have this new way to manage media. So this is media.
- [00:07:55.220]This includes images. This includes documents.
- [00:07:57.680]It also includes embeddable videos and it's this thing called media
- [00:08:03.640]library. So this,
- [00:08:04.880]we're adding an image to our news item and it popped us into this media
- [00:08:10.680]library interface.
- [00:08:11.740]So we are going to upload an image into the media library and let's use
- [00:08:18.260]this one. I have it on my desktop.
- [00:08:21.020]So anytime you add an image to the media library,
- [00:08:26.380]you immediately, before you can even add it,
- [00:08:30.420]you need to add alt text to that image so that when this image goes into your
- [00:08:35.580]media library, anytime that it's referenced,
- [00:08:37.600]it will automatically have alt text. So here, you know,
- [00:08:41.280]we can say aerial image of campus from the North,
- [00:08:50.800]college.
- [00:08:53.120]Sorry,
- [00:08:57.440]I keep getting pop-up notices for people who want to join and it interrupts my
- [00:09:03.520]typing. So college of business.
- [00:09:06.040]Nation fields.
- [00:09:20.580]So tags, this is another way.
- [00:09:24.060]So in addition to how you name your image,
- [00:09:27.560]tags are the other way that you can find your image in the media library.
- [00:09:33.240]So if you think of media library,
- [00:09:34.600]it's kind of just this big pot that you put everything in.
- [00:09:37.860]And then the way that you find things in the future are both how you have
- [00:09:41.400]named that file and how you have tagged that file.
- [00:09:44.620]So we have some documentation on both best practices for naming,
- [00:09:50.360]naming your images and files,
- [00:09:52.160]as well as tagging your images and files in our CMS documentation.
- [00:09:57.160]And Eric can put a link to that in the chat. And if,
- [00:10:01.580]if he isn't able to, I can do that at the end.
- [00:10:03.880]But what I like to tell people about tags is think about them as general to
- [00:10:09.440]specific. So, you know, this one,
- [00:10:13.180]we could say this is a city campus, right?
- [00:10:17.580]So from a very basic level,
- [00:10:20.140]and there's already a tag there.
- [00:10:21.480]So anytime you already have a tag created, it's going to auto complete.
- [00:10:25.160]So we're going to go city campus and let's say college of business.
- [00:10:31.560]Cause it's very prominent. Doesn't look like there's a tag. Oh,
- [00:10:37.540]there is a tag. So I'm going to select that.
- [00:10:39.480]We could say it's an aerial photo, right? Got a tag there.
- [00:10:43.640]I'm going to try to find something where we don't have a tag.
- [00:10:47.020]So let's say Jorgensen, Jorgensen,
- [00:10:49.920]and Paul. All right. So you can see there,
- [00:10:54.220]there is not a tag in the system for Jorgensen hall.
- [00:10:57.020]So it's creating that tag now. So I'm going to do one more.
- [00:10:59.900]And if I want to get really specific, I could say, you know,
- [00:11:04.460]if you want to look back in the future and see what photos were taken a
- [00:11:07.400]certain year,
- [00:11:07.980]I don't think it's terrible idea to tag your photos by the year,
- [00:11:11.600]just in case in the future,
- [00:11:13.780]you need to look back and maybe remove something from a certain year.
- [00:11:16.360]Maybe you get five years down the road and you want to remove everything from
- [00:11:19.700]a certain year. So we've got five tags on this image. That's pretty good.
- [00:11:24.060]I think we can find it in the future. We're going to insert that.
- [00:11:26.600]So the cut line is, you know,
- [00:11:31.920]it would be a little bit more specific than the alt tag.
- [00:11:36.360]So this is where you could put, you know,
- [00:11:38.720]you could describe what season it is, maybe, you know,
- [00:11:42.860]spring image of campus.
- [00:11:49.480]So facing south or something like that.
- [00:11:53.660]We could get more specific if we wanted to,
- [00:11:56.220]but that's where you'd give a little bit more detail that maybe your alt tag
- [00:11:59.000]doesn't have your lead image credit, you know, so we could say,
- [00:12:02.640]and so then here's the byline for the story. This again,
- [00:12:12.660]we're entering a news item. So this is who wrote the news item, you know,
- [00:12:16.040]so we could say,
- [00:12:19.260]I don't know, let's just say,
- [00:12:21.460]and then let's,
- [00:12:28.160]nobody wants to see me type five paragraphs.
- [00:12:30.720]So I'm going to just do a lorem ipsum generator and swipe that.
- [00:12:35.380]So copy that.
- [00:12:43.580]And then previously,
- [00:12:49.240]I mentioned, you know,
- [00:12:50.100]that things are a little bit more modular,
- [00:12:51.520]things work together a little bit easier in this new system.
- [00:12:54.060]So here's a person reference.
- [00:12:57.220]I'm going to go ahead and start typing a person reference,
- [00:12:59.540]which remember if you just remember previously,
- [00:13:02.560]I added myself to the site.
- [00:13:04.060]So I'm going to reference myself here.
- [00:13:05.920]And then here's where you could put a URL.
- [00:13:08.660]Maybe there's a URL that's related to this news item.
- [00:13:14.560]So I can, I'm just going to say college of business.
- [00:13:16.760]I don't, this is just for tests.
- [00:13:19.220]So, so now we filled out all our fields.
- [00:13:22.360]We have an image and we're going to save this.
- [00:13:24.760]So you can see that by, you know, we didn't add any HTML or anything like that.
- [00:13:36.920]And we have this nice looking news release.
- [00:13:38.880]That looks something like you'd see on Nebraska today.
- [00:13:41.480]Got our cut line, our photo credit, you know,
- [00:13:46.420]here's the byline with the date it was published.
- [00:13:48.380]Here's the,
- [00:13:49.200]the story itself.
- [00:13:49.960]There's some share widgets over here.
- [00:13:51.580]So I referenced myself here as a person reference,
- [00:13:56.140]and you can see here that it pulled through the overwritten title that I
- [00:14:00.680]put into my person when I added myself.
- [00:14:04.120]So the nice thing about this new system is, you know,
- [00:14:07.460]you create one thing and then you reference it multiple places.
- [00:14:11.180]And then if you change it in the original spot,
- [00:14:14.040]it will change in all those places.
- [00:14:15.420]So if I were to change my title again on my person reference,
- [00:14:19.180]it would change not only on that page,
- [00:14:20.920]but it would change here as well.
- [00:14:22.620]So, and then I've got my related links down here.
- [00:14:25.280]And at the bottom,
- [00:14:25.900]it's pulling in the most recent news items that have been added to the
- [00:14:31.600]site.
- [00:14:31.820]So that is a news item.
- [00:14:34.420]We're going to go through a couple of these others now.
- [00:14:37.960]So we're going to go into rather than adding a book page,
- [00:14:43.860]I'm going to go ahead and show you what that looks like.
- [00:14:46.580]It works exactly how it did.
- [00:14:49.160]It works exactly how it did in the old system.
- [00:14:50.100]And this is actually a better way to see how it looks
- [00:14:54.120]rather than adding a bunch of them to the new site.
- [00:14:57.360]So I went to the WDN site just now, wdn.unl.edu,
- [00:15:04.280]and under documentation, I went to UNL CMS.
- [00:15:07.520]So again, this is a very, very helpful place to look
- [00:15:11.300]if you're looking for documentation on the system
- [00:15:14.040]that we are working in right now that you're doing the training in.
- [00:15:16.440]This is all the documentation that we have.
- [00:15:19.140]And these pages here are book pages.
- [00:15:24.180]So this is how a book page works.
- [00:15:25.920]Basically, you create a title book page,
- [00:15:29.300]a new book page that is essentially your cover
- [00:15:32.260]or however you want to refer to it.
- [00:15:33.880]So this is the intro to UNL CMS.
- [00:15:36.560]Then within these book pages,
- [00:15:39.760]you can essentially create pages within them,
- [00:15:44.080]or you can, like if you click down here to content types,
- [00:15:47.320]you'll see that this opens up
- [00:15:49.120]to an entirely new section.
- [00:15:50.780]So if you want to think of it as a chapter
- [00:15:52.560]or something like that,
- [00:15:54.580]and then you can keep nesting pages
- [00:15:58.440]down within these book pages,
- [00:15:59.960]and then they always keep this navigation on the side.
- [00:16:02.880]So as it says, when you add this,
- [00:16:08.720]when I go to this add content page,
- [00:16:11.140]you know, we have this text here that says
- [00:16:13.920]book pages have a built-in hierarchical navigation,
- [00:16:19.100]this hierarchical navigation here on the right.
- [00:16:21.620]And they're good for handbooks or tutorials
- [00:16:24.620]or documentation, as you'll see here.
- [00:16:27.140]Anything that you want your users to kind of go through
- [00:16:30.720]in an order and the kind of a structured order.
- [00:16:34.600]And then they'll always have that navigation on the right.
- [00:16:38.300]And on a mobile device, it'll always be at the very bottom.
- [00:16:40.860]So you can scroll through and I've seen people use these
- [00:16:46.420]for annual reports and things like that.
- [00:16:49.080]Where they've got the introduction to the annual report
- [00:16:52.740]and then they've got the sections of the annual report
- [00:16:56.040]that they want people to move through.
- [00:16:57.240]And you can embed videos and put photos in here, obviously.
- [00:16:59.980]So it's a nice way to create sort of documentation
- [00:17:08.680]that you want kind of to have all encompassed
- [00:17:11.800]with its own navigation on your site.
- [00:17:14.940]So those are book pages.
- [00:17:16.840]I'm not going to go through adding them in.
- [00:17:19.060]They're in our training today,
- [00:17:20.800]but they're pretty self-explanatory
- [00:17:22.620]and there's a little bit more documentation here
- [00:17:24.560]on this book page.
- [00:17:25.520]In these book pages, four book pages.
- [00:17:28.440]But I am going to talk about web forms a little bit.
- [00:17:33.940]So we're going to add a web form to our site
- [00:17:36.400]and we will call it RSVP for training.
- [00:17:42.100]And you'll see here when I go to add a web form page
- [00:17:47.480]that it says,
- [00:17:49.040]web forms must first be created before referencing them,
- [00:17:51.440]which might seem a little confusing.
- [00:17:53.240]So in the new system,
- [00:17:56.440]the web form pages,
- [00:17:59.360]that is to say the page
- [00:18:02.060]that you attach the web form fields from,
- [00:18:05.080]the web form fields are separate from the page
- [00:18:09.260]that you're attaching them to,
- [00:18:10.380]which might seem a little confusing at first.
- [00:18:13.500]But in the past,
- [00:18:16.060]we've gotten a lot of people who've said,
- [00:18:17.740]can I clone a web form?
- [00:18:19.020]In the old system,
- [00:18:20.120]the old system, you cannot clone a web form.
- [00:18:22.460]In the new system, you wouldn't need to
- [00:18:24.280]because the web form fields are separate from the page
- [00:18:28.820]and you can actually attach those fields to multiple pages.
- [00:18:32.880]So what is the benefit of that?
- [00:18:35.000]Well, if you have an event or events
- [00:18:39.760]that you're always gathering the same information for,
- [00:18:42.840]maybe they're yearly,
- [00:18:44.680]maybe they're quarterly,
- [00:18:46.020]maybe they're monthly,
- [00:18:49.000]clone the web form over and over and over,
- [00:18:51.380]what you do is you would have those fields
- [00:18:53.580]of the data that you're collecting.
- [00:18:54.980]And then you would just create a new page,
- [00:18:57.320]a new web form page,
- [00:18:59.080]which is what I'm doing right now.
- [00:19:00.200]And I'm going to go ahead and attach
- [00:19:02.000]this RSVP web form,
- [00:19:06.040]which has already been created.
- [00:19:06.980]And I'm going to click save.
- [00:19:08.440]So you can see what that looks like.
- [00:19:09.720]So you can see here,
- [00:19:16.620]these fields were already,
- [00:19:18.980]we were already created on the backend
- [00:19:21.320]and now they're attached to this page.
- [00:19:24.340]And if anyone were to fill it out,
- [00:19:26.660]those results would be attached
- [00:19:28.360]to the page itself.
- [00:19:29.720]So the benefit of this is again,
- [00:19:32.540]rather than cloning a web form,
- [00:19:34.700]you'd have the fields
- [00:19:35.680]and you could just attach it
- [00:19:36.920]to multiple pages.
- [00:19:37.900]You know, maybe this is a signup
- [00:19:40.660]for your spring event.
- [00:19:42.380]Maybe this is a signup
- [00:19:43.340]for your summer event
- [00:19:44.280]and your fall event.
- [00:19:45.060]You just create new pages for those.
- [00:19:46.920]The signups,
- [00:19:48.960]would be attached to those pages,
- [00:19:50.480]like the spring, summer and fall signup.
- [00:19:53.140]And then you could go into the results
- [00:19:55.480]and on the results page
- [00:19:57.360]is where you can still,
- [00:19:58.360]it's a lot like it was before
- [00:20:00.260]where you can download the data
- [00:20:01.960]and things like that.
- [00:20:02.880]So, well, how do you change
- [00:20:05.720]the fields themselves?
- [00:20:06.780]That's actually in a different section
- [00:20:09.580]on your site.
- [00:20:10.160]That is actually in your structure.
- [00:20:12.060]So structure, web forms.
- [00:20:14.520]This is where you
- [00:20:15.680]change the fields themselves
- [00:20:18.680]that,
- [00:20:18.940]that you are adding,
- [00:20:20.240]that you then,
- [00:20:22.660]that you then
- [00:20:23.480]attach to the web form pages.
- [00:20:27.620]So here's RSVP.
- [00:20:28.700]This is the one we,
- [00:20:29.520]we added to our page.
- [00:20:31.100]So we're going to click build here.
- [00:20:33.360]So you can see all these fields, right?
- [00:20:36.260]We're going to go ahead
- [00:20:38.100]and add another one.
- [00:20:39.140]And let's just do
- [00:20:43.600]radio buttons, right?
- [00:20:46.120]Let's just do radios.
- [00:20:48.920]Do you enjoy the cold?
- [00:20:55.340]I don't know.
- [00:20:56.540]Yes.
- [00:20:57.980]No.
- [00:21:00.180]So we're going to add this.
- [00:21:01.620]We're going to save this element.
- [00:21:04.040]You can see down here,
- [00:21:07.120]we've added it.
- [00:21:07.900]We're going to save it.
- [00:21:08.780]And then, you know,
- [00:21:12.100]content I mentioned before,
- [00:21:13.840]that's where you add content.
- [00:21:15.120]But content is also
- [00:21:16.280]where you find all the content
- [00:21:17.540]that you have added
- [00:21:18.900]to your site.
- [00:21:19.580]So if you click content by itself,
- [00:21:22.600]you can see everything
- [00:21:23.880]that you've added to your site.
- [00:21:25.040]So you can see I've added this person,
- [00:21:26.840]I've added this news item,
- [00:21:27.880]and I've added this RSVP.
- [00:21:29.300]So if I click back into this web form
- [00:21:31.800]that I've attached those fields to,
- [00:21:34.240]and I scroll to the bottom,
- [00:21:35.360]you can see this new radio button
- [00:21:39.400]that we just added
- [00:21:41.040]when we went in through structure web forms.
- [00:21:44.440]And we added fields to that
- [00:21:48.880]RSVP web form.
- [00:21:49.880]And then, you know,
- [00:21:51.440]if I wanted to create another RSVP for next month,
- [00:21:56.900]rather than going in
- [00:21:58.600]and changing all these fields again,
- [00:22:00.000]I would just go add content web form.
- [00:22:03.480]I would attach the same fields to a new page,
- [00:22:06.660]and then I would have separate data collected
- [00:22:09.160]for those two different trainings.
- [00:22:11.900]So that is all these kind of specific pieces of content
- [00:22:18.860]you can add to your site.
- [00:22:20.820]And now I'm going to get into builder page.
- [00:22:22.660]And builder page, I mentioned previously,
- [00:22:25.120]it's kind of like two pages in one.
- [00:22:28.060]And we're going to talk about the basic functionality of it first,
- [00:22:31.260]and then we're going to go into layout builder,
- [00:22:33.020]which is kind of the more advanced functionality of that.
- [00:22:36.240]So once again, nobody wants to see me type a ton,
- [00:22:41.300]so I am just going to copy this,
- [00:22:43.820]and we're going to create a really basic page here.
- [00:22:48.840]All about our department.
- [00:22:51.260]And I'll put another space in here.
- [00:22:57.480]And we're going to add a big image at the top of the page.
- [00:23:03.380]Hero, if you're familiar with the terminology,
- [00:23:06.620]is basically just a big image that's at the top of your page.
- [00:23:10.320]And we can either, and in this case,
- [00:23:15.560]I will show you, let's see here.
- [00:23:18.980]Let's choose this one here.
- [00:23:23.600]So before I added an image, I uploaded an image.
- [00:23:30.340]And within this interface, you can just scroll down
- [00:23:34.280]and you can see everything that's been added
- [00:23:36.300]to your media library.
- [00:23:37.400]So you can see I added this aerial campus photo this morning.
- [00:23:40.500]But all these other photos are ones
- [00:23:44.080]that I've added in previous trainings.
- [00:23:45.520]We're going to go ahead and choose this one here.
- [00:23:48.800]And because it already has alt text attached to it,
- [00:23:52.960]I don't need to mess with it or anything like that.
- [00:23:54.980]The object position here,
- [00:23:57.500]if you think of this as a photo or print behind a matte,
- [00:24:03.040]you know, like you're framing something,
- [00:24:05.020]the object position,
- [00:24:06.760]think of that as how you would move that photo
- [00:24:10.760]or print behind the matte.
- [00:24:12.600]So a hero image by default
- [00:24:16.840]is going to have a little bit of the top
- [00:24:18.780]and a little bit of the bottom of the image trimmed off,
- [00:24:21.000]depending on what size that hero is.
- [00:24:23.320]You can see here we have medium, small, or large,
- [00:24:26.440]and that kind of just determines
- [00:24:27.720]the vertical height of that hero image.
- [00:24:30.880]This object position
- [00:24:33.640]determines what part of that image shows through.
- [00:24:36.680]So by default, it's going to be
- [00:24:38.580]the very middle of that image.
- [00:24:40.940]Like if you can imagine a horizon line
- [00:24:43.180]of an image right through the middle,
- [00:24:45.580]50% of the way down.
- [00:24:47.020]By default, that horizon line
- [00:24:48.760]if it were 50% of the way down
- [00:24:50.860]would be right through the middle.
- [00:24:52.460]So whether it's small or medium or large,
- [00:24:54.940]it's going to be right in the middle.
- [00:24:56.660]So this object position,
- [00:24:58.520]if you want the top of the photo
- [00:25:01.660]kind of locked to the top of the matte,
- [00:25:03.800]you would choose this 50% 0%.
- [00:25:06.960]And you really only have to worry
- [00:25:08.020]about these top six.
- [00:25:09.080]These bottom six are for horizontal images.
- [00:25:11.940]These are for some future updates
- [00:25:14.260]of things that we're doing on the site.
- [00:25:15.940]These top images or these top positions
- [00:25:18.740]are the ones that refer to what we're doing
- [00:25:20.540]with the image right now.
- [00:25:23.400]So you can see here, actually,
- [00:25:25.040]I chose a pretty good image
- [00:25:26.140]because the visual information in this image
- [00:25:28.100]is kind of right through the middle, right?
- [00:25:29.820]Like I said, we'll see what it looks like
- [00:25:32.000]when I save it, but we'll put,
- [00:25:34.660]well, I'm going to fill in these fields
- [00:25:36.020]just so you can see what they look like.
- [00:25:37.480]Title, subhead, and we're going to click create.
- [00:25:44.820]We need to click that button
- [00:25:45.940]to make sure it's created.
- [00:25:48.720]Got our hero.
- [00:25:49.380]We have some text in here
- [00:25:51.360]and we're going to click save.
- [00:25:52.280]All right.
- [00:25:58.620]So you can see this is a medium size hero
- [00:26:03.060]and it's kind of trimmed.
- [00:26:04.300]So we might want to mess with that a little bit.
- [00:26:06.280]We've got all this other stuff in here.
- [00:26:08.760]There's a little bit of empty space over on the right.
- [00:26:11.320]And maybe we want to put this in that navigation.
- [00:26:14.020]So we're going to come back in here
- [00:26:15.920]and we're going to edit this page.
- [00:26:18.700]And the first thing we're going to do
- [00:26:23.920]is we're going to edit the hero.
- [00:26:24.960]We want to make it a little taller
- [00:26:26.160]so a little bit more of that image shows through.
- [00:26:28.160]I don't think we're going to get this and this
- [00:26:31.780]because they're right at the top and the bottom of the frame,
- [00:26:33.600]but we can at least show a little bit more of it.
- [00:26:35.300]And I said we wanted to add it to the navigation.
- [00:26:39.160]So over here on the right,
- [00:26:41.600]there's all this administrative stuff
- [00:26:44.080]that has to do with the page,
- [00:26:45.180]including adding a menu link.
- [00:26:48.680]So we're going to add this to the menu.
- [00:26:50.120]So this is going to add it to the main navigation,
- [00:26:53.340]as you can see here.
- [00:26:54.400]By default, the CMS is going to create
- [00:27:00.080]its default alias path.
- [00:27:02.300]If you want it to be something else,
- [00:27:03.960]like About Us,
- [00:27:05.600]I could turn that off and change it to About Us.
- [00:27:08.300]We'll leave it as default for now.
- [00:27:10.040]Authoring information just says
- [00:27:12.820]who created the page from the first place.
- [00:27:14.780]Promoted, we do not use this right now.
- [00:27:17.420]We might bring it up.
- [00:27:18.660]It might be something we use in future updates,
- [00:27:22.040]but right now this isn't even used.
- [00:27:23.660]And then page options,
- [00:27:24.980]we have the option to visually hide the page title,
- [00:27:28.720]which we'll come back to later in the training,
- [00:27:31.180]and hide the sidebar.
- [00:27:32.740]So the sidebar is by default,
- [00:27:36.700]where we put these kind of book page navigation on pages.
- [00:27:41.420]If you create pages and then you put them in your navigation
- [00:27:44.500]and then you create child pages
- [00:27:45.980]and put them in your navigation,
- [00:27:47.000]we don't want those.
- [00:27:48.640]That here, we're going to hide that.
- [00:27:49.940]We made this large.
- [00:27:52.760]We're going to update the hero.
- [00:27:53.800]We've added it to our navigation.
- [00:27:55.820]You know, this WYSIWYG works a lot like the previous WYSIWYG
- [00:28:00.940]where you can format text.
- [00:28:03.000]So I'm going to come in here.
- [00:28:05.400]I can format my header.
- [00:28:09.240]You know, you can add bulleted lists, things like that,
- [00:28:13.440]you know, bold italic.
- [00:28:18.620]You know, if you have links, you can turn them into buttons,
- [00:28:20.640]things like that.
- [00:28:21.480]You can even add more images.
- [00:28:23.260]So I can pop back into the media library here,
- [00:28:26.380]scroll down, you know, choose this one.
- [00:28:30.240]And then once it's inserted the image,
- [00:28:34.900]you have these formatting options.
- [00:28:36.380]So narrow is going to be about half of the viewport width.
- [00:28:39.220]Wide is going to be the whole viewport width.
- [00:28:42.840]We're going to make it narrow.
- [00:28:45.240]And then this is kind of how the text,
- [00:28:48.600]is offset with a photo.
- [00:28:50.000]So you can float it left and offset,
- [00:28:52.160]centered offset,
- [00:28:53.140]floated left, floated right.
- [00:28:56.120]You know, I think floated right narrow looks pretty good.
- [00:28:58.780]And we made all the edits,
- [00:29:02.840]I think that we want to do for now.
- [00:29:04.760]So we'll save that.
- [00:29:05.880]So you can see a little more of the photo
- [00:29:14.020]and we could adjust it more.
- [00:29:15.400]You know, if you wanted to see
- [00:29:16.300]maybe the top part of the frame,
- [00:29:17.560]you could,
- [00:29:18.580]go in there and adjust that object position.
- [00:29:20.760]But for now, it looks pretty good.
- [00:29:22.740]We got the image floated to the right here
- [00:29:25.180]and it's showing up on our navigation.
- [00:29:27.440]So you can create these pages.
- [00:29:30.000]This is kind of like the basic page
- [00:29:33.900]in the old system,
- [00:29:34.980]except for you can't edit the HTML.
- [00:29:36.380]You can still create nice looking pages
- [00:29:38.200]with embedded images and video
- [00:29:40.040]and links and all kinds of stuff.
- [00:29:43.120]So that is,
- [00:29:48.560]kind of the basic page functionality
- [00:29:52.640]of a builder page.
- [00:29:53.940]And now we're going to go through
- [00:29:56.040]some of these other tabs
- [00:29:57.040]and we're going to add
- [00:29:58.600]a couple more builder pages.
- [00:29:59.980]I'm going to show you the cool,
- [00:30:01.120]the extra cool functionality
- [00:30:03.140]of builder pages.
- [00:30:05.160]So we're going to go our trainers.
- [00:30:12.420]We're going to build a directory page now.
- [00:30:18.540]And all I'm going to put on it
- [00:30:20.500]is the title and I'm going to hit save.
- [00:30:23.040]And now I'm going to pop into this layout tab.
- [00:30:25.520]So this is the tab I'd mentioned before.
- [00:30:28.240]This is where we have
- [00:30:30.800]our layout builder functionality.
- [00:30:32.080]And when I pop into this tab,
- [00:30:33.320]you'll see all kinds of stuff in here.
- [00:30:34.720]So I can add a new section
- [00:30:36.720]and then there's this placeholder stuff.
- [00:30:38.580]Pardon me.
- [00:30:41.380]So this is the kind of
- [00:30:48.520]sidebar menu we hid at the bottom of the screen
- [00:30:50.860]on the previous page.
- [00:30:51.840]And if I were to put text in here,
- [00:30:53.420]put text in there on this edit page,
- [00:30:58.080]you would see it here.
- [00:30:59.500]We don't really need to mess with it.
- [00:31:01.100]It's just here to show us that it exists.
- [00:31:05.040]We are going to use the layout builder functionality.
- [00:31:08.320]So when you click add section,
- [00:31:13.440]you immediately get asked
- [00:31:16.760]what type of a layout you want for that.
- [00:31:18.500]So at a very basic level,
- [00:31:21.280]if you think of a layout builder page as tables,
- [00:31:25.080]just think of it as tables, right?
- [00:31:26.700]You can add rows and then within those rows,
- [00:31:30.020]you can add columns.
- [00:31:30.960]In the previous system,
- [00:31:32.480]I think we referred to them as bands,
- [00:31:33.980]but really it's really nothing more advanced
- [00:31:37.780]than creating rows with columns in them.
- [00:31:39.820]And then within the columns, you put stuff in them, right?
- [00:31:42.660]You put your content in those.
- [00:31:43.880]So we're adding a section
- [00:31:47.640]and you can choose to add a section
- [00:31:48.480]and you can choose these different layouts.
- [00:31:49.460]We're going to, for this one, we're going to choose one column.
- [00:31:51.960]And then once you choose the layout for that section,
- [00:31:55.400]you have a bunch of different options
- [00:31:57.760]for customizing that section.
- [00:32:00.460]So you can add a heading
- [00:32:02.720]and then format that heading.
- [00:32:05.440]You can add some background, color, and a pattern.
- [00:32:11.160]And these patterns and colors work with one another.
- [00:32:14.140]The container is the width.
- [00:32:18.460]So you can add a pattern of that section.
- [00:32:20.820]So standard wrapper is kind of to the edge of the navigation.
- [00:32:23.520]Edge to edge is viewport with,
- [00:32:27.480]like viewport edge to viewport edge.
- [00:32:29.580]We're going to go standard wrapper on this one.
- [00:32:31.380]And then the spacing is the vertical spacing
- [00:32:34.840]of that band or that row or that section
- [00:32:39.000]or whatever you want to call it.
- [00:32:40.060]So by default, it has kind of this nice medium-sized padding.
- [00:32:44.560]It's actually a multi-select box.
- [00:32:47.320]So if you want to get rid of all the padding
- [00:32:48.440]you can click top, remove top, hold down your command key,
- [00:32:52.260]remove bottom.
- [00:32:53.020]Likewise, if you want to deselect those,
- [00:32:55.580]you hold down your command key and click them again.
- [00:32:58.380]In this case, we're just going to use the default.
- [00:33:00.920]So now you can see that I added this section
- [00:33:06.160]and I have this kind of light gray background
- [00:33:08.780]with these campus landmarks pattern over the top of it.
- [00:33:12.760]And now that I've added it, you can see that immediately
- [00:33:18.420]the system says, okay, you can immediately, if you want,
- [00:33:21.780]you can add another section both above and below it.
- [00:33:24.180]So anytime you add a section,
- [00:33:25.980]it's going to give you the option to add another section
- [00:33:28.600]either above and below it.
- [00:33:29.840]And then it also, I have this new box to add a component.
- [00:33:34.800]So I'm going to click add a component.
- [00:33:37.700]And these are all the components that I can add to this section.
- [00:33:43.420]So I like to think there's two sorts of different components
- [00:33:48.400]types of content or components that you can add.
- [00:33:54.520]So there's these right here.
- [00:33:56.280]And these are the ones where if you think about your content,
- [00:34:00.740]these are the pieces of content that are going to live on this page specifically.
- [00:34:05.360]There's also this more button, and I'm going to click that right now.
- [00:34:09.440]The more button has to do with pieces of content that might not live on that page specifically,
- [00:34:18.380]but live in other places on the site or in other public information apps at the university.
- [00:34:25.340]So what I mean by that, I'll show you as we kind of move through here,
- [00:34:28.940]but we're going to add a curated list of people.
- [00:34:31.900]So if you remember way back at the beginning, the first thing I added was a person for myself.
- [00:34:37.300]So we're going to go ahead.
- [00:34:39.700]We're adding a section of people.
- [00:34:42.420]So we're going to go lead instructor and then,
- [00:34:48.360]person nodes to display.
- [00:34:49.520]So this is just referencing people on the site that have been added as that content type.
- [00:34:54.960]So I'm going to reference myself.
- [00:34:57.320]I'm going to go teaser featured.
- [00:34:58.780]We're going to add this block.
- [00:35:00.620]And now you can see I've added myself.
- [00:35:05.540]Before I click save on this page, we're going to add another section.
- [00:35:08.680]We're going to buzz through this quick because
- [00:35:12.320]we're going to add some more people.
- [00:35:16.420]So you can see again,
- [00:35:18.340]another add section, another add section above and below.
- [00:35:21.360]We're going to add a component.
- [00:35:22.700]We're going to go to more.
- [00:35:23.620]We're going to do another curated list of people.
- [00:35:26.600]And we'll do other trainers.
- [00:35:31.040]We know Eric's in here helping today.
- [00:35:33.900]So we're going to change the view mode.
- [00:35:36.700]And again, there's different view modes on all these.
- [00:35:38.480]So we're going to go teaser.
- [00:35:39.580]We're going to add this block.
- [00:35:41.220]And then we'll click save.
- [00:35:48.320]So now you can see, you know, our trainers have lead instructor.
- [00:35:55.160]This is being displayed in a slightly different way.
- [00:35:58.340]It's teaser featured.
- [00:35:59.360]And then this would, you know, if we have others, they would just kind of layer in here in a row, in a grid.
- [00:36:06.900]And you could just keep adding them and keep adding them.
- [00:36:10.120]So this is good if, you know, you have a site where you have maybe you might not want to pull somebody out like this.
- [00:36:17.760]But if you have a site where you have maybe you might not want to pull somebody out like this.
- [00:36:18.300]Or if you have the director of a center or something like that, you could pull them out and then you could have faculty and you could have a new section with staff and you could have a new section with graduate students or, or, you know, you could have faculty, staff, visiting faculty and you could make them all slightly different background colors and you could put headers in there.
- [00:36:37.200]And so this is the way you would create kind of a directory page on your site.
- [00:36:41.360]And, you know, just like the about page, if I wanted to, I can come back into the edit tab here.
- [00:36:48.280]And I can add this to the menu pretty easily.
- [00:36:50.920]So, you know, and I can move it over to the right if I want by adding some weight to it.
- [00:36:55.480]And so now you can see that this one has been added to the navigation as well.
- [00:37:01.760]So we've got about our department and our trainers.
- [00:37:04.060]And now we're going to go back into layout builder and we're going to build a new front page for our site.
- [00:37:11.800]And we're going to touch on some of those other components.
- [00:37:13.980]So we're going to add content builder page.
- [00:37:18.260]And we're going to do welcome.
- [00:37:19.480]And again, we're just going to click save.
- [00:37:24.540]So we're going to pop back into layout builder.
- [00:37:31.760]And we will go ahead and add a section here.
- [00:37:39.060]We're going to do one column.
- [00:37:41.300]I swear we'll do two column next just so you can kind of see the differences.
- [00:37:44.160]And we're just going to go ahead and add this.
- [00:37:48.240]It's going to go default on everything for now.
- [00:37:50.020]We're going to add a component.
- [00:37:51.900]We're going to do a display banner.
- [00:37:53.420]So display banner over on that CMS site I referenced previously,
- [00:37:58.180]we have documentation that shows what all these components are.
- [00:38:01.200]Unfortunately, we don't have the time to get to all of these today.
- [00:38:05.120]But a display banner is basically like a fancy hero image.
- [00:38:09.400]So we can do welcome subhead.
- [00:38:12.760]I'll fill all these out just so you can kind of see what they look like.
- [00:38:15.140]Subhead.
- [00:38:18.220]Do an image.
- [00:38:23.180]You need a big image here.
- [00:38:25.780]Let's just go with this.
- [00:38:29.120]You can add some text here.
- [00:38:37.440]You know, we do.
- [00:38:48.200]So links, this is where you'd want to put probably your most, you know, if you're thinking of this as a big image at the top of your page and there's going to be a link over the top of it, this is going to kind of be the most important thing that you want people to do when they come to your site.
- [00:39:01.920]So if this is a training site, well, I think the most important thing that we would probably want people to do is sign up for training.
- [00:39:08.620]So the cool thing about the new system is that if you have already created a page on your site.
- [00:39:18.180]When you're creating a link to that page, rather than knowing the URL to that page, all you have to know is the title of that page.
- [00:39:24.180]So you'll see here when I in the URL field, if I just start typing RSVP, whoops, mistyped that.
- [00:39:32.400]You can see here it's going to autocomplete to that page called RSVP for training.
- [00:39:38.100]I'm going to click it. And by doing that, I've already created a link there.
- [00:39:41.880]I don't have to go search for the URL or anything. It has created a link internally to that.
- [00:39:48.160]And then the text is going to be, we'll just call it sign up for training.
- [00:39:51.560]So we've got this tree over here and then we've got these shadows.
- [00:39:56.220]So this again is just going to, this determines where all this stuff we're putting on it is going to float over our image.
- [00:40:03.580]So in this case, we're going to go to the right. I think that'll look probably best. I don't know.
- [00:40:08.100]Let's add this block. See what it looks like.
- [00:40:12.340]So you can see here, I think that looks pretty good. It offsets the tree.
- [00:40:18.140]We'll just go ahead and save the page. Just kind of see what it looks like.
- [00:40:21.140]So in this case, we probably don't want this page title up here.
- [00:40:31.140]And we want to get rid of some of this spacing around here.
- [00:40:34.140]Just so it's bigger and it hits right up against the navigation.
- [00:40:39.140]So we're going to go into edit first and we're going to hide that page title.
- [00:40:44.140]So if you're eager to do that,
- [00:40:47.140]And you remember way back when I hit that sidebar, it's over in the admin side, the administrative toolbar side here.
- [00:40:58.180]If I scroll clear to the bottom and I click page options, I can visually hide that page title.
- [00:41:04.060]So I'm going to save that.
- [00:41:05.380]So the page title is gone, but I still got this spacing here.
- [00:41:12.680]So in order to get rid of that, I need to go back into layout.
- [00:41:16.920]So, so once you've created sections and components in the layout tab and layout builder, uh, there's
- [00:41:28.620]a couple familiar user interface things that happen.
- [00:41:31.640]So once you've created the section, if you watch my mouse here, you can see that when
- [00:41:37.240]I roll over the section that I've created, I automatically get this button to configure
- [00:41:43.040]that section.
- [00:41:43.740]So again, the section is kind of the route.
- [00:41:46.740]The wrapper that you're putting stuff into, it's kind of all the padding and the layout
- [00:41:52.220]for that section or that row.
- [00:41:55.180]So when you hover over a section that's been created, you're going to get the ability to
- [00:41:59.720]edit that section in the upper left.
- [00:42:01.420]Similarly, if you've created a component in those section, all you have to do is hover
- [00:42:08.920]over that component and you'll get a little edit interface in the upper right.
- [00:42:12.920]So if I wanted to edit the component.
- [00:42:16.660]Or the display banner, I would click here.
- [00:42:20.040]I know that I want to get rid of this padding and I can see that the padding is around it.
- [00:42:25.500]So I know that that is in the section.
- [00:42:28.980]So I'm going to configure the section.
- [00:42:31.360]I am going to go edge to edge.
- [00:42:33.360]That'll get rid of this side padding.
- [00:42:35.700]And then I want to remove that default vertical spacing at the top.
- [00:42:39.720]And I'm going to click update and we'll click save just to see what it looks like again.
- [00:42:45.700]Save early.
- [00:42:46.300]Save late.
- [00:42:46.640]Save often.
- [00:42:47.100]It's not a bad idea.
- [00:42:48.060]So now we've got it.
- [00:42:51.100]It's good.
- [00:42:51.800]It looks got a big photo right at the top of our page.
- [00:42:54.740]It looks really nice.
- [00:42:55.680]But we want to add some more stuff to our front page.
- [00:42:59.220]So we're going to pop back into layout.
- [00:43:00.600]And we're going to come back down here and we're going to add a new section and we're
- [00:43:06.040]going to do a two column.
- [00:43:06.960]So you'll see when I get a two column section, I have the ability to not only create a 50-50
- [00:43:13.900]section, but I can create one column that's
- [00:43:16.620]wider than the other and then you can determine where that wider
- [00:43:20.120]column is. We're just going to go with 50-50 here and we're actually
- [00:43:24.120]going to stick with all the default on this particular section.
- [00:43:28.000]And now, once you've added a two
- [00:43:32.080]column, and just like if you add a two column or a three column, you have the ability
- [00:43:35.940]to add components to those sections
- [00:43:40.120]or to those layouts. And if you're really
- [00:43:44.260]eagle-eyed, you'll notice that the
- [00:43:46.600]these components you can add to this section are actually slightly different
- [00:43:50.660]than the one you can add to the full column. And that's just because some things look better
- [00:43:54.540]smaller, some things look better bigger. Some of the things we have
- [00:43:58.380]for display options don't look good jammed into small spaces, and some things that we have
- [00:44:02.540]for display options don't look good stretched out. So we're
- [00:44:06.540]going to do a card. And a card is kind of what
- [00:44:10.460]it says it is. It's kind of like a Pokemon card or a
- [00:44:16.580]card. You don't have to put a picture in. It has a headline.
- [00:44:21.560]It has some text and an optional link. So if we're
- [00:44:26.560]putting this on our website, this would be other stuff we
- [00:44:28.560]want people to do when they come to our website. So maybe
- [00:44:30.560]we want them to learn about our department, right? So we'll
- [00:44:36.560]just put that in here. And again, we've created this is a
- [00:44:42.560]link field. So we know that if we want to create a link to
- [00:44:46.560]that page, all we have to do is start typing the title that
- [00:44:50.560]page, and we've created a link. I'm going to go ahead and fill
- [00:44:56.560]all these out. See what they look like. We'll put an image
- [00:45:01.560]in here. Oops.
- [00:45:16.540]And then for each of these, you can choose a background.
- [00:45:24.540]We'll do lightest gray. So you can see we created a card here
- [00:45:29.540]with a link to the about our department page. We'll just go
- [00:45:33.540]ahead and do another card to make it kind of balanced. And
- [00:45:39.540]then we'll say, you know, meet our people. And then I think
- [00:45:46.520]we'll call it what our instructors or trainers or
- [00:45:48.520]something like that. Yep, our trainers. So we're going to
- [00:45:50.520]create a link to that page. And then we'll go trainers,
- [00:45:55.520]overline, trainers, subhead, image. Just pop that in there.
- [00:46:16.500]And then we're going to go up here. And I'm going to remove
- [00:46:19.180]this link because I want to show you something. So we're going
- [00:46:22.960]to remove that link from this headline. And we're going to
- [00:46:25.920]scroll down and you'll see something. So because I removed
- [00:46:30.300]that link from the headline, I now have the option to add
- [00:46:35.340]buttons to this card. So here's another URL. Our trainers,
- [00:46:43.080]right? So here's where I'm going to go. So I'm going to
- [00:46:46.480]I can say meet our people. And we're going to make the
- [00:46:51.120]backgrounds match. And I'm going to add this block. So you can
- [00:46:58.540]see by not adding that headline link in here, it allowed me the
- [00:47:01.960]ability to add a button in here. So these are both cards, but
- [00:47:07.240]they have slightly different displays. And so if I're
- [00:47:09.860]actually building this in real life, what I would probably do
- [00:47:12.720]is make these match visually because just so they look similar
- [00:47:16.460]right, so the users have a similar UI, like they make them
- [00:47:22.020]both buttons or make them so both the headlines are links.
- [00:47:24.760]But what I wanted to illustrate is that not only do we have a
- [00:47:29.440]lot of different components that you can use on your site. But in
- [00:47:33.600]many cases, within those components, there are multiple
- [00:47:37.520]options for displaying those components. So cards, you can
- [00:47:41.400]obviously display these cards different. We have a component
- [00:47:44.760]called tandem, that allows you to display these cards
- [00:47:46.440]differently. It allows you a bunch of different display
- [00:47:48.200]options, depending on what options you choose. And then,
- [00:47:52.660]you know, the display banner, you can align your text
- [00:47:54.980]differently and things like that. And we're adding options
- [00:47:57.760]all the time. So I just wanted to make it clear that in
- [00:48:02.220]addition to all the components that you can see, there are
- [00:48:05.920]options within those components for making them display
- [00:48:08.800]differently. So we're going to keep adding to our front page
- [00:48:12.300]here. And I'm going to kind of buzz through this quick. So we
- [00:48:14.940]have a little bit of time for questions.
- [00:48:16.420]Without running too much over an hour.
- [00:48:19.320]But we're going to add some news to our site.
- [00:48:25.500]So if you remember, some news and some events. So if you
- [00:48:31.660]remember, like I said, if you think of these components as
- [00:48:36.780]things that are on that page that exist on that page, and
- [00:48:41.280]when you click this button for these components, these are
- [00:48:44.560]things that are either exist.
- [00:48:46.400]So in the old system, you had to know JavaScript. You had to
- [00:48:55.780]put JavaScript on your page to pull in events. In the new
- [00:48:58.580]system, all you have to do is know the URL for your events
- [00:49:06.180]calendar. And you add the block. And it pops in the events, and
- [00:49:13.080]they're already formatted. So it's another nice useful
- [00:49:16.380]feature. And we're going to go ahead and pop in here and pop in
- [00:49:21.900]and add some news. So again, use this default spacing. We're
- [00:49:27.000]going to add another component here. Going to pop into more.
- [00:49:31.060]And we're going to go news aggregation. So news
- [00:49:35.160]aggregation, we're pulling news items that have been added to
- [00:49:37.800]the site. If you remember when we added that news item, way
- [00:49:41.820]back at the beginning of the training, it was automatically
- [00:49:45.220]pulling in the most recent news.
- [00:49:46.360]news items. So we want to pull those into our front page as
- [00:49:52.540]well. And we're going to add this block. And let's just click
- [00:49:59.520]save to suit our pages looking like. So you know, we could go
- [00:50:10.020]in here and fix this and get rid of the padding on the sides. So
- [00:50:13.080]it went edge to edge. And you know, maybe remove a bit more
- [00:50:16.340]padding here and there in the layout builder. But otherwise,
- [00:50:19.040]we have a pretty nice looking page that we built pretty
- [00:50:21.440]quickly. So I'm going to touch on these other tabs up here. So
- [00:50:28.500]we touched on view, we're obviously viewing the page,
- [00:50:30.980]edit, you've seen that layout, we've been in layout builder.
- [00:50:33.880]Revisions just shows all the revisions that have been made to
- [00:50:38.380]that page. And then who made them. So you can see here, I
- [00:50:42.380]obviously made five revisions to this page as we were building it.
- [00:50:46.320]If you have multiple people editing on your site, it will
- [00:50:49.260]show, you know, who made changes to that page. If you have
- [00:50:52.340]multiple people editing, it'll show their name here and what
- [00:50:57.280]time that they edited it. So maybe somebody goofs up and
- [00:51:01.520]makes a bad edit. It's very easy to come in here and revert back
- [00:51:04.780]to a previous version of a page. All you do is, you know, click
- [00:51:08.680]revert right here. You don't want to confirm that you're
- [00:51:16.300]going to revert. It's not going to, and I come back to the
- [00:51:19.300]page. I think we're going to be missing our, oh, we're missing
- [00:51:24.780]a lot. I guess I added quite a bit there. At any rate, maybe I
- [00:51:31.700]want to go back again. You can see, oops, I reverted too far.
- [00:51:37.820]Actually, I want to make sure that I have those cards and all
- [00:51:43.060]that stuff. So I can see here that that's this revert
- [00:51:46.280]revision. I just opened up this revision, right? Okay, I screwed
- [00:51:51.740]up. I reverted too far. I need to go back to this revision. So
- [00:51:56.200]I'm going to revert back to that. Yep, confirm that. So
- [00:52:00.580]every time you even revert, it saves that as a change. So I can
- [00:52:03.800]come back here and view this. And my page is back to build
- [00:52:07.180]like what we had it. So that's the revisions tab. It's helpful
- [00:52:11.780]if you have a lot of people editing on your site. Then
- [00:52:15.060]there's this replicate tab.
- [00:52:16.260]And this is another really cool feature of the new site. So
- [00:52:18.580]let's say I like this page a lot. Maybe I don't want to use
- [00:52:21.460]everything on it, but I don't want to rebuild it entirely. So
- [00:52:24.880]I'm just going to click replicate. And maybe we'll just
- [00:52:30.300]call this academics. Maybe it's a different page, right? On our
- [00:52:34.420]site. So I could click replicate. And then we have a
- [00:52:42.680]new page. I can click edit to make sure that this is
- [00:52:46.240]called academics and not welcome. Yep. And then I could
- [00:52:49.300]come into layout really quickly. And since this is the
- [00:52:54.900]academics page, maybe we don't want upcoming events. So we just
- [00:52:58.160]delete this. Remove that band. Maybe we don't want news. So
- [00:53:04.080]remove that. Remove that. Maybe we want a different image at the
- [00:53:09.500]top. So we come in here and we edit our component. Come into
- [00:53:13.900]the media library and, you
- [00:53:16.220]know, maybe we get rid of this image. We add another image
- [00:53:19.640]here. I don't know. Let's scroll down. Get this one. Insert
- [00:53:24.560]this. You know, call it academics. You know, obviously
- [00:53:37.060]I could change more of that stuff, but we'll just update
- [00:53:39.200]this quick. Save it.
- [00:53:46.200]You know, I could even come in here and edit it
- [00:53:49.020]and throw it in the menu quick.
- [00:53:52.500]So save that.
- [00:53:57.760]So then we've got academics, which is completely different
- [00:54:05.620]than our welcome page. So this replicate tab is really nice
- [00:54:09.000]if you create a page with kind of an advanced layout and
- [00:54:12.220]you really like how it looks and you don't want to have
- [00:54:14.920]to completely rebuild it.
- [00:54:16.180]You just click replicate and then just swap out the images
- [00:54:18.600]in the text and you're good to go.
- [00:54:20.800]So that is kind of the basics of building the site.
- [00:54:24.960]I want to go over a couple more things before we go into
- [00:54:28.340]question and answer section.
- [00:54:29.560]So content, we've obviously been adding a lot of content
- [00:54:35.120]and I showed you how to upload images.
- [00:54:37.100]But if you scroll down here or if you go down here to media,
- [00:54:40.440]if I click this media button, this is going to take me into
- [00:54:46.160]basically what's a full page interface for the media library.
- [00:54:51.360]So this is everything that has been added to the site.
- [00:54:54.820]So this is all the images, all the files, all the remote videos.
- [00:54:59.400]And you can see, you know, we've added a bunch,
- [00:55:01.540]all the previous trainings.
- [00:55:02.920]So I want to show you a couple more things.
- [00:55:05.260]We're going to show you how to add a file, first of all.
- [00:55:07.940]So we're going to add a file.
- [00:55:09.200]It's a lot like adding an image.
- [00:55:11.500]We're going to choose a file here if I can find one on my computer.
- [00:55:16.140]I always have trouble.
- [00:55:18.900]Okay.
- [00:55:21.300]So, oh, here's a focus group.
- [00:55:29.160]Okay.
- [00:55:29.540]So here's a document and you'll see when you upload this file,
- [00:55:36.020]you need to click this button.
- [00:55:37.420]Um, it says I certify the following is true.
- [00:55:40.780]I have done due diligence to assure that this file meets accessibility standards.
- [00:55:44.700]So.
- [00:55:46.120]What does that mean?
- [00:55:46.880]That means that when you're creating word docs, when you're creating
- [00:55:49.720]PDFs, there are steps you can go through in InDesign and whatever
- [00:55:54.940]program you're using to make sure that those files are accessible and
- [00:56:00.900]readable for people who are, might be using a screen reader or something like
- [00:56:04.700]that, we have documentation again on that site, that UNL CMS docs website.
- [00:56:11.600]There's documentation about how you can use those programs.
- [00:56:16.100]To create accessible documents.
- [00:56:17.780]And having said all that, I will say if you want, if you have content on
- [00:56:26.840]your website that you want all your users to see, it should be a webpage.
- [00:56:32.380]You know, I look, we have a monitor over here that shows
- [00:56:35.820]traffic coming to our website.
- [00:56:37.160]And it's almost 50% mobile devices.
- [00:56:40.480]So if you have ever tried to view a PDF on a mobile device, you know, that
- [00:56:46.080]it is frustrating at best.
- [00:56:48.420]And sometimes it's nearly completely unusable, if not completely
- [00:56:51.940]unusable.
- [00:56:52.460]So having showed you how to upload a file to your website, I will once
- [00:56:58.700]again, reiterate that if you have content on your website, that you want
- [00:57:03.360]everybody who's coming to your website to see it should be a webpage.
- [00:57:08.020]You know, maybe you have a flyer that you want people to print out and
- [00:57:12.840]it needs to look exactly a certain way.
- [00:57:16.060]It's probably okay to upload as a PDF if it's accessible, but I would also make
- [00:57:21.180]sure that that content is available on your website, either as an event or a
- [00:57:25.740]full page, just so that everybody can see it.
- [00:57:28.300]Now that I've said that my little rant on making webpages rather than PDFs
- [00:57:35.980]and documents is over and I will tagging.
- [00:57:39.280]These things is very similar to tagging images.
- [00:57:41.480]I would say work from general to specific.
- [00:57:43.400]So, you know, we could say this is documents.
- [00:57:46.040]Documentation.
- [00:57:47.160]And there's a tag for that.
- [00:57:51.960]Is there a focus group tag?
- [00:57:54.060]There is a focus group tag.
- [00:57:55.500]I think this is for College of Business
- [00:57:59.220]or no, this is College of Law.
- [00:58:01.560]College of Law.
- [00:58:02.920]There's a College of Law tag.
- [00:58:04.920]Anyway, there's a 2024 document.
- [00:58:07.260]There's 2024 tag.
- [00:58:08.380]We have all these tags.
- [00:58:09.480]We will upload this document.
- [00:58:12.140]And now we can see that.
- [00:58:16.020]In our media library.
- [00:58:18.420]Similarly, if you want to add a remote video,
- [00:58:22.700]all you need is the Media Hub address for that remote video.
- [00:58:27.440]So we're going to go to Media Hub and we'll find a video that we're going to add to the site.
- [00:58:32.240]Media Hub is going to load.
- [00:58:34.360]It might be a little slow today.
- [00:58:35.640]All right.
- [00:58:38.460]Campus in White.
- [00:58:39.540]This is a nice video that was just created, I think, yesterday.
- [00:58:46.000]So we are going to add media.
- [00:58:47.900]And we're going to add a remote video.
- [00:58:51.020]All I need to do is put the URL in there.
- [00:58:55.220]Tagging again.
- [00:58:56.260]We can go, you know, campus.
- [00:58:59.060]I don't know if it's city campus.
- [00:59:00.900]Campus beauty.
- [00:59:02.040]That sounds great.
- [00:59:02.800]We could say winter.
- [00:59:04.520]There's no tag for winter.
- [00:59:06.780]2025.
- [00:59:07.960]And there's no tag for 2025.
- [00:59:10.140]So we will save that.
- [00:59:15.980]And now we can see that both of these are in our media library.
- [00:59:22.420]So we're going to go back to content.
- [00:59:24.840]I want to show you how to add links and embed these to your site.
- [00:59:29.640]So we're going to come into about our department page.
- [00:59:32.000]And we're going to edit this page.
- [00:59:35.940]And then down here in the body.
- [00:59:42.200]So I previously.
- [00:59:45.960]Talked about how easy it is to add other.
- [00:59:48.440]Links to other pages on your site.
- [00:59:50.740]You know,
- [00:59:51.180]you can click a link.
- [00:59:52.820]And if I type RSVP,
- [00:59:55.420]I could link obviously to that RSVP of that web form.
- [00:59:58.300]But linking to documents that you've uploaded is similarly just as easy.
- [01:00:03.040]You don't need to know the URL to the document.
- [01:00:04.840]You just need to know the name of the document that you've uploaded.
- [01:00:07.940]So we know that that was called focus group.
- [01:00:10.160]Obviously I've uploaded a couple of those versions.
- [01:00:13.220]We're going to link that.
- [01:00:15.940]And then I've created a link to that document.
- [01:00:18.200]And similarly, if I want to add that video, I will, oops, sorry.
- [01:00:25.440]I kind of did that quickly.
- [01:00:26.620]I will click this insert media.
- [01:00:28.860]So that will open the media library.
- [01:00:31.100]And then you'll see this tab over here on the left.
- [01:00:33.940]We're going to click remote video and it takes a second to toggle into the remote video tab.
- [01:00:38.380]We're going to click campus in white, insert that.
- [01:00:44.120]And this is similar to the campus in white.
- [01:00:45.920]And this is similar to inserting a image.
- [01:00:50.220]You know, you can float it to the left around the text or you can offset it.
- [01:00:55.460]I like making videos big, so I'm going to go default and we'll offset it.
- [01:00:59.740]So we'll save that.
- [01:01:03.180]And then you'll see once it loads.
- [01:01:11.360]I think my connection is.
- [01:01:15.900]Like you today that when I hover over this link, it's linking my
- [01:01:20.820]document down in the lower left.
- [01:01:22.380]And then we've embedded our video.
- [01:01:24.900]So that's pretty much everything about creating content, editing
- [01:01:35.420]content, adding files and images to your site.
- [01:01:39.020]I'm going to touch on one more thing really, really quick.
- [01:01:41.380]So, um, you know, by default.
- [01:01:45.880]I don't know how many of you have been given access to a site or you're
- [01:01:50.840]managing sites or anything like that, but all of that is managed through the people tab here.
- [01:01:56.080]So anybody who's been given access to the site is in here.
- [01:02:01.440]So if you need to import somebody, you can import them either using their name
- [01:02:08.800]or you can use their UNL ID.
- [01:02:11.860]You can search for that.
- [01:02:13.560]I can add.
- [01:02:15.860]Add them to the site, import them.
- [01:02:18.000]Once they're imported, then they get a role on the site.
- [01:02:23.800]So there are three different roles that you will have access to give people to.
- [01:02:27.780]Site admin is kind of the default.
- [01:02:30.840]I have a little bit more access, so I can see a couple more things here.
- [01:02:35.380]But the roles that you will have access to give people to are site admin,
- [01:02:39.880]editor, and viewer.
- [01:02:40.980]So the difference between those.
- [01:02:43.620]So site admin can do.
- [01:02:45.840]Everything that I did today in this training, they can add content.
- [01:02:49.560]They can edit content.
- [01:02:50.700]They can add new users.
- [01:02:52.220]They can remove users from your site.
- [01:02:55.860]If you need to configure anything in your site that is actually under configuration
- [01:02:59.520]system, basic site settings, this ties in with your users here.
- [01:03:04.060]I'll, I'll get to it in a second.
- [01:03:05.240]If you, for some reason need to change the name of your site, that's here.
- [01:03:08.940]If you need to add an affiliation.
- [01:03:11.400]So maybe a parent organization or something to your site, that
- [01:03:15.820]is here, if you need to change the front page of your site, that is here.
- [01:03:19.600]So anybody with a site admin access can do all of those things, including
- [01:03:28.620]changing your site affiliation, which I want to show you what that is really quick.
- [01:03:32.500]So when I was on that configuration, this is the site title right here.
- [01:03:43.000]This is the affiliation.
- [01:03:45.800]And then obviously you can change your homepage.
- [01:03:48.360]As a site admin, you can do all those things.
- [01:03:51.440]So editor is the next step down.
- [01:03:54.160]An editor can add content and edit content.
- [01:03:58.220]They can't delete content and they cannot add or edit user roles on the site.
- [01:04:03.940]They can also not change the site configuration at all.
- [01:04:11.080]Viewer role is yet another.
- [01:04:15.780]It's yet another different role and it is a step down.
- [01:04:17.900]So the viewer role is somebody who can view a piece of content on the site no matter what publishing state it is in.
- [01:04:26.460]So let me explain that further.
- [01:04:29.020]When I come in here and I edit this page, by default, this page, when I click save, it's going to be published.
- [01:04:37.620]Which means if somebody has the URL to that page, anybody who has the URL to that page can see it.
- [01:04:45.760]It's linked in the navigation.
- [01:04:46.680]Anybody who clicks on that link in the navigation can see it.
- [01:04:50.480]So that is by default a page is published.
- [01:04:53.640]There are also some other statuses down here for pages.
- [01:04:59.980]So I can change a page to unpublished, which would mean that only people who have access to the site can see that page.
- [01:05:08.680]So right now we have this page with the videos on it.
- [01:05:15.740]And I can also create a draft version of the page, which means kind of like two versions of a page exist at one time.
- [01:05:22.960]There's the page that the public sees.
- [01:05:25.240]And then there's a draft version of that page, which is kind of an edited version that hasn't gone live yet that's kind of sitting in the queue.
- [01:05:33.340]So this viewer role can see a page on your site, whether it is published, unpublished, or a draft.
- [01:05:45.720]They can't edit or create new content.
- [01:05:50.040]So we like to refer to the viewer role as kind of the supervisor role.
- [01:05:54.640]Maybe it's somebody who just wants to look at a page before it goes live.
- [01:05:58.820]They don't want to have the ability to edit or mess with it at all.
- [01:06:01.360]They just want to say thumbs up or thumbs down.
- [01:06:03.680]So, for instance, maybe you get tasked to add three pages to the site.
- [01:06:15.700]Supervisor doesn't want those to go live or be viewable to the public until they have approved them.
- [01:06:22.000]So, what you do is you create these new pages, right?
- [01:06:25.620]You add a page, a builder page.
- [01:06:27.500]My new page.
- [01:06:31.500]Here it is.
- [01:06:35.540]And then we would save this as unpublished.
- [01:06:38.660]So, we could say unpublished.
- [01:06:41.500]Here's my new page.
- [01:06:45.680]You can see that it's unpublished.
- [01:06:46.880]And this is, I'm logged in, obviously.
- [01:06:51.700]So, I'm going to go ahead and open a private window in Safari.
- [01:06:54.640]I'm going to paste this in here.
- [01:06:56.700]I'm going to hit return so you can see what happens.
- [01:06:59.220]So, this page is unpublished.
- [01:07:01.400]I am not logged in right now because I'm in a private window.
- [01:07:06.280]And I do not have access to view this page.
- [01:07:08.800]So, you know, the viewer status is a good role for supervisors.
- [01:07:15.660]If they just want to give a thumbs up or thumbs down.
- [01:07:18.120]Otherwise, I think editor is a good role because you can add and edit content.
- [01:07:23.520]And again, you probably saw it.
- [01:07:26.180]I didn't even touch on it.
- [01:07:27.440]But there is a button down here to delete.
- [01:07:31.980]So, this will delete your page.
- [01:07:33.920]And I will say, please do not delete a page unless you're about 2,000% sure you want to
- [01:07:40.940]delete it because it's nearly impossible to get back.
- [01:07:44.040]And I'll just say it's impossible.
- [01:07:45.180]You're not going to get back.
- [01:07:45.640]So don't delete your pages.
- [01:07:47.500]If you do not want them to be public anymore, what I would do is I would make sure they're
- [01:07:54.720]removed from the navigation, and then I would unpublish them.
- [01:07:57.860]And then the only people that could see those, as you could see when I opened a private tab,
- [01:08:02.820]is the only people that could see that page are people who have access to your site.
- [01:08:08.460]So those are the roles and then the levels of access that you can give people as I showed you
- [01:08:15.460]how to import roles, import people into the site. I'll touch on this very briefly. Most people are
- [01:08:24.540]already in the site. If you're for some reason creating a new site, you already signed up for
- [01:08:30.640]training today. If you need to request a new site, this is cms.unl.edu. This is kind of everything
- [01:08:37.960]CMS related. Down here in the second box, if for some reason you have not created a site, you
- [01:08:45.280]can request a new site here and we'll fire one up for you. There's also a link to our documentation.
- [01:08:51.280]If you're currently working on a site that has yet to go live, there's also a button here
- [01:08:57.000]to fill out a form to make your site go live. This is kind of, as I mentioned, this is everything
- [01:09:03.640]CMS related on this site. Yeah, that is pretty much it. I saw lots of questions
- [01:09:15.100]coming up in the chat. I assume Eric got most of those taken care of, but we can go ahead and
- [01:09:22.960]if anybody has specific questions, we can go ahead and do those now. Let's see here.
- [01:09:32.320]I have a question, if that's okay.
- [01:09:44.920]I had 13 pages on my, I head the choir department, and I had 13 pages.
- [01:09:51.480]I think someone auto-updated all of my ensembles,
- [01:10:00.660]but we have a number of other sites that are kind of crucial, and that is a number of camps
- [01:10:07.260]and festivals that are nowhere to be seen. Do they still exist? I mean, I think they
- [01:10:14.740]have to exist somewhere, because as I was headed into the semester,
- [01:10:18.540]we have auditions, obviously, and I had an auditions page, and a retired
- [01:10:24.880]IT person was invited to come back on some type of a little bit of a salary to
- [01:10:36.580]help us migrate from Drupal 7 to Drupal 10, and he found the page, and he updated it
- [01:10:44.560]and it is live. So, old information must be out there somewhere.
- [01:10:50.440]There is. We have a read-only archive of all sites that were on Drupal 7,
- [01:10:58.900]which is the old system, and pardon me, geez.
- [01:11:04.720]That's great news.
- [01:11:07.360]Yes, if you have a specific site you need access to, you can just shoot
- [01:11:14.380]me a message.
- [01:11:15.280]My name is Aaron Coleman.
- [01:11:16.240]Just drop me an email, tell me what site it is, and I can give you the URL
- [01:11:21.960]to that archived site.
- [01:11:23.960]Again, it's read-only, so if the pages were unpublished.
- [01:11:27.000]But I can copy.
- [01:11:28.280]I can copy and paste.
- [01:11:30.340]Yep, exactly.
- [01:11:31.280]Lots of that.
- [01:11:32.580]So you just explained, and again, we're part of a big school of music.
- [01:11:40.040]I know that our band department has multiple staff people.
- [01:11:44.200]That are trying to learn this as well.
- [01:11:46.020]And have started creating our band.
- [01:11:47.860]Or restart their own band website.
- [01:11:51.120]And I don't want to be rogue.
- [01:11:52.960]I'd like to partner.
- [01:11:54.400]And so that we all kind of look the same.
- [01:11:56.440]Yeah.
- [01:11:56.980]But how do I.
- [01:11:59.880]Do I go through our college people.
- [01:12:02.660]So that I can start a new page.
- [01:12:06.220]And have access to a couple of my ensemble pages.
- [01:12:11.580]That are already there.
- [01:12:12.360]Do I go through.
- [01:12:14.020]Inside our own.
- [01:12:15.500]And I don't know whether you know some of our.
- [01:12:17.860]I don't know whether you know Muskan.
- [01:12:19.700]Yes.
- [01:12:20.660]So would she be the person that would grant me access.
- [01:12:23.860]To my ensemble pages.
- [01:12:25.140]So I can just get in and change wording.
- [01:12:27.420]She should have access.
- [01:12:30.440]If she does not let me know.
- [01:12:31.880]And I can get you access.
- [01:12:32.940]We have a question in the chat.
- [01:12:37.780]Aaron Eric.
- [01:12:38.880]Which section on the UNL homepage do we edit.
- [01:12:40.880]To add a big banner UNL closed today.
- [01:12:43.840]So on the splash page on UNL.
- [01:12:46.460]That is a little bit of custom code.
- [01:12:48.060]That we had on there.
- [01:12:49.040]What I have had people do.
- [01:12:51.660]We have the passport office.
- [01:12:53.740]That they're doing something like this.
- [01:12:55.260]Basically what they're doing.
- [01:12:58.440]Is they're creating just a big text field.
- [01:13:00.660]And they're doing a node include.
- [01:13:02.660]So basically in the new system.
- [01:13:05.480]This is kind of an advanced feature.
- [01:13:07.940]But you can include pages in other pages.
- [01:13:12.580]Essentially.
- [01:13:13.660]So on this page here.
- [01:13:20.340]On any page on your site.
- [01:13:22.520]Like this academics page.
- [01:13:25.940]Like what I've said.
- [01:13:27.220]When you come into layout here.
- [01:13:30.780]You can include content.
- [01:13:32.440]Either above or below.
- [01:13:35.260]Any section.
- [01:13:38.240]So what I've showed people how to do on that.
- [01:13:42.640]I'm going to just.
- [01:13:43.480]Answer this really quick for David.
- [01:13:45.540]So we can just call this notice, right?
- [01:13:47.600]We're going to create a page called notice.
- [01:13:49.940]And this is going to be really basic, but you'll, you'll see what I mean here.
- [01:13:58.760]So we're going to add a section.
- [01:14:01.540]We're just going to do one column.
- [01:14:03.380]Let's just do.
- [01:14:06.860]I don't know.
- [01:14:09.260]Let's just do dark gray.
- [01:14:10.860]And.
- [01:14:13.300]We'll just add this.
- [01:14:15.460]So we've got a dark gray section.
- [01:14:18.280]We'll do a text area.
- [01:14:19.880]We'll say, you know, closed today because it's cold.
- [01:14:28.420]Make this large, bold and centered.
- [01:14:43.120]We'll add this block.
- [01:14:43.880]So we'll save it.
- [01:14:47.000]Again, this is going to look really wonky, but I just kind of want to show you this is kind of what I mentioned previously, the modular functionality of this new site.
- [01:14:56.720]So we have a page.
- [01:14:57.680]This is a page that's called notice.
- [01:15:00.000]Closed today because it's cold.
- [01:15:01.640]We're going to come back in here.
- [01:15:03.960]This is our other page that we created.
- [01:15:06.080]We're going to add a section.
- [01:15:07.220]We're going to add one column.
- [01:15:09.940]And we'll just go edge to edge.
- [01:15:12.940]We'll add it.
- [01:15:14.760]We're going to add a component.
- [01:15:18.540]And we're going to do node include.
- [01:15:20.700]So node include is we're saying pull content from another page onto this page.
- [01:15:27.140]So we're going to do node include.
- [01:15:29.700]And we're just going to call this notice.
- [01:15:31.720]It should autocomplete.
- [01:15:33.820]Boom.
- [01:15:34.960]Add this block.
- [01:15:36.040]Obviously, I didn't format this very much because we're doing this really quick.
- [01:15:40.440]We're going to click save.
- [01:15:42.760]Oh, I didn't remove the padding.
- [01:15:49.640]But, you know, we could come in here.
- [01:15:51.500]Oh, whoops.
- [01:15:53.580]Let's leave this page open.
- [01:15:55.220]We'll edit our notice page.
- [01:15:56.740]So, you know, we would want to go into the layout here.
- [01:16:02.720]And we would want to, first of all, get rid of this default stuff.
- [01:16:12.580]And then we would want to configure our section.
- [01:16:16.440]We'd want to get rid of the top and the bottom.
- [01:16:20.600]Update that.
- [01:16:22.520]Save that.
- [01:16:23.700]And then because we've saved it here.
- [01:16:26.620]Oh, boy.
- [01:16:28.340]Now it looks terrible.
- [01:16:29.220]Well, anyway.
- [01:16:29.920]What am I doing?
- [01:16:31.880]Come back in here.
- [01:16:35.340]Sorry.
- [01:16:36.120]So we'll deselect these.
- [01:16:41.420]We'll save that.
- [01:16:42.400]We'll save it here.
- [01:16:45.700]And because it is included in the other page, it's going to automatically update that.
- [01:16:52.160]Anyway, there's some spacing in there.
- [01:16:55.160]I think we have to remove the default vertical spacing.
- [01:16:57.400]But that's something you could do to add a notice to.
- [01:17:01.020]Am I not sharing my screen right now?
- [01:17:04.600]Can you see the stuff that I did?
- [01:17:09.540]I'm sorry.
- [01:17:10.040]Okay.
- [01:17:11.300]Somebody asked if I could.
- [01:17:12.380]I could share my screen, and I thought I was.
- [01:17:14.220]All right.
- [01:17:17.860]So, David, that's probably what I would do for yours is put a note include in there
- [01:17:22.980]and then, you know, format it kind of like I did except for a little bit nicer.
- [01:17:26.840]Morgan asked, when adding multiple components to a section,
- [01:17:32.160]how do we close the space between the components?
- [01:17:34.500]I guess I don't quite understand what you mean by,
- [01:17:42.360]by adding.
- [01:17:44.160]I can explain it.
- [01:17:45.340]Okay.
- [01:17:46.140]So like I tried to add a text component and then I added,
- [01:17:50.040]and then we have an icon component afterwards.
- [01:17:52.660]And there's a large space between the text and where the icons start in
- [01:17:58.800]relation to the box size.
- [01:18:00.900]So I like hit enter and created an extra space in the top to kind of make
- [01:18:05.940]the space on the top look as big as the bottom.
- [01:18:08.200]I just didn't know if there was a way to shrink,
- [01:18:12.340]the space that falls under a text area to a different component box.
- [01:18:17.300]Is it in this,
- [01:18:18.900]did you create it on this page or on the test site or did it on some other
- [01:18:23.120]site?
- [01:18:23.520]On a different site.
- [01:18:25.080]Oh, okay.
- [01:18:26.040]You know what?
- [01:18:28.280]You'd have to send that to me specifically.
- [01:18:30.180]I think I'd have to kind of see what you're doing in some cases.
- [01:18:33.460]You do kind of have to add a little space in a text box.
- [01:18:36.220]It just, it really depends on what you're building.
- [01:18:38.420]I would have to, I would have to see the page specifically.
- [01:18:41.640]Which is a good reminder.
- [01:18:44.300]You asking me that because typically when I, um, add people, when people submit, uh,
- [01:18:53.400]request a site and I create that for them, I add them to our WDN Slack channel.
- [01:18:59.060]So we have a Slack channel, which is kind of a chat board essentially.
- [01:19:02.720]And there's about 400 plus developers, you know, content developers who are using the CMS.
- [01:19:11.140]At UNL in that Slack room.
- [01:19:13.820]If you do not have access to that Slack channel, please send me a message because that's a really
- [01:19:20.280]good way to communicate and get immediate help or, you know, ask about bugs or whatever else.
- [01:19:27.320]And that's a really good way to reach me too, if you want to send me a URL.
- [01:19:30.140]So if anybody does not have access to that Slack channel, please send me an email, Aaron Coleman,
- [01:19:36.500]and I will make sure that you get added to that Slack channel.
- [01:19:39.180]There's just a lot of communication.
- [01:19:41.120]There's a lot of communication that goes on during the day.
- [01:19:43.680]And when we add new features, we typically pop those in there and things like that.
- [01:19:47.620]Awesome.
- [01:19:49.360]And then I have one other question up above that.
- [01:19:52.060]And it may just be the way that the icons are currently in the system.
- [01:19:58.080]So if we have 11 different icons in a section and they vary, two of them are different reds.
- [01:20:04.840]So the icons, if they're different colored reds, it means that just, it just means that
- [01:20:10.860]one of the links, one of those has been clicked on.
- [01:20:13.960]It's like a link, like one link has been visited and one link hasn't.
- [01:20:18.520]They're slightly different colors.
- [01:20:19.840]That's the only reason they're different colors.
- [01:20:21.620]Okay, perfect.
- [01:20:22.760]Thank you.
- [01:20:23.340]By default, they're going to all be the same color.
- [01:20:25.780]But if they're showing up differently, the slightly darker color is going to mean that
- [01:20:29.940]you've already visited that link.
- [01:20:31.180]That's all that means.
- [01:20:32.020]Okay, great.
- [01:20:33.120]Yep.
- [01:20:34.240]Yes, Marcia, I'm sorry, you're not seeing my screen share.
- [01:20:39.760]I will send out.
- [01:20:40.760]I will send out a recording of this training probably later this afternoon.
- [01:20:45.700]I just got to make sure that we get all the captions on it.
- [01:20:47.880]Are there any other questions?
- [01:20:54.440]Going once, going twice?
- [01:21:05.960]If anybody thinks of anything.
- [01:21:09.800]They can hop on Slack and answer, ask them.
- [01:21:13.400]And if you're not on Slack, you can send me an email and I will make sure you get added to Slack.
- [01:21:17.580]Otherwise, thank you for joining this morning.
- [01:21:20.700]I appreciate it.
- [01:21:21.780]Everybody stay warm today in this rest of this week.
- [01:21:25.940]It'll be 50 next week.
- [01:21:27.340]We just got to get through four days.
- [01:21:28.480]Fantastic.
- [01:21:29.900]Thank you.
- [01:21:30.400]Thank you, everybody.
- [01:21:31.440]Have a good day.
- [01:21:32.560]You too.
- [01:21:33.240]Bye.
The screen size you are trying to search captions on is too small!
You can always jump over to MediaHub and check it out there.
Log in to post comments
Embed
Copy the following code into your page
HTML
<div style="padding-top: 56.25%; overflow: hidden; position:relative; -webkit-box-flex: 1; flex-grow: 1;"> <iframe style="bottom: 0; left: 0; position: absolute; right: 0; top: 0; border: 0; height: 100%; width: 100%;" src="https://mediahub.unl.edu/media/24199?format=iframe&autoplay=0" title="Video Player: February 18 UNL CMS Training" allowfullscreen ></iframe> </div>
Comments
0 Comments