Transcript

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