Voyager Pro is built on a lightweight, responsive foundation that allows you to create versatile sites that look great on your visitor’s desktop computer as well as their mobile devices.
This page outlines the settings included in the Voyager Pro theme and talks about what they do, and how they affect the theme's display and functionality. In addition we have a tutorial and walk-thru video below that helps get you started using the theme, as well as gives you an idea what it can do before purchase. For examples of the theme in action, please visit its product page.
We've created several tutorial videos that walk you through using the major features of the theme. These are a good resource for both before and after your purchase. Watch them now to get an idea of some of the interesting things this theme can do, and follow along with them later after your purchase to help in building your new site.
Let's have a look at what each of the settings within the Voyager Pro theme can do. You may already be familiar with some of Voyager Pro's features, as a pared down, free version ships with RapidWeaver, but here we go over all of the features of the Pro version.
This page is good reference both in the event that you get stuck when building your site, as well as to get an idea of what controls and settings exist within the theme before you make your purchase.
RESPONSIVE VIDEO EMBEDS
ENABLE PHOTO ALBUM LIGHTBOX
Enabling this feature allows your photo album page images to open in a beautiful pop-up lightbox, further adding to the usefulness of the photo album page that comes with RapidWeaver. The video above covers this setting.
LOCK BANNER BACKGROUND
When enabled the background image for your banner will be sized up and locked in place. The image will appear so stay stationary as the visitor scroll down your page, adding a unique and interesting design to the banner area of the page.
ENABLE SCROLL TO TOP BUTTON
This feature, when enabled, will add a button to the bottom of the page. This button can be clicked on by your visitors. When clicked the page will scroll upwards, returning the visitor to the top of the page.
ENABLE STICKY NAVIGATION
This feature causes the navigation to be locked to the top of the web browser as the visitor scroll down through the page. This provides both a nice visual element as well as the ability for the visitor to have content access to the navigation bar.
STICKY NAVIGATION BAR HAS SHADOW
Enabling this setting adds a shadow to the navigation bar when it is in sticky mode.
HIDE BREADCRUMB TRAIL
Allows you to hide the breadcrumb trail navigation on a page-by-page basis.
SHOW SITE TITLE IN NAVIGATION OVERLAY
When the visitor clicks on the navigation toggle icon in the navigation bar area an overlay appears which houses the navigation items. Enabling this feature will have the site title included in the overlaid navigation area.
SHOW LOGO IN NAVIGATION OVERLAY
Enabling this feature will include the site logo inside of the overlaid navigation area when the visitor opens the navigation using the toggle.
REMOVE LINK FROM LOGO IN NAVIGATION BAR
When you enable this feature the link applied to the site logo, which takes the visitor back to the home page, will be disabled.
UPPERCASE SITE TITLE & SLOGAN
These two settings allow you to easily uppercase the text used for the Site Title and Slogan.
The Voyager Pro theme allows you to adjust the width of the main container which will house the majority of the content on your page. It includes several pre-set widths.
Here we can choose what we want our overlay navigation to look like. We're able to choose what type of translucent background we want for our overlay, as well as the ability to adjust the colors of the following items:
Voyager Pro lets you choose different height sizes for your banner area on your page. You can choose from one of the presets or opt for the flexible setting. Flexible allows the size of the banner to adjust based on the content within it. We highly recommend the Flexible setting if you're going to have a good deal content in the banner.
SITE TITLE FONT
In this section we can choose what font we'd like to use to style our site title, which appears in our navigation bar area. We've provided several great looking font choices to choose from. Additionally you can use color pickers to set the color of these site title items:
SITE TITLE DIVIDER
You're also able to choose between a light or dark divider line that sits below your site title. This helps it to incorporate with the banner's background image.
SITE SLOGAN FONT
In this section we can choose what font we'd like to use to style our site slogan. We've provided several great looking font choices to choose from. Additionally you can use color pickers to set the color of these site slogan items:
Here we can set the colors for the following items related to the Navigation Toggle Icon:
NAVIGATION TOGGLE HOVER BACKGROUND
Here we can choose from several preset styles for the background of our Navigation Toggle when it is hovered over.
This setting allows us to choose from one of several presets for our navigation bar when it is stuck to the top of the browser.
In Voyager Pro we've included a few different fonts to choose from for your page's body text. We've made sure to choose fonts that pair well with the other font choices in the theme. Additionally here you can also set the colors for the following items:
Here we have a drop down that allows you to select a font to style the headers on your page. These font choices pair well with the other font choices throughout the theme.
As with most themes the Voyager Pro theme allows you to place the sidebar on the left- or right-hand side of the page. If you don't have a need for a sidebar you can also opt to hide it altogether.
Additionally we have the following color pickers available to help in styling the sidebar:
With the breadcrumb trail settings we can adjust the overall styling using one of the presets in our drop down. Additionally we can choose to manually style is through the following color pickers:
Here we can adjust the following items within our Contact Form pages:
Voyager Pro has several ExtraContent areas to utilize in designing your pages. We've included color pickers for each of these areas:
Adjusting the styling for out footer area can be done using the following color pickers:
It is easy to style our social media badges within the Voyager theme. Below are the color pickers you can use to do so:
Here you can adjust the colors used for the Scroll To Top button on your page:
You can use some of our pre-defined code snippets to insert Social Media Badges on to your pages. You can check out our Social Badges video for more info. You're able to insert social media badges onto your pages via small code snippets, which we've provided below.
<a class="myBadge twitter" href="#"></a>
<a class="myBadge google-plus" href="#"></a>
<a class="myBadge dribbble" href="#"></a>
<a class="myBadge facebook" href="#"></a>
<a class="myBadge instagram" href="#"></a>
<a class="myBadge github" href="#"></a>
<a class="myBadge linkedin" href="#"></a>
<a class="myBadge skype" href="#"></a>
<a class="myBadge tumblr" href="#"></a>
<a class="myBadge youtube" href="#"></a>
<a class="myBadge apple" href="#"></a>
<a class="myBadge windows" href="#"></a>
<a class="myBadge xing" href="#"></a>
<a class="myBadge email" href="#"></a>
<a class="myBadge android" href="#"></a>
<a class="myBadge soverflow" href="#"></a>
<a class="myBadge pintrest" href="#"></a>
<a class="myBadge dropbox" href="#"></a>
<a class="myBadge behance" href="#"></a>
<a class="myBadge vine" href="#"></a>
<a class="myBadge rss" href="#"></a>
<a class="myBadge comments" href="#"></a>
<a class="myBadge pencil" href="#"></a>
<a class="myBadge soundcloud" href="#"></a>