Colorado.gov CMS Platform Overview Video Transcript

Back to the CMS Platform Overview Tutorial

all right welcome so this is going to be

a general overview of the colorado.gov

website platform

um what we're going to do is cover

various topics at sort of a high level

to give you an understanding of how to

make some basic edits to your site

understanding how to navigate around the

cms

showing you different elements that you

can edit things like that so without

further ado let's go ahead and get

started

the first thing i'll do is show you how

to log in so

um the first step is to just get

whatever your website url is and if

you're on a brand new project you would

have gotten the website url from the

project manager you're working with or

otherwise if you already have a live

site

you should be able to know where to grab

that

it's got to be the colorado.gov url

so i'm going to open up a private window

here paste that url and at the end after

colorado.gov i'm going to make sure

there's a forward slash and put a user

at the very end there and that's going

to navigate us to the login page

all right so here's a sign on page here

it'll load with this window now you have

a couple options

if you set up your user account with a

google account you can go ahead and

click the sign in with google button

if you did not then you can simply enter

your email and password into these

fields click login this is also where

you're going to get the

forgot password link so you can reset

your password for first time users

you can click on this sign up tab and

again you can sign up with a google

account or you can use a non-google

account and enter in your

email here and then create your own

password and click sign up now for users

who are just getting set up

this is really only the first step to

create an account you won't have any

editing permissions yet you'll have to

have a website admin enable your

permissions for you

also when you're setting up your account

after you click sign up you will have a

verification email that will get sent to

you to have you verify your email

so once you are logged in you're going

to see something like this you'll see a

couple of

these editing menus up here at the top

and you'll also notice that there's

other contextual menus that will appear

on the page or on the pages that you're

viewing

so that's that's a big indicator of how

you know that you've logged in if you've

logged in but you don't have permissions

yet you're not going to see any of these

editing menus appear at the top

and just to be clear when someone is

enabling your user permissions what

they're doing is they're going in and

they're locating your user account so

let's say i want to go in and i want to

edit the user permissions for my demo

user here i would as a website admin

click on the edit button

and scroll down to the assemble roles

section

you'll you can also verify that the

account you're editing is correct by

verifying that the associated email

address is the one you're wanting to

make the edits for and you can check off

the assignable roles here so there's

going to be a total of at least five

roles that can be given to any different

user and these will provide different

editing permissions um

the

logged in account that i have right now

has all five of those permissions so if

you have all five permissions you should

see everything up here if you have some

sort of subset of those permissions then

you may or may not see all of these

options that are up here at the top of

the screen

all right so before we dig too far into

actually making edits or creating

content just want to take a quick moment

to kind of give you an overview of the

different elements of a colorado.gov

website so a lot of them will have a

sort of at least semi-similar structure

for the home page you'll have a banner

at the top you might have a utility menu

at the very top as well we'll always

have these

main navigation menus that appear here

near the header um optional is gonna be

this jumbotron this is big image right

here

this is a feature you can use or not use

but it will appear near the top of the

page as well if you have it

and scrolling down on the homepages will

be an assortment of content and this can

be organized in different ways and have

different kinds of features

and then at the bottom you'll see a

footer region we have a kind of like a

primary and a secondary footer the

primary one's going to be the state of

colorado one with all the different

you know state required links and then

the secondary footer section is going to

be where you can customize

your site footer and you can put in the

information that you need for your

organization and to be clear the site

footer

and the navigation menus will appear

across all the pages on your site so if

you see if i click around a little bit

you'll see the main nav appears up there

the utility nav appears up there we've

got the site header up there that all

comes around with me as does the footer

regardless of wherever you're at on your

site those are global regions that

appear on every single page

now besides the home page i just wanted

to show you maybe some elements of some

regular pages as well but by far and

large you're going to be building out

what are called basic pages more than

likely and these are really just your

standard web page allows you to add text

links um you know additional content

even like images and videos and stuff

you can have reference menus

but these are going to be pages that are

pretty specific to you know some sort of

information it's really good to make

sure that your individual pages are

targeted for you know some sort of

specific purpose instead of putting too

many things on a page but you can see

here that you can also lay these out

quite differently

and so we'll go through some of the

features that allow you to do that as

well

something else you might notice is the

events and contacts pages now these are

actually not pages they're automated

views uh in this case this is the

contact view and this is simply

displaying contact cards that

we created for the site and ordering

them in a particular way and it styles

all this stuff automatically you never

actually edit this page it's just you

create the contacts and they appear here

so this is an optional feature but you

can use this if you'd like

similarly events also has sort of like a

general overview where as if you decide

to utilize the events feature you can

create events and they'll automatically

appear in this feed there's other ways

to also add like a you know like a

monthly calendar or even like a weekly

calendar to your home page or other

pages

and so

if we have time we'll discuss that here

in this video if not then we'll also

have some instruction

instructional material online and that

is one place i will point you to real

quick before we get started

all of our instructional material is on

this website cms.colorado.gov

and you'll find all of our user guides

all of our videos everything that is

available for you is going to be here so

you know if i don't dive deeply enough

into one of the topics you're concerned

about today then

certainly you can come to the

cms.colorado.gov website and you can

check out the training materials we have

here

all right so now that we've gotten a

broad overview let's go ahead and dig

into how you can navigate around the cms

for those who don't know cms stands for

content management system it's just the

system that you're using to build the

website here

and so in the cms you're going to have a

series of menus that appear up here at

the top that'll allow you to navigate

through the different admin level stuff

that you can do to to edit your site

now you should see two bars there's

going to be a black bar at the very top

and then a white bar right below that

black bar you won't do too much with if

you see the subscription active thing

here you can ignore that we're

responsible for maintaining you know all

of the

all the things that that keep your site

running so you do not have to worry

about any subscription

services or fees or anything like that

so you can just ignore that

um it'll show you your username that

you're logged in with

there's also going to be this manage

button here this toggles the second menu

open and close

and this is also dynamic so depending on

where you are on the site it might

change all right and getting down to

this kind of secondary menu this is

where most the action is going to happen

so you'll see this little button in the

corner here it might be an eight um you

know if if we update off of drupal 8

this will probably change but generally

speaking this little blue button here in

the corner is going to take you to your

home page so if you kind of get lost you

can click on that also this little

manage button here will change to

say back to site depending on where you

are so um you can also click that and

that's also going to get you back to the

home page

if you hover over any one of these

options they're going to give you some

additional options and just as well if

you click on them they're actually take

you to different pages so i won't go

through what every single one of these

do but you'll see like if i hover over

content it gives me some different

options including

options like add content so this is

where i'd go if i want to add anything

new create any new piece of content and

if i want to see anything that's

existing i can actually just click on

this and it's going to take me to what's

called the content overview page where

where this actually is just that it

gives you an overview of all the content

that has been added to the site and you

can see there's a lot of stuff here

there's multiple pages worth of content

that's been created and it gives you

general you know a general overview of

what's here you can see what the title

is what kind of content it is who

initially created

created it whether or not it's published

when it was last updated you can even

filter for stuff up here at the top as

well so if i want to look for any of my

test pages that i built out i can just

type in test in the title field it'll

pull up all the relevant results from me

there i can narrow things down further

by content type or whether or not it was

published or unpublished and again you

can just kind of keep drilling down

until you find really what you're

looking for and then when you're done

just click reset

and it'll bring you back to where you

were

additionally you'll also notice if we

hover over content there's an option for

media this is where you're going to be

able to do things like upload images or

documents into your site's media library

which is where you're going to keep all

these sort of like local files and

documents and images things like that so

you can use them on your other pages and

so we'll kind of dig into how to do that

as well

structure here the main things i'd like

to just kind of generally reference

right now are that if you want to do

things like edit your main navigation or

create additional menus you can do that

here and the system also has web forms

and we won't be digging into that today

but there are other tutorials that we

have on our cms site that'll that'll go

more thoroughly into how web forms work

but if you need to create new web forms

or view the existing ones you can click

on that here that's going to be for

anyone who has a structure admin level

permission

and the block layout

just gives you access to your custom

block library that's where you're going

to edit things like the footer or the

jumbotron that i showed you earlier

that appears across you know either the

home page or even in terms of the footer

across the entire site

configuration um probably won't need to

mess with too much stuff there people i

kind of already showed you this will

just show you what users have access to

your website this is also going to be

where you go to enable permissions for

users or remove permissions if someone

leaves

so you can do all that from this people

also just kind of mention as we navigate

through different pages like i i showed

you earlier earlier there will be these

contextual tabs that show up these these

editing tabs will give you different

options to edit that individual page so

you can see this one allows me to edit

the page delete the page i can view

different versions of the page or i can

clone the page

and in some regions of the site you'll

even see a contextual pen icon appear

and these are really nice because it

gives you another kind of quick editing

way or access to to edit something so

like for example if i want to edit this

footer i could just hover over this pen

icon click it and then choose edit and

it's going to take me directly to the

editing screen normally i'd have to go

through a couple menu options

to get here and so this is just kind of

like a quicker way to edit that

okay so now that we've had a chance to

navigate around the cms a little bit

let's go ahead and actually create

something

so by and large the majority of content

you will probably create for your site

is a content type called basic page and

if you hover over content go to add

content you can click on basic page to

create a brand new one

and here there's really only one

required field which is going to be

um this title field here so uh of course

whatever you title your page you want it

to be indicative of what information is

going to be on there and again the more

specific um your page is the more

sort of helpful it's going to be for

others who come and visit it

all right so now that i've added a title

um you're probably wondering okay how do

i add actual you know content to this

thing

with basic pages you have two options

now the the first main option you're

going to have is this body field that

appears right below the title field and

you know this is a really good spot to

put information if you're really just

putting like text

maybe some links

perhaps a single image

[Music]

you know maybe like a a

video or something like that

really basic edits can be placed right

here and this is going to be the

quickest and easiest way for you to to

not just add content to the page but

come back and edit it if you need to

we're going to dig in this a little bit

later but the the system also has a

feature called rows and cards which

allows you to have more control over the

layout of the page and it also adds

additional functionality so depending on

what you need if you need to get a

little more fancy you can use the rows

and cards if it's going to be a pretty

straightforward page then using this

body field will do just fine

and we'll discuss some of the different

button options that we have here at

least some of the more common ones that

people use in a moment

um another thing a lot of people like to

do is add their page to their main

navigation

and so that's actually done over here

under menu settings it's a real quick

just check box for provide a menu link

once you check the box you do have some

additional things that you can do to

change the link itself but otherwise as

long as you just check the box it's

going to make sure that that page

appears in the menu

scrolling down a little bit further just

to kind of briefly highlight some of the

other important things about the page

here um

when you are done making your edits or

at least for the session you're going to

have to save your changes and so

you'll make a choice when you're

starting to edit your pages whether or

not you want to save it as a draft or a

publish page

now real briefly if you publish

something on the website it means that

it's going to be visible to anybody now

if you're working in an active project

where you're in the staging environment

if you have a stage website you can

probably just feel free to publish

everything because

we make it so that your stage website

isn't visible to other sites like google

or bing or other search engines um but

if you have a live site then publishing

something will mean that someone could

eventually stumble upon that uh

and inadvertently you know google or

bing will be crawling that page at some

point in time and posting it in their

search results so just keep that in mind

uh in this case i'm not actually done

with the page yet so i'm going to go

ahead and save it as a draft

okay so you'll see that when we save the

page you'll notice a couple things first

you'll have a notification message

saying hey you've made a change cool um

that's not visible to anyone else you

can actually dismiss it by clicking the

little x over here

it's also going to have sort of this

moderation feature that'll kind of stick

itself straight on top of the page again

not visible to anyone else this will

only appear on unpublished versions of a

page so you can ignore that for now

but really what we're looking at here is

the title

that we

added for our page and

the just kind of like general text

information we put at the bottom here

so of course i'm not done editing my

page so you'll see that once you save

the page those editing tabs will appear

i can go back and edit the page by

clicking

clicking the edit tab here

let's go ahead and dig into a little bit

more of some of the editing that we can

kind of starting with i think some of

the one of the most important things

that you can think about um that's going

to be creating links so

links are super important because that's

how you're going to be pointing people

to various

pages on your site as well as perhaps

pointing them to other sites as well

when you're creating links in that at

least this version of the cms here

you're going to have to think about

where you're pointing people

what i mean is this so you know you're

going to be creating pages that are on

your site so i i have lots of pages

right now that are on this

demo.colorado.gov site and there might

be instances where i need to point

someone somewhere else maybe like a

facebook account or

maybe a youtube video that's outside of

my site you know somewhere that's not on

colorado.gov

so there's there's two different

processes for

i'm creating links depending on how

you're going to

point people so the first thing let's go

ahead and talk about pointing people to

a page that's on your site

well starting with any link regardless

of where you're pointing to you want to

make sure that the

text that you have for the link the link

text is going to be descriptive of where

they're going to go so let's say i have

a you know

maybe i want to point someone to my

mount evans page

what i'll do is i'll type out the text

then i'll highlight the part of the text

that i want to make the link and you do

want to make the the link pretty

descriptive you know it should be pretty

obvious of what i should expect when i

click on it

then you're going to go up here to the

the what we call the wysiwyg toolbar

here and um you're going to see there's

actually two link buttons so there's a

kind of like a standard link button and

there's another link button that has

like a little plus symbol on it this one

right here is the one we're gonna we're

gonna choose because you'll see when i

click on this one

the link button with the plus it's going

to bring up a little search bar and so i

can actually start searching for the

page i want to link to and you'll see i

don't even have to type in the whole

name it'll pull up any relevant results

and this will be for any pages on your

site or

any documents like files or images

things like that things that you have on

your website so i'm going to choose that

it's going to create something called a

relative path link for me which is super

important

and we're going to click

save

now a big reason of why you're going to

want to do that is because and this is

in particular if you're on an active

project

it's because your url actually changes

from the time you're working on your

project when your site goes live so

you'll actually see that we have a

separate version of this website in our

staging environment

demo.stg.colorado.gov

and you'll also notice that i'm in

justdemo.color.gov right now so this is

actually my live version of the site

this is the stage version of the site

when you're initially building out your

site you're going to be in the stage

environment and so

you really want to avoid

making links by just copying and pasting

links from the url from the address bar

because when you go live that little dot

sdg this guy's gonna go away and so what

will end up happening is if i you know

copy and paste

a link

onto my live site

well i'm going to be pointing people

here not to

mydemo.colorado.gov site so just be

really careful about that that's exactly

why we place this little button here for

you so it can create the correct kind of

link to make sure that you can avoid

that because if you if you use this

button you won't have to worry about

that kind of stuff

now it's a different story if you're

going to be pointing people to an

external web page so let's say i want to

point someone to you know

wikipedia

well in this case um i don't have this

page on my website so the next best

thing i can do is actually go to the

website and grab the url from the

address bar and i'm only able to do this

because this is a website that's not on

my site

so i can grab the url

i can copy it and then i'll come over

here and it'll be the same sort of

process so i'll add my link text

then what you'll do is again highlight

the part of the text that you want to

make the link

and then in this case instead of

clicking this guy i'm going to click the

just kind of like standard link button

you click on that you can paste your url

into the url field

and click ok

so now we've got two links we've got a

link to my mount evans page on cms or on

demo.colorado.gov and then we've also

got the wikipedia link that goes to the

wikipedia page over here

now in some instances some people

actually like to have external links

open up in like a separate tab there

might be other instances where you want

something like that if that's the case

um what you can do is you can edit an

existing link by highlighting it and

clicking that same link button the the

main thing is trying to get to this

little link window right here

and then what you'll do is you'll click

on target

and you'll choose new window and that'll

actually make this link open in a new

window by default all the links that you

create will open in the same window

now i can preview this page which is

pretty nice there's a preview button

down here so if we click on that

it'll kind of show you a general general

preview it's not going to be exact but

it'll be pretty close

now you might be asking why is it

background pink that's actually just a

visual indicator to me again to kind of

let me know hey this page is not

published it's not visible to other

people only visible to people who are

logged in

i don't want to test the links here in

the preview page you'll see if i click

on one of those it'll give you a leave

preview window

and so you don't want to leave your

preview because you haven't saved your

changes yet so we're going to go back to

content editing

scroll down and click save

now it's always best practice to test

your links so i'm going to test these

right now

so this should open to there it is my

mount evans page and if i go back

this should open a new tab

there it goes to wikipedia and for me to

get out of this option after i'll have

to actually click out of it

now let's go ahead and look at some

other kind of edits you can do

another kind of pretty popular one is

going to be adding accordions to the

page

accordions are going to be like these

expandable boxes that open and close and

you can add one very easily by hovering

over this little guy right here this is

the insert accordion button simply just

put your cursor wherever you want the

accordion to go click that and it's

going to add the accordion for you

and on the back end it doesn't really

look like much but actually if we

preview this page

you'll see that adds these nice stylized

accordions and if you click on the

accordion title it'll open up and it'll

show you all the content that's on the

inside of the accordion

so these are really helpful for

organizing really long pages or just

kind of grouping categories of

information faqs are kind of nice for

this sort of thing

the title will go up here so this is

what people see and what they click on

and then the content is going to be the

actual contents of

the accordion that you place in there

and you can put pretty much anything in

here you need to whether it's going to

be links or just text information or

even you know images stuff like that um

you can also color these accordions if

you highlight the title

and you change the background color

let's say i want this to be red

again it doesn't look like too much here

on the back end but if we click the

little preview button

you'll see that it stylized that whole

first accordance and that's red

pretty cool

back to content editing

you can add additional accordions if you

right click and choose to either add the

tab after or tab before you can also

delete individual accordions by again

right clicking on the accordion you want

to remove and clicking remove according

in tab so

all additional options you have by right

clicking on the accordions themselves

another kind of fancy one we have here

are button links um button links just

create a link on your page but it

stylizes more to make a button

and

these are these are pretty cool as well

they do require a little more hands-on

work basically what you do is you place

your cursor where you want your button

to go and then right next to that

accordion button is going to be the

button link button here

and first thing it's going to ask is for

style this actually corresponds to what

color you want the button to be if i

were to show you real quick on our demo

home page we actually have some examples

of the different colors

so if you were to choose primary it'd be

dark blue

default is gray success is green and so

on and so forth

so let's say i wanted like a a red

button i'll choose danger

okay the button text this is going to be

what what the button actually says on it

so maybe i want to go back to wikipedia

size you can change here you have four

options uh defaults normal you can make

it bigger or smaller depending on what

you need and then the url for the page

will go here

this is where it gets a little bit

tricky

remember how i mentioned before it

really matters how you create your links

well you know if i'm going to an

external web page like wikipedia.org

this is actually super easy

all you need to do is copy the url paste

in here

right

and if i click ok

again doesn't look like anything special

here but if i preview the page

you'll see that it actually adds this

nice wikipedia button

but you know

let's say i wanted to point to a page

that's on my site uh well you're gonna

have to be a little more cognizant of

how you're copying that url so let's go

ahead and change this double clicking

that will open up this window again

maybe i want to point to that mount

evans page

well in this case i can't just copy the

url right because i want to make sure

that i don't copy the full stage url if

i'm working on an active project and

point people back to the stage site when

we go live so

instead what i'm going to do is i'm

going to navigate to that page

and i'm going to copy everything that

comes after colorado.gov so i'm going to

grab the forward slash

mount dash evans

copy

and i'm going to paste this here in the

url field

just like that you'll notice it's

actually the same thing if i click ok

here that's actually the same thing as

what the link it button did for me when

i created the link earlier so another

another sort of like cheat is you could

click on the link it button while you're

working and you could actually search

actually i'm gonna make sure it's not

highlighted

i can actually search for

mount evans

click on that and then i could copy this

from here that's also

something that you could do but just

make sure you click the little x so you

don't actually create a link and yeah

then you can add it here to the url

field so a couple of different ways you

can do that a little more manual process

obviously you don't want to create

button links for every single link on

your site anyway so

you know you should use those sparingly

in order to actually make them call

attention to themselves but that is

something you can do

now let's say i've approached to what's

closer to a finished page

you know at this point it might make

sense for me to add something called a

revision log message before i save so

the revision log message basically

tracks

some more details about changes i made

during this editing session i can say

added more links

to accordions

and a bun link

or training

all right let's go ahead and scroll down

and this time i'm going to change this

page to publish because i think it's

good enough that if other people saw it

it'd be fine

um and i'm going to go ahead and click

save

so what you're going to see here now is

that that background turned from pink to

white so again another visual indicator

for me that this page is now published i

can dismiss this notification here and i

can kind of test out all my stuff so i

already tested those links but i can

test these guys make sure they open and

close just fine little mount evan

mount evans page button

works great

just so you can see where that revision

log message goes if you click on the

revisions tab on the page

then you can actually

see here that every single time i save

the page it actually tracked

what happened and i can actually look at

the preview of that so it'll tell me

when it happened it'll give you

timestamp it'll also give you the

username for the person who made that

change

and you can simply just click on the

timestamp to preview what the page

looked like at that moment in time

you can go back and you can click

through what you need but you can kind

of see that as as you make edits to a

page um

you know as the system kind of tracks it

over time this might become a little

unwieldy it's where you know you're just

looking at a series of timestamps and

usernames so that's why adding that

revision log message can be helpful

because it adds a little context to what

you're seeing here in the revisions page

um now one other thing i want to kind of

point out is that the system is pretty

smart as as in it can

save multiple versions of the saving

page so let's say i want to go in here

and make some more edits to my already

published page

okay so i made some more edits but i

don't want anybody to see these edits

yet

what i can do is when i before i save i

can click this drop down and i can

choose to save as a draft

and click save

and what happens is the system actually

creates two different versions of the

exact same page so here you'll see that

there's now a latest version tab that

appears at the top of the page

and as you scroll down you can see where

my additional edits are

but you'll also notice the background's

pink

indicating that this version of the page

is not visible to anybody yet if i click

on the view tab you're actually going to

see the published version of the page

that does not have that original or the

new edit that i made here

if i want that new edit visible if i

want this latest version

option

visible

you can either click the little edit tab

and change this to published or you can

use the little moderation feature if you

have the permissions to change this to a

publish page you can add a log message

again this would be like a revision log

message and then you can click apply

and that will make this page completely

published you'll see that there's no

latest version tab that appears

now what if there's an instance to maybe

where i don't actually want this page to

appear at all

well you have a couple options you could

delete it however we strongly recommend

not deleting content in the system just

because when you delete something it's

gone for good

instead what's better is you can edit

the page

scroll to the bottom

and change the state from published to

archived

so what archive does is this essentially

unpublishes the page and doesn't create

any separate versions of it it just

makes it so that this page is no longer

visible to anyone else you'll kind of

see what happens if

maybe i bookmarked this page in the past

and i'm just kind of like a public user

coming in to

view what's here

if i'm if i'm not logged in and i try to

go to the page i'll get this access

denied message here so people can't see

what's there but you still have access

to the content unless you need to come

back to it later

so now that we've made some basic edits

here i'm going to go ahead and change

this back to published

and i wanted to show you a couple other

settings you might be interested in when

you're editing your pages

so another uh sort of thing you might

want to do is you might want to have

reference menus or left or right

navigation menus you can add menus under

display you'll see that there's an

option for reference menu left or right

and what you have to do is you have to

create a new menu separately

and then you can choose that menu to

appear so maybe i want just you know my

main navigation to appear on the left

side of the page

i can choose main navigation and click

save and you'll see that it's going to

actually add a menu to the left side

and this is just mirroring what's up

here

notice this page i created is already in

the menu here and up here and that's

because of the menu settings checkbox

that i set

at the very beginning which is right

here under menu settings

under display you can also do things

like hide the navigation bar

or hide the breadcrumbs in case you want

to totally isolate this page from the

rest of the site you can do that under

relationships you can do things like add

this page to

what the site's faceted search feature

which we'll have more information on

coming on that coming soon

you can do search enhancement so you can

you know edit the summary of the page as

it appears in your site search or you

can you know archive a page from the

site search so that doesn't appear in

the site search at all or you can

promote it so that the page appears at

the very top of of the page results

when someone's searching a term on your

website

you can also display web forms through a

page as well there's a couple ways to do

it you can either do it through the web

form settings here or you can do it

through rows and cards

um you also have some different options

on the side here so besides the menu

settings for example you also see that

the url alias section is automatically

open and this little box here for

generate automatic url alias is checked

uh what this does is it creates a

sort of like path or

url for your new page

now this will always automatically be

checked but you can manually change it

if you uncheck it you can see that i

have the ability to go in and type

whatever i need just

make sure that if you do customize the

url for your page that you keep the

forward slash in the front there and

don't use spaces between words you're

going to want to do things like this

like either add dashes or underscores

stuff like that and as long as the url

alias that you want is unique as in it

doesn't belong to another page on your

site then it should be good

okay um one other option i want to kind

of quickly highlight is we added the

feature to be able to create private

pages that's going to be under promotion

options so you'll see there's a check

box here for private what this allows

you to do is create a page that only

a certain user role called private user

will be able to view this page

so that's just a checkbox right there

okay so now that we've had some general

overview of how basic pages work

another big thing that a lot of people

will have to do is they're going to need

to be able to

upload documents or images to their

website so let's go ahead and dig into

doing that

so the first thing we need to know

before we can add a document or an image

to our page is we're going to have to

add it to our media library so the media

library is going to be accessible if we

click on or if we hover over content and

then go to media if you click on media

there

this will take you to your media library

so the media library is going to hold

all the images and all the documents

that you're going to share on your site

specifically if if you have if you're

using something like google drive or

dropbox or something for organizing your

documents that's okay you can basically

just link to the documents like i linked

to the wikipedia page you can just

create a link directly to those

individual documents

but in the case where you don't have

something like that you can use the

website system to also house your

documents and manage the files back here

so to be able to add let's start with a

document um to our media library you can

either go to the media library and click

the add media button or a quicker way to

do it is to go to content

media add media and then choose document

from here you can select the file from

your browser so actually now i've got

one down here my downloads folder you

can actually just kind of click and drag

that in there or you can click on the

button as well and choose to choose it

from your files whatever works

then you can name the file this is just

for organizational purposes for the

media library this isn't anything that

anyone else really sees

uh one thing i did forget to mention let

me remove this real quick is that you

will see that under the browse button

it's gonna it's gonna specify what kind

of files you can upload so in the case

of a document you can upload a pretty

large one if you really need to up to

256 megabytes it allows you to

upload file types like text documents

word documents um

powerpoints excel files things like that

so most of most about anything that you

need to upload you're going to be able

to do so again you can either drag and

drop or again just kind of click on here

and go to my downloads folder and choose

my example file

description is optional this is just a

label for the the file in your media

library and here's another description

field for search engines if you feel

like you need to add that

i'm choosing not to add any of that here

you can

organize your documents in your media

library by using related tags and what

that means is like i can create a tag

let's say my example tag

and i can associate the same tag

with uh the same with various files and

those though all those files will be

associated by one term that i can search

for later and you can either choose an

existing one like i have here or you can

create a new one

and creating a new one obviously will

add a new tag that you can search for

later as you're

adding other documents so this is

helpful for organizing the media library

you can actually add multiple terms so

depending on how many you know tags you

need to associate with any individual

document you can do that

otherwise you can just go ahead and

scroll to the bottom and click save

and as long as everything that's

required to be entered is entered you'll

see the document is added to the media

library now this is just the first step

um the second step is actually linking

to the document

you'll see right now this is just kind

of like a

field inside my media library if i click

on it it's going to bring me to like the

separate page and then i have to click

on this little link down here to

actually view

the file so

not very optimal

as far as user experience goes so you

don't want to link to this sort of page

instead what we're going to do is we're

going to actually create a custom link

to the actual file

so let's go ahead and go back to our

page we're working on i can find it

again by clicking on content

and then scrolling down here's my page

right here

and yep that's definitely the one let's

go ahead and click edit

so to create my link what i'll do again

is i'll add my text so

my link text will go here

then highlight the part of the text you

want to make the link and then you'll

use the chain link icon with the plus um

just for future reference i'll refer to

this as link it because this is our link

it feature so you click on the link it

button

then you're going to go ahead and search

for the file

and you'll see that there's going to be

you know a multitude of options that you

can choose from depending on on how much

content you actually have on your site

and

more particularly you'll notice that

there's options that will appear under

file and those options are going to

appear under media

if you choose the media option it's

going to bring people to that separate

page i just showed you where you have to

kind of click again to get to the

document which isn't super awesome

so the better thing to do probably in

your case will be to choose the option

under file

which will allow the user to click on

the link and it'll go directly to the

document i got double check again this

was example dash file you do have to

search by the file name so if you had

dashes or something like that in there

you're going to have to search for that

and you'll see that actually made it

more specific and easier for me to

choose

after i choose that it's going to create

that relative path link we were talking

about earlier

and we're going to click save

and so there i've got my document

so we saved here i want to test it out

you'll see it opens right up to the text

file

now before we actually get to the images

and how to upload those i want to bring

us to the home page actually now so

let's go ahead and go to the home page

now the home page is actually quite

different so the homepage has a

different different elements than other

basic pages are going to have so big big

ones are going to be like the jumbotron

whether or not you're going to use that

but also just the way you build out

content it's going to be different as

well

the homepage and other pages like it

this is actually a type of page called a

landing page and you'll see under

content add content there's an option

for landing page right here

um so with landing pages you don't have

that generic body field you can edit

like we were just doing with the basic

page you actually have stuff called rows

and cards

so you'll see if i click on the add a

tab here and i try to look at the back

end of this landing page

you'll see that there's no you know sort

of like simple editing window what i'm

presented with is a bunch of different

rows and as i kind of click edit through

these it'll show you different cards

that are attached

inside these rows

so the way the rows and cards work is

that's actually sort of like our feature

to allow you to format the pages in

different ways

if we're kind of looking at the actual

content editing section so skipping the

jumbotron area

you can see that it's kind of it's a

little bit easier to see on this

homepage where we have sections broken

down into rows so here's clearly one row

here here's a second row that has a

different background color

a third row

a fourth row and so on

and with these rows the way to populate

content into them is to use something

called cards so there's different kinds

of cards and they have different kinds

of functionality here we have like a

media card that just displays an image

we have basic cards that give us that

little editing field like we were just

using on the basic page so you can add

things like text and buttons and stuff

but there's other kinds too like down

here we're using icon cards which are

these cool cards that create these nice

floaty buttons here

or you can use view cards to display

like automated feeds for different kinds

of articles

and there's many many many more other

cards that allow you to add different

kinds of features so

um what we'll do is i think instead of

editing the existing homepage here we're

going to start with a fresh landing page

but i do want to make something quite

clear before we move forward

one thing you really really want to

avoid is you know if you don't like the

initial layout of the homepage we give

you because we do give you some example

content that's on your site

you might be tempted to just delete it

and start fresh and

there's a reason why you don't want to

do that um so this this home page is

different than any other landing page

that you would create because this is a

page that this is a landing page that is

assigned as your front page of the whole

site and if you delete the home page

which you can do um if you go into this

content overview you can see that um

i'll search for my

landing pages here

you'll see that among these search

results that you have you also have the

home page up here and it'll allow you to

delete this homepage just like any other

piece of content but it will break the

front part of your site so that if i try

to go to demo.colorado.gov and i delete

my home page i'm going to get an error

message so it's

very important that you do not delete

the home page

edit the existing one that you have

there you can remove the stuff that's

already there so if you edit

the home page you can go into the rows

and you can remove every single one of

these rows and it'll basically start

your fresh

very easy to do another thing you can do

is you can build a separate landing page

and then let us know that you want that

to be your new homepage and we can set

that for you

all right all the caveats aside

let's go ahead and create a new landing

page so i'm going to go to content

add content

landing page now um let's go ahead and

first give our landing page a title

and i'm going to call my alt home

example because maybe i i want to show a

couple of different options from what my

homepage could be this will be one of

them

to add content you're going to first add

your row so

the very very first button you're going

to see here is add row equal columns and

you'll notice if you click the little

drop down here it gives you a bunch of

different options for different kinds of

rows you can add

the kind of row you choose is what

is what is going to ultimately determine

what the layout of that row is so

for example

if i go back to the homepage here

without getting out of my edit screen

you'll see that like this

media card here takes up just as much

space as this basic card

scrolling down the three cards here have

an equal amount of space across a row

same with all these guys but you know

there might be an instance where you

don't need them to have

you know

an equal amount of space taken up

so like on the cms site here um you have

one card this is a basic card this is

taking up the majority of the space on

the row whereas you have two cards here

that are taking up a smaller amount of

space so depending on what you need you

can either do

an equal columns row or uneven columns

and if you see the options for hero that

means that you can add a background

image to that row

you can have accordion rows which act

just like the accordions we just talked

about but it's a row so you can actually

add tons of stuff within the accordion

and you can also have things like info

slides which allow you to create like

these like slider rows um here actually

if i show you under things to do

row choices you can see some other

examples of what this might look like

so here's like an equal column row or

sorry this is the info slider actually

with an equal column in it so with the

slider ones you can create these sliding

rows

there's an equal column row two uneven

columns three here's those accordions

so let's just go ahead and start with

the equal columns row

i'm going to click on that and then

under here you're going to first get

some settings you can choose to set for

your row

you can have a row title you can change

the background you can change how wide

or narrow the row is by default it'll

take up most of the width of the screen

and you can even add borders around your

rows so just for fun let's go ahead and

add some of these things so you can see

what they look like

we'll keep the default width let's go

ahead and add a regular border around it

just for fun

and once you're done setting all of your

row settings now you're going to have to

add the content so the content comes in

the form of cards and again if you click

this little drop down here next to the

add card basic option you'll have a

bunch of different other options for

cards that you can add

and so here

really all these cards are going to add

different level of functionality so the

basic card very common one will allow

you to get that you know generic sort of

body field that you can edit and add

information for so very useful um you

also have options for

things like a map card so

if i want to add a google map all i need

to do is add the address

you can add a title if you want to

you can add some color maybe either in

the title or in the background of the

map

i know i glazed over it a little bit

quickly but with the basic card along

with you know the the editing tools that

we've talked about before

all your info goes in here you also have

like a card title that you can add just

like the map one you can also change the

colors again like the map one for a

title area and basic cards actually have

their own borders that you can set as

well

let's choose shadow just for fun

now this is an equal columns row that i

chose so as i continue to add cards

these cards are going to be divvied up

equally across the screen so the more i

add the smaller the cards will appear so

if i click preview real quick just to

show you what this looks like

okay so on the left side is going to be

my basic card right side is the map card

you've got the row title up here you've

got the shadow border around the basic

card which i added in the settings

of course the blue title is also

something i added for both these cards

you can't see the row

the row one here yet because we're in

the preview

but i'm going to go ahead and go back to

content editing

and let's go ahead and maybe add one

more row let's try a uh a two uneven

columns row

so here you'll see that almost all the

same settings are available for the two

uneven columns except it's got this

columns tab where you can choose the

column styles so you can decide how you

want to divvy up the cards now it's a

two uneven column so i can only put two

cards in here so i have to think about

you know what position i want those

cards to be in what size do i want them

to have in the columns

and let's go ahead and take a look at

maybe a couple other options for

cards let's look at the

icon card this is a pretty popular one

now this one will take a little bit of

kind of extra manual work to get these

these done but here

just to kind of show you what it looks

like icon text will be the the button

text here

let's say i want to link this to

wikipedia again um you can add an icon

for this but you're going to have to

search for it so there's a link down

here which you can copy

and i can go on a new tab i don't want

to do it in the same window

i'll paste that

and i'm going to search for some icon so

i'm going to search for wikipedia

you'll see that the wikipedia icon shows

and what i'm going to need to do is copy

whatever's here so you can see that

there's a little copy html thing that

pops up just click on there it'll copy

and then i'm going to paste that into

this icon field and i'm going to remove

some stuff so basically everything out

um outside of the regular text so after

the parentheses and before the

parentheses or sorry after the

so quotations and before

remove that there

remove this as well

and that'll add my icon now for my icon

card i can also add a link which is

normally what you'd want to do so i

might go to wikipedia again

copy

paste the url

this will also search actually so if i

were to search for a page it'll pop up

that only works for content that's on

your site and likewise you can also

search for media so if i wanted to

search for that example

uh file i think is what it was there it

is i could choose that as well um so you

have to choose one or the other but in

this case this is going to wikipedia so

i can just copy and paste the url there

and then you can also choose a color

none will make it transparent um you can

change something else if you'd like

let's do red

and one thing i forgot to point out

under icon you can choose the icon

position and you can choose to have a go

left right or above

okay

um let's go ahead and preview

there's my map card here's my basic card

there is my wikipedia icon card

all right so another thing that you're

probably going to want to do is add

images

to not just your homepage but really any

other pages so let's go ahead and dig

into that i'm going to save my changes

as a draft

and we will come back to this in one

second

let's go ahead and first upload the

the image that i'm going to want to use

on this page so i'm going to go

up to content

media add media and i'm going to choose

image

all right now with the images it's a

little different you're gonna have to

choose a file that's two megabytes or

less

and you're gonna have to choose one of

these file types so it's got to be

either png

if or jpeg

now in terms of why the file size is

smaller than the documents

that's mostly because if you've got a

really large image on the page it's

going to take a lot longer for it to

load really bogs down your pages so it's

better to have smaller images that you

upload

i'm going to browse here choose just an

existing image i've got on my computer

give it a title

give it some alternative text this is

for screen readers for people who can't

actually see the image

okay short but descriptive works

now you're also going to be given crop

options now by default it's just going

to show the entire image but you know if

you need to have this appear in a couple

different regions on the site you'll

have to crop the image so um here

there's two options there's a featured

crop

that corresponds to something called a

featured image which we didn't quite

cover here yet in our intro but if we

have time we'll get to it

that essentially is just an image that

will appear

in thumbnails for like if you're sharing

a page on you know social media you can

customize which image appears there um

and then the hero cropping will apply to

anything that has to do with a

background image for a row or for your

jumbotron on your homepage

um so in this case i'm not going to do

anything with this yet because i'm

actually not going to put this in any of

those regions i'm just going to go ahead

and scroll down and click save

okay so now that i've got the image

uploaded here i can use it so let's go

back to the landing page that i was

editing

and we'll click on this guy here

and then we'll click edit

now the way i get an image to display on

a page

there's a couple different ways you can

do it but the main way that we normally

recommend you do it is you do it through

something called a media card

so i'm going to edit the row that i was

working on this is the two and even

columns row

and i'm probably going to have to adjust

how this works so let's go ahead and

make it a little more even maybe i want

the image to be a little bigger

and

the button be a little smaller actually

no i'm going to have the other one

okay so what i'm going to do is i'm

going to add my card so i'm going to

click the drop down and we're going to

choose media

and then from the drop down here i'm

going to choose media card item

and i'm going to select the image that i

want to appear

and scroll down and i'm going to click

use selected don't forget that second

part make sure you confirm your

selection

after you're done you can add a link to

the image if you'd like and you can also

add a caption if you want but you'll see

if we preview here

in our uneven column now the button is

taking the larger side of the screen

and the image is taking the smaller side

this is taking up two thirds this is

taking up a third

and the nice thing about the media cards

is this will make the image adjust

corresponding to you know whatever size

um the the area it is that has in the

row or you know depending on whether or

not someone's viewing this on like a

mobile device

it'll scale nice nicely so

that's one of the main reasons why we

like you to use the media card to

display images on your pages whether

it's basic pages or landing pages

you can use media cards on both

we'll go ahead and go back to content

editing

all right and i think i i like the

general settings i have so far i'm going

to fix some other stuff later but let's

go ahead and just publish this guy and

click save

okay so now my page is saved i can just

double check make sure everything looks

good looks like it does let's test out

our wikipedia button

go straight to wikipedia nice

all right so we've got the start to a

to a landing page let's go ahead and

talk about some of the other stuff

particularly let's go ahead and jump

into the jumbotron

so the jumbotron is set through some

display settings here if we click on

edit

and we're going to choose the jumbotron

tab up here at the top you'll see

there's a bunch of different options

let's say you don't want a jumbotron you

would choose simply no jumbotron

jumbotron now allows you to kind of make

slides on the fly although i generally

recommend against that

really your your main options are really

going to be either refer sliders

or it's going to be adding some sort of

jumbotron through something called

custom blocks

now your site jumbotron

is a custom block that displays in the

jumbotron region of your of your landing

page

um and that has to be customized

elsewhere

any of these options that you select in

here actually with the exception of

jumbotron now you're going to have to

edit elsewhere

so let's go ahead and talk about

probably what's the most common way

people add images

to their jumbotron is with sliders

so i'm going to back out of here and

we're going to create

jumbo slide so that we can add that

jumbo slide to our site jumbotron area

um or in this case into this landing

pages jumbotron area so i can change out

that image

so let's do that next first thing we'll

need to do is add an image it's going to

be large enough to be able to display in

the jumbotron area now

we do have a page that kind of shows you

the different dimensions or optimal

sizes

for the various areas where you can put

images on your site

so if you actually go over to our cms

site

you can scroll down and go to tips and

tricks and

image size recommendations so this page

here image size recommendations will

give you a general idea of what the

different sizes are that you need has

some different

you know so uh sort of recommendations

and examples that you can see we have

here

and so for the jumbotron what you're

going to need is you'll need something

that's greater than 1920

and at least

you know 450 pixels high so it's going

to give you a fairly panoramic sort of

use whatever image you choose it'll have

to be pretty wide and the area that you

want to focus on will have to be pretty

narrow

in this case i do already have an image

that i've chosen so i'm going to upload

it by first

uploading as an image to my media

library

use the file

alright so this is the scene that i want

to use i'll give it a title

and descriptive text

all right and as for the um the cropping

here we're gonna have to choose the hero

cropping selection this is what's going

to apply to our jumbotron area and i'm

going to choose a selection by simply

just putting my cursor in here clicking

and dragging across

the image

and everything that displays inside the

box is what's going to appear

in my actual picture so i can kind of

move this around i can see

you know where i kind of like things i

kind of like having the mix of colors

here so i might do something closer to

this maybe

and then i'll save

now that we have the image uploaded

we're going to create what's called a

jumbo slide so i'm going to go up here

to content

add content and choose jumbo slide

and from here we're going to give it a

title now the title

can or

may not

uh display in the slider that's going to

be your choice and i'll show you how to

change that in a second

uh the body field also will add a

description over the picture again this

is optional i'll add one for you just

just so you can see what it looks like

and here the nice thing is because we

have access to the wysiwyg editor we can

also do things like create links and

things like that so um very nice to do

that here

here down below is where we're going to

choose our image so i'm going to click

on jumbotron image

it's going to open up to our media

library and it'll show you all the

various images you have to choose from

i'll select the image that i want to use

don't forget to scroll down all the way

and choose select images that's a spot

that a lot of people miss

here's another field for a link if you

want to add a link here as well this

just adds a generic read more link to

the bottom of the jumbo slide so you can

either choose to add the link here or

you can have a more descriptive detailed

link up here in the body field at the

top there

now down here this little check box hide

title this is what you check if you do

not want the title to display so by

default this will show but if you do not

want it to display you can check that

box

and then the order here this

what is what helps the system determine

what order to show the slides if there's

multiple pictures you enable so if

there's more than one

um you'll have to order these so if i

want this to be my first picture i'd

choose first my second picture i'd

choose second and so on

the last thing that's also a little bit

different is there's a checkbox for the

publish option here so you make sure to

check that box before you click save

otherwise you won't be able to enable it

on the home page

click save

got our confirmation here's what it

looks like there's the title

here is the um the description and again

these are both optional here i could

have just hidden the title and the

description is you know whether or not

you actually choose to fill out whatever

is in the body field there

from here we're going to go back to the

landing page we are creating so either

the home page for your site or if you're

creating a separate landing page

you'll find that here in the content

overview

and we're going to edit the home page

for the landing page

and go to jumbotron and then here we're

going to choose refer sliders

and you'll see there's a whole list that

appears here

including

the slider that i just created so you'll

see that these are all actually

different jumbo slides that have already

been created and they'll show up here if

they're created and they're published

they'll show in this list

so you just check the box for them when

you want to display

and then click save

and you might have to click it again

okay here we go so now you'll see it

took the cropping selection that i chose

and displayed it right up here in the

jumbotron area now this is just one

static jumbotron slide um but if you

want to add more you can and so if we

edit here

all you have to do is create additional

jumbo slides and then choose to

display them by checking boxes for those

Colorado.gov CMS Platform Overview Video Transcript

Need a Website?

Have a website?