Scrollider wf6

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: Scrollider > Framework

Activate your Theme Key

↑ Back to top

After you install your theme, be sure to activate your theme key by downloading and installing the WooCommerce Helper plugin. This will verify your site when contacting support and will enable 2-click updates for quick theme upgrades down the road.

Updating your theme

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.

Overview

↑ Back to top

This theme includes support for the WooCommerce plugin.

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

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 Settings > Homepage Setup.

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.

Setting Up The Slider

↑ Back to top

Scrollider comes with a unique slider. You’ll first want to define some settings for your slider. Go to Scrollider > Settings > 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 settings. If you’ve set it to show 3 slides then we need to create at least 3 slides.

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 Settings > Homepage Setup. Then under Scrollider > Homepage Settings > Features you’ll find more options: Once you’ve configured your settings you will need to create at minimum the number of features you specified in the theme settings. 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 Settings.

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. Now configure your Portfolio page settings. Go to Settings > 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

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.

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