December 3 Next-Gen CMS Training

Aaron Coleman Author

12/03/2024 Added

9 Plays

Description

Learn the basics of building a site in Next-Gen CMS, including content types, components, media library and more.

Searchable Transcript

Search:

[00:00:00.000]And share my screen and see if I can share the right screen today.
[00:00:03.680]All right.
[00:00:08.400]So you should be able to see all the students running out of the tunnel here.
[00:00:12.900]Yeah.
[00:00:14.100]Yeah.
[00:00:15.160]All right.
[00:00:16.680]So we are recording and we're ready to go.
[00:00:20.600]So if you've developed websites at the university before, you're familiar a little bit with our CMS system, our current CMS system, which is going away in about two weeks, is Drupal 7, based on Drupal 7, custom installation of that.
[00:00:43.040]This new system is also Drupal.
[00:00:45.820]It's Drupal 10, and that will probably upgrade next year sometime.
[00:00:49.460]So we're just calling it
[00:00:50.580]Next-gen CMS, because it's based on Drupal, but that number will change.
[00:00:56.360]If you've logged into the site, you'll notice some of this stuff looks very similar to what
[00:01:01.720]you're familiar with, right?
[00:01:02.720]You get this administrative toolbar at the top.
[00:01:05.180]You see the tabs on the pages that you can edit, view, and then some of these other tabs
[00:01:10.480]that we'll talk about as we go through the training.
[00:01:12.220]You see this content tab, which is everything content-related on your website.
[00:01:16.760]And then you see some of this other stuff.
[00:01:18.400]So we're going to go through all this.
[00:01:19.640]So first we're going to talk about content and we're going to go, you know, add content.
[00:01:26.080]So you can add content to your site either by rolling over content
[00:01:30.960]and then rolling over add content and then clicking one of these specific pieces of content,
[00:01:35.400]or you can just click this add content button,
[00:01:37.680]which brings you to this page where I'm at right now.
[00:01:39.940]So these are the types of content you can add to your site.
[00:01:43.420]So these, some of these might look familiar to you, you know,
[00:01:49.520]we have book page, you know, that's for, if you want to build, you know,
[00:01:53.860]like documentation type pages and things like that, you have news item,
[00:01:58.740]person and web form. So, you know, news items,
[00:02:02.240]probably somewhat familiar web forms,
[00:02:03.760]familiar person is just a new content type that we have to manage people
[00:02:08.580]content basically. And then right here at the top,
[00:02:12.200]this is the one you're probably going to end up using the most.
[00:02:14.720]And it's called a builder page.
[00:02:18.480]And one thing you might not notice in this list is a basic page,
[00:02:22.020]which on the old system is probably the content type that you use the most
[00:02:26.520]when you're adding content.
[00:02:27.440]Well,
[00:02:27.740]the builder page replaces the basic page as probably the content type you're
[00:02:33.400]going to use, use the most when you're adding content to your site.
[00:02:36.360]And in some ways it's kind of like two types of content in one.
[00:02:42.920]So you can kind of build a really basic page using builder page,
[00:02:47.700]you know,
[00:02:47.920]with just tech formatted text and images.
[00:02:50.900]And then you can also use this tab in the builder page that has this thing
[00:02:56.200]called layout builder,
[00:02:57.100]and you can build these really advanced layout pages using this
[00:03:01.780]functionality. So we're actually kind of kind of go in reverse order,
[00:03:06.640]and we're going to start down here and we're going to start adding some content
[00:03:09.820]to our site using these content types. And we're going to start with person
[00:03:14.440]just to speak a little bit more.
[00:03:17.820]Broadly about next gen CMS, I would say the biggest difference between this new system
[00:03:22.300]and the old system is that the new system is a no code environment.
[00:03:25.880]So rather than having to know HTML or CSS or even JavaScript, like to do some of the things
[00:03:33.040]on our old system, you had to know JavaScript to like put a events band in, right?
[00:03:39.080]The new system, you don't have to do any of that. You basically just fill out fields,
[00:03:42.840]upload images, and then there's internal templating that renders everything really nicely for you.
[00:03:47.720]So, and it's also very modular. Like you can build a piece of content and then reference that
[00:03:54.100]piece of content in multiple places and then change it in one place and it will change in
[00:03:59.420]multiple places. So that might not make a whole lot of sense, but as I go through this, I'll
[00:04:05.320]show you what I'm talking about. So we're adding a person here. So I'm going to go ahead and add
[00:04:11.580]one for myself. And you'll see, you know, here's a field. This is a directory reference. So I'm
[00:04:18.980]going to go ahead and start typing my name. And you'll see as I type my name, this little auto
[00:04:24.900]complete comes up, right? So I'm going to choose that. And I'm just going to fill this out. And
[00:04:30.200]without filling anything else out, I'm going to click save just to show you what we get here.
[00:04:34.600]So by
[00:04:41.560]filling out two fields in a person content type, I get a page
[00:04:46.360]with all this information on it. So this is my title or my
[00:04:51.340]name, right? And then I filled out that field that was a UNL directory reference where it kind of
[00:04:56.420]auto completed and then I chose my name. So that UNL directory reference is
[00:05:01.180]actually populating all the rest of this content on the page. It's pulling my photo in from
[00:05:06.260]directory, my job title, my department, and then all my contact information
[00:05:11.540]as well. So I can come back in here and let's say for today's
[00:05:16.640]purposes, I don't want senior web developer as my title. So we
[00:05:21.660]have this dropdown where you can fill out all these overrides, right?
[00:05:26.380]So you can manually override anything coming from directory. So I could say
[00:05:30.820]lead trainer for today. I could add a new photo, could put a new affiliation, phone number,
[00:05:36.280]email. So in addition to overriding anything
[00:05:41.520]from directory, these fields are really good if you have somebody who
[00:05:46.520]doesn't have a UNL affiliation. Maybe you have a visiting lecturer
[00:05:51.140]or visiting artist or somebody who's coming to campus to speak and you want them
[00:05:56.560]to have a person reference on your page, but they're not in the UNL directory. So in that case,
[00:06:01.660]you just wouldn't fill this out here and you would just fill out these fields
[00:06:06.380]and it would render the same way it's rendered for me. So, you know, there's other fields down
[00:06:11.500]here. You can add links to their social media. There's a bio, you know, I can say Aaron does
[00:06:18.320]development and training for the university.
[00:06:25.360]So I can put this in here and I'll hit save again, just to show you kind of what it does.
[00:06:34.100]So you can see it no longer says senior web developer. It says lead trainer because I
[00:06:41.480]filled in that override field. And then I put a little bio information in here and it put
[00:06:45.960]this little bio in here. And if you put more information, it'll just keep expanding and it
[00:06:50.920]creates a nice looking person page. But for today's purposes, we're just going to fill out
[00:06:55.820]a little bit of information and kind of move on. So that is a person content type. You can create
[00:07:01.340]a page for a person that way. And we're going to come back to this because you can use this in a
[00:07:05.800]lot of unique ways. So next we're going to go to content, add content, and we're going to add
[00:07:11.460]a news item. So news item is another piece of structured content on your site. Again,
[00:07:18.300]you're just filling out fields, you know, and then there's internal templates that render this
[00:07:22.440]for you. So we're going to say news item for December three training. And you can see there's
[00:07:29.820]a bunch of fields down here and you know, we have an image for our news item and it says,
[00:07:35.040]no media items are selected, add media. So this is a very, this is the interface
[00:07:41.440]you're going to get any time you have to add an image to a component or to a content type.
[00:07:47.240]It's going to say add media, and then it's going to open this little dialogue box here. So on the
[00:07:55.620]current system, which is going away again in, you know, two and a half weeks, we have a different
[00:08:02.180]way of uploading files and images. It's into just kind of a file structure, you know, so you can create
[00:08:11.420]folders within this file structure, and then you can put folders within those folders, or you can
[00:08:16.620]put files and images in those folders, and then you reference those images and files and links and
[00:08:23.320]things like that. And so you kind of have to remember what your URLs are for the images you've
[00:08:29.200]uploaded and all that, and it can get a little bit messy because you a lot of times just have all
[00:08:34.540]these images thrown in these files and you don't know where they're referenced or anything like
[00:08:38.960]that. So this new system
[00:08:41.400]is called media library. So this is for managing any images or files that are added to your website.
[00:08:48.760]And this is kind of one big collection of media and images that you add to your site,
[00:08:59.000]images and files. So you might say that just sounds like a bad idea. Well, there's different
[00:09:06.420]ways to manage these files and I'll show you kind of how that works. So in this new system,
[00:09:11.380]you manage files based on both the file name and a tagging system. So I will do both of these things
[00:09:20.960]when I upload them, but we have some documentation on our CMS docs website, which is now in the WDN
[00:09:27.140]website. Eric can put a link to that in the chat. We have some best practices for both naming your
[00:09:34.460]images and files, and then also for tagging your images and files when you add them to the media
[00:09:41.360]library. So that's kind of long-winded, but I had to kind of explain this media library, right? So
[00:09:47.340]we're going to go ahead and add an image to our media library, which is then, once it's added to
[00:09:54.380]the media library, it's then made available to us to add to this content type or other components
[00:10:01.800]throughout the site. So we added this image, and we can say aerial view of
[00:10:11.340]student walking across campus in the fall. So anytime you add an image to the media library,
[00:10:21.700]you'll automatically be prompted to add alt text to that image, and you have to add alt text to
[00:10:27.360]the image before you can even add it to the media library. So the second part of adding an image or
[00:10:33.520]a file to media library is tags, and I referenced this before, but what I like to tell people to
[00:10:41.320]think about is if you think general to specific, right? So this, you know, if you had a file
[00:10:49.120]structure on your old site, that might be a good way to kind of think of it. If you had folders
[00:10:54.080]within folders, and you nested folders, and you kind of kept things organized that way, that might
[00:10:58.780]be a good way to think about it. But otherwise, just think, you know, what are some general ways
[00:11:04.040]to tag this, and then some specific ways to tag this, so that later when you're looking through
[00:11:08.800]your tags, you can find this image.
[00:11:11.300]Again, or isolate it, right? So in this one, I'm going to show you what not to do first,
[00:11:16.720]and then I'll show you what to do. So I'm going to start typing, you know, this is a student,
[00:11:21.660]right? Student walking across campus. So we're going to start typing student.
[00:11:24.900]So you can see when I start typing a tag, it's going to autocomplete
[00:11:32.120]to tags that have already been added to the system. And this is what not to do, right?
[00:11:37.440]So you can see I started typing student, and I have not only a tag for
[00:11:41.280]student and student life, but I also have a tag for students.
[00:11:45.440]So I would say that student life could be theoretically separate from student
[00:11:51.340]and students, but you should not have two tags that are so similar to each other
[00:11:56.360]like student or students, because eventually you'll start putting
[00:12:00.520]things that should be in one tag, right, into those two separate tags. And then you'll have
[00:12:06.180]these two piles of photos or
[00:12:11.260]files that eventually down the road, you'll just, you won't be able to figure out what they belong
[00:12:16.860]to. And it just becomes hard to organize. So we'll just go with the plural on this one, just so we
[00:12:22.220]can kind of keep moving through the tags. I just wanted to show you, you shouldn't have student or
[00:12:26.340]students, you know, it should be one or the other. So we could say Ariel, right? It's an Ariel photo
[00:12:34.340]just to kind of, to be a little bit more clear. And you can see there's no tag for Ariel here. So
[00:12:41.240]it's creating that tag. I'm going to create a comma here. You know, we know what season it is.
[00:12:46.860]It's fall, right? And then if I want to get really specific, you know, I know that this
[00:12:53.760]was taken in year 2024. I don't think it's a terrible idea to tag things by year. So if you
[00:12:59.460]want to go back in the future and say, get rid of everything that's older than maybe like six years
[00:13:04.700]old or five years old on your site, you can, it's easy to find things that were tagged by that year.
[00:13:11.220]You can see, you know, we're adding a tag for students, which already had a tag,
[00:13:17.280]Ariel, which is a new tag, Ball, which already had a tag in 2024, right?
[00:13:22.260]So we're going to save and insert that. So it saved it to the media library and now it's adding
[00:13:28.580]it to our news item. So cut line is a little bit more, it would be a little bit more specific than
[00:13:36.960]an alt tag. An alt tag is a little bit more general descriptive of
[00:13:41.200]the image. So the cut line could be a little bit more specific. Like if you knew the name of the
[00:13:49.120]student, you know, name of student and buildings they're walking between or something like that,
[00:13:59.700]right? Or if you knew the day or whatever. But that's where you could put that. Lead image credit
[00:14:06.400]would be, you know, Craig Chandler.
[00:14:11.180]So we're going to give credit there. Byline, you know, this is where you put who wrote it. So
[00:14:22.340]put a name in here. And sorry, I usually have a lorem ipsum generator because nobody wants to see
[00:14:30.740]me type multiple paragraphs. It just takes too long and I would make too many mistakes. So
[00:14:41.160]I'm just going to paste this text in here.
[00:14:44.500]And then person reference, this is where I kind of mentioned before where things are a little
[00:14:53.820]modular. So I'm going to show you how this works, right? So I created a person previously and the
[00:14:59.480]person reference, I can actually reference that piece of content that I created. And I'll show
[00:15:05.320]you how that displays here. And then, you know, related links, let's just say we're
[00:15:11.140]referencing libraries or something, right? University. So this is a related link that'll
[00:15:23.280]show up. And so we've got all our fields filled out and we'll hit save.
[00:15:27.340]So you can see we have the title, the byline, the date, the cut line, the credit with our
[00:15:41.120]image and our text here. And then, so I referenced, this was a person reference,
[00:15:47.040]right? So this person reference shows up under contact and it's pulling through the title that
[00:15:53.920]I overwrote when I added meet myself as a person. Then related links here is showing up under
[00:16:00.680]related links. That's where I added that field in that said university libraries.
[00:16:04.340]So, you know, if I were to go back and change on my person, change my title again,
[00:16:11.100]it would change not only on that person page that I created before, but also on this news
[00:16:16.220]release where it's referenced. So that's what I'm kind of talking about when I say it's a
[00:16:20.680]little bit more modular. And then here you can see that it's automatically pulling in these
[00:16:27.140]news items that we previously added to the site. So that is news item. Pardon me.
[00:16:41.080]And now we're going to add a web form. So we're going to say RSVP for our training.
[00:16:57.420]And we'll go ahead and you see when I create this, it gives me this dialog box
[00:17:11.060]that says web forms must first be created before referencing them. Which might seem a little
[00:17:16.500]confusing because I thought I was creating a web form. Well, in the new system, the page where
[00:17:23.640]you're collecting the actual information, you're collecting the data is separate from the fields,
[00:17:33.200]the web form fields that you've created. So what does that mean and what's the benefit of that?
[00:17:41.040]In our current system, a lot of times people say, can I just clone a web form? And there's no way
[00:17:48.460]to easily do that. You just have to recreate it. But in this new system, if you're collecting the
[00:17:55.280]same information over and over again, rather than cloning the web form, you have all these fields
[00:18:01.460]that you've created. What you would do is just create a new, like I'm doing here, create a new
[00:18:06.300]web form page and then reference those fields on those different pages.
[00:18:11.440]So what's the benefit of that? Well, if you have an event where you're always collecting the same
[00:18:18.380]sort of information, maybe it's a yearly event, maybe it's quarterly event or monthly event,
[00:18:22.440]rather than having to try to recreate that web form over and over and over again,
[00:18:27.060]what you would do is you would create those web form fields and then you would reference them
[00:18:31.620]on different pages. So what does that look like?
[00:18:34.040]Let's just say, you know, RSVP, we've already got these web form fields created. We're going to
[00:18:41.000]reference it on this page and I'm going to hit save. Sorry, I thought I was going to sneeze.
[00:18:47.620]All right. So you can see I referenced these fields and here's what my web form looks like.
[00:18:57.760]It has all this stuff we're asking for, right? And if it were to be filled out, all those results
[00:19:03.700]would be in this tab. And then if I, you know, maybe this is for our December event and maybe
[00:19:10.180]we want these same fields. So I'm going to hit save. And then I'm going to hit save. And then
[00:19:10.980]I'm going to hit save. And then I'm going to hit save. And then I'm going to hit save. And then
[00:19:40.960]I'm going to hit save. And then I'm going to hit save. And then I'm going to hit save. And then
[00:20:10.940]I'm going to hit save. And then I'm going to hit save. And then I'm going to hit save. And then
[00:20:40.920]I'm going to hit save. And then I'm going to hit save. And then I'm going to hit save. And then
[00:21:10.900]I'm going to hit save. And then I'm going to hit save. And then I'm going to hit save. And then
[00:21:40.880]I'm going to hit save. And then I'm going to hit save. And then I'm going to hit save. And then
[00:22:10.860]I'm going to hit save. And then I'm going to hit save. And then I'm going to hit save. And then
[00:22:40.840]I'm going to hit save. And then I'm going to hit save. And then I'm going to hit save. And then
[00:23:10.820]So content book page, rather than showing you what that looks like when you add it, I am simply
[00:23:18.920]going to say, I'm going to refer to our CMS documentation, which is over here on the Web
[00:23:26.460]Developer Network site. So a book page and book pages within the new system work exactly like
[00:23:34.160]they did in the old system. So these, this information here that I'm showing you right now
[00:23:40.800]information to NextGen CMS, this is a book and these are the pages within that book. So all of
[00:23:47.920]this information or book pages, this is kind of the title of the book. And then all of these are
[00:23:55.280]sections within the book, right? So you can actually, if you want to think of them as pages,
[00:24:00.400]or if you want to think of them as chapters or whatever, right? You can kind of just keep
[00:24:05.280]nesting these things, right? So you can see here, I'm going into content types and these are the
[00:24:09.440]things we've already talked about.
[00:24:10.780]You know, if I want to, I can click builder page and then this expands down even further.
[00:24:16.060]So you can kind of just keep nesting book pages. It's really good for documentation.
[00:24:20.740]I've seen people use it for little subsections on their site where they don't need to have
[00:24:29.800]really designed pages, but they have information they want kind of people to work through
[00:24:34.480]in a specific, in a specific order.
[00:24:40.760]I've seen people use book pages for annual reports and things like that.
[00:24:44.760]They're just, they're good if you want this sidebar navigation to show up on all the pages
[00:24:51.780]or anything within a particular section.
[00:24:54.320]So again, they work the same way they did in the old system.
[00:24:59.100]And this is what they look like.
[00:25:01.100]You can add videos, you can add formatted text, you can add photos in them.
[00:25:05.560]They're good for guides too.
[00:25:07.460]You know, I think Global Studies has,
[00:25:10.740]like, an international student guide and it's all in book pages, right?
[00:25:13.540]So that makes a lot of sense.
[00:25:14.700]So that is a book page.
[00:25:17.620]And now, now that we've touched on all of these pieces of content down here,
[00:25:26.980]we're going to jump into builder page finally.
[00:25:30.120]So builder page, as I mentioned previously, is kind of like two pages in one.
[00:25:36.220]And we're actually just going to work with the basic page feature
[00:25:40.720]of builder page right now.
[00:25:42.040]And then we're going to jump back in and we're going to do some
[00:25:45.940]of the more advanced stuff in layout builder.
[00:25:48.440]So we're going to do about our department here
[00:25:52.520]with our basic page features of our builder page.
[00:25:59.080]So, you know, this hero here in the previous system,
[00:26:04.380]it was tucked clear down at the bottom.
[00:26:05.840]It's hard to find because a hero is a big image at the top of your page.
[00:26:09.800]It only makes sense.
[00:26:10.700]Put it right up here at the top, right?
[00:26:12.020]So when you first load the page, this is what you get.
[00:26:15.260]And then like the news item, because we want to add an image,
[00:26:20.420]it's going to load media library.
[00:26:22.020]So rather than upload another image and show you that,
[00:26:28.820]we're just going to choose an image that we've uploaded previously
[00:26:31.400]and use that.
[00:26:32.080]So again, because we've already added it to media library,
[00:26:36.160]it already has alt text.
[00:26:37.400]You know, it's already good to go.
[00:26:38.660]We can use it here.
[00:26:40.680]In this hero, we have a couple different options.
[00:26:44.480]So you have your object position.
[00:26:47.100]So if you think about a hero image,
[00:26:51.400]think about it as a photo or a print behind a matte,
[00:26:56.060]you know, like a matte in a framed print.
[00:26:59.740]Your photo actually, in your hero,
[00:27:03.040]actually can kind of move vertically behind this matte, right?
[00:27:09.120]And only so much of it shows, right?
[00:27:10.660]Because the hero size determines how much of that shows.
[00:27:16.040]In this hero image position,
[00:27:18.500]these top six choices determines which part of the image shows.
[00:27:24.560]So if that makes sense, by default,
[00:27:28.380]it's going to be the middle part of the image, right?
[00:27:33.120]So about halfway down the image, the horizon line,
[00:27:36.160]whatever you want to think of it,
[00:27:37.480]is going to be right down the middle of that matte
[00:27:40.640]that what's showing through the matte.
[00:27:42.560]So for instance, if you have a photo,
[00:27:46.380]maybe where people's heads are at the top of the photo,
[00:27:49.340]you might want to choose 50% zero
[00:27:53.700]because that would lock the top of the image
[00:27:56.880]to the top of the matte, right?
[00:27:58.820]And likewise, if you had visual information
[00:28:01.600]at the bottom of your photo,
[00:28:02.720]you might want to choose 50%, 100%
[00:28:05.700]so that at the bottom here,
[00:28:08.360]the bottom of the photo is locked to
[00:28:10.620]the bottom of the matte.
[00:28:11.300]We can see here, you know,
[00:28:13.500]people's faces are right across
[00:28:15.340]the middle of this photo.
[00:28:16.320]So I think that default is going to
[00:28:18.620]probably work the best,
[00:28:19.560]which is right across the middle.
[00:28:21.380]We're going to go with default here.
[00:28:23.260]Some of these fields are optional,
[00:28:29.260]but I'm going to fill them out
[00:28:31.000]so you can see what they look like.
[00:28:40.600]Okay, again, we're going to go over
[00:28:42.780]to the lorem ipsum and grab all this.
[00:28:46.520]Oh, first we got to create our hero.
[00:28:56.440]Sorry about that.
[00:28:57.560]So we've got our hero created.
[00:29:01.300]We have our title.
[00:29:02.380]We have our text here.
[00:29:05.640]Let's go ahead and add this one
[00:29:08.280]to the menu as well.
[00:29:09.420]Let's just make it,
[00:29:10.580]you know,
[00:29:10.920]number two.
[00:29:13.640]And
[00:29:15.600]we will click save.
[00:29:18.820]So you can see
[00:29:27.380]like this is medium,
[00:29:30.660]right?
[00:29:31.220]You can see people's faces in here.
[00:29:34.260]It looks pretty good.
[00:29:35.460]You can see we have this little
[00:29:40.560]default menu on the side here.
[00:29:42.080]Maybe we want to get rid of that.
[00:29:43.560]And maybe we do want a little bit more
[00:29:45.500]of this image to show through.
[00:29:46.740]And maybe we want to add another image
[00:29:49.640]to this page.
[00:29:50.220]So we're going to clean this up a little bit
[00:29:51.900]and format it just a bit more.
[00:29:53.600]Just to show you a little bit more
[00:29:56.680]of the functionality.
[00:29:57.340]So if you remember,
[00:29:59.260]there's that little menu on the right-hand side
[00:30:01.220]when we created that page.
[00:30:02.460]If I scroll down here to the bottom,
[00:30:05.160]and this is only an option on builder pages,
[00:30:08.040]you have these two options
[00:30:10.540]here to hide the page title or hide the sidebar.
[00:30:13.340]We want to keep the page title,
[00:30:15.480]but we want to hide that sidebar.
[00:30:17.080]So that sidebar is going to show up automatically
[00:30:19.440]when you create builder pages
[00:30:21.820]and then you add them to the navigation.
[00:30:23.720]By default, it's just another way
[00:30:26.780]to add some in-page navigation.
[00:30:28.480]It's really easy to hide it.
[00:30:31.100]Some people just keep it in there.
[00:30:34.000]If they have a smaller site,
[00:30:35.780]especially it's just an easier way
[00:30:37.500]for people to navigate between pages on the site.
[00:30:40.520]We don't really need it there,
[00:30:41.780]but we can format the text here,
[00:30:46.140]header to the WYSIWYG works very similarly
[00:30:51.580]to how it did in the old system.
[00:30:53.100]So we've got this text over here.
[00:30:55.480]Maybe we want to add another image.
[00:30:58.720]So we're going to maybe pick another thing
[00:31:04.760]from our media library.
[00:31:10.500]Once I choose an image in the WYSIWYG,
[00:31:12.660]then it gives me options on formatting that image.
[00:31:15.780]So I can choose default, which is the size
[00:31:18.660]that the image was uploaded.
[00:31:19.820]Narrow is going to be about half the viewport width.
[00:31:22.720]Wide is the full viewport width.
[00:31:25.500]And then this is basically how the photo
[00:31:31.680]is offset with the text.
[00:31:32.900]So it can be offset, left, offset, center,
[00:31:37.060]floated left, floated right.
[00:31:40.480]I think floated right looks pretty good.
[00:31:42.900]You can also come in here and maybe you
[00:31:48.300]want to add a hard return or something like that.
[00:31:52.380]So there's all kinds of formatting stuff
[00:31:54.560]you can do in the WYSIWYG.
[00:31:56.180]You can even add tables if you want.
[00:31:58.860]But we'll call it good.
[00:32:02.560]Maybe we want to make our hero just a little bit bigger.
[00:32:04.940]So we're going to come in here and make it large
[00:32:08.540]to show a little bit more of our--
[00:32:10.460]of the image through the top of the page.
[00:32:12.920]So we'll click Save.
[00:32:14.480]So now you can see there's a little bit more
[00:32:24.840]of the image showing through.
[00:32:26.140]We've got this image floated off to the right.
[00:32:29.240]We've got this formatted header with a little bit
[00:32:31.320]of a space there, which looks nice.
[00:32:33.060]So this is kind of what I was talking about.
[00:32:35.820]We just used the Edit tab.
[00:32:39.040]We built a nice,
[00:32:40.440]formatted basic page using only the Edit tab
[00:32:44.280]of the Builder page.
[00:32:47.100]So now we're going to come back in
[00:32:51.780]and we're going to do another Builder page.
[00:32:54.520]We're going to actually do three different Builder pages
[00:32:56.960]showing kind of the different functionality
[00:32:59.300]that you can do.
[00:33:00.200]And there's all kinds of stuff you can do with them.
[00:33:01.980]But now we're going to go ahead and create
[00:33:04.380]a directory page using our Builder page
[00:33:10.420]so we're going to click Save.
[00:33:12.260]Actually, let me come back in here really quick.
[00:33:19.300]And let's put this in the menu, right?
[00:33:23.620]So make this number three.
[00:33:25.300]And let's hide the sidebar.
[00:33:29.740]Let's hit Save.
[00:33:31.280]So now we're going to actually start using this Layout tab.
[00:33:40.400]And this is kind of the advanced layout functionality of the Builder page.
[00:33:45.320]And this is where a lot of the power of this new system comes in
[00:33:48.820]because there's so much stuff you can do in this tab.
[00:33:52.020]So you can see when I click over into the Layout tab,
[00:33:57.640]there's a lot of stuff going on here.
[00:33:59.280]But once you make sense of it, it doesn't seem quite as daunting.
[00:34:03.060]So this placeholder is actually, if I would have typed text on that Edit tab,
[00:34:08.760]that would show up here.
[00:34:10.380]So it's kind of like I said, two pages in one.
[00:34:13.000]You can actually put text in, in the Edit tab,
[00:34:16.340]and then you can do stuff in the Builder or in the Layout tab as well.
[00:34:20.840]Typically, you'll only build in one, either the Edit tab or the Layout Builder.
[00:34:25.740]Theoretically, you can use both to build a page.
[00:34:29.420]But this is what that is.
[00:34:32.780]It's that placeholder.
[00:34:33.620]Then you can see here I have these Add Section little areas.
[00:34:40.360]We're going to add a section.
[00:34:41.940]The best way to think about a section is it's a row in a table.
[00:34:52.320]Then in that row, you can add columns.
[00:34:54.720]Or in our current system, I think we refer to this horizontal section as a band.
[00:35:02.520]Then within that band, you can put layouts.
[00:35:05.500]When you add a section, then you're automatically prompted to add
[00:35:10.340]a layout for that section.
[00:35:12.180]That's really just putting columns in a row at a very basic level.
[00:35:16.780]We're going to choose one column.
[00:35:19.360]Then once you choose your layout for that section,
[00:35:24.080]then you get a bunch of other options.
[00:35:26.240]I can add a heading to that section.
[00:35:29.180]I can format that section heading if I add one.
[00:35:35.040]I can choose a background and a background
[00:35:40.320]pattern.
[00:35:40.820]All these backgrounds, there's four different colors,
[00:35:44.600]then can be layered against these background patterns.
[00:35:47.860]There's four different colors and there's five different patterns.
[00:35:52.060]You've got instantly, in addition to the default cream,
[00:35:56.460]you've got 21 different backgrounds that you can add to a section.
[00:36:02.040]We're going to go ahead, just choose light gray landmarks.
[00:36:06.420]Container is the width.
[00:36:10.300]Of that section.
[00:36:11.280]So standard wrapper is going to be kind of like to the edges of the navigation
[00:36:15.820]and edge to edge is the viewport width, the viewport width.
[00:36:21.600]So we're going to go with standard.
[00:36:23.060]And then spacing for that section is the vertical spacing of that section.
[00:36:28.900]So by default, it kind of has a nice medium spacing,
[00:36:34.360]but you can remove the top and or bottom spacing.
[00:36:40.280]You can add extra top spacing and extra bottom spacing.
[00:36:43.420]You can remove the default vertical spacing.
[00:36:46.020]I'll show you what some of these mean.
[00:36:47.220]These are also multi-select.
[00:36:49.280]So if I want to remove all the spacing, I can click remove top,
[00:36:53.980]and I can hold down the command key on my keyboard and click remove bottom.
[00:36:59.060]Likewise, if I want to deselect those, I hold down the command key and click them again.
[00:37:04.180]For this particular case, we're just going to choose a background and a background pattern,
[00:37:08.720]and we're going to add that section.
[00:37:10.260]So you can see here, now that I've added a section, not only do I have the opportunity
[00:37:18.620]to add a component to that section, but every time you add a section,
[00:37:22.760]this layout page is going to give you the ability to add another section both above
[00:37:27.760]and below the section you've already added.
[00:37:30.220]So we're going to go ahead and add a component here.
[00:37:34.240]So when I click add a component, I get all these different options, and if you remember
[00:37:40.240]in the CMS documentation and click builder page, there's that huge drop down.
[00:37:45.160]This is all that stuff that you can add to the builder page, and these are like pre-formatted
[00:37:50.020]layouts for adding content, you know, photos and text and functionality to your site, essentially.
[00:37:56.960]So this first page of options, I like to tell people to think about this in a way.
[00:38:03.340]This is stuff that's going to be on this page alone, right? So if I'm adding stuff
[00:38:10.220]to this page, this is what shows up by default. There's also this more button here, right? So
[00:38:15.740]again, there's a lot to get through here. So this stuff you click when you get more,
[00:38:21.980]I like to tell people to think about this as ways. This is content that exists either
[00:38:26.620]elsewhere on your site, or on other web applications entirely.
[00:38:34.380]So think about when you're building a page, where's that content going to live?
[00:38:38.300]If it lives only on this page, then you'd probably choose one
[00:38:42.140]of those first components.
[00:38:43.440]If you're pulling it from somewhere else, then you'd choose that more button.
[00:38:47.120]So in this particular case, we are building a directory page.
[00:38:50.300]So we are going to build a curated list of people.
[00:38:52.740]And I'm going to type lead instructor here.
[00:39:01.320]And then, again, this is the sort of modular thing I mentioned.
[00:39:05.060]So we're going to type Aaron Coleman.
[00:39:06.440]Whoops.
[00:39:07.060]Let it autocomplete here.
[00:39:09.940]Choosing myself.
[00:39:11.760]We're going to do teaser featured.
[00:39:13.800]And we're going to add that block.
[00:39:16.780]So you can see now you can see more of that background.
[00:39:22.420]And I've added myself to this page.
[00:39:25.420]It's just referencing that piece of content for myself.
[00:39:30.580]Um, and we're going to go ahead and add another section really quick here underneath.
[00:39:34.660]Again, we're going to go one column.
[00:39:36.540]We're going to keep all this default.
[00:39:38.580]We're going to add another section.
[00:39:40.360]So you can see add another component.
[00:39:42.340]And unless you have a component in here, these don't show up.
[00:39:46.800]So you only see them here.
[00:39:48.060]I'll show you what I mean.
[00:39:48.900]So we're going to add a component.
[00:39:50.100]We're going to go more.
[00:39:51.440]We're going to add another curated list of people.
[00:39:55.120]And we can say other trainers.
[00:40:00.080]And then we'll put Eric in here.
[00:40:03.600]He's previously we added him to the site as a during another training.
[00:40:08.080]So we know he's already in here and we're going to choose a different view mode.
[00:40:11.500]So we're going to add that block.
[00:40:12.760]All right.
[00:40:15.720]And then we'll click save.
[00:40:17.440]All right.
[00:40:21.940]So now you can see our trainers.
[00:40:23.720]Well, I didn't really use the right language here.
[00:40:27.740]Right.
[00:40:27.960]Lead instructor.
[00:40:28.740]Other trainers.
[00:40:29.960]I should say lead trainer, but whatever.
[00:40:32.020]So you can see, you can build these people lists and by choosing different display modes,
[00:40:39.360]it shows them differently on this page.
[00:40:42.700]But, you know, theoretically, you can think of a page where you added different sections.
[00:40:46.860]You might put even different background on those sections.
[00:40:49.420]You know, you might have one for faculty or staff or graduate students or affiliates or
[00:40:56.000]emeriti or things like that.
[00:40:57.840]Right.
[00:40:58.060]Where you could just create a new section.
[00:40:59.680]Once you've added the people, you reference them, and then once you've referenced them,
[00:41:04.920]you can actually even reorder them.
[00:41:07.540]Like, let me show you how that works really, really quick.
[00:41:10.160]It's pretty cool.
[00:41:11.140]So for instance, let's say.
[00:41:15.360]Saren is somebody else who usually helps.
[00:41:22.400]She's not here right now, but she's previously added.
[00:41:25.140]So, you know, not only can I add her here, but I could.
[00:41:29.460]If I wanted to, I could reorder just like drag and drop, right?
[00:41:33.360]These are cool.
[00:41:34.520]So I can click update.
[00:41:36.920]Update that particular section.
[00:41:43.480]Then I can click save.
[00:41:45.760]And then you can see I've added Saron and she's next to Eric.
[00:41:52.440]And I dragged her over there first.
[00:41:54.760]So we've got our trainers page about, we've got RSVP
[00:41:59.240]and now we're going to go back and we're going to jump back into builder page
[00:42:04.160]and we're going to build kind of like a fancier front page for our site
[00:42:08.540]using some more of those components.
[00:42:10.820]So we're going to click welcome and we're going to click save.
[00:42:14.760]And then we're going to come right back into layout.
[00:42:21.960]And we're going to add a section.
[00:42:29.020]And we want maybe, you know, kind of like the page we created before,
[00:42:33.740]but we want a big image at the top,
[00:42:35.420]maybe with a little text on it and a button to direct people somewhere.
[00:42:40.020]So we're going to go with default on all this.
[00:42:43.460]And then we're just going to kind of start adding stuff
[00:42:45.300]so I can show you what happens.
[00:42:46.360]So we're going to add a component
[00:42:48.840]and we're going to choose a display banner.
[00:42:51.100]So display banner is kind of like a big fancy hero.
[00:42:54.180]You can put buttons and text on it and things like that.
[00:42:58.800]I'll fill all these out.
[00:43:00.100]The subhead, I think, is optional.
[00:43:02.840]But welcome to our site.
[00:43:07.860]So again, I'm not going to upload another image.
[00:43:12.140]I'm just going to kind of choose one here
[00:43:14.460]and we can go from there.
[00:43:16.420]So choose this one.
[00:43:28.580]So here, this is a link for, you know,
[00:43:42.860]this is kind of like the most,
[00:43:44.460]if it's going to be in the hero,
[00:43:45.780]this would be the most important thing
[00:43:47.300]we want people to do when they come to our site.
[00:43:49.700]So let's say the most important thing
[00:43:52.520]we want people to do are to sign up for training, right?
[00:43:56.720]So this is another,
[00:43:58.560]another really cool feature of the new system.
[00:44:01.060]If you have a page on your site that you want to link to,
[00:44:06.340]rather than having to know the exact URL
[00:44:09.000]and paste it into a little link box,
[00:44:11.160]if you know the name of the page,
[00:44:13.580]all you have to do is start typing that page.
[00:44:17.820]So you can see here, RSVP for our training.
[00:44:20.320]I've clicked on that and I've created a link, right?
[00:44:23.920]So sign up for training.
[00:44:28.540]Oops, training.
[00:44:31.220]And then this display option just determines
[00:44:37.740]where that text goes on the image.
[00:44:39.780]The object position is again,
[00:44:42.300]where that photo kind of slides around on the matte,
[00:44:45.220]behind the matte.
[00:44:46.380]We can see that this is on the left.
[00:44:49.480]So we're actually gonna put this stuff on the right
[00:44:52.120]and then we're gonna add this block.
[00:44:58.520]So you can see it's a little cut off.
[00:45:01.320]So, and then there's a, let's save this
[00:45:05.600]just so we can kind of determine
[00:45:07.440]what we need to do to fix this.
[00:45:08.940]So it's a couple things.
[00:45:11.340]So you can see one,
[00:45:13.480]we wanna get rid of the page title.
[00:45:15.460]We wanna get rid of all this padding
[00:45:18.100]and then we wanna bump this photo down
[00:45:20.380]using our object position.
[00:45:22.040]So first of all, we wanna get rid of the page title.
[00:45:26.140]So we're gonna come back in here.
[00:45:28.500]And if you remember previously under page options
[00:45:31.020]where we hit that sidebar,
[00:45:32.240]that's also where we can hide the page title.
[00:45:34.840]So we're gonna visually hide the page title and click save.
[00:45:37.700]So we got rid of the page title.
[00:45:41.420]Now we wanna get rid of this padding
[00:45:44.120]and then we wanna fix the image.
[00:45:45.580]So we're gonna come back into layout
[00:45:47.780]and I'll show you a couple things here
[00:45:54.000]in the user interface that are consistent
[00:45:57.680]once you're on the layout
[00:45:58.480]builder page.
[00:45:59.060]So we know we've created a section
[00:46:01.220]and we know we've created a component
[00:46:02.900]within that section.
[00:46:03.760]And we know we wanna edit both of those things, right?
[00:46:06.660]So you can see when I move my mouse here,
[00:46:09.320]watch, watch, watch, watch, watch.
[00:46:10.640]Oh, okay.
[00:46:11.260]So you can see we get these dotted lines
[00:46:14.660]when I roll over the section.
[00:46:16.600]So this is the wrapper, right?
[00:46:19.180]That's the band, that's the row
[00:46:21.580]that we put the component in.
[00:46:23.080]So if we wanna configure that
[00:46:25.940]and you can see that's where these gaps are, right?
[00:46:28.460]So that is anytime you've created a section
[00:46:33.620]and you roll over that section,
[00:46:35.020]you can configure it on the upper left hand part of that.
[00:46:38.660]Likewise, we've created a component within this section.
[00:46:42.500]So when we go hover over the component,
[00:46:45.280]you get the little edit interface
[00:46:47.520]in the upper right hand side.
[00:46:48.980]So we're gonna get rid of the spacing first.
[00:46:51.400]So we're gonna click configure the section
[00:46:53.460]and we need to go edge to edge
[00:46:56.780]because we want it to go side to side
[00:46:58.440]and then we wanna get rid of that vertical spacing
[00:47:01.560]at the top because we want it to be flush
[00:47:03.580]to the navigation.
[00:47:04.300]So we're gonna update that.
[00:47:05.620]So you can see we cleared that out, right?
[00:47:08.380]This is flush to the top
[00:47:09.920]and now we want to bump this photo down a little bit.
[00:47:13.080]So we're gonna configure our display banner
[00:47:16.660]and we wanna move the object position.
[00:47:19.100]Let's do 50%, 20%
[00:47:21.800]because it's not quite to the top
[00:47:25.580]but it's, you know, if you're to,
[00:47:28.420]break this down into percentages,
[00:47:30.260]you could say that this N is maybe about 20%
[00:47:32.940]of the way down the photo.
[00:47:34.200]So we'll click update.
[00:47:35.320]All right, so this looks a lot better.
[00:47:40.160]You can even see the date at the bottom.
[00:47:41.640]So we're gonna click save just to see what it looks like.
[00:47:44.060]I like to say save early saved option or save often.
[00:47:49.940]I don't know why that didn't,
[00:47:51.500]it was showing up for us on our preview.
[00:47:54.740]It's not showing up here.
[00:47:56.940]It might be something where we need to clear
[00:47:58.400]the site cache, but it has updated.
[00:48:00.480]We just probably, you know,
[00:48:02.860]if you run into something like this,
[00:48:05.300]the best option is to hover over this little icon here
[00:48:08.780]and click this button.
[00:48:09.900]It'll take about 20, 30 seconds to flush the cache,
[00:48:14.020]but then this will show up properly.
[00:48:16.740]At any rate, this looks pretty good.
[00:48:19.920]We're going to go back into the layout.
[00:48:21.520]We're going to add some more design elements to our page.
[00:48:28.380]So we're going to go add section, two column.
[00:48:31.340]And again, when you add a two column,
[00:48:35.740]then you have a little bit more options
[00:48:37.740]in terms of how those columns display, right?
[00:48:40.880]So you can choose a 50-50
[00:48:42.380]or a larger column on the left or the right.
[00:48:45.540]In this particular case, we're going to choose 50-50.
[00:48:48.380]Keep all this the same.
[00:48:51.180]And now you can see we've added this section
[00:48:56.160]and we can add two different components.
[00:48:58.360]And if I click these buttons,
[00:49:00.120]you'll see that if you are very eagle-eyed,
[00:49:02.780]you'll notice that these components are slightly different
[00:49:05.560]than the components I could add to a full width section.
[00:49:08.380]So the difference there is that some things just look better bigger
[00:49:13.060]and some things just look better at a smaller size
[00:49:16.860]and they don't necessarily work at different sizes.
[00:49:21.420]So we're going to go ahead and add a card here,
[00:49:24.940]which is kind of what it says.
[00:49:28.340]Think of a baseball card or a Pokemon card or something like that
[00:49:33.140]where you've got a photo at the top and some text and things like that.
[00:49:36.500]So we're going to go with a headline.
[00:49:38.980]So we already linked people to our RSVP.
[00:49:42.160]Maybe we want people to learn about our department
[00:49:46.180]and then about our people maybe.
[00:49:49.480]So we can say, you know, learn about our department.
[00:49:58.320]Oops.
[00:49:58.720]And again, this is a link box.
[00:50:04.540]So all you have to know, if you want to link a page,
[00:50:07.900]all you have to know is the page title.
[00:50:10.460]So all I have to do is start typing right here, right?
[00:50:13.860]So I've created a link.
[00:50:16.340]Again, like the overline and the subhead are optional,
[00:50:22.200]but I'm going to fill them out so you can see what they look like.
[00:50:24.280]And rather than uploading them,
[00:50:28.300]I'm going to go ahead and just use ones that have already been uploaded.
[00:50:33.440]So use this guy.
[00:50:35.920]And then.
[00:50:39.720]You know, the things we build, something like that.
[00:50:51.540]And you can choose a background.
[00:50:53.160]So I'll add that.
[00:50:58.280]So you can see got an image, the headlines, a link, keep it balanced.
[00:51:05.700]We'll go ahead and add another card over here.
[00:51:07.740]So, you know, we can say meet our people.
[00:51:14.120]And I want to show you something else cool about the system.
[00:51:18.280]Rather than fill this headline link out, I'm going to skip it and we're going to come down here.
[00:51:22.920]And I'll show you what that means.
[00:51:26.980]So people over line.
[00:51:28.260]I'll add an image.
[00:51:35.380]I don't know why it's popping me down like that.
[00:51:38.120]So if you remember, on the previous one, I filled out the headline link.
[00:51:55.440]It created a link there.
[00:51:56.600]I did not fill out the headline link.
[00:51:58.240]I'm going to fill that out here.
[00:51:59.080]And by not filling that out, I now have the option to add a button to the bottom of my card.
[00:52:07.240]So again, this is the URL.
[00:52:09.560]I can start typing trainers.
[00:52:12.420]Our trainers, right?
[00:52:15.740]Creating a link to that page.
[00:52:17.760]And then I'll choose lightest gray.
[00:52:25.260]And we'll add this card.
[00:52:28.220]So you can see by filling out that headline link,
[00:52:33.660]this card displays a little bit different than that.
[00:52:36.480]And the thing I want to, if I were doing this in real life,
[00:52:39.820]I would make these both match.
[00:52:41.200]So I'd either make them both buttons
[00:52:42.720]or I'd make both the headlines as links.
[00:52:47.100]But the thing I wanted to emphasize there is that
[00:52:50.720]not only do we have all these different components
[00:52:54.100]that you can use within the system,
[00:52:55.620]but within the components themselves,
[00:52:58.200]a lot of times there are multiple options
[00:53:01.600]for displaying that content.
[00:53:03.480]So card, there's obviously multiple ways
[00:53:05.900]that you can display these.
[00:53:06.920]We have a tandem feature that has,
[00:53:10.340]when you add in image borders and things like that,
[00:53:17.780]there are literally hundreds of different ways
[00:53:22.120]that you can display them.
[00:53:23.260]We have like a timeline that's both vertical or horizontal
[00:53:27.420]depending on how you want to display it.
[00:53:28.180]How you want to display that.
[00:53:29.220]So within this system,
[00:53:31.660]there's just tons of display options
[00:53:33.880]for creating pages and creating your site.
[00:53:39.140]So where I'm going to click save,
[00:53:40.280]I just want to show you what our page is looking like.
[00:53:43.380]So we have our front page.
[00:53:45.320]Maybe we want to add news and events to this page.
[00:53:52.080]So let's come back down here.
[00:53:54.940]We'll click add section.
[00:53:58.160]We will go with one column and we'll add that.
[00:54:04.340]Just going to keep this default, kind of run through this quickly.
[00:54:07.260]So we're going to add component.
[00:54:09.260]So again, you know, we're going to add events
[00:54:14.100]and events aren't something that are going to be only limited to this page.
[00:54:18.840]These are elsewhere.
[00:54:19.760]They're coming from a different system.
[00:54:22.080]So we're going to click more and we're going to click upcoming events.
[00:54:28.140]And so on the old system, you know,
[00:54:30.500]this is something where you had to know a little bit of JavaScript
[00:54:32.660]or at least copying and pasting on your page just to get events to load.
[00:54:36.100]And this new system, it's really nice.
[00:54:39.440]All you have to know is your events calendar URL.
[00:54:44.540]And then you can click add block.
[00:54:47.380]And boom, we have our events on our page,
[00:54:52.400]which is really nice to not have to worry about customizing JavaScript.
[00:54:58.120]So likewise, you know, if I want to add a section with our news.
[00:55:01.500]So if you remember when I added the news content type,
[00:55:04.380]it was showing the latest news at the bottom of that.
[00:55:07.160]We just want those to show up here on our front page
[00:55:09.800]because that seems like something pertinent.
[00:55:11.380]So again, we're going to add a section.
[00:55:14.380]We're going to add a component.
[00:55:16.080]We're going to go more.
[00:55:17.280]And we're going to click news aggregation.
[00:55:20.580]And we'll say latest news.
[00:55:25.080]And we'll do four.
[00:55:28.900]And add that block.
[00:55:30.100]And you can see it's added our latest news.
[00:55:35.980]And so now we're going to click save.
[00:55:38.000]And you can see we've got a pretty nice front page, right?
[00:55:45.280]We could kind of clean up some of the padding on some of these sections.
[00:55:49.660]And we could make this go edge to edge because this events band is really meant to go edge to edge.
[00:55:55.120]But otherwise, we have a pretty nice looking page.
[00:55:58.960]So one other cool thing about this system is if you have a page that you think looks pretty nice and maybe you want to use some pieces of that page on another page, rather than having to rebuild that, you may have seen this little tab up here.
[00:56:15.680]But maybe I want to copy this page over and make it into another page.
[00:56:21.400]So I can do that really quickly by clicking the replicate tab.
[00:56:28.060]So let's just say we want to call this page academics or something like that, right?
[00:56:32.280]So we can replicate this page.
[00:56:35.400]And now we have a duplicate of our page.
[00:56:45.900]If I come in here to the edit tab, it's called academics.
[00:56:52.160]If I come in here to layout, maybe this page is going to be further in the site.
[00:56:58.040]And we don't need to have our news and our events on it.
[00:57:02.020]So maybe we come down here and we very quickly say, you know, get rid of this, remove it, you know, get rid of the news, don't need it.
[00:57:14.120]You know, we obviously don't want to keep the same image up there, but we can hover over our display banner.
[00:57:21.160]And configure that quickly.
[00:57:26.320]Come in.
[00:57:28.020]Come in here.
[00:57:28.500]Remove it.
[00:57:30.420]You know, add media.
[00:57:33.460]The mouse is a little jumpy this morning.
[00:57:36.120]So, you know, maybe we want to add this one.
[00:57:39.220]And maybe it's, you know, academics, subhead, academics.
[00:57:58.000]So very quickly, you know, and obviously change the link and all that stuff.
[00:58:01.940]But, you know, just by swapping out images.
[00:58:05.020]So, you know, we had a page.
[00:58:08.520]We clicked replicate.
[00:58:10.140]We did a couple quick updates.
[00:58:12.520]And then we have another page that looks almost exactly like it.
[00:58:15.360]And it probably took, you know, a minute or two minutes tops.
[00:58:18.720]Obviously, if you want to adjust this photos, you can actually see what was going on.
[00:58:22.900]But this replicate tab is a really nice feature.
[00:58:27.980]If you build out a page that you know you like the layout of,
[00:58:31.300]and you know you're going to use on multiple pages on your site.
[00:58:34.280]So I kind of went through these other tabs.
[00:58:37.660]You know what view means.
[00:58:38.640]Obviously, we're viewing the page.
[00:58:39.820]You know what edit is, layout.
[00:58:41.380]We've been in there.
[00:58:42.080]Replicate just showed you that.
[00:58:43.760]So the only other tab is revisions.
[00:58:46.200]And this just shows you all the revisions that were made to a page.
[00:58:51.440]And then who made them, right?
[00:58:53.040]So this page was cloned.
[00:58:54.920]I made an edit.
[00:58:55.900]And then I made another edit right here.
[00:58:57.960]So this is good if you need to maybe revert to a previous version of a page,
[00:59:03.540]maybe somebody edited a page in error, you need to revert.
[00:59:07.760]Or if you just have multiple people editing your site
[00:59:10.960]and you need to see who made an update,
[00:59:12.780]you can pop in here and see when and how many times they edited it.
[00:59:17.700]So I'm going to go through a couple more things
[00:59:21.040]before we get to questions really quick.
[00:59:22.780]So content, right?
[00:59:26.040]Content is all the content we've added.
[00:59:27.940]Added to our site.
[00:59:28.920]So you can see here,
[00:59:30.760]these are the pages that we've added today, right?
[00:59:34.620]My person content type, my news item, my web form,
[00:59:38.360]the basic page, builder page,
[00:59:41.040]the directory page, basically,
[00:59:46.600]and then our front page that we just created,
[00:59:49.240]and then our clone page, right?
[00:59:50.600]So this is all the page,
[00:59:51.680]and then there's stuff that we've created in previous trainings.
[00:59:53.900]And we added images to the site through
[00:59:57.920]the media library little modal window.
[01:00:00.420]But let's say you want to add documents,
[01:00:03.920]other documents or images.
[01:00:05.860]Well, under content media,
[01:00:08.000]this is kind of the bigger,
[01:00:11.940]like the full page interface of that little interface
[01:00:16.020]that pops up when I was adding images to pages.
[01:00:19.160]So you can see here,
[01:00:20.220]this is all the stuff we've added to the site.
[01:00:22.420]So we need to fix this view.
[01:00:24.620]So these only show up once, right?
[01:00:26.420]Because we only,
[01:00:27.900]we added them once
[01:00:28.580]and then it shows you how many places
[01:00:30.280]there have been referenced, right?
[01:00:31.520]So let's say you need to add a file to your site, right?
[01:00:40.340]So we're going to add a file.
[01:00:43.220]So we're going to choose a file here.
[01:00:48.380]Let's see what we've got.
[01:00:49.460]So let's go ahead and choose this.
[01:00:57.880]So you'll notice when you add a file to your site, which would be, you know, a doc or PDF, you get this little box here.
[01:01:08.680]This is, I certify the following is true.
[01:01:10.460]I've done due diligence to assure that this file meets accessibility standards.
[01:01:14.220]So we have some documentation about how to create accessible documents to upload to your site.
[01:01:24.560]So I will show you where that is.
[01:01:26.240]I'm going to go ahead and put that.
[01:01:27.860]I'm going to put that in the chat here.
[01:01:29.720]So under file best practices, you can see when I click this menu, there's InDesign, Common, Accessibility Errors and Fixes, and Word.
[01:01:39.280]So those would be for creating.
[01:01:40.860]Let me see here.
[01:01:42.360]Where's my chat?
[01:01:44.100]Okay.
[01:01:49.400]So I'm going to go ahead and put this in here.
[01:01:52.200]So to reiterate.
[01:01:57.840]If you are uploading a PDF or Word document, you should make sure that that PDF or Word document is accessible.
[01:02:06.920]So anybody using a screen reader or an assistive device to view your website, they will be able to see that as well.
[01:02:13.780]But I will also say this.
[01:02:16.320]If you are uploading a doc or a PDF, think about the experience of all users on your site in addition to those who may be using assistive devices.
[01:02:27.820]Right now, currently, on the UNL website, almost 50% of our traffic is coming on a mobile device.
[01:02:34.640]If you have ever tried to view a PDF on your mobile device, you know that at best, it's frustrating, and at worst, it's unusable.
[01:02:47.720]So, if you want all users of your website to be able to view the content of that website easily,
[01:02:57.800]then that content should actually be a web page and not a PDF.
[01:03:02.540]So, again, if you must upload a PDF, make sure it's accessible.
[01:03:08.080]If you really want all users of your website to see that content, it should be a web page on your website and not a PDF.
[01:03:17.680]So, now that I have said that, the tagging is very similar to the tagging in images.
[01:03:26.260]It works the same way.
[01:03:27.780]You're going to want to go general to specific.
[01:03:29.380]So, you know, we know that this is combined campaign.
[01:03:32.680]I'm just using this for an example.
[01:03:38.740]Basically, you can see there's not a tag created for that.
[01:03:41.380]So, we can see this is an agency list.
[01:03:45.200]Again, not a tag for that.
[01:03:47.100]We know that this is 2024.
[01:03:49.240]We're going to go ahead and tag that year.
[01:03:52.000]And we're going to go ahead and click save.
[01:03:57.760]So, now you can see I've uploaded this file to my website.
[01:04:02.960]And now I'm going to add a remote video.
[01:04:06.080]So, remote videos are very easy to add as well.
[01:04:10.980]We're going to click remote video.
[01:04:13.600]And all we need is a URL for MediaHub.
[01:04:17.000]So, let's do, hey, we're on a combined campaign theme here.
[01:04:25.760]All I need is this URL.
[01:04:27.740]So, I've copied the URL from this video.
[01:04:31.900]I'm going to paste that in there.
[01:04:34.060]We're going to go ahead and start typing combined campaign.
[01:04:36.960]We know this is a chancellor's message, right?
[01:04:40.820]Say chancellor.
[01:04:42.120]Oh, there's already a tag for that.
[01:04:43.700]Say 2024, right?
[01:04:47.060]We could even say thank you, right?
[01:04:51.460]Whatever, thank you video.
[01:04:52.740]So, we're going to click save.
[01:04:57.720]And you can see that this video has been added as well as this document.
[01:05:04.680]So, how do I add these to a page?
[01:05:06.940]Well, we're going to go back into content.
[01:05:09.160]We're going to go to our about our department page.
[01:05:13.480]And you can do this in any piece of content with a WYSIWYG editor, but we're going to click edit.
[01:05:21.000]And the nice thing is...
[01:05:27.700]Like adding a link to another page.
[01:05:32.640]If you've uploaded a document, it's really easy to add a link to that.
[01:05:36.360]You know, I select the text, I click link.
[01:05:38.900]And I start typing the name of the file that I want to link, right?
[01:05:44.080]So combined.
[01:05:45.120]Right there.
[01:05:48.260]Boom.
[01:05:49.220]Click the checkmark.
[01:05:50.640]And I have created a link to that document.
[01:05:52.600]Similarly, if I want to add a...
[01:05:57.680]Video to my site.
[01:06:01.660]I just click this media library button.
[01:06:05.200]And rather than image, I click remote video.
[01:06:08.220]And it takes a second to reload those.
[01:06:10.940]And then you'll see when it flips over here.
[01:06:15.040]So you can see here's this remote video I just added.
[01:06:23.420]We'll insert it.
[01:06:27.660]And you can see the formatting is very similar to an image where I can offset that.
[01:06:35.020]Or, you know, if there's text here, I could float it.
[01:06:37.640]I like big videos, so I'm going to go default size.
[01:06:42.520]And then I'll go ahead and click save.
[01:06:44.500]Right.
[01:06:50.360]So here's our page.
[01:06:52.500]You know, maybe that video is a little too big for you, so you can change it back to default size.
[01:06:57.640]If I hover over this link, you can see that it's linking to that document that I uploaded.
[01:07:03.560]So that's kind of all the basics of adding content, adding files, linking files, linking content.
[01:07:10.940]As I mentioned previously, there are tons of different components that you can add to your pages.
[01:07:17.660]And then in different order, you know, you can create lots of different layouts.
[01:07:20.700]I'm going to go over two more things really quick, and then we'll take questions.
[01:07:27.620]If you have been given access to a site or you've already started working on a site,
[01:07:33.420]then you probably already have site admin access.
[01:07:39.400]So if you need to add another person to your site, you would go to people and you would import a user.
[01:07:45.460]So under people, you can see everybody who has access to your site and the roles that they have on your site.
[01:07:52.960]So as you can see here, by default, site admin is typically what we are.
[01:07:57.600]We're giving people for site access.
[01:07:59.700]So a site admin can add content, they can edit content, they can add new users, they can remove users, and they can even come up in here to configuration, basic site settings.
[01:08:14.060]So, you know, if we create a site for you, it's going to have a site title, right?
[01:08:18.500]If you need to change the affiliation, which is, let me show you really quick, probably already know what it is, but just so you're clear.
[01:08:27.580]This is the site title.
[01:08:28.840]This is the site affiliation.
[01:08:31.560]This is just a way to show kind of hierarchy of where your site is.
[01:08:34.900]And then you could link to a parent, either department or college or organization that your unit is within.
[01:08:42.120]And then for whatever reason, if you need to change the front page of your site, this site configuration system site settings is where you would do that.
[01:08:52.060]So again, a person with the site admin access level.
[01:08:57.560]Can do all those things.
[01:08:58.520]If I come in here, you can also see, so I'm going to have access to a little bit more than you do.
[01:09:10.820]But the three roles that you could give people access to are site admin, which we just talked about, and then editor and viewer.
[01:09:18.460]So the editor role is one step down from site admin.
[01:09:21.620]They can create content and edit content, but they can't delete content.
[01:09:27.540]And they can't add or remove users.
[01:09:30.580]So this is a good access level if you just want to give somebody a role on your website to add and edit pages on your site.
[01:09:40.160]But you don't want to worry about them editing anything else or changing any of the site configuration or adding any users.
[01:09:51.400]It's basically just a slight step down from site admin.
[01:09:57.520]So this viewer role is a step down from both of these.
[01:10:06.760]A viewer role has access to the site, but they can't add content or edit content or even add or edit users.
[01:10:17.980]The only thing they can do is see content on your site regardless of its published status.
[01:10:27.500]So what do I mean by that?
[01:10:29.360]When you create a page, by default, it's going to be published.
[01:10:36.140]If I scroll down here by save and preview, and then there's also a delete button.
[01:10:42.800]But again, I would say do not delete a page unless you are about 2,000% sure it needs to be deleted and you're deleting the right page because it's pretty much impossible to get back.
[01:10:57.480]There are different statuses that content on your site can have.
[01:11:02.560]By default, things are going to be published.
[01:11:04.520]If I go to add content, builder page, for instance, and I say test new page, I can actually save this as unpublished.
[01:11:17.960]So save it.
[01:11:20.140]So there's a new page.
[01:11:25.600]I can see it.
[01:11:26.460]I'm logged in.
[01:11:27.460]If I open this in a private window, I'm copying this link, right?
[01:11:30.800]Pasting it.
[01:11:31.980]Access denied because I do not have access to that site.
[01:11:39.140]So going back to this viewer role, a viewer role is somebody who can view unpublished pages as well as draft pages.
[01:11:48.520]So what is the benefit of that?
[01:11:50.240]We kind of in our office refer to this as the approval.
[01:11:57.440]So this might be somebody who maybe is a supervisor or something.
[01:12:03.780]They don't want to edit the site.
[01:12:05.140]They don't want to worry about any of that.
[01:12:06.620]But they would like to look at pages before they go live to the public.
[01:12:11.280]So in that particular case, maybe they say, hey, I need you to add two pages to our site with this information.
[01:12:17.920]Don't publish them yet.
[01:12:20.200]Don't make them so anybody can see them.
[01:12:21.800]I want to look at them first.
[01:12:23.820]So in that particular case, you do what I just did.
[01:12:27.420]You create these new pages.
[01:12:29.880]You'd make sure they were unpublished.
[01:12:32.740]And then you would just share.
[01:12:34.580]You would give them, make sure that person had viewer role.
[01:12:38.800]And then you could share these URLs with them, even though they're unpublished, and they
[01:12:43.960]would be able to see them and either, you know, give you the thumbs up or give you the
[01:12:46.960]thumbs down on them, right?
[01:12:47.900]And then they give you the thumbs up.
[01:12:50.080]You can make them published.
[01:12:51.500]You can link them from other pages.
[01:12:53.080]And then everybody who comes to your site can see them.
[01:12:57.400]So those are the three different roles and the three different
[01:12:59.800]access levels.
[01:13:00.560]I want to touch on one more thing very briefly.
[01:13:04.200]And then we'll go to questions.
[01:13:07.280]So what are the steps in all this?
[01:13:13.280]We're near the end of the process.
[01:13:16.200]But these are the three steps, right?
[01:13:18.000]Get started.
[01:13:19.080]Attend a training.
[01:13:19.840]If you're already here, you're already doing the first step.
[01:13:22.540]So the second step is request a site and start building.
[01:13:25.860]I hope everybody has.
[01:13:27.380]Already done that because, you know, December 12th, which is a week from Thursday, sites
[01:13:34.300]are automatically going to start getting switched over into the new system.
[01:13:37.520]And then on December 19th, which is two weeks from Thursday, the old system is gone.
[01:13:45.880]So I really hope everybody is at least here too.
[01:13:49.780]So go live is the third step.
[01:13:51.700]So this is the step is if your new site, you want to basically become your
[01:13:57.360]default site, this is the fee.
[01:13:59.560]This is the form that you fill out and say, Hey, my new site's ready.
[01:14:03.040]I'm ready to go live.
[01:14:04.420]You fill this out and then we'll switch it live in, you know, basically one
[01:14:11.500]business day or so.
[01:14:12.380]So those are the steps for the new kind of, you know, this made a lot more
[01:14:18.300]sense a month ago, but cause we're kind of really close to the deadline here.
[01:14:21.340]And some of you may have been handed sites.
[01:14:24.280]You know, some of you may have been given access.
[01:14:27.340]To a site that's already been created in the new system.
[01:14:29.500]And if so, that's good, right?
[01:14:31.720]You've kind of learned how all these pages work together.
[01:14:34.660]Um, so that is kind of the process for this.
[01:14:40.580]Again, I want to reiterate December 12th, which is a week from Thursday is when
[01:14:44.900]sites will start automatically switching over to their next gen CMS site in
[01:14:49.340]December 19th is when the old system is goes offline.
[01:14:52.780]So those are the two important dates.
[01:14:55.900]Um,
[01:14:57.320]I will go ahead.
[01:14:58.500]That's everything I have for the training today.
[01:15:04.060]So if anybody has any specific questions,
[01:15:06.420]I will try to answer those right now.
[01:15:09.500]I will say the other thing is,
[01:15:27.300]you know,
[01:15:29.440]typically when people request a site,
[01:15:31.100]I give them a new site and then I give them access to our web developer
[01:15:34.740]network Slack channel,
[01:15:36.000]which is kind of a big chat room where everybody,
[01:15:38.540]a lot of people who develop at the university exchange ideas,
[01:15:43.620]you know,
[01:15:44.140]if they run into bugs,
[01:15:45.080]they can post them there,
[01:15:45.940]but there's almost 500 people in there now.
[01:15:49.500]Um,
[01:15:50.000]so there's a lot of stuff that goes around and some people,
[01:15:52.580]you know,
[01:15:53.360]if you have a problem,
[01:15:54.060]a lot of times it can get solved by somebody in our office or
[01:15:57.280]somebody else.
[01:15:57.960]And there's just,
[01:15:59.340]you know,
[01:15:59.940]it's a good channel for communications for anybody who's developing
[01:16:03.320]at the university.
[01:16:04.040]So if you do not have access to that Slack channel,
[01:16:08.940]please just send me an email and I can directly add you to that
[01:16:13.580]Slack channel.
[01:16:14.120]Um,
[01:16:14.860]again,
[01:16:15.440]it's a good place for discussion and just to kind of see what's
[01:16:17.600]going on.
[01:16:18.000]We,
[01:16:18.200]if there's any announcements,
[01:16:20.360]we put them in there typically,
[01:16:21.660]uh,
[01:16:22.380]just because that's where a majority of people are.
[01:16:27.260]Does anybody have any questions at all?
[01:16:29.900]Well,
[01:16:38.440]if not,
[01:16:39.140]if people 10 more seconds,
[01:16:41.600]you can either type it into the chat or you can speak up,
[01:16:44.740]feel free.
[01:16:45.220]All right.
[01:16:51.040]Well,
[01:16:52.160]if that is all,
[01:16:53.680]then I will say thank you all for joining this morning.
[01:16:57.240]And like I said,
[01:16:59.960]I'll send this video around at the end of the day and I hope you have a good
[01:17:03.220]rest of your day.
[01:17:04.060]Thanks a lot.
[01:17:05.920]Thank you.
[01:17:06.020]Thank you.

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.

Comments

0 Comments

December 3 Next-Gen CMS Training

Description

Searchable Transcript

Comments icon comment

Related Channels

Comments