The One Pager

This theme includes support for WooCommerce, Features & Testimonials plugins.

Note: This product has been retired and is not for sale. Documentation is no longer being updated.

Installing your Theme ↑ Back to top

To learn how to install your theme please reference our documentation here: Installing a Theme

Checking your theme version ↑ Back to top

You can confirm your theme and WooFramework version by going to: The One Pager > Framework

Updating your theme ↑ Back to top

It is very important to ensure you have the latest version of your theme at all times. This is the best way to proactively troubleshoot issues on your site.

Homepage Overview ↑ Back to top

As the name implies, this theme is made to run all on one page. You may be tempted to add pages, but don’t give in as this theme looks and works great with just one page.  So let’s go over getting this all setup, starting with the header.

theonepager-overview

Header Overview ↑ Back to top

To customize the header go to: The One Pager > Settings > Header.

Screenshot on 2014-07-02 at 17-12-03

Here you will find the following options:

  • Optionally set an intro message.
  • Pick a text color for the intro message.
  • Select a background color if not using an image.
  • Optionally upload an image.*
  • Select how you would like to repeat the background-image.
  • Select how you would like to position the background.
  • Select whether the background should be fixed or move when the user scrolls.
  • Be sure to Save all Changes when you are finished.
  • The header background image is displayed as a CSS background image, which means it sits behind the content, and depending on the size of the screen and the header content, certain areas of the image may not be visible. For this reason, the header image is not intended to display an image that must be shown in full (e.g. an image containing text).
To remove The One Pager logo, you must either upload your own Custom Logo Image or enable the Site Title and Description.

Adding your Logo ↑ Back to top

To add your logo go to: The One Pager > Settings > General Settings > Quick Start > Custom Logo and Upload your logo image (.jpg or .png).

Text Title ↑ Back to top

If you do not have a logo image you can use the Text Title and optional Site Description instead. To enable the Text Title:

  1. Go to: The One Pager > Settings > General Settings > Quick Start > Text Title and select the checkbox to Enable text-based Site Title and Tagline.
  2. Select the font size, family, weight and color for the Site Title.
  3. Optionally select to display the Site Description.
  4. Optionally Select the font size, family, weight and color for the Site Description.
  5. Save all Changes.
Please note: Enabling the Site Title and Description will override the Custom Logo Image setting. If you would prefer a Custom Logo Image, you must disable this setting for the image to appear.

To edit the Site Title and Description:

  1. Go to: Settings > General
  2. Edit the Site Title and Tagline (Site Description).
  3. Save Changes.

Featured Slider ↑ Back to top

Below your header you have the option to have a featured slider.

Screenshot on 2014-07-02 at 17-13-24

To setup the Featured Slider:

  • Go to: The One Pager > Settings > Featured Slider > Slide Content.
  • Select the checkbox to Enable the featured slider on the homepage.
  • Enable or disable the Frame for the Featured Slider which looks like the Apple Cinema Display.
  • Select the number of slides to rotate through.
  • You can optionally select a slide group to only display slides from one group.
  • If a slide has a video in the “Embed Code” field, optionally choose to display the slide title & content.
  • Select which way you wish to order your slider posts.
  • Save all Changes

To add slides:

  1. Go to Slides > Add New.
  2. Add slide text in the main content area, including a title and description.
  3. Add a Featured Image for the slide.
  4. Scroll down to review additional options in The One Pager Custom Settings for URL to link to or to add video embed code.
  5. Publish slide to save.

Homepage Modules ↑ Back to top

To setup the Homepage Modules go to The One Pager > Settings > Homepage > Homepage Setup.

Screenshot on 2014-07-02 at 17-15-41

Here you’ll see each module you can enable or disable, choose at your discretion.

  • Enable Features
  • Enable Posts Timeline
  • Enable Testimonials
  • Enable Hero Product
  • Enable Featured Products
  • Enable Content Area
  • Enable Contact Area
Note: In order for the Homepage Modules to appear you must go to: Settings > Reading to set the Front page displays as Your latest posts. The Homepage Modules will not display if you set your homepage to a static page.
Your Homepage Theme Options will not include the Features, Testimonials, Hero or Featured Products menu options until you install the Features, Testimonials and WooCommerce plugins. Please read below on how to set this up.

Features ↑ Back to top

This area requires the use of our Features plugin and easily lets you setup feature posts for your site. Use this to highlight selling points of your business, product, or even yourself.

The One Pager Features

To enable the Features homepage content:

  1. Download, install and activate the Features plugin.
  2. Go to: The One Pager > Settings > Homepage to Enable the Features.
  3. Save all Changes.
  4. Go to: Features > Add New.
  5. Add a Featured Image to set the icon.
  6. Scroll down to find the Features Details panel to optionally set a URL for the feature to link to.
  7. Optionally set an excerpt to display in place of the feature content on the homepage.
  8. Publish your new feature.
  9. Repeat to add a minimum of 4 features to properly fill the homepage region.

To configure the Homepage Features options:

  • Go to: The One Pager > Settings > Homepage > Features.
  • Select the number of features to show.
  • Enter the Heading for the Features
  • Enter the Title for the text that appears below the Heading

Posts Timeline ↑ Back to top

The Posts Timeline is an awesome way to highlight your 3 most recent posts or you can display posts from a designated tag.

The One Pager Posts Timeline

To setup the Posts Timeline:

  1. Go to: Posts > Add New to add a few posts.
  2. Go to: The One Pager > Settings > Homepage to Enable the Posts Timeline.
  3. Go to: The One Pager > Settings > Homepage > Posts Timeline to configure the following settings…
  4. Enter a Heading for the Posts Timeline.
  5. Enter a Title for the Posts Timeline.
  6. Optionally, pull in posts from a certain tag by selecting a posts tag.
  7. Save all Changes.

Testimonials ↑ Back to top

The testimonials area is powered by our Testimonials plugin allowing you to highlight quotes from your customers about your products or business.

To enable the Testimonials homepage content:

  1. Download, install and activate the Testimonials plugin.
  2. Go to: The One Pager > Settings > Homepage > Testimonials.
  3. Add title for Testimonials section.
  4. Save all Changes.
  5. Go to: Testimonials > Add New.
  6. Add a Featured Image or email linked to a Gravatar email account. Featured image will override the Gravatar image.
  7. Publish.
  8. Repeat to add a minimum of 4 testimonials to properly fill the homepage region.

To configure the Homepage Testimonials options:

  • Go to: The One Pager > Settings > Homepage > Testimonials.
  • Select a number of testimonials to show.
  • Select a heading for the testimonials area.
  • Select a title for the testimonials area.
  • Save all Changes.

Hero Product ↑ Back to top

The hero product area, powered by WooCommerce, gives you a clean and clear space to show off one product. This could be a featured product of the month, or simply your hottest seller.

For this section to work you’ll need to download, activate and setup the WooCommerce plugin. To read more about how to setup WooCommerce please see our docs here: Setting up WooCommerce.
The One Pager Hero Product

After setting up WooCommerce, to configure the Homepage Hero Product:

  • Go to: The One Pager > Settings > Homepage > Hero Product.
  • Select your hero product
  • Enter a heading for the hero product area
  • Save all Changes.

The rest of the details are pulled in from your product in WooCommerce.

Featured Products ↑ Back to top

As the name implies, this area allows you to feature a handful of your products. Once again powered by WooCommerce, here is how you set this up.

For this section to work you’ll need to download, activate and setup the WooCommerce plugin.
The One Pager Featured Products

To setup the Homepage Featured Products:

  • Go to: The One Pager > Settings > Homepage > Featured Products.
  • Select the number of products to feature
  • Select the number of columns to display the products in
  • Enter a heading for the featured products area
  • Enter a title for the featured products area
  • Save all Changes.

Homepage Content Area ↑ Back to top

The content area content type can either be set as a page of content or your most recent blog posts.

The One Pager Content Area – Blog Post example

Adding Page Content to the Homepage ↑ Back to top

To add page content to your homepage:

  1. Go to: Page > Add New.
  2. Add homepage title and content.
  3. Publish page.
  4. Go to: The One Pager > Settings > Homepage > Content Area > Page Content
  5. Set the Content Type to Page Content in the dropdown menu.
  6. Set the Page Content as your newly created page.
  7. To Show Sidebar on the homepage select the checkbox. The sidebar setting inherits the global layout, rather than the layout of the page selected.
  8. Save all Changes.

Adding Blog Posts to the Homepage ↑ Back to top

To add blog posts to your homepage:

  1. Go to: The One Pager > Settings > Homepage > Content Area > Page Content
  2. Set the Content Type to Blog Posts in the dropdown menu.
  3. Set the number of blog posts to display.
  4. To Show Sidebar on the homepage select the checkbox.
  5. Save all Changes.

To exclude categories from displaying on the homepage:

  1. Go to: The One Pager > Settings > Layout > Category Exclude – Homepage
  2. Insert the category slugs to hide. The category slug can be found by going to Posts > Categories in the right Slug column.
  3. Save all Changes.

Contact Area ↑ Back to top

The Contact Area of The One Pager theme has a big, bold contact form.

The One Pager Contact Form

To setup the Homepage Contact Area:

  1. Go to: The One Pager > Settings > Contact Page > Contact Information to enter your email address.
  2. Go to: The One Pager > Settings > Homepage > Contact Area to Enable the contact form.
  3. Enter a Heading for the Contact Area.
  4. Enter a Title for the Contact Area.
  5. Optionally enable the social icons. To configure the social icon links go to: The One Pager > Settings > Subscribe & Connect > Connect.
  6. Save all Changes.

Using A Widgetized Homepage ↑ Back to top

You can optionally utilize the Homepage Widget area to setup your homepage. To add widgets/re-order the homepage go to: Appearance > Widgets in your dashboard and the drag widgets into the Homepage widget area in the right column.

To learn more about how to add Widgets please see our tutorial here: How to Add Widgets
Please note! Using the Appearance > Widgets – Homepage widget area will automatically override the default homepage modules and settings once you add a widget into the Homepage widget area.

The-One-Pager-Homepage-Woo-Component-WidgetTo re-order the Homepage Theme Options included with The One Pager, add the Woo-Component widget, selecting the appropriate component you want to display from the dropdown. The One Pager’s Woo-Component widget options include: Posts Timeline, Blog Posts, Page Content, Contact Area, Hero Product and Featured Products. You can add the Woo-Component widget for each of these options, and re-order your homepage as you see fit!


Contact Page ↑ Back to top

To setup a Contact Page:

Screen Shot 2014-07-01 at 14.41.38

  1. Go to: Pages > Add New
  2. Title your Contact Page
  3. Go to: Page Attributes > Template just below the publish module to select the Contact Form page template.
  4. Publish your page.
  5. Go to: The One Pager > Settings > Contact Page to enter the Contact Form Email address.
  6. From here you can also enable the information panel (see below), enter your Twitter username to show your latest tweet and enable the Subscribe & Connect panel to display your social icons (see demo example)
  7. Be sure to Save All Changes when finished.

Screenshot on 2014-07-02 at 17-18-08

To learn more about how Page Templates please see our video tutorial here: Page Templates

Contact Page Maps ↑ Back to top

Screenshot on 2014-07-02 at 17-21-37

To setup Google Maps:

  • Enter your Google Maps coordinates. Example: -33.924868,18.424055 – To find the Google Coordinates, search for your location on a Google Map, right click the pin and select “What’s Here”. This will input the Google Coordinates in the search box.
  • Optionally disable mousescroll for all the Google Maps on the site. This could improve usability on your site.
  • Set the map height.
  • Set the Default Zoom Level.
  • Select the Map Type: Normal, Satellite, Hybrid or Terrain.
  • Enter Map Callout text to be shown when you click on the map marker for your location.

Theme Menus ↑ Back to top

There is one menu location in this theme, called the Top Menu. You can create anchor links in the Top Menu to jump down to the various areas of the homepage.

To setup your custom menu:

  1. Go to: Appearance > Menus.
  2. Enter a Menu Name for your custom menu then select Create Menu.
  3. In the Theme Locations in the dropdown to set the Top Menu area and Save.
  4. Add your Custom Links, Pages or Categories to your new custom menu. To learn more, see our docs on Menus.
  5. Be sure to Save Menu when you are finished.
Set your custom menu in the Theme Location panel
Set your custom menu in the Theme Location panel

To learn more about setting up your custom menus, see: Menus.

To setup anchor links in the Top Menu for the homepage:

Custom Menu Link
  1. Add a Custom Link
  2. Enter the div ID. To learn how to do this, please see our tutorial here: Finding the div ID or view our list below.
  3. Enter the navigation label, if you want to rename the page title for nav display.
  4. Use your full homepage URL (including a trailing /), along with the # sign and the ID of the DIV tag

An example link would be: http://yourdomain.com/#featured-slider

Please note!
1) You can not have www. in the beginning of your URL in order to have anchor links work correctly. You must have the URL begin with http:// or https:// (as shown above).
2) The order of the menu should be the same as the order of the page components.

Here is a list of the Homepage Modules IDs:

  • #featured-slider
  • #features
  • #posts-timeline
  • #home-hero
  • #home-shop
  • #testimonials
  • #blog-posts
  • #page-content
  • #contact-area

Homepage Widget Module ID Exceptions ↑ Back to top

If you are using Homepage Widgets instead of the Homepage Theme Options for Features & Testimonials, the IDs are as follows:

  • #woothemes_features-2
  • #woothemes_testimonials-2
Learn more about how to setup your Theme Menus by watching our video tutorial here: Setting up Custom Menus

WooCommerce - the most customizable eCommerce platform for building your online business.

Back to the top