Long Page?

Various Subject Matter?

One of the benefits of WebWeka is that your page has unlimited length. This means that you don't have to fiddle about creating multiple pages, and menus.


However, if you have a long page, or a variety of subjects in the content, you can ease navigation and put signposts in for your audience.

Here's an example below:

..and here we are

Creating Navigation Buttons

Please click here to jump to step-by step notes and have a go yourself.

How do I create a Menu myself? (These notes are courtesy of one of WebWeka's first and most enthusiastic customers - Tony King at cobblestonespw.webweka.com).

Thanks Tony!

Need Help?

Feel free to email us and we will help you.

How? With a little HTML knowledge, and a button mock-up handy, you can create menu buttons so that your viewers can jump straight to relevant sections of your page.


Creating a hyperlink can be a bit tricky, because we need to:

-Add the image into a text box

-Create a link 'from' that image when it is clicked.

-Tell the link the destination to go to (the ID of where you want people to land). For this we need to go into the HTML.

Here are the detailed steps in 3 sections:


1. Creating Text Images


2. Finding the links in HTML

3. Making the link


1. Creating Text Images

Create your button/header/banner in  Word, Publisher or Powerpoint or any programme that preferably enables you to enlarge/reduce the ‘image’. (Word doesn’t) Powerpoint is recommended because of its selection of shapes, shades, shadows and fills.


Using Powerpoint:

1.      Home tab

2.      Insert – Shapes – click to select and shape to size

3.      SHAPE fill (colour)

4.      SHAPE fix (round corners?)

5.      SHADOW fix (drop lower right)

6.      SHAPE (no outline)

7.      Save your image as j.peg (see next note *)


Also save it as a Powerpoint.ppt 

Another way with Powerpoint is to go to Smart Shapes or Quick Styles

When you’re satisfied with your result – note the on-screen size, the font and size used so that should you need to reduce or enlarge your image you alter your boundaries/font size to improve your image.

You alter your image saved at stage 8.

You will need to experiment to gauge the size you wish it to appear on your website from the dimensions created in Powerpoint e.g. the image below was 6cms x 2 cms on screen.(160 x 47 pixels).

Also you need to select a type size in the 24 to 36 pt range. When uploaded to Webweka it can be enlarged or reduced, but too small an image may not enlarge adequately.

In Webweka you can see the exact pixel size by studying the HTML code (see below under Finding the Link HTML)  *The result in Powerpoint is an image on a full page (because Powerpoint is a slide show programme)  so needs to be cropped. Open an editing programme like Irfanview or Picasa and crop it to your images limits. Save your cropped image.(7 above)


Your “word picture” is uploaded to Webweka through the IMAGE button.





Linking an Image to Text

       Navigation buttons

LP in NZ 200x51.jpg

Webweka is based on the popular ‘endless page’ – no need for navigation  - and SEARCH-CTRL F will get your visitor to the part they wish to view. However you may wish to establish traditional navigation  buttons, or link  content within the  site --- so here’s how !


2. Finding the Link HTML

·        for the image

We need to find the code line for both the image and the text before we can link. Viewing the code will not corrupt your site in any way – you will just be viewing and taking a note of both identifying numbers #text_....    and  #image_....

To find the code for your image, RIGHT click on it. The menu that appears will show, at the bottom, Inspect Element or Source.


You will be switched to the HTML.(Developer Tools, the header says). Scroll down until you find a highlighted line.

In the case of our header, Letterpress in NZ this is the code

<img src=”../../system/draft_images/2104/original/LP_in_NZ_200x51.jpg?1373260619” alt=””>

This button is  image 2104 – write it down  as    #image_2104  

Close the HTML page and you’ll  be back on your site page.

·        for the text

Highlight the words you wish to link – e.g. Letterpress is alive in New Zealand

To find the code for your text, RIGHT click on it. The menu that appears will show, at the bottom, Inspect Element or Source.


You will be switched to the HTML.(Developer Tools, the header says). Scroll down until you find the highlighted line.

The words “Letterpress is alive in New Zealand” are highlighted and the TEXT number precedes this code – see below - “text_1473” which you would enter in your link as    #text_1473. Write it down.

The same procedure applies if you wish to link text to text





3. Making the link

1.      In EDIT mod

2.      Click IMAGE box in CREATE

3.      Upload your prepared button image from your file

4.      When it appears in the IMAGE box RIGHT click, and select COPY IMAGE (this will “lift”  it from the Image box)

5.      Click TEXT box in CREATE

6.      Click the pencil

7.      RIGHT click

8.      PASTE the button

9.      LEFT Click the button TWICE – the image will go blue and the link/unlink chains will show above your image

10.  In the Insert/Edit Link box enter the text or image number (Where you are pointing to) e.g. #text_1473

11.  Click INSERT

12.  Save in this Edit box (right bottom corner)

13.  Preview

14.  Save

15.  Publish

What you have done is pointed your image towards your selected text.

Close open boxes as you have now completed and saved your linkages.


Test your link by clicking on the button.


I suggest you don't Publish until you are happy that it all works ok.

Then you can get back to your current version if you need to.