CMS 101

CMS 101


Hello my name is Zach McCurdy. I work
with the web team here at Grand Valley. This video is going to be the CMS 101
video. It’s going to be your introduction to the CMS. It’s going to show you how to
create basic web pages and how to navigate within the CMS. It will have
chapters within it so if you want to jump to any section look at the
description below. They’ll jump you to that particular section. If you have any
questions please feel free to reach out. Otherwise let’s get started. So once you
get logged in this is going to be the page that you see for your sites home.
I’ll break down and show you what each one of these sections are here that you
see on the screen. So on the right hand side underneath site home you’ll see
content age. What this does is this breaks down all of the items that you
have and the age that they’ve been on your site. So the idea being is that you
keep your content fresh and new. So for this particular page if I click on the
25 items that are over a year old it will then show me all of the pages that
are perhaps out-of-date or need a rewriting.Okay so now I’m gonna go back
and on the right hand side here is problem reports. Whenever somebody
accesses your webpage and they go to the link that says problem reports – here on
the web team page I’ll show you it’s down here in the bottom right that says
report a problem to this page – so whenever a user fills out this
information and clicks Submit, it automatically goes to the problem
reports section here on the right-hand side. So you can see that there’s been in
total of eight three of them are outstanding in five of them have been
resolved. The problem reports will go to any administrator that has this option
selected. Under more if I click on administrators and then I find the user –
so for example Mark here – and I click on the edit button, there’s a check box over
here on the right-hand side that says manage problem reports. If this box is
checked any time that a problem report gets sent in they will receive an e
with the problem. If this box is unchecked they will not receive the
email for it. Back at the homepage next down here is the CMS help. This offers
just some various links that you can click on in you if
you need any assistance with the CMS the probably the most helpful section is
going to be the and question and answer sections. So if I click on them and you
can see here these are all of the questions and answers that other users
to the CMS have asked and somebody on the web team has responded to in trying
to help that person. So you may find that somebody else has asked the same
question that you have and their answer may be in the CMS help. A quick way to do
a search is to click in this box here type in the word that you’re looking for
say search and it’ll show you all of the results within there. So I’m going to go
back to here and now we’re going to start on the left-hand side which has a
lot of information on it. So the first thing you see is site home. If you click
on site home it just takes you back to this page you’ll think is this is the
home button. The next link here is navigation. So navigation when we click
on it you’ll see that it has a bunch of different titles listed here. The
navigation is (if I click on the view site button to preview it) the hyperlinks
that you see on the very top of the page. If we go back here and take a look you
can see for example under events there’s subtopics or subheadings underneath of
it so those are the ones that you see with the drop down here you also see up
here that you have navigation type as horizontal if we click on it it takes
you to the settings page and you could change it if you want from horizontal to
vertical so if I make that change and then hit submit now if we view the site
again you’ll see that there’s no longer the hyperlinks at the top of the page
but instead they’re now on side of the page so it’s a matter of
preference for whatever you want to do so now that we’ve made that change I’m
gonna change this back to horizontal navigation type and click Submit so now
our links will be across the top of the page going horizontal as opposed to
vertical if I go back to navigation here we’ll talk a little bit about how to set
up the navigation you see at the top of the page let’s add a new navigation page
so you can see we have several already set up let’s walk through and do a new
one so for our example let’s create another about Us page so we’ll will
delete this page here and let’s click on new item so from here you will want to
add a title so this will be what the actual text says on the link so from
here we’re going to name this about us and then you have different navigation
types so the first option is a main navigation item that links to content
let me show you what that means that would be an example of this button right
here CMS help what it means is it’s an item that has just a link you click on
it and it takes you there okay the next option here is a main
navigation item with sub navigation this would be all the options that you have
with the down arrow where it has additional options underneath the actual
first link and then the last option is sub navigation item that links to
content these are going to be all of the links that are beneath the initial link
so a sub navigation item so for this example we’re just going to do a main
navigation item underneath content this is going to be where we want the page to
go when a person clicks on it so I’m going to click on this box here and I
made this to be about us I’m going to click on about us
the next option is placed navigation so you can arrange how you want it at the
page so right now if we look at it I would like the about us to be the first
box here on this page so I’m going to click in here and I’m going to say
before events so you now it will list it before the events essentially pushing
all these over to the right and the about us will be the first item listed
once that’s done I’m going to click Submit and now let’s take a look and see
how our page looks if I click view site you can see now the about Us section is
up there so now that we’ve created a navigation item with a single link and
now let’s go through and create one that has sub navigation and if you remember
those are the links that have the drop-down listed here where you can
click on the links below so I’m going to recreate this events link that we see
here so from this page I’m going to click on
new item I’m going to click a and give it a name so we’re going to name this
events and then for navigation type we’re going to say a main navigation
item with sub navigation and then under place navigation we can choose where we
want this to go so I’m going to say I want this after about us and then I’m
going to say submit so we’ve created the sub navigation page for events so now
let’s add the items to the sub navigation so to do that I’m going to
click on this button here that says add sub navigation and I clicked it under
the events page that’ll be important here in a second
so let’s give this a title we’re just going to name this new staff it
automatically will select a sub navigation because we’ve chose that from
the previous page and then from here we need to choose the content so this is
going to be where we want that page to go so we’ve got a link here that says
new staff orientation and then it places the navigation as sub navigation under
events and it did that because we clicked on that green
button that says new sub nav from the previous page once that’s done I’m going
to slay submit and now you’ll see under events we’ve got new staff so now
another way that you can add in a sub navigation is you can just click on the
new item button here and let’s add in our second option so we’re going to say
testing and now I’m going to select sub navigation item the content being this
button here that says sign up for usability testing and then we’re going
to say place navigation as sub navigation under and then we’ll choose
which page we want we’ll say events and then say submit so you have two
different ways to add in sub navigation pages the easiest way is to click on the
button underneath the page right here that says add sub nav or you can click
on new item and you can manually assign it to that particular page so let’s add
in our last page underneath events so we’ll click Add sub navigation it’s going to be sub navigation under
events and click Submit and now our events is looking great looking like it
did before let’s click on the view site button and we’ll take a look there’s all
the work we just did adding those sub navigation items to the event page just
to do a quick little recap about the navigation section if you click on the
new item here you will give your navigation link a title and then you
have to choose the type main navigation is going to be the links that have just
one link like for example CMS help main
navigation item with sub navigation is the initial link that creates the top
button here and then you’re able to create sub navigation items and then
this third option is the actual sub navigation items that are these links
you see here so let’s take a look here at the content section of the CMS over
here on the right-hand side you’ll see we’ve got a list of all of the different
pages that we’ve created on the CMS so what I want to mention about the content
section is that a lot of times the content in navigation work together and
what I mean by that is that a lot of times you will find that links in the
navigation actually link to things that you’ve created in the content so just
something to keep aware of that when you create things in navigation most of the
time you’re going to link it to something in the content section so
we’ll look over here and you see we’ve got a bunch of different pages created
on this CMS page let’s walk through creating a new page so I’m gonna click
on the button here that says new content and then from here you have a bunch of
different options that you can choose different templates three column image
grid image left image right etc so you’re going to choose whichever one
that you feel most comfortable with what’s also really nice about this new
content page is that once you create a page that you would like you can also
clone it from this drop-down here so if we really like the about Us page that we
just created we can click the clone button and now
that page is going to be replicated so for our little demo here we’re going to
use the meet us content page so when I click on it it brings us to this page
here which now we’re able to actually create content we’re able to create a
page so so for example the top pick item here will be the page title so we can
name this about us whatever you want to name it and then once you get down into
here this is how you begin editing the page so we’re gonna come back to how you
actually edit the page later in the video but first I just wanted to show
you that this is how you create a new content
by clicking the button and choosing which template you want or how to clone
it will come back to actually creating the content later on in the video so
next let’s talk about the file manager the file manager is going to be anything
that you upload to your CMS is going to be located here so this includes
pictures documents PDF files etc so first let’s talk about how to do a
search within the file manager so in this box here you can click in here you
can type in the term that you want to do a search for click on filter and any of
results will appear with that particular search term now if you click on the
Clear button it’ll take you back to the original page you can also if you want
click on multiple items within the list here and click on the delete selected
files button this will then delete anything that you have checked in front
of it you could also select all by clicking on that button right there the
same time you could also check which one ever of these items here and click on
the export files button and when you do that it will prompt you to say are you
sure you say ok and then it will give you a zip file with all of those files
you can see here that it wants me to download so I could back this up do
whatever I want with it it’ll be as a zip file that I can then
save to my desktop or wherever so next let’s talk about the final manager and
how to upload files to it so I’m going to click on this button that you see
here that says upload and it brings me to this page and so an important to
mention before we upload a file that if you are going to upload a picture you
have to make sure that the university owns that picture or that the picture is
copyright free you can’t just grab a photo off of Google and expect to use it
unless you know it is a free photo or that the university owns it now with
that being said let’s choose a file using this button here and it bring me
to this screen to where I will need to select the picture I’m uploading so
there’s a picture of myself I’m going to say open and then I can
give it a permission if I want to so by default everyone can view this picture
or download this picture or I can change it so that only people with protected
access can view or download it next is this section about tags and this is
going to be very important so any file that you upload to the CMS you can put a
tag on it and what it does is it essentially creates a label for that
file so for example with this one being a picture of myself I am going to put
this under the team BIOS tag and so in the future if I ever want to pull up all
of the pictures of our team from the team BIOS I could do a search simply for
this tag and it would bring up all of those results so any file that you
upload to the CMS you’re going to want to make sure that you put a tag on it so
that it gives it a proper label now that that’s done I’m going to click on upload
and as you can see here it says the file was successfully uploaded so now that
our file has been uploaded I want to briefly talk about the tags that we
assigned it and so you can see in the list of files that we have here there’s
a column for tags and so if I click on any of these so for example Emma these
are all of the files that have been uploaded that have the tag of Emma and
so easy way to collect all of those into one location what you can also do is in
the search box up here you can click on this drop down here and you can select
whichever tag you want that we have assigned to a file so for our example we
uploaded a file with the tag of Team biles
so if I change that option here click on filter all of these files here have the
tag of Team biles so again it’s a great way to keep your files organized one
less thing to point out about the tags and files is that even if you tagged all
of your files that has absolutely nothing to do with search engine
optimization so even if you put all the correct tags and every single file
it has nothing to do with the fact that your file will be easier to find on a
search engine such as Google it is purely for your own use or your team’s
own use so that you could find files easier at a later date so next let’s
talk about the headers on your CMS site and so the headers are going to be the
image that you see at the very top of your page and what you can do on the CMS
is you can have multiple headers for your site and what it’ll do is it will
rotate through each one of these pictures every time the page is reloaded
so let’s walk through some of the header information and header stuff that you
can do within the CMS so now let’s walk through the process of uploading a new
header image so I’m going to click on this button here that says new header
image and it brings me to this page here it gives you a little notification up
here at the top this tells you that in order for an image to be considered a
header it must be at least 2,000 pixels wide it can be larger than that but it
has to be a minimum of 2,000 pixels in terms of the height the height doesn’t
matter as much because you’ll be able to crop and scale the picture once it’s
uploaded so and I’ll show you what that means here in just a second so you can
choose a header height so you can choose large medium or small will choose large
for this example and then you have to choose the file to choose the image so I
have a picture here that I want to be the header and again if you are using a
header picture you have to make sure that the picture is owned by Grand
Valley or it is copyright free meaning you can’t go to Google type in picture
and find one that you like and upload it if it’s not copyright free so now that
I’ve selected this I’m going to say open and you see that the picture is now
uploaded I could give it a title if I want to which we’ll discuss here in just
a second I have to give the picture some alternative text so from here I’m going
to type in what the picture is so we’ll say Bridge
at Grand Valley you can put a link on the picture of the header if you wish
meaning if you click on this button here you can select where you want the
picture to take you to whichever page on your CMS you don’t have to though so
we’re not going to do that if you do check a link you can ask it or tell it
which target you want it to open up if you want to open in the current tab or a
new tab the text position can be left right or bottom that will make more
sense here in just a moment and then the default is do you want this picture or a
new header to be shown on any page or do you want it to be shown on pages that
you’ve specified so we want this to be shown on any Content page and then you
can have a start date and an end date if you want so say for example you have an
event coming up and you had a header made for that particular event you could
have the start date be a few weeks beforehand
and select the date and then you can have it end when the event is over again
you don’t have to so we’re just gonna say always so now that we’re done we’re
going to click Submit and now our header has been added and if I look down here
there’s our new header right there so now that the header has been uploaded
let’s take a look at what that would look like on our page so I’m going to
click on the View site button here and here is the header that we just uploaded
to our page now one of the things that we skipped over before was the add text
option and let me show you what that does so I’m going to come back down to
the header that we just uploaded and I’m going to click on the edit button and
then you can add a title on to the picture itself so let’s put a title of
Grand Valley Bridge and then I can choose if I want the text
to be on the left right or bottom I’ll keep it at the left for this example and
then I will click on submit so now let’s take a look at what our picture looks
like with the title so here’s that same picture but instead we have the title
over here on the left hand side so you can add a title to any one of your
header pictures if you want to put a little bit more text on there perhaps
give the name of the page whatever you want to do within there
so let’s talk about some of the Status Messages that we see on the header
images page so for example this first image here it says displaying has title
wrong size so displaying means that the header is showing has title means that
it has text on it but because it’s a wrong size even if it has the displaying
text here wrong size means it will not appear on your page and the reason for
the wrong size is if we look over here the size of the picture is below the
2,000 pixels wide so even though it says displaying because it’s the wrong size
it still will not show on our page if we come down to this example here it says
specific content only now what I will do is if I click on this button that says
pages it will show me where this header is being used and it’s only being used
for these two sites listed so then if I click on back you can then see that
there’s also a picture that says not displaying and the reason that this
header is not displaying is if I click on the edit button if we scroll down you
can see that this header has an end date of 414 or I’m sorry 4 for 2018 so
because it has an end date it’s not going to be shown then one last thing
about the header images that you can do is you can reorganize the order of the
headers if you want to and you can do that by clicking on the up and down
arrows that you see in this column so for example the header that we just
uploaded of the bridge we can move up if we want to and you can specify the
order if you want to alright now that we’ve shown you how to move around in
the CMS let’s actually go in create some content so from the main CMS page here
I’m going to click on content on the left hand side and then I’m going to
click this button that says new content and if you remember from earlier in the
video you can choose these different templates or you make clone an existing
page for example I’m just going to start with a blank page and build it from
scratch alright so starting at the top we need to give our page a title so for
this example let’s name this intro to CMS 101 so now that our page has a title
it’s let’s get down into here and start to design it so what you see here is
we’ve got three different boxes here so three columns if I double click on this
box you can see it will ask you how many columns can you fit in this row so you
have an option of doing three columns which is what we have shown four columns
which shows like that or you can do six columns which shows like that another
thing you can select is you can choose the row style so normal means that the
background is just going to be a plain white or you can choose a full width
light blue background they click Save you can see now that the background kind
of has this light blue color to it alright now that we’ve got our page very
basic and started let’s add in some content and so the first thing you’ll
notice over here in the right hand side you’ve got all these different buttons
this is going to be how you add in content to your page so this first
button here is add a row it does exactly what it says when I click on it you can
see that it adds another row to our page if I want to get rid of them I simply
click the trashcan icon that you see here it asks are you sure and now that
rows been deleted the next button you see here is for heading if I click on it
you’ll see that it in another box and creates a heading and
then if I double-click on it you can see that it asks for a type of heading so
there’s three types you’ve got a main heading you’ve got a subheading and
you’ve got a sub subheading so it’s important when you create your CMS page
that it has a logical order and makes logical sense so you want your main
heading to be the main topic and then the sub heading in a sub sub heading to
relate to the main heading so for the main adding let’s then add in a title
and we’ll call this content items and then we’ll say save so now we’ve created
a heading so now let’s add some content below what we just add so the next
button you see here is paragraph so you’ll see that when I click on this it
adds the paragraph up here now you may think to yourself I want this added
below the content item so you have a couple of different ways in which you
can move things around in the CMS so first if I click on the paragraph and I
hold my mouse down so I’m holding the left mouse button down I’m going to drag
it down here and I can select insert row and when I let go you’ll see that the
paragraph is now added to this new row the other thing that I could have done
is if I come over here on the right hand side and I click and hold on paragraph
here so I’m holding my left mouse button down I can drag this down to where I
want it to go and it will appear there so clicking and dragging the item on the
right hand side onto your CMS page sometimes it’s a better option because
you want it you will then tell it to go exactly where you want it to go and as
you can see here when we created this new row it created it with three columns
so I can double click on the row and I can choose how many columns I want it to
be we’ll keep this at three and we’ll keep the row style is normal for right
now and say save so now that we’ve added in the paragraph let’s double click on
it and you can we’ll show you what it does so
from here you can add in the actual text the actual content so let’s just add in
some text here and say this is a video on CMS 101 I hope you are enjoying it so
we’ve added in some very basic texts some things you can do with this text
here is you can see you’ve got a text toolbar up here at the top similar to
what you would have in like a Microsoft Word or a Google Doc let’s say that I
want to highlight a particular word I can click highlight it and I click this
B button and now CMS is bolded I could do the same with it and make it
italicized as well if I click this button here it will remove all of the
format I can make the text then left inline as it is now I can make it
centerline or right aligned this button here allows us to insert a special
character so if I click on that you can see we’ve got a list of characters that
you can add in so if I want to add in say this heart it will add that in there
as well I can click this button here to undo what I just did so now it’s back to
CMS 101 I can also create list entries so you can see now we’ve got a number
one if I click return I’ve got a number two entry 2 and so on and so forth I
could also change this and make it a bullet entry and create different bullet
items there this button here will be one that you use quite a bit this is how to
add a hyperlink so let’s say for example we want to hyperlink and create a link
from this CMS 101 text here so I’ve clicked and highlighted it and now I’m
going to click this button here to create a hyperlink brings me up to this
window so the first option you have here is for URL or file so let’s say for
example we want this link to go to Google that
komm I simply type in the URL here I say okay and now if I click off of it you’ll
see that it’s highlighted now if I right-click on this link that I’ve just
created I’m given the option to edit the link so if I click on link type here you
see we have a bunch of different options in here I’m gonna cover a few of what
these are the first being – an anchor in this text box let me explain what this
means let’s say that we have a text box here with a lot of text and we want the
user that when they click on a word so say for example this word put when they
click on the link on there it will automatically take them down to another
section in the paragraph that’s what’s called an anchor and so what we’ll do is
let’s say we want them to come down to this number 7 here so I placed my cursor
here and now I’m going to click on this flag right here and that adds in the
anchor so let’s just add in the name and call this number 7 you can name this
whatever you want and now you see we have an anchor so now if I come up to
the top of this text box highlight the word that we want the hyperlink on click
the hyperlink button if I change the link type here – to an anchor in this
text box you’ll see that now that anchor type is listed so I’m going to say ok
and now when a person clicks on this word here they will automatically be
brought down to this section here so let’s see how this works so I’m going to
click Save Changes and now let’s go down to preview draft so here is our
paragraph that we put the hyperlink in and now if I click on the word put here
you see it takes me down to number 7 which is what we had the anchor listed
to so an anchor is an easy way to have somebody click on a link and have them
jump down to another section in that particular text box so let’s go
back to our CMS edit page here I’m going to double click within this paragraph
and go back to this hyperlink here and the next option you see under the link
type is email pretty self-explanatory you can type in an email address you
could type in an email subject and a body and when a person clicks on that
those fields will automatically be populated into whatever their default
mail program is on their computer the next option is going to be an internal
CMS page so we can have that link automatically linked to another page
that’s on our CMS so if I want this information link to link to my bio page
it’ll be listed there within this link here and you can see we’ve got a few
more options listed down here these will make more sense in further in the video
once we’ve explained more of what these are so I’m going to cancel out of this
and go back to our paragraph so we’re going to move on to the next piece here
which is going to be adding pictures to your CMS page so over here on the
right-hand side you see the next icon below the paragraph one is image so the
same concept applies here I’m going to click on this I’m going to drag it to
where I want the picture to be now that we have the placeholder here for the
picture if I double click on it it brings me to this screen here the top
line has heading optional we’ll come back to that here in just a second once
we get the picture uploaded I’ll show you what that is image source this is
going to be the picture that we choose so I’m going to assume that we have not
uploaded this picture yet so I’m going to click on the file manager button here
to the right if I head uploaded the picture it would be in this list here
however since I haven’t I’m going to click on the link here that says upload
and then from this page I’m going to click Choose file and this is going to
let me choose the file that I want to upload there’s the picture
and then I’m going to give this a tag because it’s important to keep images
organized so we’re going to name this under team vials and then I’m going to
say upload we have to give this picture in alt text so we’re going to say group
of people standing in front of a tree I can give it a URL if I wish and what
this would do is this would let a person click on the picture and it would then
take them to whatever website we specify here and then the caption will come back
to here in just a second once we get the picture uploaded so now that that’s done
I’m going to say save and there is our picture okay so we can take a preview of
this if we want so I’m going to click the preview draft button here and there’s our picture that we see right
there so now now that we have our picture
uploaded let me show you some things you can do with that so first of all if we
want to we can make this picture bigger if we want to so and the right-hand side
here you see how the mouse changes to a left right arrow if I click on it I’m
then able to resize the picture up to that size right there so now if I
preview the draft we’ll take a look at that picture we’ll see that it is much
larger and perhaps easier to see so you can resize the picture by clicking on it
and dragging the size and now let’s go back to the heading in the caption and
I’ll show you what these are so I’m going to double click on the picture to
get back to the Edit image box here underneath heading this would be the if
you want any words to appear above the picture so we’ll put in for this picture
just a simple title of picture of us standing around and again that’s the heading so
that will go on top of the picture and then the caption is what will be below
the picture so then here I can type in some text of what I want to appear below
the picture so as you can see here I’ve typed in a caption to appear underneath
there and now I’m going to say Save Changes so now let’s take a look at what
we’ve done and so you can see the picture of us standing around is the
heading at the top of the picture and then below the picture here members of
the web team helped incoming freshmen move into their dorms this is the
caption so that’s what we see down here so we’ve got our one picture here let’s
say we want to add in another picture so we’ll walk through this again I’m going
to click on the image to make it smaller and so now we’ve got our picture here a
little bit smaller in size I’m going to click on the image icon over here to the
right-hand side and drag it to the box that I want it in double click on it and
again I’m going to add the picture here so you can see I add I just added in our
heading for the image source let’s upload a picture again and now that we
have the picture uploaded we’ll add in some the alt text we’ll say group photo
in front of alumni house and then we’ll say save and so you can see here that
it’s starting to look a little bit more consistent however in order to match
what this photo is I need to add in a caption below
so let’s come back into the picture come to the caption and add in some text so
we’ll just say here is some text let’s say save and now you can see that the
the consistency is starting to get there so let’s take a preview and see what
we’ve got and so there you go you can see we’ve got the page started here so
we’ve got our two pictures so if I go back to our page and let’s
just say that I want this picture to be closer to the left I just want to show
you how easy it is to drag and move things around I clicked on that box
moved it around and you can see now it’s closer so it’s very easy to click and
drag things around in the CMS so let’s do one last preview here and there’s our
photos so starting to get there starting to understand a little bit more of the
consistency so now that we’ve done some photo work let’s go on to the next
section so the next thing that we can add in on the right-hand side is a video
so the same idea I’m going to click on this video link and I’m going to drag it
onto the page that I want it to be at and so now that it’s added here I’m
going to double click on it and again the same idea that we had with the
pictures where you can add in a heading and a caption you can do here as well so
I need to add in some alt text so what I’m going to link to is this video here
that we have for the Grand Valley accessibility video so I’m going to copy
the name here come back over here so that’s going to be my alt text as GVSU
accessibility video and then I will copy the YouTube link to put in there for the
URL so now that I’ve done that I’m going to click Save and there’s my YouTube
video there and again if I want to I can click on it and make it larger or I can
shrink it down to whatever size I want so what’s what’s nice about the YouTube
videos is when you add them in there is if I click preview when this page loads
we’ll see here that you can then click play and it’ll start to play rate within
the browser so they don’t have to click on it to go
to that page if they don’t want to however if they click here it will take
them to the whether the video as well one last thing about the videos I want
to mention too is I chose to upload something from YouTube but you can also
choose to upload videos from Vimeo Panopto or Facebook URL
so these are the only video sources that you can use on the CMS so they have to
be from one of these services so the next thing to show you is how to add a
horizontal line from this box over here on the right hand side I can click on
this and drag it to where I want it to go and so that just adds a subtle line
to separate two things so if I do a preview here we’ll take a look and see
what that looks like and so there you go you can see there’s just a subtle line
that separates the picture in the video in this case next we’re going to talk
about anchors and what anchors are so I’m going to go to this page here as an
example so let’s say that I have a very large page here lots of links lots of
contents and so let’s just say for example them I want to send this
particular section of this very large web page to a person what I can do is
within the CMS I can add what’s called an anchor and that’s what you see right
here so what I’m going to do is if I click on this anchor here and I drag it
to where I want it to go it creates the anchor I double click on
it and I type in the text of what I want the anchor to be and so for this example
we’ll see that the anchor is registration full okay so now that we
have the anchor created now we can create a link to it and have that link
go directly to that section of the page let me show you how to do that
so with this page here we’ll look at the very top and this is currently the URL
of the page that were on and so if you remember over here we added the anchor
to be anchor of registration full so what we can do is if we come back here
to this URL and if we type in exactly what we put in for the anchor so there’s our URL there now let’s copy
that and if I hit enter it will take me to this page but it will scroll me
automatically down to that specific entry so let me close out of this page
will open up a new one and if I paste that in there you will see that I’m
automatically brought to this section so there’s content above and content below
but because we have an anchor and because we’re linking to that anchor it
automatically takes me there so the next two options to show you are very similar
in that they are the Twitter feeds and the Facebook feed so I’ve added both of
those to our CMS here if I double click on the Twitter feed I’ve given some
options in terms of I can have the headings showing or hiding the big thing
here is that you have to type in the username of the Twitter feed so for this
example if I look at the GVSU web team twitter feed it’s GV web team so I’m
going to type in that username there and then you can specify how many tweets you
want to show so we’ll leave it at 5 you can go 1 to 10 in this and then we’ll
say Save Changes and then next we’ll also do the Facebook feed exact same
idea double click on it and then in this instance though you have to use the
Facebook URL so I’m going to take the facebook.com slash Grand Valley URL and
paste it in there now with the Facebook one you do have a few more options you
can have it show the timeline so that’s going to show the the timeline or the
posts that Grand Valley puts out there you can also put the events so if they
use the events section of their page right here you could have those up here
on your CMS page or if you click on messages this will create a link that
will allow users to come and type in message that would then send a message
to Grand Valley so for this example we’re just going to use time line and
then say Save Changes so you can see we’ve got the Twitter feed in the
Facebook feed added to our CMS site let’s take a look at the preview and now
that our page is loaded you can see we’ve got the Twitter feed from the GV
web team in the Facebook feed from Grand Valley State so we’ve got the most
recent tweets that have been published from the web team and also the Grand
Valley Facebook feed from here so there’s also links at the bottom for you
can view on Facebook or you can follow the particular feed on Twitter next
we’ll talk about how to add a table into your CMS so on the right-hand side here
you’ll see the table icon if I click on it and drag it over I now can have a
table on our page so I double click on it I’m given a lot of options so you can
see it kind of looks similar to what you would have with a spreadsheet or a table
in Word so again I can add a heading if I want to up here if I click where the
text is so in major class credits I can click in here and I can say you know
whatever I can type it whatever I want to and then using these buttons here I
can add in a row or I can add in a column if I want to delete one of those
that I just added I just click on the garbage can icon it’ll confirm that you
want to delete it and then I can also change the color that you see and this
is going to be the header color that you see at the top of the table so these are
all the colors that you can change so now that I’ve added that in there let’s
hit save there’s our table added there I can of course click on it drag it to
make it bigger and now that that’s done let’s take a look at the preview and see
how it looks right here’s our page and if I scroll down there’s the table we’ve
added so that is adding a table next on the list is what’s called the effect
module so I’m going to take the fact module and drag it
over here and you can see it adds it into a new row I’m gonna double click on
it what’s nice about the fact module what it does is you can add in an icon
from this list here so let’s pick one at random and make it a telephone and then
you can give it a title a subtitle if you want and then some content
underneath it so let’s add in some information in here so we’ll add this
title as CMS 101 intro to the CMS and say welcome to CMS I could give it a URL
if I want to why not and then say save so as you can see what it does is it
adds in that icon we chose so the telephone it puts a picture of it and
then it adds the text of whatever you want below there so we call this the
fact module and you can choose any of the pictures you want here so for
example if you want a a link to something involving directions you can
choose the road and now we’ve got the road picture there so effect module lets
you pick any of these pictures and do whatever you want with it with the text
below it next will be the map module that we’re going to add to our CMS which
is this icon right here so I’m going to click on the map module
add it in and then I’m going to double click on it so what the map module
allows us to do is to put on our CMS the exact location of weather
whatever we want so let’s walk through this so for example I open up a new
window and I go to Google Maps from here let’s say that I want to give directions
to the lubber Stadium okay so I have it listed here or I could do a search for
it up here so lover stadium now appears here what I’m going to do is I’m going
to click on this button here that says share and then from this link at the very top
there’s a link that says embed a map and what’s important is this line right here
so you can highlight this and copy it or you can say copy HTML from right here
now that we have that copied let’s go back to our CMS and under the embed code
source URL I’m going to right click and say paste and there’s the link that we
just copied here it says enter a brief description of the contents for
accessibility purposes so we can say map to lovers Stadium and then you can
adjust the map height whether you want it small medium or large
so we’ll say Save Changes and let’s hit the preview button to take a look at how
the map looks on our page alright the page is loaded let’s scroll
down and there’s our google map – lover stadium so again you can use any
location you want to you just have to do a search in Google Maps once you do the
search in Google Maps click on share embed a map and copy this text that you
see right here that will then put it into your CMS so now that we’re all done
and ready for our website to go live I’m gonna scroll down to the very bottom and
there’s this link here that says publish if I click on it now our website is live
and accessible to the outside world so you can also do a save as draft if
you’re not quite ready to publish it the preview draft which we used quite
frequently in this video and you could also just start on over so I click
publish though so our website is live and ready to go a couple things here in
winding down our CMS 101 class I want to mention that over here on the right hand
side you may see a few buttons extra that I have that you may not have and
vice versa you may have a few extra buttons that I don’t have this is
completely normal there are certain modules created for
certain sites so nothing to be alarmed about
so in the next class of CMS 201 what we’re going to be discussing is the use
of modules and we’re also going to be discussing the more section over here on
the left-hand side

Leave a Reply

Your email address will not be published. Required fields are marked *