Anchors in Weebly

The Navigation article recommends using anchors so that visitors can jump not just to a page in your website, but to a specific point in that page.

Anchors

As at November 2010 there is no easy way to create "anchors" - words or pictures on a page to which a link can be made.

You might, for example, want to make the name of each club-member in the Members Page/s into an anchor. Then when one of them comes to attention - perhaps winning a prize - you can make a link directly to their picture and pen-portrait.

In Weebly each anchor and each link-to-an-anchor has to be a dedicated element on the page. That makes them harder to integrate neatly into web pages.

In Weebly ...

To create anchors and links to them in Weebly you have to add some html code.

Where you want an anchor or link-to-an-anchor drop the Custom HTML element onto the page.

It appears as a box just like any other Weebly element. Click inside that box and the appropriate toolbar appears:

Weebly custom html toolbar.

Click on the toolbar to edit the code in the element.

Anchor Code

Link-to-anchor Code

Here we have typed in the code which makes the name JIM SMITH into an anchor, turns it bold and makes it big.

The html codes are all in <angle brackets>. They work in pairs so that <code> turns on an effect and </code> turns it off.

Open the page from which you want to link and drop the Custom html element where you want it.

Here we have opened it up and typed in:

Weebly custom html element with code typed in.

<A NAME=" "> turns on the anchor code . In the quotes type a name for the anchor. Users do not see this. Keep it to one word, or a couple of words linked by a hyphen.
<B> turns on the bold look so that what viewers see will be bolded.
<BIG> makes what viewers will see larger.
then type the text you want viewers to see, in this case the name of a member.
</BIG> turns off the larger look.
</B> turns off the bold effect.
Notice that you turn off codes in the opposite order to turning them on. We turned on bold then big: so we turn them off in the order big then bold.
</A> turns off the anchor code.

The custom html code for a link to an anchor.

<A HREF=" " turns on the link and in the quotes you say where the link must go to
1. members.html is the name of the page. Weebly stores pages with lower-case names and the ending ".html"
2. # tells the link to go to an anchor on that page
3. jim-smith is the name we gave to that anchor
</A> turns off the link.

Click any where on the page outside the Custom html element. Most of it vanishes leaving just the visible part. It looks like any other text. In the illustration below the anchor appears between the headline and a pen-portrait of Jim:

A text anchor as it appears on screen.

When seen by users it looks like:

How the link to an anchor appears on the page.

Links are usually indicated like this: blue, underlined text. The Weebly theme you use for your website may choose other ways to mark them.

If they click on it visitors jump to the Members page and directly to the entry about Jim.

There are nine pages in this series of detailed Weebly tips:

They support general articles on web design for film-making and AV club websites which begin here.

[Weebly frequently update and improve their system. These pages are based on tests in November 2010.]

	The world of non-commercial film and A-V		Events Diary	Search
The Film and Video Institute			Join us on Facebook