Image
RapidWeaver Theme

Voyager Pro

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.


Tutorial Videos

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.

Custom Banners
ExtraContent Areas
Full-page Navigation
Blog Entry Toppers

What does this do?

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.

Image

Theme Toggles

RESPONSIVE VIDEO EMBEDS
If you're going to be including video embeds from YouTube or Vimeo on your page you'll want to enable this feature. This features applies a bit of javascript code to the page which will make these embeds responsive. The video above covers this setting.

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.

Image

Content Width

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.

Image

Navigation Overlay

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:

  • Navigation Closer Icon
  • Navigation Site Title
  • Page Names
  • Active Page
Image

Banner Height

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.

Image

Site Title

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 - Normal
  • Site Title - Sticky Navigation Bar

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.

Image

Site Slogan

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:

  • Site Slogan
Image

Navigation Toggle Icon

Here we can set the colors for the following items related to the Navigation Toggle Icon:

  • Toggle Icon - Normal
  • Toggle Icon - Sticky Navigation Bar

NAVIGATION TOGGLE HOVER BACKGROUND
Here we can choose from several preset styles for the background of our Navigation Toggle when it is hovered over.

Image

Navigation Sticky Bar Background

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.

Image

Body Text

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:

  • Body Text
  • Body Links
Image

Headers

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.

Image

Sidebar

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:

  • Sidebar Background
  • Sidebar Text
  • Sidebar Links
Image

Breadcrumb Trail

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:

  • Breadcrumb Background
  • Breadcrumb Links
  • Breadcrumb Dividers
Image

Contact Form Colors

Here we can adjust the following items within our Contact Form pages:

  • Submit Button Foreground
  • Submit Button Background
  • Reset Button Foreground
  • Reset Button Background
Image

ExtraContent Areas Colors

Voyager Pro has several ExtraContent areas to utilize in designing your pages. We've included color pickers for each of these areas:

  • ExtraContent Area 1 - Text
  • ExtraContent Area 1 - Links
  • ExtraContent Area 2 - Background
  • ExtraContent Area 2 - Text
  • ExtraContent Area 2 - Links
  • ExtraContent Area 3 - Background
  • ExtraContent Area 3 - Text
  • ExtraContent Area 3 - Links
  • ExtraContent Area 4 - Text
  • ExtraContent Area 4 - Links
Image

Footer Colors

Adjusting the styling for out footer area can be done using the following color pickers:

  • Footer Background
  • Footer Text
  • Footer Links
Image

Social Badge Colors

It is easy to style our social media badges within the Voyager theme. Below are the color pickers you can use to do so:

  • Badge Background
  • Badge Background - Hover
  • Badge Icon
  • Badge Icon - Hover
Image

Scroll to Top Button Colors

Here you can adjust the colors used for the Scroll To Top button on your page:

  • Button Background
  • Button Icon
Image

Social Media Badge Snippets

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.

Badge Snippets Badge Snippets
Image
Twitter

<a class="myBadge twitter" href="#"></a>

Google Plus

<a class="myBadge google-plus" href="#"></a>

Dribbble

<a class="myBadge dribbble" href="#"></a>

Facebook

<a class="myBadge facebook" href="#"></a>

Instagram

<a class="myBadge instagram" href="#"></a>

Github

<a class="myBadge github" href="#"></a>

LinkedIn

<a class="myBadge linkedin" href="#"></a>

Skype

<a class="myBadge skype" href="#"></a>

Tumblr

<a class="myBadge tumblr" href="#"></a>

YouTube

<a class="myBadge youtube" href="#"></a>

Apple

<a class="myBadge apple" href="#"></a>

Windows

<a class="myBadge windows" href="#"></a>

Xing

<a class="myBadge xing" href="#"></a>

Email

<a class="myBadge email" href="#"></a>

Android

<a class="myBadge android" href="#"></a>

Stack Overflow

<a class="myBadge soverflow" href="#"></a>

Pintrest

<a class="myBadge pintrest" href="#"></a>

Dropbox

<a class="myBadge dropbox" href="#"></a>

Behance

<a class="myBadge behance" href="#"></a>

Vine

<a class="myBadge vine" href="#"></a>

RSS

<a class="myBadge rss" href="#"></a>

Comments

<a class="myBadge comments" href="#"></a>

Pencil

<a class="myBadge pencil" href="#"></a>

Sound Cloud

<a class="myBadge soundcloud" href="#"></a>

  • Body Text