Next-Gen CMS Training - Nov. 5, 2024
Aaron Coleman
Author
11/05/2024
Added
29
Plays
Description
Learn the basics of building a site in Next-Gen CMS, including content types, components, media library and more.
Searchable Transcript
Toggle between list and paragraph view.
- [00:00:00.000]I'll record this and send it out to everybody later so you can re-watch it
- [00:00:05.100]um there's also previous trainings that are uploaded to media hub
- [00:00:08.580]um let's see what else was i gonna say
- [00:00:13.200]well that's about it for now i was gonna say if you have specific questions to something that i
- [00:00:21.280]just mentioned in the training feel free to ask them in the chat and eric or bob can answer those
- [00:00:26.460]questions if you have more general questions you know maybe about the process or something
- [00:00:31.980]more specific please hold those to the end and then at the very end of the training we have some
- [00:00:37.000]time where we allow for questions and we'll answer those so i'm gonna go ahead and get started i'm
- [00:00:43.340]gonna share my screen and everybody should be able to see this all the kids running out of the
- [00:00:53.780]tunnel a big red welcome that's
- [00:00:56.440]the onboarding site yep okay so you know when you log into the site you're going to see this
- [00:01:03.440]administrative toolbar this is very similar to the current cms maybe a little bit different look
- [00:01:09.660]right once you're when you're not logged in it just looks like a normal site when you log in
- [00:01:13.560]you get this uh administrative stuff up here and then you get these tabs on whatever page that
- [00:01:19.300]you're on and feel free to add pages to that sandbox site you know obviously people have been
- [00:01:24.800]messing with it and adding pages to the
- [00:01:26.420]navigation and stuff like that so you know feel free to add anything you want to that's what it's
- [00:01:31.120]there for so obviously content here this content is anything content related that you add to your
- [00:01:37.440]site so this is pages this is where you upload media things like that you know if i click add
- [00:01:42.140]content right here there's two ways to add new content i can click add content and it brings
- [00:01:48.040]me to this page with all the types of content i can add or i can hover over it and then click
- [00:01:52.860]one of these things so this page here talks about
- [00:01:56.400]the different types of content that you can add to your site so you'll see builder page
- [00:02:00.520]book page news item person web form if you've been in the previous system book page is you
- [00:02:06.420]know that's familiar to you web form that's very familiar to you those are things that
- [00:02:10.700]exist in the current system person and news item are a little more specific and we'll
- [00:02:15.260]go into all this stuff but then right here at the top is builder page and that's probably
- [00:02:20.900]the type of content you're going to add the most to your site and what you do not see
- [00:02:24.820]here that you might be familiar
- [00:02:26.380]with if you're in the current system is basic page so builder page replaces basic page
- [00:02:31.840]it has sort of the basic page functionality but then it also has all this new functionality
- [00:02:38.700]called layout builder where you can add these really cool you know pre-designed
- [00:02:46.720]components essentially to your page to build out these really advanced layouts and you
- [00:02:52.860]the nice thing about it is you never have to touch html you never have to touch
- [00:02:56.360]css you never have to touch javascript which in the old system there was a lot of that
- [00:03:01.720]it was really easy to edit a page in the WYSIWYG editor and delete a div tab and blow up
- [00:03:06.280]your layout so we've moved away from that got all this stuff built in it's pretty nice
- [00:03:12.520]system we're working on it all the time and adding new features and now that i've kind
- [00:03:17.700]of given the intro we're going to go ahead and we're going to dive in and we're going
- [00:03:20.560]to start adding some content so we're going to kind of go into these more specific things
- [00:03:26.340]first that are specific to the you know person news item web form and then we'll get into
- [00:03:32.840]builder page and all that that entails so we'll add a person here first so person is
- [00:03:39.740]a piece of content where you're adding a person this could be like a bio page you know something
- [00:03:45.480]like that and it's a bio page whether they're a researcher or whether they're like the head
- [00:03:50.080]of a committee or something like that and i'll show you kind of the differences between
- [00:03:55.480]those and how you can use
- [00:03:56.320]it in that way so i'm just going to fill out a couple fields here so you can see how this
- [00:04:00.080]works i'm going to fill out my name and then this unl directory reference is actually a
- [00:04:07.640]field that you can see i type my name and it auto completes and i'm going to select
- [00:04:11.920]that and then i'm going to go ahead and hit save here i'm only going to fill out two fields
- [00:04:17.440]so you can see here even though i only filled out two fields i have a page for myself on
- [00:04:26.300]this website it's kind of like a bio page and this here is the title that i filled in that's my name
- [00:04:33.580]and all the rest of this information is being pulled automatically from directory so that
- [00:04:37.780]second field that i filled out where it auto completed that is actually a field that is
- [00:04:43.860]referencing information that is in directory.unl.edu so it's pulling my job title it's pulling my
- [00:04:49.920]department it's pulling all my contact information and it's even pulling my photo because you can
- [00:04:55.020]upload your photo and
- [00:04:56.280]manage your photo essentially for all university websites in directory now so let's go in here and
- [00:05:05.200]for today's purposes let's say i want to you know override that job title that's coming out of
- [00:05:12.640]directory and sometimes you might need to do this too because those titles aren't always super clean
- [00:05:18.060]that are in directory and you can see here with this auto complete it's actually pulling my
- [00:05:22.200]username too so you can search this field by either username
- [00:05:26.260]or actual name so let's just say for today we'll just say lead trainer right
- [00:05:31.860]um and maybe i want and i can override any of those fields that are pulling from directory
- [00:05:37.320]so you know affiliation which is department um my photo phone number all this stuff right
- [00:05:43.600]i can even add a little bio information so aaron develops websites and does training and other web
- [00:05:56.240]things at the university we'll just type a sentence
- [00:05:59.120]and then i'd save so the other nice thing about this is um i will say this is if you have somebody
- [00:06:11.620]that you're adding to your site who maybe doesn't even have a university affiliation
- [00:06:17.140]like they don't even they're not in the directory you can still add people to your site so maybe you
- [00:06:26.220]somebody who is from you know another institution who is somehow you need to put on your website
- [00:06:34.420]and in that case you just wouldn't fill out the unl directory reference but you just fill out all
- [00:06:39.800]these fields and then that information would display just like it is displaying for my page so
- [00:06:45.420]in this particular edit you know i'm changing the position title and i'm adding a little
- [00:06:52.240]bio information so we're going to go ahead and save that
- [00:06:56.200]and you can see what that looks like
- [00:06:58.120]so it overrides you know my job title pulling out of directory senior web developer
- [00:07:09.380]so i'm overriding that and then you can see it put a little snippet of bio information in here
- [00:07:15.200]so we've added this person page you know i've got my own url up here it's person slash aaron coleman
- [00:07:22.120]um so that's really easy right no html
- [00:07:26.180]got a person page and you can expand this out there's other fields that i didn't even fill out
- [00:07:30.400]today so we have this and now we're going to add a different type of content we're going to add a
- [00:07:36.100]news item to our site so another nice thing about this new system is that it's um it's a lot more
- [00:07:43.200]modular i just wanted to know that we don't see my email so yeah i'm sorry what all right
- [00:07:56.160]okay maybe somebody forgot their mic was on all right um so for news item again this is a lot
- [00:08:05.340]like person right it's just fields and you're filling out these fields and then it's going to
- [00:08:09.920]render like a you don't have to touch any html so we're going to say news item for
- [00:08:15.620]november 5 training
- [00:08:20.240]so here this is a little bit different and this is something i'm going to jump into
- [00:08:26.140]as we touch on this is so we have our news item and this news item has all these fields that we
- [00:08:31.960]need to fill out right and one of those fields is an image so anytime you're adding an image to the
- [00:08:37.500]new system whether it's through a component or whether you're uploading it i'll show you what
- [00:08:42.100]that looks like anytime you're adding an image or a file now you're going through this thing called
- [00:08:49.620]the media library and that is a slightly different way to add files and images to your site
- [00:08:56.120]in this new system so we're going to go ahead and add an image here let's just choose this
- [00:09:04.480]so the big difference between the old system and the new system is you can see here that i was
- [00:09:14.480]prompted you know i can select an image and i'm uploading it well in the old system it's kind of
- [00:09:20.940]like you create folders and then you can upload images and files within those folders and then
- [00:09:26.100]you have to find the url to those images or those files and then add links to those images
- [00:09:33.940]or files in your html this new system is different you are adding images and files into this thing
- [00:09:42.000]called media library and then we add it to this repository called media library it is the way you
- [00:09:49.800]find those images in the future is through tagging and through your file naming system
- [00:09:56.080]so we have some documentation we have a lot of documentation on this system and we actually
- [00:10:03.480]have documentation both on best practices for naming your files and images and optimizing your
- [00:10:10.420]images as well as best practices for tagging so eric or bob can put a link to those resources in
- [00:10:19.400]the chat we can send those around after the meeting as well but so whenever you upload an
- [00:10:26.060]image in this new system you're automatically prompted to do alt text right so we are going to
- [00:10:31.100]say you know students talk to prospective employers at east campus career fair so tags i like to tell
- [00:10:50.380]people you know if you had a folder structure system on your old site and you kind of nested
- [00:10:56.040]folders within those that's maybe a good way to think about how you would tag things so i tell
- [00:11:01.760]people to think about tagging things from general general to specific so you know if we know this
- [00:11:08.060]is there's students in this photo for instance we can start typing students right
- [00:11:12.540]and this gives me a perfect opportunity to tell you what not to do so you can see i started
- [00:11:20.100]typing student here right and whenever there's a tag that's already created in media library
- [00:11:26.020]if there's a tag that's already created it's going to auto complete to the tag that is similar to
- [00:11:32.000]what you're typing so you can see here we have a tag for student we have a tag for student life
- [00:11:37.560]and we have a tag for students so i will use this as an example of what not to do so if you're
- [00:11:43.960]creating tags for students you should not have three separate tags that mean almost the same
- [00:11:49.540]thing because in the future when you go to look for those images and you search for one those images
- [00:11:56.000]are naturally if you have three different that mean the same thing you're going to start
- [00:11:59.620]segmenting those images off into different categories and it's going to be very difficult
- [00:12:04.600]to find things in the future so in this particular case you know we should stick with one thing
- [00:12:10.300]probably right we should probably stick with students i guess you could argue that student
- [00:12:14.660]and students are most alike student life could be slightly different you know that could maybe
- [00:12:19.580]involve student life outside of the academic classroom so that could be something students
- [00:12:25.980]and student life but you wouldn't want a tag for student and students anyway that's just a minor
- [00:12:32.960]thing there but it's worth mentioning so you know we could say that this is career fair right we
- [00:12:38.740]know it's a career fair and you can see when i start typing tags here whenever there's a tag
- [00:12:44.840]in the system that is already in there it's going to start auto completing so there's no tag for
- [00:12:48.520]career fair here um we know that it's on east campus so we can start typing east campus oh we
- [00:12:54.240]can see there's a tag for that right
- [00:12:55.960]and if we know the date you know if you want to at some point reference
- [00:12:59.880]you look on your site and look at all the images that were created in a certain date
- [00:13:03.920]i don't think that's an entirely bad tag to have because maybe five years down the road you want
- [00:13:09.460]to start clearing out photos that were uploaded to your site five years ago and you can search
- [00:13:14.200]for that tag and then start clearing those out and or replacing them so you know if we know this
- [00:13:19.180]photo was taken in 2024 we can add a tag for that so we'll do that and that's a pretty good amount of
- [00:13:25.940]space for one photo and we're gonna save and insert that so now we've created we've added this
- [00:13:32.660]image and we've uploaded it to media library and this image that's been uploaded to media library
- [00:13:40.340]is automatically embedded in our news in our news item so you know we uploaded the image and we're
- [00:13:47.600]prompted to add alt text so here's the other fields in the news item we have cut line so this would be a
- [00:13:55.920]little more specific even than the alt text so this could be if you know the names of students you know names of students talking and who you know what what company and or person from company they're talking to so this is you know this is an example of a byline
- [00:14:25.900]or a cut line right where you could be more specific about that particular image than you would be in the alt text so if you knew the name of the state students if you knew where they're from if you knew what their majors were if you knew the name of the person and or the company that the person they were talking to that's kind of where you would put that here so lead image credit you know this is where you just put who took the photo so we're gonna say Craig took that you know byline this is who wrote the news article this
- [00:14:55.880]is optional so we're gonna go ahead and put a name in here and I usually have
- [00:15:03.560]this open already I forgot but nobody wants to see me type five paragraphs of
- [00:15:09.720]text so I usually open a lorem ipsum generator and I just copy it over into
- [00:15:15.080]here maybe put another paragraph break here so I had mentioned earlier that the
- [00:15:25.860]more modular and how you build things you can create a piece of content in one
- [00:15:29.720]place and then reference it elsewhere here's the first example of what I mean
- [00:15:34.280]by that so person reference you know I just created myself as a person on this
- [00:15:39.060]site so I'm going to go ahead and reference myself here as a contact for
- [00:15:44.080]this news article and then you know this is related links so if we know that these
- [00:15:50.040]students are maybe in agronomy and horticulture or something we can put in
- [00:15:55.840]agronomy@unl.edu and then we can say you know department of agronomy and or
- [00:16:07.360]something like that so we filled out our fields and we're gonna hit save and so
- [00:16:18.780]you can see here here's the title of our news item the byline the published date
- [00:16:25.820]you know the cut line for the photo the photo credit the photo itself and then
- [00:16:31.320]the rest of the news article is is formatted like something you'd see in
- [00:16:34.940]Nebraska today right and here's what I mentioned before where I created that
- [00:16:39.020]piece of content for myself I actually overrode the name that was
- [00:16:43.400]put or the job title that was pulling from directory and you can see that that
- [00:16:48.060]poll is pulling through here and then we've got our related links here and then
- [00:16:52.740]it is automatically pulling in the most recent news items
- [00:16:55.800]at the bottom of this news article so again no HTML it looks nice it's
- [00:17:02.680]formatted like people would expect from Nebraska today and and and we've got our
- [00:17:08.280]news item so now we're gonna go in and we're gonna add a web form so we're
- [00:17:20.060]gonna say RSVP for training
- [00:17:25.780]and now that I scroll down you can see information message web forms must first
- [00:17:31.920]be created before referencing them so what does that mean well in the old
- [00:17:37.080]system web forms were kind of one thing you created a web form and you you know
- [00:17:45.180]decided what fields they were and then people could fill out that web form and
- [00:17:48.960]you could download the results and all that in the new system the fields that
- [00:17:55.020]you're collecting
- [00:17:55.760]and then the page that it is attached to are separate things
- [00:17:59.760]so that might seem confusing and like an extra step but there's an actual benefit
- [00:18:04.640]to that so in the old system a lot of the time
- [00:18:07.380]we've had people say hey can i clone this web form can i just duplicate it
- [00:18:11.420]and in the old system there's really no way to do that you just have
- [00:18:14.740]to recreate the form and recreate all the fields that you want to
- [00:18:17.720]gather data from people which is super annoying
- [00:18:21.080]in the new system you already have all those fields that you're collecting
- [00:18:25.740]so rather than recreate it you would just create a new web form
- [00:18:30.180]page which is what we're doing here and then you would reference those web form
- [00:18:34.560]fields so we're going to go ahead and say you
- [00:18:37.120]know we're going to choose rsvp that's a web form those are fields that
- [00:18:41.280]have already been created and we're going to click
- [00:18:42.920]save just so you can see what that looks like we'll touch on how to create the
- [00:18:47.000]fields here in just a second so you can see here this page is
- [00:18:52.040]attached to these web form fields so these are the fields that we're
- [00:18:55.720]collecting right um so this is referencing all this stuff
- [00:19:02.040]that we're collecting and so what is the benefit of that
- [00:19:05.200]um the benefit is if you have um events that you are always collecting
- [00:19:13.440]the same information for maybe they're quarterly maybe they're
- [00:19:17.740]twice yearly maybe they're monthly you know rather than recreating this
- [00:19:21.800]web form over and over and over again what you would do is you'd keep
- [00:19:25.700]those same fields and then you just attach those to different pages
- [00:19:29.120]so we've attached this web form fields to this page and you can see here
- [00:19:33.620]there's another tab up here called results
- [00:19:35.800]so anytime someone would submit this web form
- [00:19:39.400]the data for these fields is actually attached to the page that we've just
- [00:19:43.260]created right so so then you can download those
- [00:19:47.460]nobody's obviously submitted this yet because we literally just created it
- [00:19:51.620]but it's a really good way to keep the data and then
- [00:19:55.680]sort of fields and the information that you're trying to collect separate you don't have to
- [00:19:59.760]clone things anymore because you really just could keep creating pages
- [00:20:03.860]you know maybe I want to create a page that
- [00:20:07.660]I want people to sign up for every month and so I just create 12 pages and I
- [00:20:11.660]reference that same web form and you're collecting that data in 12 different places
- [00:20:15.720]it's easy to keep it separated out so
- [00:20:18.500]where do you create the fields you may be asking so
- [00:20:23.740]those are actually you know all
- [00:20:25.660]the stuff we've been dealing with so far has been in the content tab where you
- [00:20:29.460]create the web form fields are actually in structure web forms and when I go
- [00:20:36.640]through these menus I'm just as a note I'm gonna see a little bit more stuff
- [00:20:40.480]than you are just because I have a little bit more access privileges but
- [00:20:44.320]you know web form fields are in structure web forms and so you can see
- [00:20:48.160]down here RSVP that is those are the fields that we
- [00:20:51.460]referenced so if I click build I can
- [00:20:55.640]see all these fields right so these are the fields that we were referencing
- [00:20:58.800]and if we want to add another element you know
- [00:21:03.280]I can just click add element so this is adding another field to our web form
- [00:21:07.720]you know maybe we want
- [00:21:11.620]check boxes right or maybe we want radio buttons you know
- [00:21:15.660]we want to find out if people like the training right
- [00:21:19.820]did you enjoy the training
- [00:21:23.480]so then we can say
- [00:21:25.620]yes
- [00:21:26.580]no
- [00:21:29.220]you know we could remove it
- [00:21:33.040]I guess if there's nothing in there it's not going to show up
- [00:21:36.040]so then we can save it
- [00:21:38.620]you can see over here we added a check or radio button
- [00:21:44.520]did you enjoy the training we're going to save that
- [00:21:46.740]so again we added another field
- [00:21:49.620]but then all we have to do is go back to our page
- [00:21:52.440]where we're referencing these fields
- [00:21:54.060]you know here's our web form
- [00:21:55.600]in content
- [00:21:56.760]come back over here to RSVP for training
- [00:21:59.200]and we scroll down
- [00:22:01.540]and we can see did you enjoy the training
- [00:22:03.920]that's the field that we added
- [00:22:05.820]and it's automatically pulling into this page
- [00:22:08.120]so we've touched on all these
- [00:22:11.280]some of these different types of content here
- [00:22:13.800]and we're going to
- [00:22:14.860]I'm going to very very briefly
- [00:22:16.380]touch on book page here
- [00:22:18.900]but I'm not actually going to add one
- [00:22:20.820]to our site
- [00:22:22.240]so we're going to go ahead
- [00:22:25.580]and instead
- [00:22:25.900]and I'm not sure
- [00:22:29.760]if Bob or Eric put a link in here
- [00:22:31.660]but I had mentioned before that we have all this
- [00:22:33.480]documentation
- [00:22:34.200]and that documentation lives
- [00:22:37.440]at CMS docs
- [00:22:38.980]right here
- [00:22:41.080]and so
- [00:22:45.540]in CMS docs the reason I'm referencing
- [00:22:47.600]this as I talk about book pages
- [00:22:49.160]is because this
- [00:22:51.260]all this content here is in book pages
- [00:22:53.840]so if you're familiar with
- [00:22:55.560]Drupal 7
- [00:22:56.140]the current system that we're in
- [00:22:59.080]book pages work exactly the same
- [00:23:01.680]way they do in the old system
- [00:23:03.620]in this new system
- [00:23:04.620]so the good
- [00:23:06.800]a really good way to use
- [00:23:09.560]book pages is for
- [00:23:11.340]documentation as we're
- [00:23:13.660]using it here right because you can create
- [00:23:15.680]the title of your book you can
- [00:23:17.620]add essentially what these are
- [00:23:19.380]think of them as chapters or pages
- [00:23:21.600]you know these might be pages
- [00:23:23.120]these could be chapters right because
- [00:23:25.540]you open you click this content
- [00:23:27.560]types page
- [00:23:29.860]and then it opens down
- [00:23:31.820]into these content types right
- [00:23:33.520]and I can click builder page
- [00:23:35.020]and then this opens down into the
- [00:23:37.580]different types of components that you can put
- [00:23:39.540]on the builder page so this is a really good way
- [00:23:41.640]to create
- [00:23:43.460]lots of content
- [00:23:45.620]that has a shared navigation
- [00:23:47.560]system that always shows
- [00:23:49.620]up on the right side of the page
- [00:23:51.580]it's really good for documentation
- [00:23:53.540]I've seen people use it for
- [00:23:55.520]annual reports
- [00:23:56.520]I've seen people use it for just
- [00:23:59.340]other types of
- [00:24:01.440]documentation where you want people to always
- [00:24:03.620]have navigation to reference
- [00:24:05.360]and kind of have it orderly
- [00:24:07.580]there's definitely a flow here
- [00:24:09.540]where people can
- [00:24:11.480]move through this navigation
- [00:24:13.740]structure from top to bottom
- [00:24:15.340]and there's some
- [00:24:17.120]hierarchy to it
- [00:24:19.140]so that's book pages I'm not going to
- [00:24:21.640]get into it on the new system because it works
- [00:24:23.540]the same as it did in the old system
- [00:24:25.500]if you've
- [00:24:27.580]used it before it works exactly
- [00:24:29.500]the same
- [00:24:29.980]so now
- [00:24:32.440]that we've kind of run through these separate
- [00:24:34.740]on our content page
- [00:24:37.360]we've kind of run through all these
- [00:24:38.680]we're going to go ahead and we're going to get into builder page
- [00:24:41.520]so we're going to
- [00:24:43.520]add a builder page
- [00:24:44.440]and we are going to go ahead
- [00:24:47.340]and go about this
- [00:24:49.100]apartment
- [00:24:50.180]so
- [00:24:55.480]this interface here probably
- [00:24:57.860]looks kind of similar to what you're used
- [00:25:00.040]to in
- [00:25:01.020]Drupal 7 where
- [00:25:03.260]you can
- [00:25:05.080]have a big body field a title
- [00:25:07.860]you know this hero is something
- [00:25:09.980]that used to be tucked down at the bottom but now
- [00:25:12.020]we've moved it up to the top because a hero
- [00:25:13.940]is a big image that shows up at the top of your page
- [00:25:16.220]so it just makes a lot more sense to have it
- [00:25:18.100]this
- [00:25:19.100]place in the interface
- [00:25:21.060]so over here
- [00:25:23.300]you know we have menu
- [00:25:25.460]settings url alias
- [00:25:27.540]authoring information promoted
- [00:25:29.380]options which is something that you'll
- [00:25:31.100]you'll really
- [00:25:32.240]we really don't use so
- [00:25:34.920]it's just kind of there and then
- [00:25:37.420]these page options which gives us the
- [00:25:39.380]option to hide the page title and hide
- [00:25:41.320]the sidebar which I'll show
- [00:25:43.380]you what both of those mean here in a second
- [00:25:44.940]so
- [00:25:45.820]we're going to go ahead and add a hero
- [00:25:49.400]to this page
- [00:25:50.320]and just like in the news item because
- [00:25:53.460]we're adding an image it's going to pop us
- [00:25:55.440]into media library
- [00:25:56.540]rather than uploading another image
- [00:25:59.280]instead I'm going to choose one that we've already
- [00:26:01.400]uploaded previously so
- [00:26:03.080]let's scroll through here
- [00:26:05.160]you know let's just say
- [00:26:07.040]let's just use
- [00:26:09.500]this one
- [00:26:09.960]so in the hero image
- [00:26:15.560]there's
- [00:26:17.420]this object position
- [00:26:18.620]so object position is best if you think about
- [00:26:21.600]a hero image
- [00:26:23.380]is maybe like a photo or a
- [00:26:25.420]print that is behind a matte
- [00:26:27.260]in a frame so a matte
- [00:26:28.940]you know that's cut out
- [00:26:30.700]and the image kind of slides behind
- [00:26:33.320]there vertically it's fixed to
- [00:26:35.380]the sides but it can slide vertically
- [00:26:37.040]so this object position
- [00:26:39.280]determines what part of that
- [00:26:41.500]image shows through the matte
- [00:26:43.380]basically
- [00:26:43.940]so think about it without a frame
- [00:26:47.140]obviously you can't move a print or photo around
- [00:26:49.520]behind a frame but
- [00:26:50.380]so 50% zero would
- [00:26:53.080]lock the top part of the image
- [00:26:55.400]to the top part of the
- [00:26:57.420]matte or the frame
- [00:26:58.780]in this case for the hero
- [00:27:00.280]just like 50-100 would lock
- [00:27:03.160]the bottom part of the image to the bottom part of that
- [00:27:04.980]by default it's 50-50
- [00:27:06.920]so the visual information is right through the
- [00:27:09.500]center of the image
- [00:27:10.880]the hero size is the size
- [00:27:13.480]of the vertical size
- [00:27:15.220]of that hero
- [00:27:16.860]hero overline so we can say
- [00:27:19.480]I'm just going to type these in, these are optional
- [00:27:21.420]about our department
- [00:27:25.380]and then we're going to create this hero
- [00:27:29.480]so we've got our hero
- [00:27:36.020]we've got our page title
- [00:27:37.280]we're going to put some lorem ipsum
- [00:27:40.100]in here, again I don't
- [00:27:41.980]want to type a bunch of text
- [00:27:43.340]and then
- [00:27:50.180]let's go ahead and click save
- [00:27:54.080]and see what this looks like
- [00:27:55.360]alright, so you can
- [00:28:04.000]see our people in our hero
- [00:28:05.980]are cut off, so we're going to want to adjust that
- [00:28:08.180]and then we've got
- [00:28:09.980]this kind of blank space over here
- [00:28:11.780]so we see
- [00:28:13.780]some adjustments we need to make and maybe
- [00:28:15.840]some other edits we can make
- [00:28:17.320]so we're going to go ahead and click back into
- [00:28:19.980]edit here
- [00:28:20.760]we're going to edit our hero
- [00:28:25.240]first
- [00:28:25.340]so their heads are cut off
- [00:28:29.180]so this is what I'm talking about when we can move
- [00:28:31.040]this image around
- [00:28:31.860]so where their heads aren't going to cut off
- [00:28:34.840]we're going to lock the top
- [00:28:36.620]a little bit further down this image
- [00:28:38.940]so we're going to say 50% 20%
- [00:28:41.020]and then we're going to go ahead and make it
- [00:28:43.060]large too
- [00:28:43.780]and so over
- [00:28:47.200]here if you remember
- [00:28:48.320]there's this sidebar
- [00:28:50.520]so by default if you
- [00:28:53.420]do not hide this
- [00:28:54.860]you're going to be able to
- [00:28:55.320]you're going to have pages that
- [00:28:56.840]show up with a little bit of navigation that looks like
- [00:28:59.320]book pages on your pages
- [00:29:01.220]so it's just another way for us
- [00:29:03.240]to create some internal navigation on our
- [00:29:05.300]sites it's really easy to hide if you
- [00:29:07.200]don't want it
- [00:29:07.860]and let's just say we want to add this to our menu
- [00:29:10.980]so we're going to click this we're going to provide a menu
- [00:29:13.320]we're going to add it to the main menu
- [00:29:14.820]and then let's say
- [00:29:19.120]we want to add another image in here too
- [00:29:20.780]and you can add
- [00:29:22.700]you know different formatting
- [00:29:24.840]so maybe we want to add
- [00:29:26.320]another header in here
- [00:29:28.760]and the WYSIWYG works very similar
- [00:29:31.080]it's really easy to format this stuff
- [00:29:33.360]select the text you know
- [00:29:35.020]maybe I want to put another break here
- [00:29:38.740]you know there's stuff you can add in here
- [00:29:41.580]like hard return right
- [00:29:43.600]but we want to add another image in here
- [00:29:46.020]so we're going to
- [00:29:47.880]click media library
- [00:29:49.060]and again
- [00:29:52.040]rather than upload one we're going to go
- [00:29:54.360]ahead and choose something that's already been
- [00:29:56.040]added
- [00:29:57.280]so when you add an image
- [00:29:59.580]there's all these formatting options
- [00:30:02.020]right so this to the right here
- [00:30:04.060]is how the image
- [00:30:06.160]works with the text right so
- [00:30:08.000]offset left
- [00:30:09.780]offset centered
- [00:30:12.540]floated left
- [00:30:14.280]and floated right and then
- [00:30:16.180]this controls how
- [00:30:18.240]big the image is so by default
- [00:30:20.520]is going to be the default size
- [00:30:22.040]that you uploaded the image
- [00:30:23.880]narrow is going to be roughly half
- [00:30:26.540]the viewport or the
- [00:30:28.400]viewport width and then wide
- [00:30:30.540]is going to be full viewport
- [00:30:32.400]width basically for that image
- [00:30:34.200]so we're going to choose narrow and we're going to float it right
- [00:30:36.400]we've made
- [00:30:38.480]these other changes
- [00:30:39.700]oh I forgot to click update
- [00:30:42.500]hero so we're going to do that
- [00:30:43.860]so that our changes with the hero are done
- [00:30:45.960]and then we're going to click save
- [00:30:48.120]to save our page
- [00:30:49.060]and then we're going to click save
- [00:30:53.760]so you can see here when I adjusted
- [00:30:55.840]that object position
- [00:30:56.840]it pushed the top of that image down
- [00:30:59.520]so their heads are no longer cut off
- [00:31:01.160]and we made it a little bit bigger
- [00:31:03.660]and we added an image
- [00:31:05.840]that floats to the right
- [00:31:06.780]and unfortunately that image is a little bit bigger
- [00:31:09.820]and it breaks that hard return
- [00:31:11.140]but it still doesn't look that bad
- [00:31:12.700]but we could rearrange this a little bit more
- [00:31:14.920]but overall you can build out
- [00:31:17.800]a page that looks pretty good
- [00:31:19.620]just using
- [00:31:21.060]what I kind of call the basic
- [00:31:23.400]page features of layout builder
- [00:31:25.920]so those are in the edit tab
- [00:31:28.260]right
- [00:31:28.580]so now we're going to get into layout
- [00:31:31.380]which is the kind of the layout
- [00:31:33.820]builder functionality of these
- [00:31:35.700]builder pages and in order to do that
- [00:31:37.880]we're actually going to create a couple more pages
- [00:31:40.040]so we're going to add
- [00:31:41.840]content builder page
- [00:31:43.140]and we're going to
- [00:31:48.020]say you know our
- [00:31:49.820]trainers
- [00:31:51.560]and we're going to click
- [00:31:53.140]save
- [00:31:53.580]so we have a page
- [00:31:58.180]we obviously didn't add anything on the edit tab
- [00:32:00.940]so we're going to jump over here
- [00:32:02.900]to layout builder
- [00:32:03.680]so when I click into the layout tab
- [00:32:07.940]you see I have all these other
- [00:32:10.520]options in terms of
- [00:32:12.940]what I can do so this placeholder
- [00:32:14.720]here is actually
- [00:32:16.600]if I would have added text to
- [00:32:18.700]that edit tab in that
- [00:32:20.580]in that field it would show
- [00:32:22.840]up here this is just kind of a placeholder here
- [00:32:24.720]just like this menu is kind of a placeholder
- [00:32:26.700]for that menu that we hid when we previously
- [00:32:28.900]edited that page
- [00:32:29.880]so that it does give you the ability
- [00:32:32.900]to kind of mix the two
- [00:32:34.300]in most cases you're probably going to either
- [00:32:36.820]use the edit tab or
- [00:32:38.800]the layout builder tab to build
- [00:32:40.660]these pages but
- [00:32:42.380]theoretically you can mix these things
- [00:32:44.800]together so
- [00:32:45.660]in this particular case we're going to add a section
- [00:32:48.780]and when you add a section
- [00:32:50.240]you're immediately
- [00:32:52.540]prompted to add a
- [00:32:53.840]layout within that section
- [00:32:56.000]so if you think about a
- [00:32:58.480]section as a row
- [00:33:00.360]on your page right and previously
- [00:33:02.420]we've referred to these as bands
- [00:33:04.000]it's basically a horizontal
- [00:33:05.840]piece of your page that stretches across
- [00:33:08.460]your page the layout
- [00:33:10.500]for that section is then essentially
- [00:33:12.100]how many columns you're going to put in that
- [00:33:14.460]page right so it's
- [00:33:15.940]at a very basic level it's tabular
- [00:33:18.380]right it's tables it's rows and columns
- [00:33:20.200]so we're going to create
- [00:33:22.240]a new section and we're going to add
- [00:33:24.400]one column
- [00:33:25.060]so then when you add
- [00:33:28.560]your layout or your
- [00:33:30.460]columns to that then you have
- [00:33:32.520]further options for that section
- [00:33:34.760]so the section or the row
- [00:33:36.640]or the band is that
- [00:33:38.420]horizontal strip so
- [00:33:39.920]we can
- [00:33:41.500]for each of those you can change
- [00:33:44.560]the background color we're going to choose lightest
- [00:33:46.460]gray we're going to give it
- [00:33:48.340]a background pattern so all
- [00:33:50.540]these patterns
- [00:33:51.940]work together with these backgrounds and
- [00:33:54.740]layer over them so
- [00:33:56.360]then within that you know
- [00:33:58.820]we have a container so the container
- [00:34:00.760]is the side to side
- [00:34:02.780]it's the width of
- [00:34:05.080]that section
- [00:34:06.140]so standard wrapper is
- [00:34:08.760]kind of to the edge of the nav to the edge
- [00:34:10.840]of the nav edge
- [00:34:12.800]to edge is from
- [00:34:13.940]basically the browser edge to the browser
- [00:34:18.660]edge so if you're familiar
- [00:34:20.780]with the old
- [00:34:21.640]classes the css classes
- [00:34:23.260]it's dcf wrapper and dcf bleed
- [00:34:25.260]we're just going to choose standard
- [00:34:27.220]wrapper here so
- [00:34:28.800]again container
- [00:34:30.800]is the sides
- [00:34:32.740]the spacing is how
- [00:34:35.060]tall that
- [00:34:36.880]section or band
- [00:34:39.020]or row is
- [00:34:40.760]we're just going to leave
- [00:34:43.140]these by default I'll get into some of these
- [00:34:45.380]as we move
- [00:34:46.800]as we build a little bit more
- [00:34:48.640]by default it's
- [00:34:51.340]just kind of a nice medium padding
- [00:34:53.040]so now you can see I added
- [00:34:59.240]this background color with this pattern
- [00:35:01.340]that is layered on top of it
- [00:35:02.660]and now that I've added a section
- [00:35:04.700]I have the ability to add a component
- [00:35:07.320]to that section
- [00:35:08.200]so what does a component look like
- [00:35:10.940]well a component
- [00:35:12.680]is all of these things
- [00:35:15.000]and if you're
- [00:35:17.140]you know if you're eagle eyed when I was
- [00:35:19.020]clicking through those book pages on CMS
- [00:35:21.040]docs we have documentation
- [00:35:23.300]for not only all of the content
- [00:35:25.180]types that you can add but all of these components
- [00:35:27.260]and then where you can use
- [00:35:29.200]them as well in this particular
- [00:35:31.280]case and we're going to come back
- [00:35:33.260]to this I'm going to actually click
- [00:35:35.280]this more button so this
- [00:35:37.160]more button takes you to a screen
- [00:35:39.480]of content
- [00:35:41.240]that is
- [00:35:42.600]you're kind of pulling
- [00:35:45.320]in to include on this page
- [00:35:47.400]so think of this as
- [00:35:48.920]content
- [00:35:50.740]that's not going to reside on this page
- [00:35:52.540]but resides somewhere else but you're pulling
- [00:35:54.500]into this page so whether that is
- [00:35:56.540]a other type
- [00:35:58.680]piece of content that we've already created on the site
- [00:36:00.640]or content that's coming
- [00:36:02.560]from another system and I'll show you what I mean
- [00:36:04.580]by that so we're going to add a curated list of
- [00:36:06.560]people here
- [00:36:07.200]and
- [00:36:12.200]we'll just say you know lead
- [00:36:14.220]instructor here
- [00:36:16.640]and this is
- [00:36:18.520]again going back to that sort of thing that I mentioned
- [00:36:20.520]where it's modular we're going to say
- [00:36:22.180]Aaron Coleman
- [00:36:23.180]and I'm going to
- [00:36:26.540]reference that and I'm going to go teaser
- [00:36:28.200]featured and I'm going to add
- [00:36:30.440]it
- [00:36:30.760]so you can see lead
- [00:36:36.360]instructor well I missed that
- [00:36:38.360]mixed up that terminology lead instructor lead
- [00:36:40.460]trainer at any rate
- [00:36:41.620]so I'm going to add another section here
- [00:36:44.360]and I'm going to
- [00:36:46.460]do one column
- [00:36:47.160]and we're going to just go by this and add
- [00:36:50.300]this again and just to kind of show you
- [00:36:52.300]how this particular
- [00:36:54.500]component works
- [00:36:56.140]we're going to add component we're going to
- [00:36:58.320]again go to more
- [00:36:59.000]and we're going to click
- [00:37:02.500]curated list of people again
- [00:37:04.300]and then we're
- [00:37:06.320]going to say other
- [00:37:07.260]other trainers
- [00:37:09.220]and then we'll say
- [00:37:12.380]Eric
- [00:37:12.960]and we'll say Bob because
- [00:37:16.200]they're also in here today and we're going to change the view
- [00:37:18.340]mode so if you remember I
- [00:37:20.080]put view mode was teaser featured
- [00:37:22.180]when I added myself we're going to leave these as teaser
- [00:37:24.260]we're going to add this block
- [00:37:25.600]and then we'll
- [00:37:34.240]click save so we can see what our page looks like
- [00:37:36.380]when
- [00:37:38.300]it's published
- [00:37:50.860]So you can see we have our trainers
- [00:37:52.880]And then we have lead instructor.
- [00:37:54.480]And this is set apart because I chose that different background and pattern.
- [00:37:59.160]And then these here are displaying as teasers.
- [00:38:04.500]And it's pulling in slightly different information here.
- [00:38:07.140]And there's other ways that you can display people as well using that curated list of people.
- [00:38:14.500]But this is a really good way to create directories on your site.
- [00:38:18.180]So you can create different sections, whether you're creating faculty, staff, grad students, things like that.
- [00:38:23.660]You could create a new section and display them in slightly different ways if you want.
- [00:38:26.940]I was in Layout Builder to build this, but if I want to add it to the navigation, I can click Edit.
- [00:38:32.980]Just like any other piece of content, come in here, Menu Settings, Provide a Menu Link.
- [00:38:39.520]We're going to add it to the main menu.
- [00:38:41.380]We'll click Save.
- [00:38:43.220]And then once it's saved, we'll go back up and we'll see it.
- [00:38:48.060]And our navigation right next to About Our Department.
- [00:38:50.660]So you can see About This Department and our trainers.
- [00:39:06.320]And again, if I click my title, it goes right back to that page that I created earlier, Person, Aaron Coleman, with my bio information.
- [00:39:16.020]And if I were to change...
- [00:39:17.940]If I were to change, for instance, my title here, it would not only change on this page, but it would change on this page here, where it's referenced.
- [00:39:28.500]It would change in that news item, where I'd also referenced myself as a contact.
- [00:39:33.180]So this is what I mean by modular with this new system.
- [00:39:36.760]You can create one piece of content, reference it in many places, change it in one place, and then it changes in multiple places.
- [00:39:44.020]So it's a really nice...
- [00:39:47.820]feature of this system.
- [00:39:49.360]So we've built out all these different page types.
- [00:39:52.440]And we're going to go ahead now and we're going to get back into Builder page.
- [00:39:57.460]And we're going to build kind of like a fancier designed front page of our site.
- [00:40:00.880]So we're just going to call this Welcome.
- [00:40:02.340]And click Save.
- [00:40:08.720]And then like the previous page, we're just going to jump right into Layout Builder.
- [00:40:17.700]And, you know, let's say since this is going to be kind of like a front page of our site,
- [00:40:22.280]we want a big image at the top with some text, you know, and maybe a link.
- [00:40:26.700]So we're going to choose one column because we want this to be full size, big image.
- [00:40:33.200]And then we're going to add a component here, Display Banner.
- [00:40:37.840]And let's just say, you know, Welcome.
- [00:40:42.740]I'm going to fill all these in.
- [00:40:44.100]Some of these are optional, but, you know,
- [00:40:47.660]Welcome to our site.
- [00:40:50.460]So, again, we're going to add an image, right?
- [00:40:54.360]This is a way to pop into Media Library.
- [00:40:56.640]Let's choose, I don't know.
- [00:41:02.240]Let's choose this one.
- [00:41:03.380]So, vertical, this image object position is kind of like I mentioned
- [00:41:09.800]with the other hero where you can move it up and down if you want.
- [00:41:12.300]You know, Welcome, you know.
- [00:41:17.620]Here you can learn about what we do.
- [00:41:22.120]We'll just keep that really basic so you can see what it looks like.
- [00:41:27.160]So, links, you know, if this is right at the top of our page
- [00:41:30.600]and it's going to be a link, right when people come in,
- [00:41:33.640]we would want this to be the most important thing
- [00:41:35.800]that we want people to do when they come to our site.
- [00:41:37.760]So, maybe the most important thing we want people to do
- [00:41:39.920]is sign up for training.
- [00:41:40.740]So, here's the really cool thing.
- [00:41:43.600]Another really cool thing about this
- [00:41:47.580]new CMS is that
- [00:41:49.100]if you have a page that you've created on your site,
- [00:41:51.900]rather than
- [00:41:53.640]knowing the exact URL to that page
- [00:41:55.720]and having to paste it in here,
- [00:41:57.620]all I have to do is start typing
- [00:41:59.580]the name of that page. So, we know we created
- [00:42:01.760]a page that's RSVP, right?
- [00:42:03.380]So, we're going to go RSVP
- [00:42:05.600]and it auto-completes.
- [00:42:07.980]So, I click that
- [00:42:09.560]and it has automatically created a link
- [00:42:11.900]to that RSVP page.
- [00:42:13.880]And, you know, we can say sign up
- [00:42:15.660]for training.
- [00:42:17.900]We'll make that our link.
- [00:42:19.320]So,
- [00:42:21.820]this
- [00:42:22.660]display option just determines where
- [00:42:26.040]this headline and this button
- [00:42:28.080]is going to go.
- [00:42:28.780]We can see that this is kind of slightly to the right
- [00:42:32.220]in the image, this little flag.
- [00:42:34.080]So, we're going to leave it left.
- [00:42:36.020]But you can change it to center or right.
- [00:42:37.720]We don't want to overlap that flag
- [00:42:39.980]too much, although it probably will a little bit.
- [00:42:41.940]So, you know, if we
- [00:42:44.060]would have put it right, this text would
- [00:42:46.040]be floating right over the image and we'd
- [00:42:47.500]want that. So we've got this nice
- [00:42:49.960]big image,
- [00:42:50.660]but we've got all this
- [00:42:53.840]padding around here and we want to get
- [00:42:55.780]rid of that, right?
- [00:42:56.820]Let's just click save just so we can see
- [00:42:59.820]what we have.
- [00:43:00.320]So we can see exactly what it looks like.
- [00:43:03.740]So we've got the
- [00:43:05.900]page title up here and then we've got all this
- [00:43:07.820]spacing, right? And we want this to be big
- [00:43:10.000]and flush and nice. So
- [00:43:11.600]we want to get rid of some of this. So
- [00:43:13.780]this here,
- [00:43:15.980]this page title,
- [00:43:17.460]is actually in the edit tab. If you
- [00:43:19.540]remember when I hid that little sidebar
- [00:43:21.600]navigation, it's in the same spot.
- [00:43:23.260]So we need to come back over here
- [00:43:25.080]to page options and hide this
- [00:43:27.440]or hide the
- [00:43:29.540]page title and we're going to click save.
- [00:43:31.660]So now you can see
- [00:43:35.580]the page title's gone. But we still want to
- [00:43:37.560]get rid of this spacing too. So we're going to click
- [00:43:39.580]back into layout.
- [00:43:40.320]And now
- [00:43:43.760]when I come down here, I'm going to show you
- [00:43:45.660]kind of this user
- [00:43:47.420]interface that is very consistent
- [00:43:49.780]as you start building stuff
- [00:43:51.500]in Layout Builder. So
- [00:43:52.920]I've created this section in Layout
- [00:43:55.640]Builder and I put a component within it.
- [00:43:57.500]So as I move my mouse down
- [00:43:59.320]the screen, I'm moving it, moving it, moving it.
- [00:44:01.480]Boom. When I roll over
- [00:44:03.420]the section with the padding,
- [00:44:05.080]this section,
- [00:44:07.220]I get a little user
- [00:44:09.300]interface thing to configure that section.
- [00:44:11.280]So the section is everything
- [00:44:13.660]within this little boundary
- [00:44:15.260]box, right? So you can see that the
- [00:44:17.380]section includes all that extra padding
- [00:44:19.480]that I want to get rid of.
- [00:44:21.020]So you can see here when I
- [00:44:23.380]hover over the component,
- [00:44:25.100]then I get this little edit,
- [00:44:27.420]this little,
- [00:44:29.380]you know, pencil edit icon
- [00:44:31.600]in the upper right-hand side. So if I
- [00:44:33.380]click that, I can configure
- [00:44:35.360]the component that I added,
- [00:44:37.260]which is the display banner.
- [00:44:38.440]So once you've created sections
- [00:44:41.640]and then components within those sections
- [00:44:43.680]within Layout Builder,
- [00:44:45.260]all you really have to do is kind of hover
- [00:44:47.340]over that. If you want to edit the section,
- [00:44:49.100]it's upper left. If you want to edit
- [00:44:51.440]the component, then the
- [00:44:53.380]edit interface will be to the upper
- [00:44:55.440]right. So I'm going to go ahead and click
- [00:44:57.260]configure the section because we want to get rid
- [00:44:59.380]of all that spacing.
- [00:45:00.080]We want to go edge to edge for
- [00:45:03.320]first of all.
- [00:45:03.960]And then we want to remove that default vertical
- [00:45:07.280]spacing. We want it to be right up against the navigation.
- [00:45:09.160]So we're going to click save.
- [00:45:10.320]And then we'll just
- [00:45:15.300]click save to see what it looks like.
- [00:45:17.300]All right.
- [00:45:21.280]So you can see we've got
- [00:45:23.500]this is looking like we want it now.
- [00:45:24.820]And we're going to click
- [00:45:27.680]layout.
- [00:45:27.980]And we're going to click
- [00:45:31.680]section. We're going to add a new section here.
- [00:45:33.720]And this time we're going to add two columns.
- [00:45:35.480]So you can see when you add two columns, you have
- [00:45:39.700]even more options of, you know,
- [00:45:41.620]do you want to make those columns equal?
- [00:45:43.720]Do you want to make one bigger on one side or the
- [00:45:45.780]other, right?
- [00:45:47.260]And then whenever you add sections, you have the option
- [00:45:49.660]of adding a section heading.
- [00:45:51.000]You can add an ID so you
- [00:45:53.680]can add a later on, add an
- [00:45:55.520]anchor link to that section.
- [00:45:57.200]And again, you know, we can change the
- [00:45:59.620]background patterns and background colors
- [00:46:01.600]and the containers and all that.
- [00:46:03.060]In this particular case, we're just
- [00:46:05.560]going to go ahead and add it. We're going to go with default.
- [00:46:07.600]So now that I've added this section
- [00:46:11.900]with two columns,
- [00:46:13.520]you see that I have the ability
- [00:46:15.680]to add two separate
- [00:46:17.220]components to this section.
- [00:46:18.720]And when I click
- [00:46:21.300]add component,
- [00:46:22.000]if you're really, really eagle-eyed, you'll notice
- [00:46:25.200]that this list is
- [00:46:27.120]slightly different than what I get
- [00:46:29.280]when I added
- [00:46:31.340]a full column.
- [00:46:32.040]The list,
- [00:46:34.580]we have documentation that tells
- [00:46:37.220]you what components you can use and what
- [00:46:39.140]layouts. Some of these things just
- [00:46:41.220]don't look good.
- [00:46:42.060]They don't look good small,
- [00:46:44.920]just like some of these components don't look good
- [00:46:47.180]when they're stretched to a full width. That's why
- [00:46:49.080]we do that. You can't use every
- [00:46:50.620]component in every layout.
- [00:46:52.500]In this particular case, we're going to use
- [00:46:54.920]card.
- [00:46:55.300]A card is kind of like
- [00:46:58.480]what you'd expect for
- [00:47:00.900]a baseball card or anything like that
- [00:47:02.920]where you've got a visual
- [00:47:04.960]item at the top, you've got a headline, and
- [00:47:06.940]then you've got a little more information.
- [00:47:08.160]Then you can add links within that card.
- [00:47:10.580]Maybe here we want people to learn
- [00:47:14.800]about our department.
- [00:47:17.140]Let's just say, again,
- [00:47:20.340]this is a link field, and we know we've created
- [00:47:22.500]a page called About Our Department.
- [00:47:24.280]We're going to start typing
- [00:47:25.400]about this
- [00:47:28.340]department.
- [00:47:28.740]I've just created a link to that page.
- [00:47:32.180]We'll just fill out
- [00:47:34.380]these things. Again, some of these are optional
- [00:47:36.500]so you don't have to fill them
- [00:47:38.460]all out. I'm going to fill them all out so you can see what
- [00:47:40.360]they look like
- [00:47:41.180]once it's rendered.
- [00:47:44.300]We already went
- [00:47:47.100]through adding things to media library
- [00:47:48.680]so we're just going to pop in and add
- [00:47:50.860]something that's already
- [00:47:52.880]been added.
- [00:47:53.460]Here
- [00:47:56.700]we can say learn more about
- [00:47:59.180]the
- [00:48:00.040]things that we
- [00:48:02.560]create and that we
- [00:48:04.880]use with the
- [00:48:06.300]university.
- [00:48:07.060]Then we can change the background color
- [00:48:12.720]of our card. We'll go ahead and add
- [00:48:14.900]this.
- [00:48:15.660]You can see that we have this nice little
- [00:48:21.400]visual display that links over to about
- [00:48:23.340]our department. Just to keep the page
- [00:48:25.280]balanced, we're going to go ahead
- [00:48:27.380]and add another card. You can add
- [00:48:29.340]other things and mix them up, but you probably don't
- [00:48:31.300]want one thing that's way taller than the other,
- [00:48:33.380]especially if it's your front
- [00:48:35.280]page. Maybe this one
- [00:48:37.340]we want people to learn about our trainers.
- [00:48:38.880]About
- [00:48:39.840]our people.
- [00:48:42.940]I'm
- [00:48:45.640]going to skip filling out this link because
- [00:48:47.380]I want to show you something cool here.
- [00:48:48.580]We can say people
- [00:48:51.500]overline
- [00:48:52.820]people subhead.
- [00:48:55.220]We're going to add some media.
- [00:48:58.680]Scroll down.
- [00:49:01.240]Oh, I don't know. We'll choose
- [00:49:03.420]this one.
- [00:49:15.620]And so you'll notice
- [00:49:22.800]because I did not fill out this
- [00:49:24.980]link box, I now
- [00:49:27.040]have the ability to add a link
- [00:49:29.020]down here.
- [00:49:29.680]So, you know, here I know that the page
- [00:49:33.060]is called trainers, I think.
- [00:49:34.580]Is it called trainers? Yeah, our trainers.
- [00:49:36.360]So I've created a link to our
- [00:49:38.880]trainers and we can say
- [00:49:40.740]meet our people.
- [00:49:42.440]Just to keep it consistent,
- [00:49:44.560]we're going to go like this.
- [00:49:45.600]Lightest gray.
- [00:49:46.120]Add block.
- [00:49:48.000]We'll scroll up and save our page
- [00:49:51.380]just so we can see what it's looking like.
- [00:49:52.820]So you can see we've got two cards here now
- [00:49:59.680]but they look slightly different and this is something
- [00:50:01.540]that I kind of wanted to point out and highlight.
- [00:50:03.320]When I filled out the link
- [00:50:05.780]for the title field,
- [00:50:07.820]it makes the
- [00:50:08.960]title into a link.
- [00:50:10.720]And it actually makes the whole card into a link.
- [00:50:13.620]When I skipped that field
- [00:50:17.220]and filled it out at the bottom
- [00:50:19.340]to create a button, it just creates
- [00:50:21.660]a button link.
- [00:50:22.400]So, you know, if I were
- [00:50:24.980]actually building this site, I would keep it
- [00:50:27.300]consistent and make both of them one way
- [00:50:29.440]or the other. But I just wanted
- [00:50:31.300]to point out that not only
- [00:50:33.160]do we have all these content
- [00:50:35.320]types that you can add stuff to your site
- [00:50:37.320]and not only do we have all these components
- [00:50:39.400]that you can do these visual designs
- [00:50:41.500]on your site, but even within the
- [00:50:43.360]components themselves
- [00:50:44.460]there are a variety of options.
- [00:50:47.160]So
- [00:50:48.220]it's kind of infinitely
- [00:50:51.260]expandable in terms of what you do with your layout
- [00:50:53.500]and we're refining
- [00:50:55.360]these things all the time. So I just
- [00:50:57.360]wanted to show you, this is just
- [00:50:59.200]card, but within Tandem I think
- [00:51:01.320]there's three separate layout options.
- [00:51:03.200]Display banner, you can move stuff
- [00:51:05.400]around and so
- [00:51:06.520]there's just a lot of different ways to build
- [00:51:09.280]out these pages within the
- [00:51:11.360]components that we have.
- [00:51:13.100]So, you know, this is the front page of our site
- [00:51:15.040]so let's pull in maybe our news
- [00:51:16.940]and our events.
- [00:51:18.420]So let's
- [00:51:21.200]add a section here.
- [00:51:22.480]We'll do one column.
- [00:51:24.820]Again, we'll just
- [00:51:26.980]kind of go with the standard padding because that works
- [00:51:29.100]pretty well.
- [00:51:29.720]And
- [00:51:32.880]we'll add a component
- [00:51:34.660]and since we're adding events, again
- [00:51:37.020]think of this as a way, you know, this
- [00:51:39.020]more button is content that is
- [00:51:41.080]either coming from elsewhere or that has been
- [00:51:42.840]created elsewhere on the site.
- [00:51:44.140]These components here are for creating content
- [00:51:47.180]directly on that page. So we're going to go
- [00:51:49.080]more
- [00:51:49.340]and we're going to go events.
- [00:51:53.100]So again,
- [00:51:55.260]this is something that's way better in this
- [00:51:57.040]new system. In the
- [00:51:58.900]old system, you had to know
- [00:52:00.440]put JavaScript on your page and stuff like that.
- [00:52:03.180]In this new system, all you have to do
- [00:52:05.080]is put the URL to your
- [00:52:07.100]calendar, right? So we want to show
- [00:52:09.120]six items from our
- [00:52:10.300]events calendar,
- [00:52:12.580]all you have to do is add the URL to your events calendar,
- [00:52:15.120]show how many things you want to show,
- [00:52:16.680]boom, pops right in there.
- [00:52:19.020]It's great.
- [00:52:20.020]We want to add news too,
- [00:52:22.940]so we're going to add a section here, we're going to go one
- [00:52:24.920]column.
- [00:52:25.320]Again, we'll just keep the padding
- [00:52:28.860]default for now.
- [00:52:30.080]We're going to add a component
- [00:52:36.340]and we're going to go
- [00:52:38.920]more
- [00:52:39.320]and we're going to go news aggregation
- [00:52:42.320]so we'll say latest
- [00:52:46.200]news
- [00:52:47.160]and we'll do four
- [00:52:51.120]and add that block
- [00:52:53.640]and we'll scroll up and click save
- [00:52:58.360]on our page just to see what it's looking like.
- [00:53:00.320]Alright, so we've got a page
- [00:53:06.560]and we could come in
- [00:53:08.420]here and adjust some of the
- [00:53:10.300]spacing. Obviously, this needs to go edge to
- [00:53:12.060]edge to look like it should
- [00:53:13.920]and we could maybe remove
- [00:53:15.820]top or bottom spacing on some of these.
- [00:53:18.020]But overall, we've got a pretty nice looking
- [00:53:20.160]page and it didn't take us that long to build
- [00:53:22.080]and we didn't have to touch any HTML.
- [00:53:24.080]So, let's
- [00:53:26.300]say we really like...
- [00:53:27.820]So, really quick,
- [00:53:30.160]I want to touch on a couple of these other tabs.
- [00:53:31.640]So, we've been through edit, we've been through view,
- [00:53:33.680]been through layout. Obviously,
- [00:53:35.400]revisions shows
- [00:53:37.920]all the revisions that have been made to that page.
- [00:53:39.820]So, you can see here, right, I clicked save five
- [00:53:41.800]times, so we have
- [00:53:43.140]six different
- [00:53:44.540]revisions of this page.
- [00:53:47.600]So, I can actually right
- [00:53:49.840]click in here, and I can see
- [00:53:51.320]what this page looked like before
- [00:53:53.620]I added the news and the
- [00:53:55.720]events band, and if I don't
- [00:53:57.680]for some reason need to revert to
- [00:53:59.740]that, I can just click this and revert to that
- [00:54:01.780]previous save.
- [00:54:02.520]That is good if you have
- [00:54:07.980]multiple people editing on your site,
- [00:54:09.960]and maybe somebody makes a
- [00:54:11.540]misspelling or a change they weren't supposed to,
- [00:54:13.860]you can come in and see who made that edit and revert
- [00:54:15.940]to a previous edit.
- [00:54:16.940]We also have this tab
- [00:54:22.000]up here for replicate, and I'm going
- [00:54:23.980]to show you what that does now.
- [00:54:25.260]Let's say we really like this page,
- [00:54:28.140]and we want to use it
- [00:54:29.960]as a basis for other pages
- [00:54:32.020]we're designing on our site. Maybe we just want
- [00:54:33.960]to get rid of a couple things on it, but
- [00:54:35.620]we like a lot of it.
- [00:54:37.200]We'll switch out some images and stuff like that.
- [00:54:39.480]In this
- [00:54:41.280]new system, we have this Replicate tab.
- [00:54:42.900]We click Replicate.
- [00:54:45.620]And this is a
- [00:54:51.360]copy of our page. If I click Edit,
- [00:54:53.340]we can see it is called
- [00:54:54.920]Welcome Copy.
- [00:54:56.980]If I come into Layout,
- [00:54:58.780]we know that this is the duplicate.
- [00:55:00.400]First of all,
- [00:55:03.120]maybe we want to change it to
- [00:55:04.980]academics or something like that.
- [00:55:09.100]We can save it
- [00:55:11.020]and now it has an
- [00:55:16.860]different alias because we changed the name.
- [00:55:18.920]We can come into Layout.
- [00:55:20.280]Maybe we want
- [00:55:23.080]to get rid
- [00:55:25.100]of the news, get rid of upcoming
- [00:55:26.960]events. We get rid of that.
- [00:55:28.440]Maybe we want to get rid of news because it's
- [00:55:31.180]something totally different. We get rid of news.
- [00:55:33.500]Maybe we want to change the
- [00:55:37.300]image at the top of the page really quick.
- [00:55:38.840]We hover over this.
- [00:55:40.760]We configure our display banner.
- [00:55:42.700]Get rid of this image.
- [00:55:45.920]Add a new one.
- [00:55:48.440]I don't know. Let's just choose this one.
- [00:55:50.860]Boom.
- [00:55:51.960]Instead of
- [00:55:54.440]welcome to our site, we call it
- [00:55:56.460]academics.
- [00:55:57.860]Learn more about
- [00:56:02.300]programs or something like that.
- [00:56:04.600]We're just
- [00:56:06.020]changing this out quick.
- [00:56:07.540]We could change the link and all that.
- [00:56:10.500]Basically, with
- [00:56:12.460]about
- [00:56:13.000]five, ten clicks
- [00:56:16.040]and one click of the replicate button,
- [00:56:18.500]we suddenly have a page
- [00:56:19.740]that's a brand new page
- [00:56:22.380]that looks very similar
- [00:56:24.440]to one that we already like and that we
- [00:56:26.500]already designed. This is a really
- [00:56:28.460]nice way. Maybe
- [00:56:30.240]along the top part of your navigation,
- [00:56:32.400]you have pages that look really similar,
- [00:56:34.020]come up with one good design, and then you replicate it
- [00:56:36.480]out. This is just a really good
- [00:56:38.340]function to make that quicker
- [00:56:40.240]and easier. You'd obviously want to change
- [00:56:42.020]these links and this text and stuff like
- [00:56:44.280]that. I was just kind of showing you how quick that
- [00:56:46.280]process was, rather than copying
- [00:56:48.380]and pasting code and making sure all your
- [00:56:50.340]links were changed and all that.
- [00:56:51.820]This just makes it a lot
- [00:56:54.260]easier. So I have a couple
- [00:56:56.280]more things I want to go through
- [00:56:57.580]before we get into questions, but
- [00:57:00.080]when we're adding images
- [00:57:04.340]to components and stuff like that, and we're going
- [00:57:06.280]into content or a media
- [00:57:08.120]library, there's another way
- [00:57:09.980]to get to media library, and it is
- [00:57:12.060]in the content tab here because
- [00:57:13.720]the media that you add is
- [00:57:16.040]content on your
- [00:57:18.140]site, right? So I'm clicking
- [00:57:19.900]content media, and you can see
- [00:57:22.120]here, you basically get
- [00:57:24.140]the same interface as what was in that
- [00:57:26.080]little pop-up window,
- [00:57:27.200]except for it shows you everything that's been added,
- [00:57:30.060]right? You can see all these images that have been
- [00:57:32.000]added, you can see a remote video, and you can even
- [00:57:34.080]see this file, right?
- [00:57:35.180]So we're going to go ahead and add a file
- [00:57:38.120]and a video to our site
- [00:57:39.720]and then I'm going to show you how to link those and get those
- [00:57:41.980]added to your site. So
- [00:57:43.440]we're going to
- [00:57:46.080]go and add a file
- [00:57:47.180]and
- [00:57:50.080]let's see what we've got here.
- [00:57:51.020]We'll
- [00:57:54.160]go ahead and choose this one.
- [00:57:55.060]So
- [00:58:00.060]we have this little checkbox that says
- [00:58:01.860]I certify the following is true. I've done
- [00:58:03.840]due diligence to assure that this file meets
- [00:58:05.880]accessibility standards. So what does that mean?
- [00:58:07.760]Well, when you're adding
- [00:58:09.460]files to your site, whether they're PDFs
- [00:58:12.060]or they're Word docs,
- [00:58:13.100]there are ways
- [00:58:15.900]to create those files to make
- [00:58:17.900]them accessible, which means that
- [00:58:19.440]if somebody is viewing your site
- [00:58:21.700]using a screen reader or other
- [00:58:23.740]assistive device, that they are
- [00:58:25.700]able to see the content within that document.
- [00:58:28.020]We have some documentation
- [00:58:30.020]on CMS
- [00:58:31.920]Docs website about how to create
- [00:58:33.700]accessible documents. But having
- [00:58:35.920]said that, I will say
- [00:58:37.200]any,
- [00:58:39.200]content that you upload as a
- [00:58:42.020]file, if you want people
- [00:58:43.940]who visit your website to be able to see
- [00:58:45.980]that content, it should be a web
- [00:58:47.980]page. You know, we
- [00:58:49.860]look at our traffic at the university
- [00:58:52.040]website, and
- [00:58:53.380]it's usually hovering about
- [00:58:55.640]50% mobile devices.
- [00:58:58.060]And if you've ever tried to
- [00:59:00.000]load a PDF
- [00:59:00.680]on your mobile device,
- [00:59:03.360]you know that at best
- [00:59:06.020]it's frustrating, and at
- [00:59:07.920]worst it's unreadable.
- [00:59:08.940]So,
- [00:59:09.380]again, I'll say, if you have content
- [00:59:13.100]that you want all
- [00:59:14.520]of the people coming to your website
- [00:59:16.940]to be able to see, it should
- [00:59:18.960]be a webpage on your
- [00:59:20.920]site so that everybody can
- [00:59:22.960]see it. Because otherwise, if you're uploading
- [00:59:25.020]a PDF, especially if it's
- [00:59:27.000]not accessible,
- [00:59:27.600]up to 50% of people coming
- [00:59:30.840]to your site may not even be able to see it.
- [00:59:32.620]I can certainly
- [00:59:34.700]understand if you have, like, a flyer
- [00:59:36.700]for an event that you want people to print out,
- [00:59:38.900]and hang up,
- [00:59:39.840]uploading it as a PDF that people could download,
- [00:59:43.000]but again, the information
- [00:59:44.960]that's on that flyer should be on your
- [00:59:46.900]website, otherwise people aren't going to be able to see
- [00:59:48.940]it, or at least half of your viewers aren't going to be
- [00:59:50.860]able to see it.
- [00:59:51.380]So now that I've said that about PDFs and docs,
- [00:59:55.060]I will say that the tagging system
- [00:59:57.000]for uploading files
- [00:59:58.800]works the same as it does for images.
- [01:00:00.280]So you'll want to think about this as general
- [01:00:02.780]to specific, right?
- [01:00:03.740]So
- [01:00:04.040]we could say that this
- [01:00:07.840]is about research,
- [01:00:08.880]assistance, right?
- [01:00:11.360]And again, this is
- [01:00:13.620]something where this tag's
- [01:00:15.660]not been created, so I'm creating a new
- [01:00:17.600]tag, and I'm going to create a comma here.
- [01:00:19.340]And then I'm going to create another
- [01:00:21.800]tag, right? So this is something that's more basic.
- [01:00:23.960]This is related to summer
- [01:00:25.580]classes, right?
- [01:00:26.500]Again, there's no tag there. We can see
- [01:00:29.660]that this is a template, so
- [01:00:31.600]this is something that people are going to maybe fill
- [01:00:33.600]out. We have something for design template.
- [01:00:35.800]I don't
- [01:00:37.920]know.
- [01:00:38.700]We'll use that one because
- [01:00:40.000]it's pretty darn close. I don't want to create a bunch
- [01:00:41.980]of template tags. So we've
- [01:00:43.980]got three tags here
- [01:00:45.080]and we are uploading this file.
- [01:00:47.720]And now we can see
- [01:00:49.740]that this file we've uploaded
- [01:00:51.720]is in our media library.
- [01:00:53.300]So now we're going to add a video
- [01:00:56.060]to our website.
- [01:00:56.800]So we're going to come over to MediaHub here
- [01:00:59.900]and we're going to
- [01:01:06.400]upload a video.
- [01:01:08.860]Which really, again,
- [01:01:10.340]is very easy.
- [01:01:11.020]You don't need to add code to your site like the old one.
- [01:01:14.020]The old system where you just need to
- [01:01:16.240]copy the URL to this video.
- [01:01:17.660]And then come back over here.
- [01:01:20.520]Add the media.
- [01:01:22.420]Remote video.
- [01:01:24.280]Boy, I didn't even really look
- [01:01:31.180]what this video is about.
- [01:01:31.980]So tagging it.
- [01:01:32.880]Campus in Tune.
- [01:01:34.840]So it's about home games
- [01:01:37.660]and fall
- [01:01:38.340]and stuff like that.
- [01:01:39.360]So we could say,
- [01:01:42.240]you know,
- [01:01:42.820]athletics, right?
- [01:01:44.480]We could say
- [01:01:47.460]campus life.
- [01:01:49.460]We could say
- [01:01:52.600]fall, right?
- [01:01:53.720]Season.
- [01:01:54.300]And if we wanted
- [01:01:56.880]to give it a date
- [01:01:57.700]because we know it was
- [01:01:58.320]uploaded in 2024,
- [01:01:59.200]we could put a date on it.
- [01:02:00.400]So I'm going to save that.
- [01:02:08.160]And now you can see
- [01:02:08.780]we have this file
- [01:02:09.900]and this video
- [01:02:11.180]that we've uploaded
- [01:02:11.940]into Media Library.
- [01:02:12.860]So now we're going to
- [01:02:14.460]go back into content
- [01:02:15.760]here to our about page
- [01:02:18.280]that we created.
- [01:02:18.820]And we're going to add
- [01:02:20.700]both of those items
- [01:02:21.540]to this page.
- [01:02:22.840]So we're going to edit it.
- [01:02:25.100]And we're going to
- [01:02:28.180]come back down in here.
- [01:02:29.060]And let's just say
- [01:02:29.800]we want to add
- [01:02:30.620]a link to that document.
- [01:02:32.080]So we're going to
- [01:02:32.980]highlight this text
- [01:02:33.840]and click this link button.
- [01:02:35.020]And the cool thing
- [01:02:37.040]about this new system
- [01:02:37.980]is once a file
- [01:02:39.780]has been uploaded
- [01:02:40.480]into Media Library,
- [01:02:41.380]it's a lot like creating
- [01:02:42.440]a link to another page
- [01:02:43.920]on your site.
- [01:02:44.500]All you have to do
- [01:02:45.920]is start typing
- [01:02:46.540]the name of that file.
- [01:02:47.760]So we know it's a template.
- [01:02:48.800]Research Assistant
- [01:02:52.620]Summer Template.
- [01:02:53.300]There it is.
- [01:02:53.860]Boom.
- [01:02:54.560]You click checkmark
- [01:02:56.580]and we've created
- [01:02:57.200]a link to that document.
- [01:02:58.340]Inserting a video
- [01:03:01.840]is very similar
- [01:03:02.720]to inserting an image
- [01:03:04.660]in the new system.
- [01:03:05.380]So we click
- [01:03:07.720]our media library button
- [01:03:09.120]here.
- [01:03:10.200]Takes us into an interface.
- [01:03:12.360]It's a lot like
- [01:03:13.360]when we upload an image
- [01:03:14.380]to a component.
- [01:03:14.940]And over here on the left
- [01:03:16.280]we just click remote video.
- [01:03:17.460]Has to reload over
- [01:03:20.680]to the right.
- [01:03:21.280]Takes a little bit.
- [01:03:22.920]Come on.
- [01:03:27.540]There we go.
- [01:03:28.580]And now you can see here
- [01:03:31.700]we've got this campus in tune
- [01:03:34.380]and we're going to insert this.
- [01:03:37.460]And this is very similar to
- [01:03:39.400]when you upload an image,
- [01:03:40.840]you have the same formatting options.
- [01:03:42.360]We're offsetting it.
- [01:03:44.800]I think video should always be big,
- [01:03:47.220]so I'm going to go default
- [01:03:48.220]and I'm going to click save.
- [01:03:49.920]So now we have our page.
- [01:03:57.000]We've got a big image.
- [01:03:59.120]We can click play.
- [01:04:00.860]We can make it narrow if that's too big,
- [01:04:05.280]but otherwise we can see here
- [01:04:07.200]when I hover over this,
- [01:04:08.360]it's linking to that file that I uploaded.
- [01:04:10.500]And so we've got this kind of built out, right?
- [01:04:14.860]We've got a little four-page mini site.
- [01:04:16.460]We can clone those pages if we need to
- [01:04:18.800]and replicate them and build them out.
- [01:04:20.400]So I have a couple more things I'm going to touch on
- [01:04:24.320]and then we'll go to questions.
- [01:04:25.320]So people, you know,
- [01:04:27.980]if you have been given a site,
- [01:04:31.380]you may not have to worry about this,
- [01:04:33.440]but if you are building a site
- [01:04:35.060]and you have to give other people access
- [01:04:36.940]to a site,
- [01:04:37.600]you manage that through this people tab.
- [01:04:40.140]So I can click people
- [01:04:41.460]and I can see everybody
- [01:04:45.400]who has access to this site
- [01:04:46.900]and what type of access they have.
- [01:04:49.100]So I can click import a user,
- [01:04:51.920]you know, and I can say,
- [01:04:55.500]you can search by username
- [01:04:57.300]or just their name
- [01:05:02.300]or their UNL username.
- [01:05:03.600]So let's just say I want to add Bob.
- [01:05:06.680]And it will search directory.
- [01:05:11.420]And so we're going to say,
- [01:05:13.580]we're going to add Bob here.
- [01:05:14.640]We're going to import him.
- [01:05:15.540]So he's already been imported
- [01:05:19.940]and given a role.
- [01:05:20.980]If he hasn't, it would come up like this
- [01:05:23.320]and then you'd have to choose a role.
- [01:05:24.640]So the three different roles
- [01:05:27.320]that you are giving people,
- [01:05:28.500]I want to touch on are site admin,
- [01:05:31.340]editor and viewer.
- [01:05:32.680]So the difference between those roles
- [01:05:36.420]are site admin can basically do anything
- [01:05:39.200]that I have done today on this site.
- [01:05:41.560]In addition, they can actually come
- [01:05:43.940]into this configuration tab
- [01:05:45.460]under system and basic site settings.
- [01:05:48.340]So this is where you control
- [01:05:51.280]the name of your site, for instance.
- [01:05:52.800]You shouldn't have to change the name of your site,
- [01:05:55.200]but you can change the affiliation.
- [01:05:57.620]So the affiliation of your site
- [01:06:00.280]is what shows up here, right?
- [01:06:03.920]This is the affiliation.
- [01:06:06.160]This is CMS onboarding site.
- [01:06:07.540]We are affiliated with the University of Communication.
- [01:06:09.460]So that's where you can change the affiliation.
- [01:06:12.580]And if for some reason you need to change
- [01:06:14.220]the homepage of your site,
- [01:06:15.740]you can change that here as well.
- [01:06:17.040]So anybody who has the site admin role
- [01:06:22.640]can do all that.
- [01:06:23.640]They can add content.
- [01:06:24.940]They can edit content.
- [01:06:26.120]They can add new users.
- [01:06:27.600]They can delete users.
- [01:06:28.560]They can change those site configuration issues.
- [01:06:30.920]They can delete pages if they want to.
- [01:06:35.900]Nobody should delete pages.
- [01:06:37.500]There's the editor role.
- [01:06:42.340]So the editor role
- [01:06:43.700]is a step down from site admin.
- [01:06:46.860]And that gives people the ability
- [01:06:51.040]to add content and edit content.
- [01:06:54.220]That's really about it.
- [01:06:55.460]They can't add new users or delete users.
- [01:06:58.380]They can't change any of the site configuration information.
- [01:07:00.940]They can't delete pages.
- [01:07:01.960]So viewer is a role where
- [01:07:05.640]it is basically like,
- [01:07:08.780]think of a,
- [01:07:12.600]you know, a approver role, right?
- [01:07:16.760]So this would be maybe like a boss
- [01:07:19.960]who doesn't want to edit or add pages to the site.
- [01:07:22.400]They just want to look at some pages
- [01:07:24.080]before they go live, right?
- [01:07:26.200]So let's say somebody says,
- [01:07:28.560]hey, I need you to add some content to the site.
- [01:07:30.740]But before you go public with it,
- [01:07:33.520]I want to see it and look at it
- [01:07:35.380]and give it the thumbs up.
- [01:07:36.500]So you could go add content,
- [01:07:38.240]build their page.
- [01:07:40.160]And by default, when you create a new page,
- [01:07:43.580]it is set to published, right?
- [01:07:45.360]But there's other options for that.
- [01:07:48.620]When you create a page,
- [01:07:50.140]you can actually set it to unpublished.
- [01:07:51.800]And so that page will only show up to people
- [01:07:55.140]who have access to the site.
- [01:07:56.600]When you've already created a page,
- [01:07:59.360]you can also create a new draft of that page.
- [01:08:01.860]So a draft would be basically like an edit
- [01:08:05.120]that is not yet live that somebody with access
- [01:08:10.560]to that site can see.
- [01:08:11.740]So the viewer role is somebody who can see content
- [01:08:16.020]on your site in any publishing status.
- [01:08:19.360]So again, that's really only a useful role
- [01:08:23.560]for somebody who is going to be approving pages
- [01:08:26.200]but doesn't want any edit access.
- [01:08:27.880]So maybe they say, hey, I want you to create
- [01:08:30.840]three little pages that are going to go
- [01:08:33.140]in this section of the site, just don't
- [01:08:34.860]make them live yet until I look at them.
- [01:08:36.780]So you would create three pages.
- [01:08:39.300]You'd make sure they were all unpublished.
- [01:08:43.440]I could just click Save here, Test.
- [01:08:45.540]I'm going to click Test.
- [01:08:47.640]It's going to be unpublished.
- [01:08:51.000]We're going to have this little page here.
- [01:08:53.320]And you have this moderation status toolbar now,
- [01:08:57.420]because it is not published.
- [01:09:00.260]But I can change its status on this page here.
- [01:09:03.520]And then I could just share this URL.
- [01:09:04.600]I can change this URL to the viewer role
- [01:09:06.760]or anybody else who had access.
- [01:09:08.120]So viewer role is another step down from editor.
- [01:09:11.200]It's really, we only created it for people
- [01:09:13.600]who you want to give access to who just kind of want
- [01:09:16.060]final approval on something before it goes live.
- [01:09:20.660]OK, so one more thing, and then we'll get into questions.
- [01:09:25.060]So what are the steps?
- [01:09:26.420]If you're here in this training, you probably already
- [01:09:30.780]know the steps, but I'm going to go through them again.
- [01:09:34.340]So I'm loading up cms.unl.edu right now.
- [01:09:39.780]And the steps are, one, get started.
- [01:09:42.800]Attend a training.
- [01:09:43.580]You are here.
- [01:09:44.300]You're in step one.
- [01:09:46.160]So step two, it sounds like most people in here
- [01:09:48.380]are already in step two.
- [01:09:49.560]They've already requested a site.
- [01:09:51.100]They've already started building,
- [01:09:52.640]or maybe they're getting ready to start.
- [01:09:54.600]So this is the second step.
- [01:09:56.680]Here's another link to the documentation
- [01:09:58.460]I've talked about a bunch of times.
- [01:10:00.780]So step three, right?
- [01:10:03.020]The third step is--
- [01:10:04.080]I have my site ready to go, and I want my new site
- [01:10:07.740]to replace my old site.
- [01:10:09.600]So this third box is what you'll click when you get to that step.
- [01:10:13.500]And you basically fill out a form.
- [01:10:14.960]And you say, hey, here's my in-development site,
- [01:10:17.940]which is my new site.
- [01:10:19.000]And it's either new, which means you don't have
- [01:10:21.900]an old version of your site, or replacing,
- [01:10:24.820]which means you're replacing an old site.
- [01:10:27.360]A public site address would be just mysite.unl.edu.
- [01:10:33.820]If your site is new, and you do not have something
- [01:10:38.820]like mysite.unl.edu, then we ask that you fill out
- [01:10:41.860]one more form, and this form is just
- [01:10:44.580]a subdomain request form.
- [01:10:45.860]Whoops, I'm not logged in, apparently, in this system.
- [01:10:48.180]So this subdomain request form, we'll send it
- [01:10:51.120]to the governance board, and then they'll typically
- [01:10:54.100]approve it, sometimes they'll request changes
- [01:10:56.540]or slight alterations on what you requested.
- [01:10:59.380]And then what day you'd like it to go public.
- [01:11:01.460]And then your new site
- [01:11:03.560]will replace your old site.
- [01:11:05.020]So that is the third and final step in this process.
- [01:11:09.120]Again, December 12th is the day that people need
- [01:11:13.080]to be switched over by, and we're going to start
- [01:11:16.540]automatically switching subdomains on that date.
- [01:11:20.440]So that is about five weeks from today.
- [01:11:25.440]And so we're kind of running out of time.
- [01:11:28.640]So if you're in progress, I would say keep chugging
- [01:11:33.300]don't let perfect be the enemy of good,
- [01:11:35.840]or don't let perfect be the enemy of launched
- [01:11:40.200]because you can always keep building on the new site.
- [01:11:44.220]We found that doing some basic analytics
- [01:11:49.620]on a lot of big sites at university,
- [01:11:53.280]75% of the traffic to those sites is 20 pages or less.
- [01:11:59.220]So,
- [01:12:03.040]if you have a huge site and you're worried,
- [01:12:05.960]really focus on those top 20, those top 25,
- [01:12:10.040]those top 50, if you have to,
- [01:12:12.020]and then build out the rest over time.
- [01:12:15.160]So I, with that,
- [01:12:17.960]I'm gonna go ahead and end my training
- [01:12:22.380]and we'll take some questions now.
- [01:12:24.320]So that's pretty much everything I have for today.
- [01:12:28.500]Looks like most people's questions got
- [01:12:32.780]answered.
- [01:12:37.700]So let's see here.
- [01:12:45.140]Yep.
- [01:12:46.240]So if anybody has any questions,
- [01:12:47.360]feel free to type them into chat or just speak up
- [01:12:49.740]and we can answer them.
- [01:12:50.600]There's only a few people,
- [01:12:51.660]there's only 10 people in here today.
- [01:12:53.380]So I think we can handle that that way too.
- [01:13:02.520]All right, well, give it a couple more seconds
- [01:13:13.520]if anybody has any questions.
- [01:13:15.080]Otherwise --
- [01:13:15.700]Can I ask a question?
- [01:13:19.020]Sure, yes.
- [01:13:21.060]So when old sites shut down, does that block our ability
- [01:13:24.400]to see the content that was on those sites?
- [01:13:28.720]Yes, it does.
- [01:13:30.660]So what would you advise
- [01:13:32.500]if we can't get all of those pages migrated?
- [01:13:36.660]What would you advise we do to have that content somewhere
- [01:13:41.860]where we can access to continue to work on it?
- [01:13:45.760]So one of the things people --
- [01:13:48.180]so when people create a new site, I typically give them --
- [01:13:51.580]well, I do give them access to our WDN Slack channel.
- [01:13:55.960]So I don't know if you've been given access to that.
- [01:13:57.820]And if you haven't, please email me and I'll get you access.
- [01:14:01.340]We have a couple tools.
- [01:14:02.480]One is called HT Tracker or something like that.
- [01:14:09.220]That is for PC.
- [01:14:10.680]And then we have another one called Site Sucker.
- [01:14:12.540]That is for Mac devices.
- [01:14:17.140]So you can pull down the contents of every published piece of content on your current
- [01:14:23.780]site so that you can have them locally on your computer to reference in the future.
- [01:14:28.500]Yeah.
- [01:14:29.500]Yep.
- [01:14:30.500]So that will include all published pages.
- [01:14:32.460]All published images.
- [01:14:33.960]All published and linked documents.
- [01:14:40.340]And there's some --
- [01:14:41.340]We just need this tool and then feed it the main URL and it will --
- [01:14:46.280]Yep.
- [01:14:47.280]It will pull down everything into a folder on your desktop.
- [01:14:50.060]That would be helpful.
- [01:14:53.740]Yeah.
- [01:14:54.740]Yep.
- [01:14:55.740]Yep.
- [01:14:56.740]We've used it for several sites now.
- [01:14:57.740]Thank you.
- [01:14:58.740]Yep.
- [01:14:59.740]And if you try that and you're, like, just completely stumped on it.
- [01:15:02.440]Just fire me an email.
- [01:15:03.980]And I can -- provided it's not a massive site, I can probably help out.
- [01:15:12.440]All right.
- [01:15:18.420]Any other questions for today?
- [01:15:21.760]All right.
- [01:15:26.580]If not, I will end the training for this morning and I will send a video around to everybody
- [01:15:32.420]later today.
- [01:15:34.620]Thank you for attending this morning and don't forget to vote and do your civic duty today.
- [01:15:41.040]Thank you all for attending.
- [01:15:42.040]Thanks, Aaron.
- [01:15:43.040]See you later.
- [01:15:44.040]Yep.
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/23463?format=iframe&autoplay=0" title="Video Player: Next-Gen CMS Training - Nov. 5, 2024" allowfullscreen ></iframe> </div>
Comments
0 Comments