0:07 hey everybody this is joe workman and
0:09 today we are going to look at the new
0:11 point stack now i'm pretty excited about
0:13 this because the point stack has been on
0:16 my list to do for like probably two
0:18 years
0:19 so um it is a responsive image map it
0:22 essentially it's a allows you to have an
0:24 image and you can overlay specific
0:26 interest points on top of it that you
0:28 can then hover over and get more
0:30 information or click on those points to
0:33 maybe open up a light box or take you to
0:36 a different web page or things of that
0:37 nature i'm really excited about it
0:39 because it's fully responsive so let's
0:41 go ahead and jump in and have a look
0:43 okay so here we have the points for
0:45 rapidweaver demo file and this file
0:47 ships with the stack on the disk image
0:50 and you can download it anytime from our
0:52 doc portal as well
0:54 and let's jump in and see exactly what
0:56 points can do for us as you see the
0:58 first example is a perfect example here
1:01 here i have a nice product layout with
1:03 various components where i can actually
1:05 define points where if i hover over
1:07 these points i can give detailed
1:10 information about that particular item
1:13 or you know data where that point is
1:15 displayed
1:16 now here's another great example on how
1:18 to use points and it's to really
1:20 accentuate a map and to highlight key
1:23 areas on a map
1:25 in this instance we have a map of brazil
1:27 and i've added points to all of the
1:29 cities
1:30 where
1:32 the world cup was played in 2014
1:35 and if you notice we have a different a
1:36 we have a different cursor when i hover
1:38 over these because the cursor is
1:40 compatible
1:41 the tooltip is different because it's
1:43 customizable
1:44 um the points not only are points but
1:47 they are actually font awesome they're
1:50 soccer balls so we can use font awesome
1:53 icons as well as you know just simple
1:55 circles
1:56 um and we'll notice here is i've
1:58 configured it to launch a light box
2:01 now this instance this is the reveal
2:03 light box that's built into my
2:04 foundation theme
2:06 but you can launch any sort of link
2:08 and as long as you have a lightbox stack
2:10 that supports launching from any link
2:12 you can launch it via points
2:16 and as you see you can actually launch a
2:18 different lightbox from every single
2:20 point
2:21 it's very cool
2:24 now in this last example uh we do have
2:26 another map and if you notice the pins
2:28 are a little bit different or the points
2:31 this is in this demo we're actually
2:32 using images
2:34 so i created this little pin image and i
2:38 dropped it into the stack and allows me
2:40 to use that same pin image for every
2:43 single location that i define
2:46 now if you'll notice we have a little
2:47 arrow and that's another cursor that's
2:49 available
2:51 and what's great with this example is if
2:52 i were to click this it actually takes
2:54 me to a wikipedia article about
2:58 uh africa in this instance
3:00 what's great is this is really a kind of
3:02 a new way where we can actually build
3:05 potentially a different navigation for
3:07 our website instead of a traditional
3:08 menu
3:11 so let's see how easy it is to configure
3:13 points here i've added a new point
3:15 stacked to the page
3:17 and i've added an image into the
3:18 settings
3:20 now what we want to do is let's start
3:22 adding points
3:24 so if we scroll down to the points
3:26 area here we'll notice that by default
3:29 one point is activated
3:31 and it's really easy to position that
3:33 point just simply move the sliders
3:35 around
3:36 until that dot is exactly where you want
3:39 it
3:40 so as you see you can see that dot
3:42 moving around
3:43 now the interest this is the point that
3:45 you actually want to add inside the tool
3:47 tip
3:49 and to add more points it's really
3:50 simple just simply click activate point
3:53 2
3:54 and then move the slider around for
3:55 where you want to locate point 2
3:58 and change the tool tip here and you can
4:00 do that and add up to 15 points
4:04 now let's jump in and look at the fully
4:05 implemented demo that we saw earlier
4:09 if you notice at the top you just drag
4:10 and drop your image in and then you can
4:12 define an alt tag for that image for seo
4:14 purposes
4:15 and then get to find the max width that
4:17 you want that image to grow to
4:19 remember this is fully responses so
4:21 we'll respond down and the points will
4:24 adjust to the exact location since
4:26 they're done via percentages
4:28 on all devices
4:30 now the the next group after the images
4:33 is tool tips
4:35 and if you notice at the top left hand
4:37 corner
4:39 is the sample tool tip that you're going
4:41 to be styling
4:43 so here you can change the text color
4:46 the size of the text
4:48 the size of the text adjusts the size of
4:50 the tool tip
4:52 so the larger your
4:53 text the larger the tooltip
4:56 and these use the rem responsive sizing
4:58 unit so that on mobile devices they're
5:01 slightly smaller than we see on desktops
5:04 you then choose your background
5:07 opacity and border uh radius so you can
5:10 have nice round and maybe a pill uh tool
5:13 tip like we see here
5:15 and lastly you can actually add a drop
5:17 shadow to it as well to kind of make it
5:19 pop up from the image as well if you'd
5:21 like the next thing we're gonna look at
5:22 is styling of points
5:24 and just as the others we have our size
5:26 which is responsive sizing
5:29 then you can have point and here you can
5:30 define whether or not you want a circle
5:33 an image
5:34 or no point at all
5:36 so the default of circle
5:38 allows us to have multiple styles we can
5:40 have just a solid point a solid circle
5:43 we can have a ring
5:46 we can have saturn which is basically a
5:48 solid point with a border around it and
5:51 you can configure the size of that ring
5:54 okay
5:55 and the default which is my absolute
5:57 favorite is the pulse
5:59 and as you see in the pulse effect we
6:01 have our dots and they kind of have a
6:04 nice pulsating effect to bring your
6:06 attention to them
6:07 and of course then you can configure the
6:09 core color and the accent color which is
6:11 the rings or the pulsate color
6:15 now if we were to choose image as you
6:17 see the settings change and all you do
6:18 is drag and drop the image that you want
6:21 to use
6:22 for
6:23 the point that's as simple as that
6:27 now none why would none be useful
6:31 point none is useful if you want to use
6:33 a font awesome icon
6:36 so if you would like to use a font
6:37 awesome icon
6:39 and only the icon you can go ahead and
6:42 select font awesome icons
6:45 choose the font awesome icon that you'd
6:46 like the size and color
6:49 now if you notice here the color is set
6:50 to white um if we were to change that to
6:52 say red
6:54 um we'll notice that the here we have
6:56 our font awesome icons
6:58 okay that are being used
7:01 now what's great is you if you actually
7:03 wanted to combine
7:04 um circles and icons you can do that as
7:08 well
7:09 so if we set our point to a circle
7:12 um here let's set our icon color back to
7:15 white okay
7:17 we'll notice now we have um icons with
7:21 circles
7:22 the last settings we have for point
7:24 style are the cursor type as you see we
7:26 have uh several different available
7:28 types for cursor
7:30 and if you want a question mark which is
7:32 the default or alias or pointer
7:35 there there are some great cursor
7:37 options in there
7:38 next is only show on hover so if you
7:41 only want to show the points when you
7:44 hover over the image
7:45 you would use this checkbox
7:48 next is to hide the points on mobile
7:50 maybe
7:51 you have an image that doesn't make
7:52 sense to really have
7:54 those points displayed on mobile so you
7:56 can hide them on mobile devices
7:59 and lastly if you want to add links to
8:02 your points you need to check this box
8:06 so if you check this box add links to
8:08 points
8:09 you could then go to every single point
8:12 and click on the link button and add a
8:15 different link for every single point
8:18 that is on your image
8:20 so that does it everybody that is the
8:22 point stack i hope you enjoy it um it
8:24 really is um a great thing especially
8:27 that it's responsive and it really
8:29 responds well for mobile devices all the
8:31 way up to desktops um
8:33 think out of the box with this again you
8:36 can use this to maybe create a different
8:38 style of navigation for your website
8:41 maybe you have a list of your products
8:42 where you can then you know your
8:43 customers can click each one or
8:45 something of that nature right so get
8:47 inventive i think
8:49 this stack can really add some unique
8:51 dynamics to your websites
8:53 so without further ado i hope you enjoy
8:55 it and i hope you do wonderful things
8:57 with it i can't wait to see them so have
9:00 a great day everybody i'll talk to you
9:01 later bye
9:16 you"}]