The foundation homepage thrives on keeping your visitor on one page. This helps your SEO score by leaps and bounds, offers a break away from the conventional website experience, and creates an opportunity for providing more dexterity in your navigation through anchor linking.
Anchor links target widgets or specific elements on a page. When a visitor clicks the link, the browser jumps or scrolls directly to that content. If the link is on a different page, it will load the page url then jump immediately to the targeted content.
The trick to this is identifying the content's unique ID. In foundation, we have given each widget on your homepage an ID for this purpose. These are located in the tag, or list item container, for each widget. You may view this code by inspecting your page's source. Please note Internet Explorer does not offer this functionality - use Firefox, Chrome, Safari or Opera instead. For the purpose of this article, screenshots show Firefox.
- Right-click near the title or top of the widget or content you want to link to and choose Inspect Element from your browser's right-click menu
- The code inspector panel will open, showing you the markup for the element you clicked on and all the surrounding elements. You will see the IDs lined up in the tags like this:
- In the above example, I have highlighted the ID for my portfolio widget, which is obox_portfolio_widget-2. Each widget is given a unique number, so be aware that your widget may have a different ID! For example, you can see in the screenshot that there are 4 content widgets, each with a different number on the end.
- Go to Go to →
- Select your menu to edit, then expand the Links section to add a custom link
- Enter a hash(#) followed by the ID name in the URL field.
- Enter whatever you want to appear in the menu in the Link Text field and click Add to Menu
- When finished, click Save Menu