Mac SEO Blog

The new Scroll Position feature introduced in EverWeb 2.6 is a great way to hyperlink to anywhere in your website, from any position. In addition to using Scroll Position on regular web pages, you can also use it to link to specific places in your blog post pages. Here’s how to do it…

Before You Start…

1. Make sure that you are using EverWeb version 2.6 or higher and
2. You have created a blog with one or more posts in it.
3. If you are not familiar with Scroll Position yet, please read the EverWeb’s NEW Scroll Position Feature blog post first.

Overview

In this example, we are going to set up some hyperlinks on the Home page of the ‘Woody’ Theme Template that will link to different paragraph titles of different blog posts using Scroll Position. The Woody Theme Template is new in EverWeb version 2.6.

The Blog Posts

The blog in ‘Woody’ website project file contains two blog posts. One post is called ‘Sanding & Finishing’ and has two paragraphs, one titled ‘Sanding’ and one titled ‘Finishing’. The second blog post is called ‘Polishing’ and has only one paragraph titled ‘Polishing’. In this example, we want to hyperlink each paragraph title to its corresponding button on the Home page.

The Website Home Page

There are three sections in the Home page with salmon colored buttons containing the text ‘READ MORE’. When clicking on the ‘READ MORE’ text for the ‘Sanding’ section, the hyperlink will go to the ‘Sanding’ paragraph title of the ‘Sanding & Finishing’ blog post. For the ‘Finishing’ section on the Home page, clicking its button will hyperlink to the ‘Finishing’ paragraph title, again in the ‘Sanding & Finishing’ blog post. Finally, the button for the Polishing section will hyperlink to the ‘Polishing’ paragraph title of the ‘Polishing’ blog post.

Setting Up ‘Sanding’ and ‘Finishing’ Scroll Positions

Let’s start with creating a hyperlink from the Sanding section on the Home page to the Sanding paragraph title in the ‘Sanding & Finishing’ blog post.

1. Go to the blog Posts page of the project
2. Select the ‘Sanding & Finishing’ blog post.
3. Note that the Blog Post Preview Window is where Scroll Positions are added, edited and deleted for blog posts.
4. Add a Scroll Position to the the top of the Sanding paragraph title by clicking on the Scroll Position button in the Toolbar or by using the Insert-> Scroll Position menu option.
5. Drag and drop the Scroll Position to the just above the title of the ‘Sanding’ paragraph.
6. With the Scroll Position still selected, go to the Widget Settings and give the Scroll Position a ‘Unique Name’, in this case  ‘Sanding’.
7. Add another Scroll Position, this time for the Finishing paragraph.
8. Drag and drop the Scroll Position at the just above the title of of the Finishing paragraph. Again, give it a Unique Name, in this case ‘Finishing’.

You now have two Scroll Positions set up in the Blog Post Preview Window.

Setting Up The ‘Polishing’ Scroll Position

With the two Scroll Positions set up for the ‘Sanding & Finishing’ blog post, now we need to add the last Scroll Position for the ‘Polishing’ blog post.

1. Select the Polishing blog post.
2. Important! The Scroll Positions we set up for the ‘Sanding & Finishing’ blog post are still visible in the Blog Post Preview Window. This is because the Blog Post Preview Window acts like a Master Page. Anything placed on the Preview Window appears, and is available, to all the other posts in the blog. This is also the reason why we gave each Scroll Position a Unique Name so it is easy to determine which Scroll Position relates to which blog post.
3. Add a new Scroll Position and drag and drop it to the top of the ‘Polishing’ paragraph title.
4. Name the Scroll Position as ‘Polishing’.

You have now set up all the Scroll Positions you will be using for the three buttons on the Home page.

Hyperlinking the Buttons on the Home Page

1. Go to the Home page to set up the three Hyperlinks.
2. First click on “READ MORE” text for ‘Sanding’ section.
3. Go to the Hyperlinks Inspector and tick the ‘Enable as Hyperlink’.
4. Set the ‘Link To’ dropdown as ‘One of My Pages’.
5. Set the ‘Page’ as the ‘Sanding & Finishing’ blog post page.
6. The ‘Position’ dropdown shows the Scroll Positions that have been set up. Select ‘Sanding’, which is the Unique Name we set up earlier. The first hyperlink has now been set up.
7. Next, select ‘READ MORE’ text for the ‘Finishing’ section and ‘Enable as Hyperlink’ in the Hyperlinks Inspector.
8. Again, set the ‘Link To’ dropdown as ‘One of My Pages’ and the ‘Page’ dropdown to the ‘Sanding & Finishing’ blog post page.
9. The ‘Position’ dropdown should be set to the ‘Finishing’ Scroll Position. The second hyperlink has now been set up.
10. Lastly, select the ‘READ MORE’ text for the ‘Polishing’ section of the Home page.
11. Again ‘Enable as Hyperlink’ in the Hyperlinks Inspector and set the ‘Link To’ as ‘One of My Pages’.
12. This time, set the ‘Page’ dropdown as the ‘Polishing’ blog post page.
13. Set the ‘Position’ dropdown as the ‘Polishing’ Scroll Position. The last hyperlink has now been set up.

Preview and Publish!

Once the hyperlinks have been set up, test the links using Preview. Click on the ‘READ MORE’ text for each button you have hyperlinked to see how the Scroll Position works.

Using Scroll Position in blog posts is very useful for focusing your visitors on hyperlinked objects and text. When using this Scroll Position for blog posts, remember that the Blog Post Preview Window shows every blog post’s Scroll Positions on the Preview Page at the same time. As such. using a Unique Name for each Scroll Position is usually a good idea so you can keep track of each Scroll Position. It’s also worth remembering to be careful when moving or deleting Scroll Position lines in the Blog Post Window as you don’t want to inadvertently move or delete a blog post’s Scroll Position!

Video Walkthrough

There’s also a video walkthrough of this blog post, Scroll Position and Blog Posts which takes you through the whole process of linking buttons on your Home page to specific sections of your blog posts.

If you have any questions about this post, please do let us know in the Comments Section below, we’re happy to help!

EverWeb on Social Media

You can also find EverWeb on the following social media platforms:

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw