Jumbotron
A jumbtron is used to draw attention to an important item. This design goes upscale by having the option to have a two color gradient background or an image inserted in three sizes with a lazy loading function.
Links
The jumbotron can have one internal/external link and an option to add another internal link with lots of styling options.
The height is adjusted used a slider that adds a percetage vertical padding.
Navigation
Page Scroll
A folio website usually has only one page so a navigation menu is not required. To encourage visitors to scroll down to other sections a simple scroll function can be used or a navigation to scroll to specific sections.
Scroll Navigation
The ThemeKit Folio Scroll Navigation smooth scrolls to anchors and has the option to add a smooth scroll to the top function.
The links have active indicators on hover and the ThemeKit Folio Heading, ThemeKit Folio Line/Spacer and the ThemeKit Folio Content Fade In widgets can all be used as anchors.
An alternative to the scroll navigation would be the ThemeKit Folio Scroll widget which scrolls down the page in viewport height steps and has a back to the top function.
Scroll
The ThemeKit Folio Scroll widget combines smooth scroll down in viewport height steps and a smooth scroll to the top.
Each function has its own control for setting the animation time in milliseconds and the scroll tabs can be hidden on mobile phones if required.
Since the tabs are fixed position the widget can be inserted last on the EverWeb design canvas below the footer bar.
Follow the link below to see it in action …
Multi Page Website
When the portfolio website has two or more pages it can have either inline links or a toggle nab opened by an action tab.
The ThemeKit Folio Links show below add a little interest to the the page design with their animatedarrow on hover and are suitable for use on responsive pages.
Offscreen Navigation
The standard dropdown navigation activated by a "hamburger icon" tab is not suitable for a responsive website.
The action tab must always be in view and located in the bottom half of the screen when viewed on touch devices.
Half way down the screen near the left or right edge is the best compromise.