Skip to playerSkip to main content
SHR
  • 55 minutes ago
CMS Training Inch Beach Hotel chapter two
Transcript
00:04um what we were doing I'll just go back to the site and we can we were we were
00:08going to change the the race the rate box down here to update this down here
00:14on the CMS training page so we were we're in the page properties of the CMS
00:19training page over here on the left hand side and if you remember we added in
00:25this full-sized image here so this is a full-sized image here we give it a link
00:30and we put a date range on as well so it will display from the 19th of July till
00:35the 23rd but we want to see it right now so I'll just turn that off that was I'll
00:40just show you that so that's available on most widgets that we have so the next one
00:46is it it's another large image down here and it's for this one I've changed this
00:51one to image with button so it's a the one up above was full-sized image this
00:57is image with button so for this one we can put in a call to action so I'm just
01:01going to put in book now and we'll add another link so we'll go with the same
01:06one from the rates there so again you have these same options here but I won't
01:12need to fill these in so the next one is the small image here and the thing with
01:17the small images it only works with image image with text so small images
01:23only work with image and text and this is the most popular one used on all our
01:27sites so we'd recommend using a small one and then image and text so we will give
01:32it a title I'll get some text there after putting in a tab there we'll put in a price
01:42of 89 or something call to action we'll put in more info link it this time we'll link to a
01:50page
01:50in yours inside the CMS so these are all the live pages so I'll just put it to any random
01:55one there
01:55we'll just put it in there and the link gets added there so that's that's the manual right there so
02:00we're inside in the page properties I'll just hit save now we scroll down to the bottom
02:07we're brought back to the page now so you can see here these are the old ones so if I
02:12slide
02:12through it this is the next one this is the one we added the full-sized image so it's just
02:17a full
02:18size image and it's got the link on it there so maybe you've got a graphic made or something that
02:23said sale 50% off or something like that you just wanted a full-size image there so the next
02:27one is full
02:28same size image again but this time it's got a book now button so that's image image with button
02:35so again if you had a graphic or something like that just book now and the last one is the
02:40small
02:40image again with a bit with a title text price and more info so that's that's that one there again
02:46so
02:46that's um that's the most popular one that gets used on our sites so if you want to change the
02:53order
02:53of those so if you go to page properties again which so I hit the PP up here and we
02:59scroll down
02:59to and we look for manual rates so these are the rates here if I want to change the order
03:05of these
03:05so they appear linear so this is the first one so this is going to appear first so you can
03:11see if you
03:11scroll down if you just click this a this a hamburger icon here and you click and drag and drop
03:19it in
03:19there so that's after going up there it's in second place now you can move these around as well if
03:25I
03:25want to remove one I could just click the red X here that will delete it there what else with
03:31these
03:31little boxes and you can click this arrow opens top right hand side and this will just make it full
03:36screen and it might might be easier for you to add text or reorder or something like that yeah so
03:45you
03:45can click this disappear to close it off again and it goes back into this little box there now
03:52so that is the rate so we'll just hit save again because we made some changes we'll go back to
03:59the
03:59site now so this one's first now it's another one so you can reorder them that again and it's the
04:05same
04:05thing with the image sequencer you can use to reorder them you can reorder those as well with the
04:10the hamburger icon there so what we'll do next is we'll go through the widgets that you can add to
04:16the page so you can see this is a text widget here I'll just go through what's on the page
04:20right now
04:20and show you what it is this is image grid widget another text widget there so this again is image
04:28grid and this is a promotion widget here that one there and we have a parallax here so you can
04:37see the
04:37parallax is a full width banner and as you scroll through the page it kind of scrolls through the
04:43image if you can see that effect I'm not sure if you can see it in the video but it's
04:47a nice effect
04:48so it kind of moves through the video as you scroll yeah yeah so they're the ones you're using on
04:56the
04:56home page at the moment and we have a few others as well so what we'll do now we'll just
05:00go to the
05:00page properties we'll and we'll add in some new ones so we'll just go page properties again if you
05:08were making changes to a page you come into the page properties you scroll down and you just say I
05:15want
05:15to make changes you can just edit the text here and you can click Save that will change it there
05:21but what we'll do now we'll start from scratch and we'll we'll remove all the widgets from the page right
05:27now and we'll start from scratch so I'm after scrolling down the page a nice bit to the widget
05:32loader here yeah it's after jumping down I closed it off sorry you can minus as well so with the
05:43widget
05:43loader here it lists all the widgets are on the page they're numbered one they're all given a number
05:49so you can see text is one image grid is two so if I just scroll down a little bit
05:53you can see this is
05:55where you'll edit them image grid here is two as well so you're you're able to keep tracking from there
05:59so
06:00all right I'll just remove all these now
06:04just empty the widget loader so the widget loader is empty now we'll just hit save and I'll show you
06:08what that did to the to the site now so you can see it's just a blank page now so
06:13we're at the footer
06:14already there's there's nothing down here in under the content title so what we'll do we'll go back now we'll
06:20add in the
06:22the some of the widgets so we'll scroll down now and we'll go to the widget loader so you can
06:27see the widget
06:28loader has a drop down here and has a list of all the widgets you can add we'll start off
06:33with the text widget that's one I like to start with
06:35and we'll just click add widget now so the page kind of refreshes and that's after adding it into the
06:40widget loader there
06:42um so we'll just hit save now the the text widget is the only one that you can edit on
06:47the front end of
06:47the site so you can just type it in type into it here so um just type in some text
06:53uh so it's pretty
06:55similar to word um text editor it's like you can bold it you can italic it you can underline it
07:00uh you
07:01could do all that stuff you could put a line through it if you like as well um for those
07:06you can uh you can
07:07center it you can right align it uh you can left align you can also bullet point it uh add
07:13a number
07:13to it you can click here for um format and you can add a header to it so you have
07:18a few headers here
07:19as well so you can click header two and that will just uh make it blue like that one um
07:24you can change
07:25it to header three if you want as well that just centers it and and uh puts it to the
07:29uh makes it yellow
07:31um so there the uh bless you so yeah okay uh so there are the headers um so you could
07:39use all those
07:40so if you want to change it back to a paragraph you need to come down to block here and
07:43you can
07:43change it back to just normal text there as well if you want as well uh so we'll just we'll
07:48center
07:49that there and you can also make a link out of it so you'd see this chain up here you
07:53can say you're
07:54talking about one of your rooms or something you want to link it to the rooms page uh you could
07:58paste
07:59in a url if you want or you could come down here to link list and this will list all
08:03the the pages
08:04that are on your site as well so i can link it to your um to your fishing page here
08:10if i wanted to
08:11down here so um so that's the text that's being displayed uh you don't need a title you can also
08:17put
08:17a target to a new window as well say it's an external uh site as well so but it's a
08:23page on the site
08:23right now so we'll leave it on normal uh you can just click uh okay now and you can see
08:28it's after
08:28changing the color of the text and making it a link so now when i hover over it it changes
08:32to uh
08:33blue but it stands out as orange uh there's also another option i think you can make a button out
08:38of it as well so i'm after going back into the the chain there and it's after giving me this
08:43pop-up
08:43if you come down here to the bottom and click class you can click on button here and we'll just
08:49click okay
08:49and it makes a button out of the the text that you highlighted there so yeah for the link so
08:54that's a
08:55nice one um so i think that's everything in the text editor uh so we can just add in so
09:02do so once
09:03you've done with all your text inside in the the text widget you need to click save you need to
09:08click
09:09save there so that will uh save all the changes that have been made to so even if you do
09:14make some
09:14changes and you try and leave the page i click here it will give you a little pop-up to
09:18say you've
09:18on save changes okay so uh we'll just click save now again so that's the text widget there uh so
09:27if
09:27we go back to page properties now again of the cms page we'll add in another one now as well
09:32so if we
09:32scroll down to the widget loader we'll just click this drop down here we'll start off with the banner
09:37image now again uh we'll click add widget and the banner gets added to the widget loader here and it
09:43gets
09:43a sign number two there so you can see down here uh it gets added down here banner image widget
09:48uh we'll
09:49click load available images and you can go through all your images and just pick out a banner image
09:56if you want so um go with that one there so that gets added into the box up above here
10:02so you can give
10:02it a title if you want you can go you can click here to show subtitle and all that stuff
10:17next call to action we'll put in book now for this one book now and again you can add a
10:22link
10:22uh to it if you want um also you don't have to fill out these areas here you could have
10:27just added
10:28the banner image on its own and just add it to the layout so uh we'll just uh i'll just
10:33click save now
10:37and we'll scroll down and you can see it's after adding a banner image now and it's after adding the
10:42title subtitle text and book now so that's a nice widget you could use there uh again you don't have
10:48to push um the text over this if you don't want to uh you could just have an image on
10:53its own so
10:53that's the banner widget we'll go back to page properties now uh we'll scroll down to the widget
10:59loader and we'll move on to the next one again um it's nice to keep the pages kind of simple
11:04as well
11:05isn't it just yeah you don't want them too long or otherwise people get uh tired of scrolling yeah
11:11yeah um so again i could add another banner image if i wanted uh there's you could add in as
11:18many as
11:18you want down here but as you said you don't want the page too long uh so we'll leave it
11:22so next one
11:23is iframe so we click add iframe add widget sorry and it's after adding the iframe which is the bottom
11:30there so an iframe can be used for a map or for a youtube video or something like that um
11:35so right
11:37now i don't have a link handy so but i saw that on your location page we were using do
11:42you remember we
11:42were using the quickbook iframe um quick so what i'll do i'll just i'll steal the link from this page
11:49uh so what i'll do i'll go into the page properties of this page and we'll find where the iframe
11:54was
11:54added on this page so you can see it's been added here iframe link so i'll do i'll just copy
11:59this
12:00i'll just copy that there that's like a web page is it uh yeah so we created the um the
12:08map in
12:09google maps um so so and we uh exported the the embed code for the iframe so that that's just
12:17the
12:17code there so we'll just hit save now uh but if we scroll down and you can see it's after
12:24adding the
12:24the map into a smaller into the the the iframe widget there um so you can do the same with
12:31a
12:31youtube video um you if you can there's a you can click share and embed and it will give you
12:37the iframe
12:38uh code for the video yeah so that's the iframe there so um we'll just go back to page properties
12:46now
12:46we'll move on to the next one uh scroll down to the widget loader again and we'll move on to
12:54image
12:55and text so we'll click add widget now again so that gets added to the bottom again you can reorder
13:01these if you want so you can i you can x them off as well you can put them anywhere
13:07you want really
13:07you can reorder using that icon there but we'll scroll down now we'll go to the uh image and text
13:14widget we'll click load available images you can see you can have a max of 20 of these but um
13:19they're
13:19quite this is a quite large widget so i wouldn't recommend having that that many of them in there
13:24so we'll just add in two now and i'll show you how what the size of them just uh pick
13:29that image there
13:31and we'll go with this image here as well so you can see uh it's after adding those two images
13:38into
13:38our box up here so we'll give it a title sorry i click the button title
13:50subtitle text
13:53and call to action uh we'll go with book now for this one
13:57now again we can add an alt tag if you want uh we can add a link
14:01uh i'll just link it to any random page on the site
14:05uh target uh for we'll leave it on normal but again if it's to an external we'll put on new
14:11window
14:11uh we can put the date range as well and that's the that's that one down there so we'll just
14:16move
14:16on to this one and i'll just fill in this one quickly we'll throw in some random text
14:21yeah and i'll just hit save now so that's two images added to the image text widget
14:28so if we scroll down now so this is the image text widget here so you can see the image
14:33we selected the
14:33first one appears on the left hand side followed by the text we added in uh so title subtitle uh
14:39text and
14:40book now and the next one in the list uh it puts the image on the right hand side with
14:44the text on
14:45the left hand side so if we added in a third one it would add in the image on the
14:48left hand side down
14:49here so uh you can see this yeah if you didn't add in any text would they would they will
14:57just stay
14:57underneath that one i i'll show you now um i'd imagine the white part there would just stay a blank
15:04um scroll down now uh so for this one you you'll have to add in the add into it's not
15:12like the
15:12banner one um it probably wouldn't look right without text we'll just take these away and we'll
15:18see what happens we'll hit save so you get a warning that the title is too short you need to
15:26put some um
15:27some text into this one so so for this one uh you need you need to add some text it
15:34otherwise it
15:35wouldn't wouldn't work right so you can see it just says title right now um whereas the banner earlier
15:41on you could have left this stuff out because it doesn't need it uh it's just the way this widget
15:46works uh so you can see we have two in in there at the moment um you have a max
15:50of 20 it is so but it
15:52would make the page very long if you add a load of those so that's the image and text widget
15:57uh so
15:58we'll just go back to page properties we'll move on to the next one now we'll scroll down through it
16:04down to the widget loader and the next one is image grid uh we'll click load available images
16:12and image grids after being added to the bottom of the page so um the thing with the image grid
16:19is
16:19it's probably the one you have to think about the most i'll just go back to the home page and
16:22i'll
16:22show you uh so the image grid so this is the image grid here so the all these images are
16:28uh
16:29like one call their their size is one call so you can see this is like one column
16:34a one column one column but if i scroll down a little further i think you have more down here
16:39so
16:39this is also the image grid so this is a one column image and it's followed by a two column
16:44image
16:45as well you if you see that there so you need to get the layout correct when um yeah well
16:51when you're
16:51using the image grid so i'll just show you that so you can see this is one call one call
16:56one call
16:56and it adds up to three it has to be three columns wide for for each row yeah so uh
17:03the thing is if
17:04you're working on this um you might put it together and it might not look right so you just need
17:08to play
17:08around with it to get it right but what i'd recommend is uh you'd uh get the layout correct
17:13first and then you add in the text so what we'll do uh we'll make a row with three one
17:19column images
17:20so you can see all these images have one call in front of them so these are more square square
17:24images
17:24so we'll add in three of these to fill up the first row
17:29so that's three of them added in there so that's the first row filled in
17:32uh so we'll move on to uh the second row now and i'll add in a two column image so
17:38you can see
17:39this is more rectangular and because uh we're on a new row and we just added in a two column
17:45um we need to fill up that row and to fill it up we need to add in a one
17:49column as well so that
17:50fill up uh fill the tree columns yeah and so lastly you also have a tree column one so this
17:57is more like
17:58just like a banner one so we'll just add this one here and we'll see how that looks now we'll
18:03just
18:03hit save i won't add in any text yet that's after being added to the bottom of our list so
18:09you can
18:10see here uh this is it here so this is one call one call one call that fills up the
18:15first row the next
18:17one is a two column image here followed by a one column image and the last one is three column
18:24image here
18:25yeah so you just need to work on that to make it look right so i'll show you what it
18:30would happen if
18:30uh you put them in incorrectly uh as well so we'll just scroll down to the bottom and
18:37you cannot push uh two two column images beside each other i'll just add those in there did they get
18:43added
18:45yeah they got added i'll just hit save
18:49scroll down now again you can see there's the three column image i added a two column and there's
18:56only room for a one column here uh so it leaves a blank space there so if you see something
19:01like
19:01that it just means you're after putting two two columns beside each other um so the best thing to
19:07do is just play with it first get the layout correct and then add in your text so uh we'll
19:12go back now we'll
19:13remove those two images that are putting it off and we'll add in some text to this scroll down again
19:22go down to the bottom here and we will remove these and we'll add in some text now we'll go
19:28back
19:28up to the very top one so you can see uh with the very first one it has uh no
19:32text in this display
19:33option this is for the image grid widget so no text uh we'll just put in a call to action
19:38um
19:40now it won't now and you can also add a link so we'll link it to the booking engine
19:47so that's the that one done we'll move on to the next one that we'll scroll down
19:50uh we'll change this one to title only so when i click that we get a few more options
20:01title only and we'll add in info to this one and we'll link it to a random page there uh
20:10the next
20:10we'll move on to the next one now we'll show you the next option so this one all text on
20:14hover
20:20however uh we can add a subtitle
20:24some text yeah that'll do um
20:31look now and we'll add we can add a link as well to a random page and so we'll scroll
20:37down to the next
20:38one we're on to the two column image now so this next row as well uh we'll add always display
20:43text on
20:43this one we'll go
20:51display text uh subtitle
20:59right info for this one
21:03that's the four options you have available so you you can see uh in the previous ones there we use
21:07no
21:07text title only all text on hover and always display text uh we'll just hit save now and we'll see
21:13how
21:16that looks
21:16scroll down uh that's at the very bottom uh so you can see here the very first one uh it
21:22was no text
21:23uh display no text the second one is title only but you can see the the image we use isn't
21:28really
21:28suitable for it's not it's not showing the the full thing so that's title only the next one is all
21:34text
21:34on hover so you can see it there or i spelled it wrong here uh so if i put the
21:39mouse over it here
21:40uh it gives me more option it gives me the subtitle and the the text there and the book now
21:45so if i
21:45remove it uh it just does that there so the next one was always display text so it always shows
21:52that
21:52one it doesn't matter if my mouse is on it or not um so that's that's the the four options
21:57you have
21:57available with it there uh so i think uh the way you're using it at the moment is uh like
22:03you like
22:03to uh the design of the site is use a two column image followed by a one column image here
22:09with a
22:09bit of text on it here um so you might not know uh the name of the yellow or the
22:15blue background there
22:16so what we can do uh we can go into the page properties we're on the home page now again
22:22and we'll just what we'll do we'll find that uh we'll go to the widget loader so we can see
22:27i think
22:28it was the second image grid we were looking at so it's number four we'll just scroll down to here
22:33number four so you can see here there's the blue panel there so you can see it's called um blue
22:39or beach
22:40beach blocks dark blue so if i if you are creating one of these and if you just type in
22:50uh sorry my spelling's gone yeah block so uh i just typed in block there so it's after filtering
22:55out all of them so i think it's after it'll give you all the options here for uh the colored
23:01backgrounds
23:01that the guys have made for you yeah so they're the they're the options there um so that's that there
23:07um so we'll just go back to our cms training page i'll close off these that are not getting in
23:11the way
23:12uh so we're back to cms training page here so um so that's the uh image grid widget is that
23:18one okay
23:19george yeah that's fine yeah so there's a just a bit of thinking with that one uh when you're
23:23setting it up uh yeah it's not it's not too bad yeah okay so we'll go to page properties now
23:31and we'll move on to the next uh widget now again okay so the next one is parallax we'll click
23:40add
23:40widget here if you remember uh there was a parallax on your home page i'll show you again anyway so
23:48we'll just come down to parallax image you can have a max of five of these so you can have
23:52more than one
23:52of these inside in this parallax um so i'll just add in this one here and another one here there
24:00you go
24:00so i'll just add in some text it's like the banner you can you can add in uh all this
24:06uh stuff here you
24:07you don't have to either next call to action more info info and you can link it to a rate
24:17if you want
24:18so uh we actually added in two there so i'll just leave the second one blank and we'll just hit
24:22save
24:25okay cool so that's after been added to the bottom of the page uh so if you scroll down through
24:30so here's
24:31the parallax here it's full width you can see it says title subtitle text more info and if i keep
24:36scrolling now you also have the second images scrolls through the second image as well you can use that
24:41effect if you want or you could just use one if you if you prefer that one uh there's also
24:45an option with
24:46the the parallax if we go back to the page properties uh if the if the image you picked
24:53isn't suitable for the text you can actually darken it uh this is only available for the the parallax uh
24:59so we just click enable background for text it's a it's a little check box at the bottom of the
25:04image
25:04when you add it just click save now and you can see it will just darken the image a little
25:09bit on the
25:09parallax down here so you can see it's after darkening that an awful lot the text stands out a bit
25:14more
25:15uh that's that's for the parallax there uh so that's that one there uh we'll go back to page
25:21properties now and we'll move on to the next widget now we'll scroll down here's the widget loader and
25:29we have the promotions widget here we'll just click add widget now and scroll down to the bottom now
25:39and you can see this is the promotion widget down here i think you're using this on the site at
25:45the
25:45moment so we'll just click uh so you can see there's a few images here if we scroll down through
25:50so there's
25:50a few versions there's a small image um there's a large tile and
26:02there's large here as well so what i'm going to do um the promotion widget it takes a bit of
26:07playing
26:08around to get it right so what i'm going to do i'm just going to look at what what we've
26:11done on
26:12your site at the moment you scroll down through here so this is the way you have it laid out
26:18at
26:18the moment so i think uh yeah go back here now uh we'll scroll down to the page properly sorry
26:24i'm all
26:25over the place now i think you're using an image uh the rectangle the large ones here for your promotion
26:29ones um so i'll just pick out um one of these here i'll add in a few two two of
26:37those there uh so we'll
26:38give it a title subtitle so you can see these uh the way we add these widgets it's fairly repetitive
26:48once you get used to one um yeah um it's pretty much the same yeah
26:57look now uh i will link it to this page here and so i'll just add in some
27:06so many texts here
27:11um so there's a there's also a character limit on most of these widgets uh it's not popping up for
27:18me at the moment but uh it's normally around 40 for titles uh 40 for subtitles and about 200 for
27:24description because it won't all fit in the the uh the area um so just save now we'll see how
27:31that looks
27:35scroll down and it's after getting added to the bottom so you can see this is the promotion widget
27:40and yes it's different from the the look you had on the on the on the on the home page
27:45so there's
27:46a few options with this so we'll just what we'll do we'll actually we'll go back to page properties
27:50now again this property now again and we'll scroll down it's the very bottom and in under promotion
27:58which there's advanced options here so right now it's on list with text so what we're going to do
28:03we're going to change it to tile with text all right just change the size of it really into it
28:08yeah it just it changes layout so it'll make it into a box view now kind of if we scroll
28:13down so it's
28:14after changing it more what it looks like on the home page so there's actually another option you have
28:21available available i think as well doing what no you did ask you didn't you yeah yeah i didn't
28:30know this is where they're going to get it at nine o'clock at night oh yeah sorry ah you're
28:36grand there
28:36uh so um there's a section a second option the second option with the promotion widget so what i'll do
28:42i'll just leave the one we have done the way it is and i'll add in a second one now
28:45uh so we click
28:47add widget and page reloads and it's after adding a second one to the bottom so what we'll do this
28:53time um so for this one we used uh the large images for this one we've used large tile just
29:00scroll down
29:01through this and i'll pick out uh this one here uh so i'll just uh throw in some dummy text
29:07as well
29:10our price one two three that's more info and that will do there so uh in under here advanced options
29:19so we've seen lists with text uh tile with text and now we'll try large tile without text
29:28see how that looks roll down through it and you can see it's after adding it like that it's after
29:35giving it a yellow border i'm not sure uh some of them uh won't look correct sometimes uh so you
29:41you might want to just pick out the best one um yeah we'll just we'll go back to page properties
29:45now
29:45again and there's just one more option that might look better than that um we'll just have a look now
29:51and the last option is circular large image without text so we'll just click save this should looks better
30:00so it's after that that looks a bit tidier now it's got like a circular image yeah yeah so uh
30:07so i'll
30:08leave that there um you can always come into the cms training page and have a look and play around
30:12with
30:12it if you if you add more will they come on either side of that as well uh yeah so
30:18if i added in another
30:19one it would pop in here so i think three three fits in a row as well yeah yeah that's
30:26cool okay so we'll
30:27go back to the page properties now and i think there's just one more widget for us to go through
30:34and it's just a title widget here at the bottom click add widget
30:41we'll scroll down now again and refresh the page so you can see the page gets kind of fairly long
30:45when
30:45you add in a lot of things so we'll just move that up there so title above the promotions uh
30:50scroll down
30:51here so uh we'll just call it give it title and sub title and we'll just hit save okay so
31:00the title
31:00widget is like the is this same as this here but you can add it in down further along the
31:05page yeah
31:07so uh yeah so i threw it in there so there is title and so so you could just add
31:12in extra titles as you
31:13go down through the page sorry i had to get a drink of water there all right yeah okay so
31:23that's uh
31:23they're all the widgets there so you've got the the different types of promotion widgets here so
31:28you've got the circular one here you've got the large image which um uh with uh with that option there
31:36you've got the title widget there uh we've also got the parallax here uh here's the image grid widget
31:43so you have the the options with title only all text on hover uh always display text and you don't
31:49have to display any text on some of them as well leave them blank uh so this is the banner
31:54widget as
31:55well uh so there's the iframe we went through the iframe there um so this is the image and text
32:01widget
32:01widget and there's the text widget there uh as well so you've loads to play around with there uh
32:08uh George um were they okay the widgets yeah no they're fine yeah okay cool so um that's all the
32:15widgets there
32:15so if we go back now so uh we've covered so again if you want to create a page you
32:21just need to find
32:23a page you like click clone and you can just edit the widgets however you want so uh say for
32:29things to do
32:32um you need to update uh these here so this is image grid uh i can tell by looking at
32:37it i'm looking
32:38um yeah you need to edit these you need to change the link for kayaking you just come into this
32:42page
32:43you'll hit page properties you'll scroll down through the page um you'll see the widget loader so you can
32:50see this one only has text and a image grid you can scroll down through here come into this box
32:55here
32:55you can see it says kayaking here you can update the link there and just hit save so that's how
32:59you'd
33:00um make changes to your site there so that's the image grid uh that's the the widgets that's cloning
33:07a page yeah um so i think we that's i think we've covered most things you know how to change
33:14the
33:14sequencer image it's in the page properties as well and you know how to change the rates down here as
33:18well
33:19uh so what we'll do now is uh we'll move on to the the structure uh so you can see
33:27structure over
33:28here on the left hand side um is over here so this is just kind of an overview uh so
33:32you can actually
33:33edit the positions of these pages um this just gives you an overview and links it lets you uh edit
33:41all the pages but you can't actually change the layout so if you want to change the change uh you
33:46want
33:46to move accommodations over here or move things to do here or put contact in the footer or something like
33:52that uh you need to go to structure so structure looks very similar we're in structure right now
33:57uh so you can see it just kind of lists lists them the exact same so i can minus this
34:02as well
34:02and it gives me the footer menus here uh so you can see here's cms training uh so say you
34:08want to
34:09remove cms training from the uh from the main nav here uh so i don't want it to be in
34:15under cms training
34:16anymore uh you'll have to do it in structure so you need to come into you can see it's enabled
34:21at
34:21the moment you need you can go into properties yeah and this is the edit navigation item so you
34:26could actually change the text that's shown as well so you could change the name of it there so i
34:30could change it something else if i want uh you could change what it links to if you want so
34:34but for
34:35now we just want to remove it from from the uh from the site so we'll just click disabled we'll
34:40hit submit
34:42it and it's after turning right there now uh so if we go back to the site we just refresh
34:47it there
34:49uh you can see it's no longer available as a drop down in under the home there it's after being
34:55removed uh so then again um so you remember earlier on we had um standalone pages in the overview page
35:03so down here uh these pages aren't being used in the main navigation oh yeah uh yeah so they're not
35:10linkedin navigate so you can see my cms training pages after going in there because it's not in
35:14the navigation anymore so um if i wanted to add cms training back onto the back onto the the site
35:22i
35:22would come back into structure and uh just go into properties and enable it but say we have a page
35:29that's in the standalone pages down here that's never been up here uh and you need to add it in
35:35what
35:35you need to do is click um because it's it's never been added you there's no option for you to
35:40click enable for it up here so what you need to do is click add item so you're after you're
35:45after
35:46being brought into this and this is similar to what you saw earlier on so um say you can click
35:53uh
35:53add so you need to find the page that's in the standalone pages here you could need to pick it
35:57out
35:57say uh maybe it's the events one there you need to give it a type a title there events and
36:04you just
36:05need to pick where it needs to go in the list as well um so what you could also do
36:09what might be
36:10handy for you is um uh you could just click um i'll just put in test here so i'll remove
36:16it after
36:17um you could also just leave it on main menu like that if you if you're struggling to try and
36:22pick
36:22where you want it to go here you could just leave it on main menu and we'll put it to
36:26status enabled and
36:27we'll hit submit and you can see it's after being added in there so if i go to the main
36:33site and just
36:33refresh it's after being added in there but the reason we did that now so um you can also just
36:39click
36:40sort here so start if you're going to start here then you can just click and drag and put it
36:45where you
36:45want then yeah yeah if you want so uh so i'll just leave it in there it's after going into
36:50accommodation
36:51there uh we'll just hit save now we'll go back to the main site we'll reload and you can see
36:58uh events
36:59tests after going into so sort might be um a handy way for you to do it if you want
37:03to change so also
37:04also again you can just change them around like this if you want you can move them around uh put
37:11them
37:11wherever you want um so i won't hit save now because i'm after messing that up a bit for you
37:15um if you do make a mistake you can just refresh the page and it will go back to the
37:20way it was
37:20and then when you're finally happy with it you can just hit save down here
37:24so what i'll do now i'll just remove uh events test uh we'll disable that now again we'll remove it
37:30because you won't want it in there and that's gone from that there now as well so that is the
37:36structure
37:37um is that okay george if you have any questions on that yeah so so that might get take a
37:43bit of getting
37:43used to um but once you play around with it a bit yeah so uh the next thing now is
37:49the
37:49file manager
37:53so over here on the left hand side we're going to file manager
37:58takes a bit to load because it's where we keep all the images
38:01all right yeah so this is the file manager here so you could ignore this just for a second we'll
38:07scroll down through here and you can see these are all um our folders um that are being used on
38:13the site so you can you can see uh the the ones highlighted in blue have uh images inside them
38:18so i can click on the blue links and it will open it up and if you hover your mouse
38:23over it will give
38:23you a little preview after a couple of seconds do you get a little preview of all the images you
38:28have
38:28on the site um so so you see uh all these folders so this is called slide images folder this
38:34is rates
38:34so you have a large style you also have image grid so um you got one call two call three
38:41call and banner
38:42images so the banner images folder is used for the banner widget uh the one call folder is used for
38:49the
38:49image uh grid so um so that's uh all the different sizes there so what we'd recommend is um the
38:57slide
38:57images down here is the largest file we have a restriction on it so if you upload to this folder
39:02it will also go into the rest of the folders up here you'll just have to crop the sizes
39:07yeah and if that makes sense so um so this is the slide images so these are the the image
39:13sequencer
39:14images these are the largest ones here so what i'll do i'll just go through a few things that are
39:21inside in the file manager so what you can do you can you can actually delete any of the images
39:26you want
39:26from the file manager maybe you want to do a bit of tidy up but uh you need to be
39:30careful that image
39:31isn't being used on the site so there's a little tick here that tells you if it's being used on
39:36the
39:36site now if you hover over it it will give you um it will say what pages it's being used
39:42on so you can
39:42see those little so you don't want to delete any of those there uh you can see the file size
39:47uh you can
39:48see the dimensions of it um so that's kind of it in the file manager so uh just don't delete
39:54any images
39:55that have a tick uh so it's not being deleted uh we'll just close up that folder now and i
40:01think
40:02that i'll just show you how to upload an image now so if we come back up to the top
40:05here so it select
40:06files for folder so we want to click this drop down and as i said we want to upload to
40:11the slide images
40:13folder here uh so because there's a restriction if we upload to this one it will upload to the rest
40:18of
40:18uh so we'll click slide images folder here and we'll just click add files and it will open up my
40:24desktop and i should have a christmas image here that we can just upload uh so we'll just click open
40:31and it uploads so now um it gives me i need to do some cropping so uh it gives it
40:38gives you an option
40:39to crop for every folder every other folder so we'll just click crop here on the right hand side
40:44and you can see here it uh it's going to keep the highlighted area and it's going to remove the
40:50darker area so if we just move this around and try and pick a spot that's we're happy with for
40:54that
40:54image um and we'll just click crop and save and not every image is going to be suited for um
40:59for each
41:00type but like so this is perfect here so that's call one uh so we're on to call two now
41:07this one will
41:07load so we'll just pick here uh crop and save and so that's how the uh crop tool works there
41:15you just
41:15need to move it uh and it will keep the highlighted area there so um there's actually there's no need
41:22for me to go through all of these um uh because it's fairly redundant um so i'll just click cancel
41:28now
41:28and i'll just uh delete uh the rest of the images because uh the crop tool is fairly straightforward
41:34once you get used to it so we'll just click delete those so that is the file manager so that's
41:40how
41:40you'd upload images um so if you yeah so the best way is to upload to the slide images folder
41:47and it
41:47will go into the rest of them and you'll have a bit of cropping to do then and that's how
41:51you'd upload
41:52images to the to the site uh so if we go back to the overview page now so uh the
42:00gallery page so if
42:01we want to add images to the gallery page here so you can see these are all the images you
42:05have in
42:05there at the moment uh so you could just come into the gallery page again and we'll just hit page
42:09properties and we'll scroll down and it's like the image sequencer it's very similar so you can see
42:17you have a max of 40 of these right now there's 32 uh these are all your images so if
42:21you want to
42:22reorder them you can just click and drag again uh like we did earlier on uh these are all the
42:26images at
42:27moment um if you want to add in a few more you click load available images and you can pick
42:33out
42:33a few here you can see the grayed out ones they've been used already um so they're already in there
42:38so
42:38there's a few grayed out one there so they're already in there so you can add in a few images
42:43here using
42:44the gallery there and also when you've not done you just need to scroll down and hit save um save
42:50your
42:50changes okay don't do that now uh so we'll just go back to the overview page and i think we're
42:58almost there now george so uh there's a few options on mobile so if i change this to mobile view
43:06just refresh so you can see uh right now i'd say these uh if you want to use these you
43:11need to add
43:11these in uh so right now it has test one test two test three that's four to five and at
43:17the bottom
43:17you've got a book now location contact us um so what i'll do i'll show you how to update these
43:24so we'll come back you need to go back to the overview page and you need to come in to
43:28change
43:29options here on the left hand side you need to hit this plus here and we'll just scroll down through
43:35this
43:35uh here and you'll come to the mobile options here so mobile menu for standard so you can see this
43:41is test
43:41one test two test three uh test four test five so these uh those options there this is kind of
43:48the
43:48the tab view uh that's on the site so uh we'll click change options so um i'd say they're just
43:55in
43:55there to show what they look like but you can take away take away later on adding some links maybe
44:00uh
44:01maybe link to the an offer uh to the gallery or to other pages you know pages you want to
44:08highlight
44:08on the site uh so what we'll do now i'll just edit this put in book now there um so
44:15the thing with
44:16this one uh you um there's only one available image at the moment uh for that uh so you can
44:23see this one
44:24has a promote tick and this one doesn't so uh what that is when you click the promote tick it
44:29just
44:30changes that to blue and it highlights it a bit more you see that there uh so if i just
44:36change that to
44:36book now if we just hit save uh there we'll just refresh this page now it's after changing that to
44:44book now as well so you could add in multiple ones of these uh if you like we go back
44:48here it's uh it's
44:49after closing off the change options box we'll scroll down through here uh so we we could actually add
44:55more by just clicking add items to this as well so when you're working on this later on if there's
44:59you need some more or you want to remove them you just uh click the x there and remove those
45:05there
45:06uh okay so the next one uh so this this uh tab thing here this only appears on the home
45:12page
45:13uh this one here and you can see it just appears above the the first bit of content and this
45:18is
45:18what the page will look like on mobile as you scroll through it uh so the kind of the bar
45:24down here at
45:24the bottom this will appear on every page so there's a book now location contact us so if we go
45:29back to
45:29change options now we just scroll down a little further and we go to uh mobile buttons for standard so
45:35you
45:35see book now location contact us uh so there's a max of four items with this because you're limited
45:41with space on mobile uh we'll just click add item here so you have book now location contact us and
45:47i'll just uh i'll put in gallery gallery link again so we'll use this drop down here and we'll link
45:55it
45:55to your gallery page and you can see you have um an option to pick an icon so you four
46:00options so right
46:02now you've got check gallery location and contact so they're the main ones that get used on mobile
46:06so we'll just use the gallery one and we'll promote this one as well there's also a promote option on
46:12this i'll hit save now we'll go back to this tab and we'll refresh so you can see down here
46:19so it's
46:20after adding in gallery here on the right hand side so you can see there your four icons available you
46:24have a check location one a call one and this one here so and we also put that one to
46:29promote
46:29so it's highlighted as well um so you what you could also do you could we'll remove gallery now as
46:36well but you you could only just you can have one button there as well you could just have one
46:40big book
46:40now button if you want to as well uh so you can play around with it and see how it
46:44looks uh so what i'll
46:46do i'll just remove that gallery button there so we'll scroll down to the bottom here we'll just hit
46:52the x there and you can see it's using those at the moment we'll just click save
47:00refresh the page and it's back to the way we got it there so um i think that's uh that's
47:08everything now george uh how was that have you any questions or um i think uh you've a few changes
47:16to do i think before it goes live i think or something but i think we covered everything to
47:20help you do that yeah uh yeah so um so what i'll do i'll uh we can i'll stop the
47:27recording now and i'll
47:27send on the two recordings that we did and you can watch back over it and if you want you
47:33can um
47:34you can use this search box uh you can play around with the cms training page as well and just
47:38do
47:38test one if you want to practice on this one uh if you like uh so i think that's it
47:44uh george uh
47:47stopped recording now and
Comments