Transcript

00:08 hello everyone this is Joe workman and
00:10 today I'd like to introduce you to
00:11 compass compass is really a new way of
00:15 navigating through your rapidweaver
00:17 website it allows you to display
00:19 previous and next links to navigate
00:23 through all of the pages that are within
00:25 your rapidweaver navigation menu some
00:29 really great use cases for compass could
00:32 be if you're setting up a tutorial on
00:33 your website and each webpage is a
00:36 particular step within your tutorial
00:38 this way your customers can navigate
00:40 nicely with next and previous buttons
00:43 within your tutorial another great idea
00:47 is if you have a slider maybe you'd like
00:49 to simplify it and actually use compass
00:52 to navigate through different web pages
00:53 just as you would a slider compass is
00:58 really simple to use it allows you to
01:01 have image based or textual based
01:04 navigation and they are fully
01:06 customizable now compass ships with over
01:09 300 beautifully designed arrows that you
01:12 can use as the compass navigation and
01:15 later on in this video will actually
01:17 take some of these arrows and show you
01:19 how you could potentially customize them
01:20 to match maybe your themes coloring
01:22 scheme a little bit better so without
01:26 further ado let's go ahead and jump into
01:27 compass and see how it works in action
01:30 so let's look at our site navigation
01:32 here will notice at the top level we
01:35 have four different compass pages
01:36 compass compass page to page three and
01:39 page for now under compass page two we
01:44 also have some sub pages for page 2a 2b
01:47 and 2c now compass has two different
01:50 ways of navigating through your web
01:52 pages by default it stays within its own
01:56 page hierarchy so it'll go from compass
01:59 to compass to to compass 32 compass for
02:02 it will not dip into page 2a 2b or to
02:09 see or you could have compass break the
02:13 actual navigation hierarchy so that it
02:15 goes through and breaks down from page
22:18 2 a 2 2 beads to see then it will break
02:22 up into page 3 and then go on to page
02:25 four so let's show you the default
02:27 behavior we're going to go to compass
02:29 page 2 and will notice when compass page
02:32 2 comes we have a next link now there is
02:35 no previous link because we have told
02:38 compass not to break navigation so it
02:40 will not navigate back up to compass
02:43 page 2 but if we click next we will go
02:47 to page to be and you'll see that we
02:51 have both a next and previous links so
02:55 if we click previous we will go back to
02:57 page 2a and if we click next we will go
03:02 to page to see now once we're in page to
03:07 see you'll notice that there is no next
03:09 arrow there are only a previous arrow
03:11 that will now point back to page to be
03:18 now let's show the example of actually
03:21 breaking the page hierarchy so if I go
03:24 to this page to see let's go ahead and
03:27 go to compass and select break page nav
03:30 hierarchy will preview the page I will
03:34 notice that we now have next and
03:35 previous links the previous link as
03:38 before goes back to page to be and then
03:42 the next link now navigates to compass
03:45 page 3 I hope this nicely illustrates
03:50 how compass works and this sample
03:53 project is available for download when
03:56 you purchase compass so earlier I
03:59 promise we're going to show you how to
04:00 potentially customize these arrows so
04:03 let's go ahead and do that now what you
04:05 do is you select the arrow that you'd
04:07 like to add to your repertory of your
04:08 website then in the stacks Media Browser
04:11 you're going to go ahead and click on
04:12 show in finder and what this does is it
04:16 shows that image to you in finder now I
04:19 highly recommend that you do not modify
04:21 these files and what we need to do is we
04:23 need to create a copy so what we're
04:24 going to do is we're going to alt drag a
04:26 copy
04:26 that image to the desktop and then we're
04:30 then we're going to go ahead and open
04:31 that file on in our favorite image
04:34 editor so here I've opened that image in
04:37 my favorite editor called a corn there
04:40 are other great image editors out there
04:41 there's Pixelmator and photoshop if you
04:43 want to go all the way so let's just go
04:47 ahead and let's change this this arrow
04:49 to be blue so I'm going to go ahead and
04:52 use my magic wand tool I'm going to go
04:55 ahead and select as much of the black as
04:58 I can then we're going to hear will do
05:07 i'll do that color blue and then we're
05:11 going to go to our fill tool and we're
05:13 going to paint it in so as you see it's
05:18 not perfect i'm not going to go ahead
05:19 and fill in everything but as you see
05:22 really click quickly we've changed that
05:25 arrow from black to blue if we wanted to
05:30 go a little bit farther you can go ahead
05:32 and use the gradient tool maybe we add a
05:36 layer style and we add a drop shadow so
05:42 that there's actual drop shadow on that
05:44 particular arrow um you might want to
05:47 make your canvas a little larger for
05:48 that in this instance so that the error
05:50 doesn't get cut the shadow doesn't get
05:52 cut off but as you see it's it's really
05:56 simple since these arrows are black and
05:58 white um we it is you know pretty simple
06:02 for you if you know a little bit of
06:03 image editing to go ahead and customize
06:05 these arrows a little bit for your site
06:08 so once you finalize your arrows you
06:11 just go ahead and drag your arrows into
06:13 the stack and you're done I hope you
06:21 enjoy compass again it's a really great
06:23 new way of navigating through rec room
06:25 for website and having access to tons
06:28 tons i mean over 300 beautifully
06:31 designed arrows is a great benefit that
06:34 you can utilize on any of your rep
06:35 remover websites in any of your stacks
06:37 so i hope you enjoy this and
06:40 thank you very much everybody bye
06:48 I"}]