Transcript

00:00 I really hit the bullseye with this
00:02 target update hey guys Joe here and
00:14 today I'm really excited to introduce
00:15 you to target 2.0 it is a really
00:19 powerful wonderful update to a classic
00:22 stack and I'm really excited to say that
00:25 all existing users can be free update
00:27 for everyone and so everyone's gonna be
00:30 able to enjoy the amazing new features
00:32 in target - tada
00:33 now I started from scratch with target
00:36 and I really wanted to reevaluate how
00:39 the stack was used and I wanted to make
00:41 it easier so I think I nailed it this
00:44 stack is not only easier to use it has a
00:46 lot more features and let's dive in and
00:49 see exactly all the really cool amazing
00:52 things that we can do now so here we are
00:54 inside the target demo file that now
00:56 ships with target stack and this demo
00:59 file I put a lot of work and effort into
01:01 this to really help you detail to
01:03 understand everything and so what you'll
01:05 notice is if you hopefully you're using
01:06 my free pen stack and I've used pen to
01:09 really take detailed notes about each
01:11 and every implementation of target to
01:14 kind of give you an idea of what's going
01:16 on with this stack how to configure it
01:18 and do everything so this demo file is a
01:21 really great resource for learning how
01:23 to use target so what we'll notice if
01:26 loop is when we had target to the page
01:29 it looks a lot different now we see that
01:32 we have two drop zone areas we have
01:34 background content and the target
01:36 content and essentially what this does
01:38 is that really allows us a simpler way
01:42 of getting content and targeting above
01:44 other content so what I've done is I've
01:46 added an image to the background content
01:48 and then in the target content have
01:50 added a header now by default what
01:52 happens is target will position this on
01:54 top of the image and it will Center it
01:56 for us and if we preview you'll see that
01:59 out of the box target has done exactly
02:01 what I wanted and I just wanted a simple
02:03 header on top of eye image that's
02:05 exactly what target does this version at
02:08 target has a lot of pre-built position
02:10 settings for all the most commonly used
02:13 positions that you're gonna want to use
02:15 with target so we saw how easy it was to
02:17 Center our text on top of an image and
02:20 then here we can use those custom
02:21 position settings that I talked about
02:23 earlier or you can actually choose the
02:24 exact position that you want your
02:26 content to be overlaid on top of this
02:28 image and you can add as many of these
02:31 as you want here's an example where I
02:33 have six different things overlaid we
02:35 have five points and then I have this
02:37 text that's overlaid at a specific
02:39 location and it's also even rotated so
02:42 see target really gives us a lot of
02:44 flexibility to position our content
02:46 exactly where we want in our layouts now
02:50 here's an example of how we can use
02:51 targets pin to location settings to
02:54 really pin our content to the edge of
02:57 the browsers so here at the top we
02:59 pinning a full width content to the top
03:02 here we're actually pinning stuff to the
03:04 sides of the of the browser and we could
03:06 also pin at the bottom if you notice
03:08 this example also has a shadow to go
03:10 even further if you use these pin
03:12 settings we actually have hide on scroll
03:15 enabled and target as well so when you
03:17 scroll down the page your target content
03:19 can can actually be hidden and go away
03:21 from the content and when we start
03:23 scrolling back up it comes back
03:30 cool targets new shift options allow you
03:33 to shift content to overlay it on top of
03:36 your other content so here an example of
03:39 this header and image I'm actually
03:41 shifting a piece of content up so that
03:43 overlays the image by half this is a
03:47 very popular layout that we've seen all
03:49 across the web and it couldn't be easier
03:51 to accomplish with target
03:55 target's new float option is really
03:57 great and that allows you to float fixed
04:00 width or variable width content so that
04:03 it goes right up next to each other this
04:05 works really great for buttons and
04:07 social sharing links target now also
04:10 integrates directly with call-to-action
04:12 so that you can actually display your
04:14 target content has a call to action
04:16 trigger you can display your target
04:19 content based on a call to action
04:21 trigger in this example we're actually
04:23 just displaying the target on page load
04:25 we have a lot of different situations
04:27 and you know flexibility with
04:30 call-to-action to really launch and
04:32 display specialized content under
04:36 certain situations using call-to-action
04:38 now targets conditional settings are
04:40 really powerful because they allow us to
04:43 only target our content under certain
04:45 situations in this example here we see
04:48 that we have a target pinned to the
04:49 bottom of the browser but it's only
04:51 pinned to the bottom because the content
04:53 of the actual webpage is smaller than
04:56 the height of the browser window
05:02 if we shrink the height of the browser
05:04 window you'll notice that target isn't
05:06 there and the reason for that is it is
05:08 now a part of the page content because
05:10 this is actually an okay thing now if
05:13 you've ever used my video wall stack
05:15 you'll notice that it is a really great
05:17 feature for when you the video Scrolls
05:19 out of the page you can actually just
05:21 dock it onto the side of the browser
05:23 window we now have this feature built
05:25 directly into target and you can do this
05:27 with anything that you'd like
05:29 so as we notice as I scroll down the
05:31 page once this image Scrolls out of the
05:33 viewport we'll notice that it is
05:34 targeted and is now displayed on the
05:37 side of my window and as we scroll back
05:39 up you'll notice that the image is read
05:42 put back into position directly onto the
05:45 web page and lastly we have the ability
05:48 to customize our target positions based
05:51 on breakpoints so if I move to a mobile
05:54 layout will notice that the breakpoint
05:56 position changed from the top left to
05:58 the bottom right and then this target on
06:00 mobile went from below the actual title
06:04 of the page to be docked at the top of
06:06 the window so we have a lot of control
06:08 in terms of breakpoints on when to
06:10 target content and when not to so as you
06:13 see this is a really powerful update to
06:16 target it's a great update that gives us
06:18 a lot of new features and the stack is
06:20 so much easier to use now make sure you
06:23 check out the demo project and look at
06:24 all the notes that we've made inside
06:25 those pen stacks so you know exactly how
06:28 each and every demo example was done
06:31 this will really help you gain more
06:34 knowledge about how to use target in
06:36 various situations so that you can
06:38 really use a target to its fullest it
06:40 really is the best and most powerful
06:42 positioning tool out there especially
06:44 with this new version it gives us a lot
06:47 of power to do anything that we want
06:49 really really simply so take care I hope
06:52 you enjoyed target and we'll talk to you
06:53 soon bye
07:00 "}]