By In our previous post, we looked at how to add an external website page link to the Navigation Menu widget in EverWeb. In this post we look at how you can link to a blog post in the navigation menu bar. We also explain how to take your visitor directly to a particular point on the page from the navigation menu using Scroll Position to do so.
Linking The Navigation Menu Widget To a Blog Post
In the last post we linked an external page to EverWeb’s Navigation Menu widget. Linking to a blog post works in exactly the same way. However blog posts pages are not the same as regular pages in EverWeb. As you probably know, in EverWeb the blog ‘posts’ page contains all the blog’s posts within it. When you publish your website, each blog post has its own unique URL you can link to. The format of the blog post link is:
https://www.yourwebsitename.com/blogname/Entries/year/month/nameofyourblogpost.html
As an example, your blog post URL may look something like this…
https://www.mywellness.com/blog/Entries/2016/6/apple-watch3-to-improve-fitness-tracking-2.html
In the above example the website URL is prefixed with HTTPS and so provides secure, end to end data encryption. The website name is ‘mywellness.com’. The website blog is called ‘blog’ which is the default name used when creating a blog in EverWeb. The next part of the URL is the word ‘Entries’ which is the folder containing the blog post entries. Next is the year that the blog post was created, in this case 2016, followed by the month, in our example month ‘6’ for June. The last part of the URL is the blog post title with ‘.html’ added at the end. Note that any spaces in the blog post title are replaced with a ‘-‘ hyper symbol.
To add the blog post link to the Navigation Menu widget, simply follow the instructions from our last blog post. In the ‘Head Code’ box of the Header/Footer Code section of the Page Settings of the dummy page, enter the URL of your blog post (remember the word ‘Entries’ needs to be capitalised). Follow the remainder of the instructions and publish your website. Test the Navigation Menu to make sure that the link works correctly.
If you’re not sure about the structure of your blog post’s URL, first publish the website that contains the blog post you want to add to the Navigation Menu. Once published, navigate to the blog post in a browser window and copy its link from the browser’s search bar. Paste the link in to the ‘Head Code’ box of the Header/Footer Code section of the Page Settings as per the instructions from our previous post. Republish the website and test the Navigation Menu to make sure that the link works correctly. Using this method may take a bit more time, but you’ll know for sure that the link you’re using is correct and typo free.
Linking The Navigation Menu Widget to a Scroll Position
If you want to create a link that goes directly to a Scroll Position on your page from the Navigation Menu, first make a note of the name of the Scroll Position you want to use. You can find its name by clicking on the Scroll Position so that it’s selected. In the Widget Settings you will see the Scroll Position name. Copy the Scroll Position name to the clipboard then follow the instructions from our last post. When you come to add in the redirecting URL in to the ‘Head Code’ box of the Header/Footer Code section of the Page Settings of the dummy page, add ‘#scroll-position-name’ to the end of the URL e.g. to go to the Scroll Position ‘myscroll1’ in the page ‘mypage’ from the navigation menu, the URL may look something like this:
http://www.mywebsitename.com/directory/mypage.html#myscroll1
When you publish your website and click on the navigation menu option you have set up, you’ll be taken to the Scroll Position ‘#myscroll1’ on the page ‘mypage’.
With a little bit of code you can add a great amount of flexibility and creativity to your navigation menu in EverWeb!
Loading ...
Comments