Navigating with Anchors – Web Design – Wix Tutorial

Navigating with Anchors – Web Design – Wix Tutorial


Hello! Anchors aweigh everybody! We are
talking about navigating websites with anchors. You know there are so many water illustrations when it comes to the Internet, right? Sometimes were
“surfing” the internet, or, I don’t know, my mind is kind of blank…but if you can
come up with other water analogies go ahead and put those in the comments. You know we’ve seen a lot of different illustrations and one of those is
anchors we’re gonna talk about using anchors. What is that exactly? That is
a tool that we use to navigate through websites. The old way was just doing
pages, but as web design started to become more unified and started to be
more of a one-page design with a very long scrolling, we had to start using
page anchors. So if you want to know how to use page anchors or you just want to
hang out and talk about web design that’ll be great.
We’re gonna get started right here. Let me know what you think about this
training. Give me some emotions, some hearts ,some some happy faces, some likes. Let me know in the comments what you think about page anchors. I’m also
curious how many of you out there know about page anchors or have used them
before? I like to kind of get a good idea of the audience and your
experience with this sort of tool. So I’m going to actually click on..so I could
see the chat here. We got Nikul with us. Hello thank you for joining us today.
If you guys are watching the replay go ahead and give me some emotion give me
some comments it all counts and I will try to get to those comments as soon as
possible. Let’s start talking about page anchors on today’s Tuesday training
let’s get started. Alright this template we’re using with Wix.com is actually the comedy template.
So I don’t know if you’ll think it’s funny, but maybe some of you are
comedians out there. Maybe you and your best friend just laugh so much.. Have you
ever sat around and thought “Hey we should do comedy together”?
Well this template’s for you. I also thought it was appropriate to use this
template because during the Super Bowl commercial Wix.com feature two very
famous comedians in their commercial. If you know which comedians I’m talking
about, let me know in the chat box. I want to see if you guys remember the Wix
commercial during the Super Bowl. Let me know who those two comedians were. yeah I’ll wait for that to kind of roll in here. If you don’t know me, or if you’re
just joining me, my name is Michael Wood I am the head web designer at Captivatim
Multimedia and Web Design and I’m also the head instructor for the
Webmaster Academy where I teach people from around the world how to create
stunning and professional websites without writing code. I do use Wix.com
but you’re welcome to use other platforms it’s fine. The design
principles I’m talking about still apply. Okay I’m just checking to see the
comments see if anybody recognizes the two comedians I don’t see anything yet
if you’re watching the replay let me know who those comedians are okay let’s
get into our training today. Let me just show you the website first. So
I’m going to do a preview and I’m in the wix.com editor. I’m going to scroll down,
and you’ll see he’s got this parallax effect right here. see the background is
moving but the shot kind of stays centered? And then they kind of get
covered by the background. So it’s a really nice parallax effect. This is a good one page design so this is where you would put “about us” Now
it’s okay if you’re not doing comedy This website design
could be for any product or service. You would just change the images, obviously.
So don’t think just because you’re not a comedian, you can’t use this template or
apply the design principles they’re pretty Universal I’m going to go down
and this is sort of a gallery of images and they also have a section of videos
and this is hosted with Wix video that allows you to do this tile or mosaic
pattern and the videos could be hosted on Vimeo YouTube or hosted with Wix comm
themselves with a video plan there they also sell merchandise so some of you
want to sell merchandise for your show or just ecommerce that is built into
this website as well and then at the end is sort of this follow us a section here
and then we have the footer down at the bottom if you have questions about what
should go in the footer what social media icons you should use how to set up
ecommerce how to do videos make sure you check us out at WWF as our Academy the
online and I teach you how to do that today we’re just talking about page
anchors now up here at the navigation bar take a look at this navigation bar I
have what you would normally understand as pages but when I click on about the
problem is this is only one page this is a one page design now you might ask why
is it a one page design one of the advantages of one page is it’s going to
be ready for mobile and ready for devices like iPads because typically
people will use a mobile phone or an iPad and what do they do they scroll
right they use their finger and they just kind of scroll through and so
building your site as a long one pager just makes sense across many devices at
the same time if someone is on their desktop they understand how to use menus
that top so what we’re going to do is instead
of creating pages we’re gonna create something called anchors so an anchor is
a designated point on the website that we will refer to and this is for
navigation purposes we can build it into the navigation bar up above or we can
actually create a button and I’m going to go through both examples during this
training down here you see the call to action button and we talked about this
in our 101 class a call to action is the main thing you want your customers to do
now we know that there are many things they could do they could subscribe to a
newsletter they can buy merchandise watch the videos you know or maybe learn
more about you there’s a lot of things they could do but the one thing that
Robert and Alan decided the fictional Robert and Alan decided is they want
people to watch their videos because if really that’s a good plan because if
they watch the video people will laugh they’ll see they’re funny and then
they’re their business their service their entertainment service will sell
itself because you’re gonna think they’re so funny so if you could just
watch their video though they will be in business
so their call to action is to watch us now when I click on this button nothing
happens that’s intentional because we’re gonna use a page anchor to make this
button do what we want let’s go back to the editor now I’m using the Wix editor
but page anchors exist in almost all the platforms
I know Adobe Muse absolutely does use page anchors it’s a common navigation
tool so what we’re going to do we’re going to click on the Add button and
it’s funny because Wix tends to move the anchors once in a while I tend to find
them in the more section and in the more you see this section that says anchors so what happened I clicked on anchors it
happened really fast but you could see this light blue line that wasn’t there
before and what I’m gonna move this little um these tools out of the way
here do you see here’s the blue anchor now
when I click on the little grip here my cursor teen’s changes into this cross
and I can move this up and down okay doesn’t go side to side it’s only on the
y-axis so I’m going up and down here and I could basically decide where I want
this anchor to be now I’m going to go ahead and press delete on my keyboard
and that will delete the anchor let’s go ahead and add it again so you could see
there are there is also something called anchor menus which we will talk about a
little bit later so I take this anchor you can click and drag see the light
blue horizontal bar that’s here you can click and drag or just click and here is
our anchor now our first anchor we want to do is the about so we’re gonna take
this anchor and slide it down this is the about page now you don’t
want your anchor right here in the middle because what will happen is the
anchor will actually be the top of the page so what you want is you want your
anchor to go at the top of the section right there and in fact watch as I move
this anchor up it kind of snaps into place
where that magenta line is that shows you that this is in between sections so
let’s go ahead and snap that in right there and we can rename the anchor I
highly suggest you rename it this is the about Us anchor okay what’s the anchors
name about us easy enough right so then what happens is let’s go ahead
and click on our menu navigation and we’re going to manage the menu now you
notice this about page already has an anchor logo but let’s just pretend that
was gone let’s pretend that wasn’t there we want to navigate to the about Us
anchor see this down here so let’s go into our menu navigation let’s click on
manage menu and we’re going to add a page we can add a link or add a folder
we’re going to add a link this link as you can see we can go to a website an
email a phone number a document the top of the page or bottom of the page or a
lightbox let’s go ahead and do an anchor now what happens is you might have many
anchors on your site so you’ll have to decide which page the anchor is on since
this is a one page design the anchors on the same page so it says this that means
that’s the page we are on right now now we’re on the page so as we add anchors
you’re gonna see this list populate so we only have one anchor so that’s pretty
simple I click on it you see it’s highlighted blue
and I say done simple as that I’m gonna close this menu let’s go ahead and
scroll back up let’s do a preview of the site and when I hover my mouse over this
thing that says new link it goes to the about Us section so all I did is it
scrolled it didn’t go to a new page it just scrolled the website down another
good thing about anchors is if you have a one-page website and people don’t know
they’re supposed to scroll that happens once in a while they might think this is
the whole page and sure 10-15 years ago this is how websites looked they weren’t
very vertical so if they don’t know by clicking the about Us and you actually
see the website scrolling it helps new users understand that your website is
built vertically on the y-axis this is new link obviously we need to change
that let’s go back to the editor I’m going to manage the menu and see over
here where it says new link click on the three dots and all we need to do is
rename that to about us pay attention to capitalization if all of your menu items
are all in caps then keep it that way that’s one of the mistakes I see some
are all lowercase and some are you know half capital laughs not if we’re gonna
go with all caps then stay consistent so I’ll say done I could then move this
link wherever I want on the menu navigation bar I usually try to order
things important in the order of importance but in this case since we’re
using it to navigate a one page design I’ll probably put the links in order of
the layout so about us is the first section so I’ll put that as one of the
first sections with home being the the center or the front piece as normal so
there it is about us and so all I need to do is this continue to
Dankers this section is the gallery so what I will do is click on add click on
anchor and drag it to the to the page let’s make sure the anchor is right
where it should be the blue lines turns magenta that means we’re right on a
in-between spot of those pages let’s go ahead and do a rename and this is the
gallery and we’ll put that in all caps and now we need to go to our menu
navigation manage menu and the gallery button is already there for us or we
would just create a new link now let’s go it now in this case gallery
was there when I deleted the anchor the first time when I was getting ready for
this class the gallery anchored was gone so when I clicked on it went right back
to the top of the page so all I need to do is relink this just change the link
it’s all you need to do and we’ll go home this but instead of about us this
is going to the gallery say done and now about us goes here gallery goes a little
further down so that’s how you build anchors and then you would go ahead and just
keep doing that until all of your navigation is complete I’m just checking
the chat to see if there’s any questions does everyone understand at this point
how to add an anchor to your page and then how to link that to the navigation
bar give me a happy face give me a like show me that you understand the lesson
and also tells me that that my microphones working and everyone can
hear me so go and give me a like or a happy face if this is if this makes
sense to you all right even if you’re watching the replay go ahead and give me
some emotion then I know that this is making sense all right looks like no
questions at this time so let’s go ahead and keep going now let’s go ahead and
make this button so this button works the same way as the menu navigation
we’re going to change the link and we’re going to go to a anchor and I want it to
go to the video section well I don’t have an anchor there so let’s scroll
down the video section and I’m going to go
ahead and add go to more and drag the anchor onto the page make
sure it’s magenta or it’s centered right between sections let’s rename this
anchor to videos and then let’s go to we need to go back
to our button at the very top watch us button click on the link and
we’re going to now select the new anchor so click on anchor down arrow and then click on videos and
then say done let’s do a preview of that when I click on watch us it goes ahead
and this Scrolls down to the video section so that’s how you make anchors
with button and now you know how to do anchors with the navigation menu let’s
talk about an anchor menu so what is an anchor menu that is an additional
navigational piece you can put on your site this is really good if you have
maybe not a one-page site maybe you have multiple pages but one of your pages is
very long perhaps there are a lot of products perhaps you have lots of
different video or photo galleries and you want people to be able to navigate
quickly down a very long page so what’s interesting about that type of design is
people who just want to browse and explore
can check out all of your photos or all of your products but putting in an
anchor menu will allow them to skip down if they already know what they’re
looking for so to do that let’s go back to the editor
and I’m going to click on add let’s go to more and now I’m going to choose an
anchor so at this point it’s all about style and you can select which style you
want some have titles and some is just a dot with a circle on it if you want to
keep things really minimal sometimes the text can get in the way of the beautiful
images and you just want them to be able to just kind of click on the dot and
scroll down you could do that too let’s go ahead and use one of these anchor
anchor menus and what we have to do we have to attach it somewhere so let’s go
ahead and put it on this column right here warning us that if I put the the anchor
menu outside of these sort of these dotted lines then it will not be seen on
an iPad so it’s just trying to remind us about that okay and that’s fine because
if they’re on an iPad they don’t really need an anchor menu necessarily here it
is it’s right here you notice there’s kind of this margin off to the side and
so as you notice when I clicked and dragged the menu the aboutus gallery and
videos those are the three anchors that we created
they’re already listed now you notice that the blue anchor is invisible to our
audience so I wasn’t really worried about spelling or capitalization but now
that I put a anchor menu on the site now they can see the titles of those anchors
so I need to pay attention to that I’ll need to go back to the about us say
rename and I just want to be consistent and make sure that everything is capital
because now we’re showing those titles with this menu now you notice on the
side you don’t really see the white dots so I might need to just change the
design just click on the design button and I could easily just change the look
of these buttons now I like the titles I like them to be
white I just want to change the circles so all I need to do is look at the fill
color and I just need to change some of these
colors a little bit you can make the fonts bigger if you want them to be able
to see that so look at that that’s a nice and big so you can see the menu we
can change the button text to something you know we can go to white or whatever
color is going to work for you there now if I go with kind of a light color maybe
even the yellow kind of matches this fellow’s shirt there
okay let’s do a preview the website and when I click and hover
you notice the color changes so I can change that InDesign but if I just click
on gallery that goes down there now what did you notice when I scroll down I hope
that you noticed that the anchor menu stays with us so even
though I’m scrolling that anchor menu is locked into place that way the
navigation is always right there where we want it now if you want to unlock
that you can unpin this element but in this case I really you know I like it
there I think it should stay there and so that is how you build a anchor menu
now let’s look and see what this looks like on mobile so when you switch to the
mobile editor I want you to notice some things might have shifted first of all
this about us I clicked on the wrong thing here it is this about us anchor we
need to just shift it over to the about Us section right there so you might have
to move a few things around now you could click on page layout optimizer
click on optimize now sometimes that’ll fix things for you or sometimes it’ll
make things worse so you know you could dis ctrl Z or undo that if you want and
you can go ahead and move those anchors around now let’s go ahead and take a
preview of the mobile site now you notice you have these three dots right
here so that’s one of the mobile features here that’s the menu and the
about us will do the same thing it’ll go ahead and jump to that section so the
anchors work just fine on mobile but you notice I don’t see the anchor menu on
the mobile site and that’s okay if I click on this hidden element I don’t
even see it here either I think it was the column two that was hiding probably because it didn’t make much
sense to be there but what I wanted to show you is that the anchor menu is not
on the mobile site because it just doesn’t really make sense to have a menu
always in the way so I just wanted to point that out all right so that is that
is how you add anchors to your site I showed you how to add an anchor how to
connect that to your navigation menu then you learned how to connect it to
and called the action button and then finally how to create an anchor menu I
hope you enjoyed this time let me just see if there are any questions this is
time the sort of our question-and-answer stage at this time and go ahead let me
know if you have any questions about this training all right so far so good if you enjoyed
it please remember to like and share this video you might know some other
people who can benefit from this training and guess what you’ll be the
hero for sharing it with them so if you know another web designer or somebody’s
learning web design share with them this video and let’s spread the word and
let’s all become awesome web designers I will take you there
this is Michael wood at captivating web design and multimedia remember to Like
and subscribe to the page and check us out a WWF
Academy dot online I’ll see you guys next time thank you for joining me become awesome web designers I will take
this Michael Wood and captivate a web designer to media remember the light
that’s subscribed with the page check this out dot online I’ll see you guys next time
thank you for joining

One thought on “Navigating with Anchors – Web Design – Wix Tutorial

  1. page anchors have been around a LONG time, way before the current trend of long scrolling. I was around when websites began and learned html to put these pesky little anchors on a page. Such an old lady. Great video.

Leave a Reply

Your email address will not be published. Required fields are marked *