Hyperlinking to Current Page In Master Pages

EverWeb 3.4 has introduced a number of great headline features such as Parallax Scrolling and the new SEO Power Up Addon. Hidden beneath these tentpole features are some new features that are little gems in themselves! One of these is Hyperlink to Current Page. When using the Hyperlinks Inspector to hyperlink an object to another page in your website, you will now see a ‘Current’ option displayed in the ‘Page’ dropdown menu. It’s a small and seemingly inconspicuous addition to EverWeb, but one which has some great uses!

Perhaps the most important use of Hyperlink to Current Page is within Master Pages, where it can be used to enable scrolling to the top of the current page. In versions of EverWeb prior to the latest version, this type of function had to be done on each page. Now you only need to add the feature once in your Master Page for it to work on every page the Master Page is attached to!

Example Scenario #1: Using Hyperlink to Current Page
When using a website, you often find a Go To Top of Page button, icon or piece of text at the bottom of the page. This is almost mandatory when pages are displayed being on mobile devices. Such pages can often be quite long, and for good reason. Visitors will not want to change pages often when using mobile devices, preferring instead to scroll the page as it’s easier to do. From a design standpoint, what’s easier still is to be able to go back to the top of the page as, and when, you want to. Planning for this is a good way to keep visitors on your site by enhancing their user experience.

What You Need To Start
All you need to start with is EverWeb version 3.4 or higher and a Master Page in your Project file to work with. It doesn’t matter which type of Page Layout you have, it can be either Responsive, Centered or Left Aligned.

Adding The Go To Top Feature
When adding your ‘Go to Top’ of page feature you’ll want to make it easily noticeable to your visitors. You could choose an image such as an up arrow, or a piece of text, or a TextBox button. It doesn’t matter what you choose as long as it’s easily identifiable.

In this example, I am going to use an arrow image from EverWeb’s free stock photo library as this will make a nice button that visitors can easily click or press on when using a mobile device. Simply click on the Media button in the Toolbar and enter ‘Arrow’ in the search box. When you press enter, you will see the search results. Drag and drop the image that you want on the page. In my example, I found an up arrow within a red circle that has a yellow border, perfect! Once the image is on the page you probably will need to resize it. With the image selected, go to the Metrics Inspector and check the box ‘Constrain Proportions’ before you start to adjust the image size. In my example, the image was originally 400 x 400 pixels so I have shrunk it down to 40 x 40 pixels which is a good size for all device types. You may need to adjust this value to find out what works best in terms of usability on your own page.

Now that you have your button set up, move it to the location where you want it at the bottom of the page. Typically you’ll want the button to be located in the Footer section, so remember when moving the button in to this area to hold down the Command key whilst doing so.

Setting the Hyperlink Up
Now that your Go To Top of page feature is positioned properly, make sure that the button is still selected before going to the Hyperlinks Inspector where we will add the Hyperlink.

Click on the ‘Enable as Hyperlink’ checkbox which will make the hyperlink features available to you. Once you have done this, change the ‘Link to Field’ to ‘One of My Pages’, change the ‘Behaviour’ field from ‘Default’ to ‘Open in new window’ if you want a new browser window to open when the link is clicked upon, then finally set the ‘Page’ field to ‘Current’.

You have now set up your hyperlink. Any page that has the Master Page attached to it will inherit this hyperlink. Test out the button by previewing your website before publishing it. Any page that includes the button will scroll to the top of that page when the Go To Top of page button is pressed.

Example Scenario #2: Using Set Shape as Scroll Position
A second useful way in which Hyperlink to Current Page in Master Pages can be used is with buttons at the top of the Master Page that hyperlink to specific locations further down the Master Page. These sections can be in the main body of the page, but it’s perhaps better if such sections are placed in the Footer section of the page. This will keep the body area of the page free for individual page content. This is not a hard and fast rule, but you may find this way makes designing and managing your Master Page easier.

Let’s take an example, such as wanting to have a button at the top of page that takes the visitor to the website’s directory section in the Footer. Create a button at the top of the Master Page that when pressed will go to the Website Directory section of the page.

Add a section in the Footer area which will be your website’s directory section. The section could contain hyperlinks to all of the pages in your site. It does not matter if the section is a full width or fixed width object.

The area between the button at the top of the page and the Footer is kept empty. In fact you can effectively collapse the main body area by setting the Minimum Content Height to a small value such as 400 – 500 pixels. Remember that page sections expand automatically when content is added that goes beyond the minimum height of the section. The other reason for setting this height at a small value is to avoid large gaps between content and footer if the page itself doesn’t contain enough content to fill the page content height.

Now go back to the website directory section. First select the object, then click on the Scroll Position button in the Toolbar. There are two options available. Select the option ‘Set Shape As Scroll Position’. This option attaches directly to the object so is preferable to using ‘Insert Fixed Scroll Position’. If you are using a Responsive Page Layout do not use ‘Insert Fixed Scroll Position’. You must use ‘Set Shape as Scroll Position’.

A dialog box will then appear where you name the Scroll Position. In this example I am going to call the Scroll Position ‘Directory’. Click OK to finish. You can always find the name of the Scroll Position by going to the Shape Options tab and clicking in the ‘Scroll Position’ section when the object is selected. Here you can edit the Scroll Position name or even delete the Scroll Position by deleting the name from the field. When an object has Set Shape as Scroll Position attached to it, you will see a blue anchor displayed in the object’s top right hand corner.

Now that the Scroll Position has been set up, you can attach it to your button at the top of the page. Select the button then go to the Hyperlinks Inspector in the Inspector Window. As in the previous example, click on the checkbox to ‘Enable as Hyperlink’. Set the ‘Link To’ field to be ‘One of My Pages’, the Page Field to Current and ‘Position’ as the Scroll Position ‘Directory’. You have now finished!

As always, test the page to see that it works correctly before going live with it.

Hyperlinking to Current Page is a small but significant addition to your toolset in EverWeb. Let us know in the Comments Section below if you’ve found other uses for this feature!