1. Documentation
  2. Themes
  3. Scrollider

Scrollider

The Scrollider theme includes support for the WooCommerce plugin.

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

Menus ↑ Back to top

There are two menu locations included in this theme:

  • Primary Menu – This is the menu that sits to the right of  your logo.
  • Top Menu – This is the smaller menu area at the very top of the theme.

To set up your menus go to: Appearance > Menus

Setting Up the Homepage ↑ Back to top

The Scrollider Homepage, Explained

Homepage Area (3-col) ↑ Back to top

Scrollider’s homepage contains a unique 1 to 3 column design. This is controlled by adding widgets to the “Homepage Left”, “Homepage Centre” and “Homepage Right” widgetized areas. If you add widgets only to “Homepage Left”, those widgets will take up the full width of the homepage content area. If you add widgets to two of the areas, each column will take up half of the homepage content area. If you add widgets to all three of these columns, you will receive a 3 column layout.

You can also define a heading for this area if you go to Homepage Options > Homepage Setup.

NOTE: for the home page to work properly, the Reading Settings need to to have the Front page displays set to Your latest posts

Homepage Area (full-width) ↑ Back to top

There is also a “Homepage Full” widget area, for displaying custom content in a full-width area below the columns section.

By default, this content is displayed as “News from the Blog”. This can be overridden by any one or more widgets, which will all display in full-width.

To customise the “News from the Blog” display in this section, add the “Woo – News from the Blog” widget to the “Homepage Full” widget area. Please note: this widget will not work well in any other widget area other than “Homepage Full” as it is built to span across the full width of the site.

Setting Up The Slider ↑ Back to top

Scrollider has a unique slider in it. You’ll first want to define some options for your slider.

Go to Scrollider > Theme Options > Featured Slider

  1. Enable or disable the Slider.
  2. Choose how many slides you want to display.
  3. Optionally choose a slide group if you only want to display certain slides (see below).
  4. Choose whether to display next/previous arrows on the slider.
  5. Choose whether to display pagination dots at the bottom of the slider.
  6. Choose whether hovering over the slider will pause it.
  7. Select the interval (in seconds) that each slide will display for.
  8. Choose how long it will take (in seconds) to transition from one slide to the next.
  9. Choose the order that your slides will be displayed in.

Adding Slides ↑ Back to top

After you’ve got it setup, you’ll need to create some slides for it. It’s important to note that you need to create at minimum the number of slides you set in the theme options. If you’ve set it to show 3 slides then we need to create at least 3 slides.

Creating A Slide In Scrollider

To add a slide go to Slides > Add New:

  1. Type a title for the slide and complete all of the post’s body content.
  2. If you want an image to appear as the background to the entire slide than add a Featured Image in the provided Featured Image panel.
  3. If you want to use a video simply past the embed code in the proper box under the Custom Settings
  4. Choose Enable Content Overlay if you want to display a semi-transparent background behind the slide content when using a Featured Image. Example
  5. If you don’t want a transparent box behind the text, upload your image using the Custom Image Upload field instead: Example
  6. If you want the slide title to link to a page, you can enter the page URL in the Slide URL field.
  7. Optionally assign this slide to a Slide Group in the Slide Groups panel on the left (see below).
  8. Publish the slide.

Featured Slider Images ↑ Back to top

If using a featured image, the image is designed to fill the entire width of the slide, and should be a relatively large image in dimension (3000 pixels wide is a good starting point). The image height must be greater than the content height, otherwise you will see a grey background beneath the image.

Slide Groups ↑ Back to top

If you use our WooSlider plugin elsewhere on your site, then you may want to create separate slide groups, so you can display one set of slides in the homepage slider and other sets in your WooSlider sliders.

To create a slide group go to:
Slides > Slide Groups

  1. Enter a name for your Slide Group (e.g. Homepage).
  2. Click “Add New Slide Group.”

Features Area ↑ Back to top

Next is the Features Area. You can enable this under Scrollider > Homepage Options > Homepage Setup.

Then under Scrollider > Homepage Options > Features you’ll find more options:

Scrollider Features Settings
Scrollider Features Settings

Once you’ve setup your options you will need to create at minimum the number of features you specified in the theme options. If you set it to show 3 Features then be sure to create at least 3 features.

To add a feature go to Features > Add New:

  1. Type a title for the feature and complete all of the post’s body content.
  2. If you want an icon to appear beside the feature then upload a “Features Icon” in the Scrollider Custom Settings panel.
  3. Add an excerpt for the feature in the “Features Excerpt” field in the Scrollider Custom Settings panel. This will be displayed in the Homepage features area.
  4. Optionally enter a URL if you want your feature to link to somewhere other than your feature post.
  5. Publish the Feature.

Features Area – Social Links ↑ Back to top

The social links next to the features on the homepage are controlled under the “Subscribe & Connect” settings under “Theme Options”.

Setup The Portfolio ↑ Back to top

The portfolio area below the Features is a great spot to show off the work you’ve done and is pretty simple to setup.

First we’ll need to be sure that your portfolio page is setup correctly. Create a page and title it however you’d like, we’d recommend calling it Portfolio. Then be sure to assign the Portfolio page template to it.

Portfolio Page Template

Now configure your Portfolio page settings. Go to Theme Options > Portfolio Settings:

Scrollider Portfolio Settings
Scrollider Portfolio Settings
  1. Enter a URL Base for your Portfolio Items (we recommend ‘portfolio-items’). Note: This should not be the same as the page slug of your Portfolio page.
  2. Optionally choose to exclude certain Portfolio Galleries from the Portfolio page navigation.
  3. Optionally choose to exclude Portfolio items from your site’s search results.
  4. Choose whether portfolio items should open in a lightbox or link to the Portfolio item page when clicked.
  5. Choose whether to enable pagination in the Portfolio page (this will disable the Javascript filters at the top of the page).

Add items to the Portfolio ↑ Back to top

Go to Portfolio>Add New.

  1. Type a title for the post and complete all of the post’s body content.
  2. If you are posting an image(s) upload them via the Featured Image panel*
  3. If you want to use a video simply past the embed code in the proper box under the Custom Settings
  4. Publish the portfolio post.
  • Note: Portfolio images must be uploaded from your computer, you can’t use images that are already in your media library.

Using Portfolio Galleries ↑ Back to top

Scrollider Portfolio Galleries
Think of Portfolio Galleries as categories for your portfolio posts. This is an easy way to organize your work into certain categories that then can be filtered on the portfolio page.

You can easily create and add portfolio posts to galleries in two ways. One way is under Portfolio > Portfolio Galleries. This is just like creating categories for your posts. You can also create new portfolio categories when editing/writing a portfolio post.

Add Portfolio Gallery

Adding a Portfolio Post to Portfolio Gallery

Single Posts Widget Area ↑ Back to top

On each single post is a “Single Full” widget area. This can contain any widget. We recommend using the “Woo – Related Posts” widget in this area, which will automatically detected related posts based on the terms assigned to that post. This applies across any post type (for example, products that share a common category, or blog posts that share a common tag).

You could also customise this per-blog post using our WooSidebars plugin.

Custom Scrollider Widgets ↑ Back to top

The theme includes 10 custom widgets that you can add to any of your 10 widgetized regions – 1 sidebar, 4 footer widgetized regions, a full-width homepage region, 3 homepage columns and a full-width widgetized region on single post screens. Scrollider also includes styling for many of our WooDojo widgets.

The custom Woo widgets included are:

  • Woo – Adspace
  • Woo – Search
  • Woo – Flickr
  • Woo – Blog Author Info
  • Woo – Embed/Video
  • Woo – Subscribe/Connect
  • Woo – News From The Blog
  • Woo – Post Type Slideshow
  • Woo – Related Posts
  • Woo – Feedback

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

  • 30 day money back guarantee
  • Support teams across the world
  • Safe & Secure online payment