IAC logo

The world of non-commercial film and A-V

Events Diary Search
The Film and Video Institute find us on facebook Join us on Facebook

 

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

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.

Let's start by making Jim Smith's name an anchor.


In Weebly ...

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

That opens up as ...


Weebly embed  code properties.Click Edit Custom HTML and then in the blank space type the code:
<a name="jim-smith">JIM SMITH</a>

The angle brackets enclose the code which visitors will not see.
<a> starts the code and </a> ends it.

We have assigned "jim-smith" as the anchor's name.
Between the two codes we write what readers will see: JIM SMITH.

When you click elsewhere the only thing you should see on the page there is JIM SMITH - though even that may not show up until you have published the page.

Link-to-anchor Code

You can make as many links as you need to that anchor. Unfortunately you cannot use the Weebly link tool.  Once again you must use "Embed Code".

For the sake of experiment go to your home page and create a link from there:

The Weebly embed code box with a link to an anchor.The angle brackets enclose the code which visitors will not see.
<a> starts the code and </a> ends it.

"href" means the link refers to something.

We have assigned the link to the members page, so the reader's web browser will jump to that page.

"#jim-smith" tells the web browser to go to that anchor on the page.

Between the two codes we write what readers will see. The words are Winner - Jim and to make them stand out we have added the code <h1> before those words and </h1> after them. That tells the reader's web browser to display the words in the biggest headline size.

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. So when the pages are published readers will see ...

On the HOME page:

A link to a text anchor as it appears on screen.


On the MEMBERS page

They just jump straight to:

How the link to an anchor appears on the page.



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 notes are based on March 2015.]


Share your passions.

Audience silhouette.

Share your stories.

Page updated on 07 March 2015
Contact Webmaster
find us on facebook Join us on Facebook
Bookmark and Share
UNICA information UNICA member
Company Limited by Guarantee No. 00269085. Registered Charity No. 260467. Authors' views are not necessarily those of the Institute of Amateur Cinematographers. Website hosted by Merula. JavaScripts by JavaScript Source. Menu by Live Web Institute. Art work by Tony Kendle.