You may have heard of a new buzz-term recently in SEO land called the 'silo system' or 'silo architecture' for building modern websites. The basic idea is that you introduce more links between pages of your website, and therefore get traffic flowing around more efficiently, beyond the existing website navigation menu. As ever, lots of information and presentations about this can be found online.

The silo system is not only a valuable method for giving your website visitors an easy way to navigate your website and jump between relevant pages; but it's also proving to be popular with search engines indexing your website. If you care about the ease at which people can navigate your website and you want to maintain or improve your search engine rankings, then the JumpStack is a simple stack to consider using in RapidWeaver.

In practice, this is a really simple stack element to use. Add it to your Stacks page and choose to display a 'previous' or 'next' button (or both). You can quickly customise what page in your project you want people to jump backwards or forwards to. Hence the name of this stack. The buttons are fully customisable; both in respect to styling and the icon or label text you choose to use.

Once published, your users will see links backwards or forwards to other relevant pages in your website. Search engines will have a more connected 'web' of pages in your website to index. JumpStack is ideal for product or service information pages and sequentially organised photographic or video pages (where you want people to navigate pages in a specific order). Equally so, JumpStack is a valuable addition in projects where you're seeking to create simple web-apps that span over multiple pages.

The other key feature in this stack is the table of contents support. This works by looking at a block of written content in your page and identifying all the HTML headings. These headings then get used as anchor points (links). JumpStack generates an automatic index of these anchor points (like a mini sitemap). Users to your website can view the table of contents and click links to 'jump' down to that particular part of the page. The TOC functionality is useful in very content-heavy pages and is automated (you don't have to manually setup the links yourself).

Example:

Everything in the grey box below comprises of a single JumpStack. In this example TOC support was enabled. Previous and next navigation links were setup at the end of the stack too, and these lead to different pages on the Stacks4Stacks website.

Table Of Contents

Introduction

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus suscipit mi ex, id vulputate libero volutpat vel. Proin lacinia sapien at velit fermentum, eu gravida sem sollicitudin. Morbi luctus condimentum enim eu eleifend. Pellentesque eu neque ultricies, rhoncus velit et, euismod mi. Fusce imperdiet vehicula leo, at fringilla orci scelerisque sed. Vivamus nulla augue, mattis a commodo a, lobortis ut diam. Phasellus tincidunt volutpat nibh, eu auctor ipsum gravida id. Donec lobortis sem nec purus auctor tincidunt.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus aliquam maximus dolor, non elementum sem sodales ac. Fusce eget ipsum tempor, viverra ipsum ut, semper massa. Vivamus faucibus lectus scelerisque nunc aliquet, non suscipit massa feugiat. Maecenas eget risus id lorem pharetra lacinia. Vivamus eget hendrerit erat. Vivamus lacus lorem, faucibus id nulla a, pellentesque dignissim nulla. Mauris convallis luctus ipsum mattis bibendum. Cras cursus molestie iaculis. Aliquam ullamcorper sed augue non iaculis. Phasellus mattis, libero at posuere fermentum, nulla metus ornare leo, eu varius quam neque et eros. Nam viverra blandit mi at suscipit. Sed quis nisi quis orci tempor ornare ac eget leo.

In eu maximus nibh. Suspendisse mi libero, imperdiet gravida dapibus vitae, vulputate eu orci. Ut vitae placerat sem, a scelerisque enim. Vestibulum id hendrerit risus. Nunc dapibus nibh non neque vestibulum mollis. Sed aliquam hendrerit metus vitae ullamcorper. Etiam vel massa in velit sodales mattis. Proin fringilla nunc sed vestibulum ullamcorper. Nulla dapibus dolor vitae justo rutrum, sit amet viverra felis ultricies. Integer consequat volutpat lectus, ut finibus quam tempus vel. Sed ac iaculis nunc. Fusce vehicula volutpat sapien, id ornare odio rutrum eu. Mauris fermentum tincidunt elit, at gravida nisl dictum nec. Vivamus tincidunt porta metus, nec pharetra justo. In et sollicitudin massa.

Future-proofing

Duis vel ornare risus. Suspendisse auctor scelerisque dictum. Nulla feugiat suscipit tellus eget mollis. Donec iaculis condimentum leo, suscipit dapibus magna porta eu. Sed mollis pharetra odio interdum pulvinar. Vestibulum eget mi quam. Mauris ut vehicula ante.

Nam vulputate porta erat, in pharetra massa ultrices non. Nullam mauris leo, auctor sed fringilla non, commodo quis elit. Suspendisse gravida tempor mauris, vitae eleifend odio rutrum quis. Quisque tempus leo vitae turpis volutpat maximus. Proin vitae molestie urna, quis dictum ante. Aenean et sodales sem. Suspendisse mollis nulla non elementum egestas. Morbi vitae nulla posuere urna semper lobortis in a lectus. Donec eleifend velit est, sit amet varius purus ultrices quis. Integer orci orci, accumsan ut mattis ut, eleifend et purus. Pellentesque feugiat purus eros, eget fermentum leo vehicula quis. Suspendisse a consectetur nulla. Suspendisse ipsum metus, pellentesque vel est eget, bibendum sagittis mauris.

Mauris libero dolor, pretium sit amet mauris eget, mollis auctor lacus. Vivamus turpis mi, efficitur sit amet maximus sed, tincidunt non nisl. Vestibulum tempus ipsum eget libero auctor dictum. Sed volutpat nibh at sapien ornare fringilla. Nunc quis dictum nibh. Praesent in bibendum orci, et vestibulum nisl. Morbi pharetra facilisis ultricies.

Business plan

Praesent sodales cursus urna quis dapibus. Phasellus feugiat ipsum non dui venenatis euismod a sed sapien. Morbi faucibus tempor malesuada. Ut suscipit eros a erat sodales posuere in non sapien. Nulla in lacus vitae neque cursus vestibulum quis quis tortor. Integer nec tincidunt ipsum, non accumsan quam. Suspendisse semper ante lacus, ut congue ipsum finibus quis. Vestibulum fermentum sed quam ac ullamcorper. Vestibulum ut dui dolor. Phasellus pulvinar sit amet lectus eget varius. Praesent rhoncus lacus quis augue vehicula hendrerit.

Donec id risus quis turpis luctus tincidunt sit amet sed nisi. Sed pharetra gravida orci, nec varius mauris fringilla vestibulum. Aenean eu suscipit turpis. Nulla cursus elit id diam tempus auctor. Sed at facilisis nibh. Phasellus eu velit eget orci blandit hendrerit sed at elit. Duis semper, nulla sed consequat porttitor, lorem velit vulputate nulla, vel pellentesque tellus orci in enim. Cras dapibus nec odio vel congue. Donec mattis, erat sed varius efficitur, tortor massa cursus arcu, mollis facilisis purus dolor sit amet lacus. Suspendisse facilisis metus leo, at accumsan nisi consectetur sed. Nulla ac accumsan turpis. Curabitur dolor sapien, condimentum sed augue a, lacinia pulvinar nulla. Cras at finibus eros. Vivamus lacinia nibh ex, a aliquet metus tincidunt sit amet.

Team management

Mauris ornare nec tortor id iaculis. Donec non condimentum felis. Nullam odio diam, cursus congue neque a, finibus laoreet lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer eget feugiat leo, sit amet eleifend justo. Proin interdum luctus mauris, nec luctus purus finibus ac. Pellentesque volutpat finibus odio quis vehicula. Proin vitae pretium nisi. Nunc quis nulla tempus, ultrices magna eu, congue dolor. Pellentesque tempus lorem hendrerit consequat convallis. Donec magna mi, rhoncus et condimentum vitae, convallis ut velit. Nulla sit amet arcu finibus, scelerisque felis in, dignissim sapien. Cras ac erat sit amet erat malesuada aliquet non non nunc. Nunc volutpat, mi non malesuada feugiat, enim nibh lacinia tellus, finibus vulputate purus nisl quis nisi.

Vestibulum consectetur maximus magna, vel suscipit lacus sodales quis. Nunc gravida, arcu eget pretium placerat, arcu velit lobortis massa, a congue massa diam eget justo. Proin mollis hendrerit lorem, id pharetra metus interdum at. Suspendisse vehicula, tortor posuere commodo rutrum, quam enim sodales arcu, eget dignissim augue metus ac felis. Quisque sit amet sapien interdum, fermentum ex a, pulvinar purus. Quisque posuere, massa in venenatis congue, ex nisl tristique lectus, in posuere nibh ante eget est. Etiam ac sodales diam. Etiam viverra vehicula elit eget lacinia.

Creative skills

Nulla maximus elementum sem, eleifend suscipit ligula malesuada et. Aliquam auctor velit id ligula commodo convallis. Cras pretium lacus mollis congue lacinia. In ac interdum ante, eget malesuada dolor. Pellentesque nunc metus, vehicula vel erat nec, pharetra porta purus. Sed enim enim, vestibulum sit amet feugiat sit amet, euismod non odio. Etiam eu lorem mi. Suspendisse auctor maximus elit ut facilisis.

Proin eu metus egestas, elementum nisl at, pretium lorem. Aliquam non luctus ante. Suspendisse interdum ex eget lorem tempor ornare. Curabitur egestas vel diam et dapibus. Integer cursus mi semper nibh sollicitudin, sit amet commodo tortor aliquet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent sem sapien, sagittis ultricies eros a, tempus fermentum turpis. Donec convallis, purus et elementum cursus, purus mauris placerat ex, commodo finibus libero nisl ut velit. Pellentesque rutrum iaculis urna, id aliquam ante fringilla non. Nulla scelerisque augue non mauris tincidunt consectetur. Proin ut dolor orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet augue vel enim finibus bibendum. In auctor erat quis risus tempus ultrices. Vestibulum luctus viverra leo ut ultrices. Ut quis augue ac massa efficitur vehicula id ut lacus.

Emerging markets

Duis rutrum nunc vitae lacus eleifend varius. Quisque fermentum mauris congue purus finibus, nec bibendum sapien aliquet. Etiam eu velit eget lacus mattis elementum at sit amet felis. Phasellus faucibus lacus vitae risus pulvinar, sed vulputate massa finibus. Mauris nec consequat nisi. Donec a dictum metus. Sed eu varius ex. Sed mollis sollicitudin felis, et laoreet est rutrum non. Sed vel turpis quis ex bibendum pretium. Etiam molestie quam sit amet tortor semper, ac porta enim tincidunt. In hac habitasse platea dictumst. Donec hendrerit, urna at euismod pellentesque, tortor dolor iaculis magna, et venenatis dolor dui et ex.

In neque lacus, tincidunt non tempor et, fringilla a ex. Nam vel elementum elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec pretium, felis sit amet fermentum aliquam, augue velit lobortis augue, at malesuada nisl est ac lectus. Praesent viverra laoreet erat quis egestas. Sed euismod ac nunc sed mollis. Sed fermentum consequat odio, vel mollis nisl volutpat blandit. Donec vehicula tempor risus at dictum. Suspendisse auctor ex ex, vitae fringilla metus malesuada vel. Proin maximus ante diam, eget porttitor eros tempor sit amet. Vestibulum tincidunt ac ex vitae cursus. Mauris suscipit ipsum quis sapien aliquet interdum.

Concluding notes

Nullam eu felis in purus maximus finibus a eu metus. Proin pharetra mauris quis massa sagittis, non tristique nisi pretium. Integer sem mi, sollicitudin vel lorem sed, dignissim euismod augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut in velit ultricies, eleifend mauris quis, pulvinar odio. Vivamus non leo et tortor aliquet pharetra a id tellus. Curabitur nisi mauris, congue eu nisi id, scelerisque rutrum sapien. Curabitur risus nisl, rutrum id ipsum id, ultricies mattis risus. Pellentesque rutrum nulla nulla, at semper ipsum ornare sed.


Setup of a table of contents

To get an optional JumpStack table of contents working in your website, follow these instructions:
  1. Once installed, drag and drop a JumpStack into your webpage.
  2. Enable the Generate TOC option in the stack settings.
  3. Drag and drop text or HTML stacks inside your JumpStack or set the JumpStack source to use another container on your page (like the theme content container).
  4. To display the generated table of contents, type <div id="toc"></div> somewhere in your page; like in the page sidebar or in another stack above your JumpStack. This code will get replaced with the generated table of contents.
  5. Choose what heading levels to create anchor links towards. By default all heading levels will be used, but you may prefer to filter some out.
  6. The active colour use used to change the text colour of the current TOC. This feature is mostly only of use if the JumpStack remains within the browser viewport.
  7. Adjust any other settings like the font size, spacing or active offset to suit your requirements. Mouseover any of these settings to get informational tooltips, if you’re not sure what they do.

Setup of previous / next navigation links

To get optional JumpStack previous and next navigation links working, follow these instructions:
  1. Once installed, drag and drop a JumpStack into your webpage.
  2. In the stack settings, confirm that the next or previous navigation buttons have been set to either Active or Disabled. Disabled buttons will still get shown but cannot be clicked (they are normally placed at the start or end of a page group).
  3. Using the Button Link setting, assign a link to the previous and / or next navigation buttons. This link can be in the form of another page in the website, a RapidWeaver resource or an external URL.
  4. Change any of the other style or colour settings, to match your page design.

Once done, preview your page to make sure everything is working as expected. There are a few additional settings you can change in the JumpStack, like adjusting the mobile responsive breakpoint and spacing between your content and the navigation buttons.

Button styles

Added in version 1.1, you can now toggle between using a custom next or previous button design (default) or opt to use a Twitter Bootstrap styled buttons. The latter option is useful if your website or web-app is already making use of the Bootstrap framework and you want to keep styling of GUI elements (like buttons) consistent.

Multiple JumpStacks and TOCs in the same page

As of version 1.2 you can now safely use multiple JumpStacks in the same page and have at least one TOC generated. To achieve this, you will need to enable the TOC option in the stack settings, as before. Each TOC will require a unique ID. The ID needs to be in camelCase format (no spaces or special characters) and must not start with a number. Working on the assumption you have 3 different JumpStacks in your webpage, you could assign each a unique ID:

• toc1
• toc2
• toc3

Then wherever you want the separate TOCs displayed, you would enter the HTML markup accordingly:

<div id="toc1"></div>
<div id="toc2"></div>
<div id="toc2"></div>

Please note that the first item of each TOC will always be highlighted as active by default. This is because in each instance a TOC is generated, we highlight the closest item. To avoid this behaviour, go into the stack settings and uncheck the Highlight Active setting.

Important notes

Please follow these important guidance notes when using JumpStack:
  • The table of contents will show whether you enter the little code snippet. Take care to ensure this code is entered correctly. In particular, make sure ‘smart quotes’ are turned-off in the RapidWeaver Format menu.
  • If a user lands on your website without Javascript support, they will still see all your content. However no table of contents will get shown to them.

Browser support and print output

The JumpStack stack works with all major web browsers on both desktop and touch devices. If the page is printed or saved as a PDF, everything will be outputted in a tidy manor; preserving much of the original formatting and structure of the content. Depending on the RapidWeaver theme being used, URL’s may get appended after each link in the TOC or content area.

Styling with custom CSS code

There is lots of scope to restyle the JumpStack with various CSS code. This can help you style the table of contents or the navigation buttons. If you have questions about this, please ask.