Professional Documents
Culture Documents
Welcome to Polytechnic
I’d like to personally thank you for purchasing the Polytechnic WordPress Theme.
This theme aims at offering the power of one of the best multipurpose themes out there, focusing
on education, and streamlining it for ease of use. We know that there can be a learning curve to
using any new theme, which is why we made this documentation file as detailed as possible, and
offer helpful support when needed. We trust together, that we can make your educational
institution shine.
We’ve spent a lot of time thinking through the design concepts used, features/options included, and
building out functionalities that will benefit any educational institution. If you run into any questions,
issues, or feedback please let me know!
I hope you like it.
Charles Jones
To install this theme you must have a working version of WordPress already installed. For
information in regard to installing the WordPress platform, please see the WordPress Codex -
http://codex.wordpress.org/Installing_WordPress
Why so many steps? Because you purchased a powerful theme! We want to give you a head start by
giving you something real to work with, in addition to providing you with some helpful tools that you
and your clients can use.
If you are just looking for the basics, feel free to skim, but if you are looking to use specific elements
used in the live demo - we recommend importing the recommended plugins, demo-content, theme-
options, and widgets laid out in this documentation. These elements are best imported at the same
time, in the order provided here. Then you are welcome to edit or delete anything un-needed.
If you can't find the answer or are having trouble, please file a ticket at our dedicated support forum:
http://themeisland.ticksy.com/ I am here to help and love user feedback.
• Standard WordPress Theme Upload: Navigate to Appearance > Add New Themes > Upload.
Select “browse”, and choose the zipped theme file (you can find it in the Theme_Installable_ZIP
folder. Hit “Install Now” and the theme will be uploaded and installed.
If you run into any issues uploading using the method above, you can use this alternate method:
• FTP Upload: Using your FTP program, upload the un-zipped Theme Folder into the /wp-
content/themes/ folder on your server.
Once the theme is uploaded, you need to activate it via the prompt. You can also always go to
Appearance > Themes and activate your chosen theme.
If you dismiss the prompt, you can always revisit the Appearance > Install Plugins panel to add them
later on, although most of our themes require the plugins that they include. Note: we recommend
installing plugins before importing the Demo-Content.
So, to limit confusion, we’ve made all of the plugins used in the demo “required” or “recommended”.
These are included in this way to provide an easy way for you guys and gals to use all of the cool
tools that we use in our demo. Most of these plugins we use on a regular basis in our own projects,
and have provided you with them in case you want to use any of them in yours.
2.1.2.1 – Recommended: We recommend installing and activating all of the plugins, then if you want
to remove some that you aren't using you are welcome to. We've had a ton of feedback on this so
we are trying to a) offer you the user all of the handy tools that we use b) get your site as powerful
as the demo and c) make the installation process as simple as we can. Doing this step early will help
when you we import the demo content, options, and widget settings.
2.1.2.2 - Notes on Plugins: We do not provide support for these plugins. If you have questions on
these plugins we recommend directing your questions to the plugin authors. With that said, if you
have questions on how we are using them with our theme or need some basic help, feel free to ask
us. If you notice a bug in any of these please let us know so that we can include a patch. If it is a
plugin specific bug, we can pull it from our theme and let the plugin author know so they can offer
support and better their product.
2.1.2.3 – Plugins Styles v. Theme Styles: We spent months making sure everything looked great
and worked great. The theme by nature will manage styles across the theme for consistency. That
said, many users may want to use the native plugin styles – and that’s okay too. To open this up, we
are now offering plugin import files and theme-style option toggles. This essentially allows users to
use the default theme styles, and when the occasion arises – use the integrated plugin’s options
panel to customize these specific elements further.
2.1.2.4 - Plugin Updates: Free/Non-Premium plugins may need to be updated after up activation.
2.1.2.5 - Premium Plugin Updates: The Premium plugin versions that we are including have been
tested and work great. If you still want to update these just let us know. For more information about
premium plugins: http://themeisland.ticksy.com/faq/1860
• Standard WordPress Activation: You can install and activate each of these from the Prompt or
the Appearance > Install Plugins directory.
You can import the demo theme data with the following steps:
Install the WordPress Importer plugin from the Tools > Import panel (select "WordPress" from the
list of options).
If your theme comes with a WIE file (found in ThemeName / Resources / Demo_Data folder), then
you can upload this file to import some widget settings.
Note: This import method is not a reliable import method for the “Max Mega Menu widgets”.
Although they will import to this location, they unfortunately do not get assigned to their
corresponding menus.
You can always access the Theme Options panel from the Appearances > Theme Options page in
your dashboard. The theme options panel is where you will set up all “universal” theme variables, like
the logo, highlight colors, layout options, and lots more. We recommend navigating to this panel,
and hitting the Save Changes button at least once before moving on to other steps.
1. Navigate to the OptionTree > Settings > Import panel > and find the “Theme Options”
section. Note: there are several options here (ie. Settings, Layout, ect.). “Theme Options” is
the only field that we’ll be using.
2. Then also navigate and open the “Theme-Options.txt” file in a text editor (ThemeName /
Resources / Demo_Data folder)
3. Copy the entire code string/content from that .TXT file and paste it into the “Theme Options”
text field. Then click “Import Theme Options.”
4. Note that some settings may still need to be filled out or adjusted to your specific site
(like the Slider Shortcode, Categories, and Images), so take a few minutes to review the
options that we just imported in Appearance > Theme Options and play around with it. This
import method is a quick way to start, but by no means should it conclude your work in the
Theme Options panel!
For more information on the Theme Options panel, check out Part 4. The Theme Options Panel
below.
You can manage all of this in the Responsive Menu panel in your dashboard. The Responsive Menu
panels & tabs is where you will setup your Mobile/Responsive menu. We are now also providing a
Responsive-Menu-Skin to get you started. This will allow you to import the same styles that the
demo is using, while maintaining the customization options for this.
For more information on the Responsive Menu panel, check out Part 4. Mobile Menu section below.
You can also call the sliders that you create with the Revolution Slider via the Visual Composer
module. For more information on creating your own awesome slider(s), check out the full
documentation on this premium slider plugin here:
http://themepunch.com/codecanyon/revolution_wp/documentation/
Managing Menus – All menus are managed in Appearance > Menus. For more information on mega
menu items, see the next step - 4.2.
Edit Menu Basics - Editing Menus is standard WordPress knowledge. For more information on this,
please see the WordPress codex. What we will cover in this section is how to use the theme specific
menu functionality that we’ve added for you guys and gals.
Menu Locations and Widget Sidebars: This theme uses Menu Locations and Widget Sidebars to
make managing these elements more dynamic and easier. Even if you imported the demo data, you
will need to set your theme menus and widgets. This is because there isn’t really a great way to
reliably install the demo menu location and widgets sidebars onto your theme without introducing
some rather large security holes into this theme… as such, even if you imported the demo data, do a
couple quick things. Visit the following panels to do this:
This theme maintains 4 menu locations. This means you can control what menu is displayed for
each of these locations by assigning a menu to each location. Note: The mobile menu location is
now being set in Responsive Menu > Look & Feel > Choose Menu to Responsify (see details below).
Make sure to assign a menu to all locations. You can use the same menu for multiple locations, for
example the demo is using the Main Menu (included in the Demo-Content.XML noted in the
previous step) for the Primary location, Sticky location, and Mobile location. All of the menus used in
the demo (and referred to here) are included in the Demo-Content.XML file.
Primary Menu – The demo is assigning “Primary Menu” to this location. This location will be
displayed in the Header (default is right of the logo).
Secondary Menu – The demo is assigning “Secondary Menu” to this location. This location
will be displayed in the Tophat).
Sticky Header Menu – The demo is assigning “Primary Menu” to this location. This location
will be displayed in the Header when scrolling beyond the fold (when the Sticky Header Menu option
is set in Theme Options).
Mobile Menu – The demo is assigning “Primary Menu” to this location. This location will be
displayed at the top left of the viewport on smaller screens. To assign this menu, first make sure that
you’ve installed the included Responsive Menu plugin (Appearance > Install Plugins) and activated it
(Plugins panel). From there, navigate to Responsive Menu > and set the option titled “Menu to Use”.
You’ll also want to use the same “Breakpoint” that the theme is setup with (which is 767px).
You’ll also notice that you can customize the Button, Menu, Sub-Menus, and some other additional
functionality via the other tabs. The necessary options are included as free, and everything that is
being used in the demo is with the free version. You do not need to upgrade to pro, but the option is
there if you want. If you want to install the demo Responsive-Menu-Skin, see section 3.4 above.
• Appearances > Widgets
The theme has several “sidebar” areas that will accept widgets, including multiple “bonus” widget
areas that you can use with the “Dynamic Widgetized Sidebar” module in the Visual Composer. Most
of the widgets used should have been imported with the Importing Widgets step mentioned before.
With that said, you may need to visit this panel and assign any widgets that didn’t get assigned to a
sidebar location.
Note: Because of the nature of this free plugin (available in the WordPress Plugins Directory) there
are going to be some limitations to this option, but again we are including this to give you an option
to the standard method because we think that there are some cool features to this plugin that out
weight those limitations. The choice to use or not use this method is totally up to you. There also are
paid options available on CodeCanyon if you want to integrate something yourself, but none that we
were happy with - that also offered us the ability to provide it for you for free (via a developers
license). We do plan on supporting some paid options in the near future, but the licensing will be up
to you the user.
Transfer/Migration: Limitations that we have come across for this plugin really just include
the transfer/migration process. Essentially, this plugin creates unique tags for mega/widget
areas and when migrated, the tags don’t always match up to the new install – thus you’ll be
hard pressed to find out that you have to re-build these mega menus (ie. you are moving
from a local host to a live server, or one server to another). Because of this, we recommend
simply keeping a record of your widgets used (like we have below) just in case.
Plugin Deactivation: If this plugin is deactivated for any reason (manually, by activating
another theme, or if you are attempting to migrate this data to a new setup) you may loose
the content that you have built with the Max Mega Menu plugin. Again, this is just a
limitation of this free plugin and we are working on a way to make this easier for you guys
and gals. For now, though, we recommend keeping a record of the widgets you build/use as
a backup or just using the standard flyout menu (see 4.2.5-2).
Backup/Restore: We have found that when on the same database, the backing up and
restoring seems to work great since the corresponding tags don’t change. If updating the
theme, or if something looks broken in your mega menus, you should be able to simply
restore these widgets with your exported widgets.WIE file (see step 3.2 for more information
on doing this – the plugin is the same, just export instead of import to backup all widgets
including megamenus). Again, we recommend simply keeping a record of your widgets used
(like we have below) just in case.
4.2.0: Activate the plugin – When activating the theme, you’ll be prompted to activate this plugin. If
you skip the activation process you can install/activate it via Appearance > Install Plugins or via the
WordPress Plugins Directory (Plugins > Add New > Max Mega Menu or
https://wordpress.org/plugins/megamenu/.
4.2.2: Set Sub Menu Type - Navigate to a parent item that you would like to give a mega menu to
and open the menu item options. You’ll see that several mega menu options have been added.
Make sure to assign the sub menu type – Mega Menu or Flyout Menu. Flyout Menu will display the
standard sub-menu dropdown list. To display a mega menu (like this example), select Mega Menu
Panel.
4.2.3: Configure Panel Widgets - Mega menus are made up of various widgets and although
widgets are usually managed in Appearance > Widgets, the author of this plugin has provided a drag
and drop editing panel. To open this panel and manage your widgets, select “Configure Panel
Widgets”.
4.2.4: Add New Widget(s) - Note: We understand there are a lot of widgets and plugin widgets out
there. We are currently only supporting the ones used in the demo (Text, Custom Menu Wizard,
Image Widget, Contact Form 7, etc.) but please let us know if you are having an issue with your
custom widget.
4.2.5: Building Each Mega Menu - The following is a walk-though setup of widgets for each Mega
Menu for Main Menu
A – Custom Menu Wizard “No Title” (use “Widget for Mega Menu – Campus Life” menu). Note, this
widget is provided by the Custom Menu Wizard Plugin (https://wordpress.org/plugins/custom-menu-
wizard/) and calls is using the “Widget for Mega Menu – Campus Life” provided in the Demo-
Content.XML:
Menu Used:
B – Recent Posts Extended “Campus Life”. Note, this widget is provided by the Recent Posts
Extended plugin (https://wordpress.org/plugins/recent-posts-widget-extended/). Limit 3, Order ASC,
Orderby Date, Display Thumbnail, Display Excerpt On:
C – Image Widget “Gear Up The Semester”. Note, this widget is provided by the Image Widget plugin
(https://wordpress.org/plugins/image-widget/). Size used is Full Size with Align none.
A – Custom Menu Wizard “No Title” (use “Widget for Mega Menu – News & Events” menu). Note, this
widget is provided by the Custom Menu Wizard Plugin (https://wordpress.org/plugins/custom-menu-
wizard/) and calls is using the “Widget for Mega Menu – News & Events” provided in the Demo-
Content.XML:
Menu Used:
B – Recent Posts Extended “Latest News”. Note, this widget is provided by the Recent Posts Extended
plugin (https://wordpress.org/plugins/recent-posts-widget-extended/). Limit 2, Order DESC, Orderby
Date, Display Thumbnail, Display Excerpt Off:
C – Events Widget “Upcoming Events”. Note, this widget is provided by The Events Calendar plugin
(https://wordpress.org/plugins/the-events-calendar/). Show 3.
4.2.5-5 “Contact Us” Menu Item
(All Text Widget Markup can be found in Resourses/Theme_Demo_Data/Text_Widgets)
A – Search Widget “Search Directory (Live Search)”. Note, Live Search provided by Ajaxy Live Search
plugin (https://wordpress.org/plugins/ajaxy-search-form/):
You are not required to add a logo or fill out all of the options, but it is recommended that you visit
this panel at least once and hit the “save” button to establish the base settings for the theme.
Keep in mind that there is also the Theme Customizer – which is a separate panel that allows you
to fine-tune the appearance of the theme. We’ll review that later in this document.
Here’s and overview of each panel included with this theme. We’ve spent a lot of time making this as
logical and self-explanatory as possible. There is also an information icon that will provide additional
details for each specific option.
Theme Basics – Theme basics will include any major/global rules that run across the site. Right now,
we’re including options like logo here.
Top Hat Options – The options in this section will pertain to Top Hat specific items. Most of these
options are simple toggles (On/Off). The main thing we want to note here is that you can control the
column structure for the Top Hat Dropdown area. For example, if the Dropdown Area Columns
option is set to 3 Columns - the front end structure for this section will be laid out into three
columns. To manage the actual content used for this section, navigate to Appearance > Widgets:
Tophat Dropdown Column 1, Tophat Dropdown Column 2, Tophat Dropdown Column 3, & Tophat
Dropdown Column 4. Note that if you have content included in the Tophat Dropdown Column 4, but
have your Dropdown Area Columns set to 3, you’ll see Tophat Dropdown Column 4 pushed to the 1st
column under Tophat Dropdown Column 1.
Sticky Header Options – The Sticky Header is triggered when the viewport scrolls past the Primary
Menu. This Sticky Header menu can be manage by assigning a menu to it’s menu location in
Appearance > Menus > Menu Locations. This panel handles any additional options to help make this
section more customizable. Because this section is so much smaller than the Primary Header, we’ve
included some additional options to manage a custom logo and spacing for this logo and the menu
used. Note: the Dynamic To Top plugin is used to add the “scroll to top” button in this section (see
Section 8 – Dynamic To Top for more info.
Layout Options – The Layout Options panel sets global layouts across the site. This is especially
helpful for page layouts - the page layouts set here will establish the default layout that you would
like to use for all pages. Then, you can manage any custom layouts for each page in the page
options.
Skin Builder – The Skin Builder panel provide color options across the site. The Primary Color
option and Secondary Color option are linked to colors across the site, making adding in your colors
quick and easy. Then there are additional options to help manage color and image backgrounds
across the site for specific sections (ie. Top Hat, Header, Footer, etc.). Then, you can manage any
specific color options with the Front End Theme Customizer covered in the next section.
Post Options – This panel is similar to the Layout Options panel in that the options set here will
affect all posts across the site. If you need any additional options, there are some provided on a per
post basis.
Footer Options – This panel is similar to the Top Hat Options panel in regards to the columns
allocation, and has the same workflow for managing widgets (Appearance > Widgets > Footer
Columns 1, 2, 3, & 4). Some specialty options that we’ve added are the Pre-Footer and Post-Footer
Images.
The Pre-Footer-Image actually overlays the end of the content area and the beginning of the
footer area. Image size used for demo is 64px by 64px. We also recommend using a PNG
image file to provide necessary transparency
The Post-Footer-Image is set to be the width of called after all of the Footer Columns and
before the Sub-Footer-Area. Image size used for demo is 1198px by 136px. We also
recommend using a PNG image file to provide necessary transparency.
Custom CSS – We recommend all custom CSS is added to this panel. Why? This section gets loaded
last in the cascade and will allow you one place to go to backup custom styles. This section should
also be maintained in the event of an update (although we always recommend backing up just in
case).
Custom Scripts – This panel was added because we know developers need an easy place to add
global functions. This section should also be maintained in the event of an update (although we
always recommend backing up just in case).
Custom Login – This panel provides a quick and useful way to customize the login for your site (ie.
Yoursite.com/wp-admin) and includes: Toggling this option On/Off, Positioning of the Login form,
Uploading a Custom Background Image, Setting a Fallback Background Color, Uploading a Custom
Login Logo Image, and adding/positioning additional Text or HTML markup. This panel is still in beta
production, but if you are having any issues with it, please let us know.
Note! The Theme Customizer is entirely optional. You don’t need to change a single thing on it
and we have not used it at all in the demo… That said, it will give you control to change everything
from fonts, type sizes, type color, background colors, and lots more for every main section of the
theme. Here’s what it looks like:
Use this panel at your own peril! We’ve done our best to make sure the theme looks like the demo
does right out of the box on all viewport sizes… if you change any of the style settings radically (like
using strange fonts at a really big or small size), there’s always the possibility that you can break the
layout or end up with a less-than-attractive page. With that said, we’ve built in the tools that allow
you to customize a wide range of theme elements – for any extras that aren’t shown in this panel,
you’ll need to get into the theme CSS and template files (for advanced users only!).
Revolution Slider
Slider Revolution is currently the top-selling plugin on Codecanyon and widely used by theme
authors. We have included it in our theme in a very simple manner - there are no special
instructions that you should need to know beyond those that are provided by the plugin maker on
their site.
You can import our demo slider using the provided "demo_slider.zip" file from the "Revolution Slider
> Import Slider" panel (see Step 4 > Importing Sliders).
Visual Composer
Visual Composer for WordPress is drag and drop frontend and backend page builder plugin that will
save you tons of time working on the site content. You will be able to take full control over your
WordPress site, build any layout you can imagine – no programming knowledge required.
Polytechnic Courses
A custom theme plugin for creating and managing courses. You can access this plugin from the
"Courses" panel in the dashboard menu.
Contact Form 7
A powerful plugin for creating contact forms and adding them into your content. You can access this
plugin from the "Contact" panel in the dashboard menu.
This plugin helps to manage the Theme Customizer panel. There are two parts: The core plugin, and
the theme-specific plugin that must also been installed (it includes custom rules for our theme).
» Plugin Support & Documentation
A plugin that allows you to add new functionality for "live" search results to the usual WordPress
search bars.
Responsive Menu
This is a Highly Customizable Responsive Menu Plugin for WordPress, with over 120 customizable
options giving you a combination of 14,000 options!
You can import our demo Responsive-Menu-Skin using the provided "Responsive-Menu-Skin.json"
file from the "Responsive Menu > Import/Export" panel (see Step 3 > Importing Responsive Menu
Skin).
Dynamic To Top
This WordPress plugin adds an automatic and dynamic "To Top" button to easily scroll long pages
back to the top. It features an intuitive control panel to style and adjust to each website's need. The
button only appears for JS enabled browsers and can be optionally disabled for mobile visitors.
Recently added was a toggle to manage theme styles for this element (which can be found in
Appearance > Theme Options > Sticky Header Options > Use Theme Styles for Dynamic To Top).
Toggling the option OFF will remove theme styles for this element, and the Appearance > To Top
panel will take precedent. Default value is ON, and will pull styles from the theme. Reason - This is
for users who want to modify this element further using the native/included options. These option
are limited, though, which is why the theme has custom styles for this.
This section covers how to manage the courses included with the Polytechnic Courses plugin
(custom built and included/free for this theme). For more information on Sensei Courses, check out
Part 10.
Adding a new course is easy! Just navigate to Courses > Add New to add a new course. Each course
has three distinct option sections to note:
The Course Details section, which is used to distinguish the course from others. This sections is used
for information including: Course Description, ID, Number, Name, Time, Days, Location,
Prerequisites, etc.
Next, the Homework (Visual Composer) section allows for faculty to provide more dynamic content
such as lecture notes, study guides, required reading, etc.
Finally, the Polytechnic Course Categories section is where categories can be managed for this
course. See Course Catalog section for more details on how this is used.
The Course Catalog page template can be chosen for any page. This page template displays the title,
content, then courses based on the options set (Course Categories & Number of Courses).
This plugin is also not associated with the Polytechnic Courses provided with the theme.
After you purchase a license for Sensei, setup is easy as we are simply using their included dummy
data in the demo. Install and activate the plugin > then navigate to Tools > Import > WordPress >
find and select the dummy_data.XML file included in the woothemes-sensei folder > and hit import.
Then you can add your links to your menu, and explore the awesome features of Sensei.
If you run into any issues while using Sensei with this theme, please let us know. We are happy to
offer bug support for this plugin. For any plugin specific issues, general help, and support while
using Sensei, please contact WooThemes/Sensei to get support for your license:
https://support.woothemes.com/hc/en-us
This theme utilizes the user information which can managed in Users > Select a specific user > Edit.
WordPress already includes several fields that this theme is using, such as: Display name publicly as,
Email, and Biographical Info. This theme is adding some additional fields for users, including: College or
Department, Position or Title, Specialty, Department Phone, and Custom User Profile Photo. These fields
are being used/displayed for these users on author.php pages, and on single courses.
New User Role - Faculty
Admins can manage this role, assign users to it, and access/edit all Faculty user information. From a
user standpoint, users with this role will only have access to update their own Profile information,
add new courses, edit their own courses, and delete their own courses.
Part 12. Page Templates & Options
This theme comes with several built in page templates and page options to help you manage and
create awesome pages.
The page options include: Page Layout, Page Header, and Title Alignment.
Page templates set the default page functionality and can be used in conjunction with the page
editor and page layouts. The page templates included with this theme are the: Default Template,
Blog, Post Grid, Course Catalog, and Faculty Grid.
Default Template: This is the standard/blank template and is best when used in conjunction with
the Visual Composer Backend Editor (see Part 13 for more information on Visual Composer).
Blog: This template calls posts based on their categories and the categories selected in the Blog
options that appear when this template is selected. There is also an option to select how many posts
per page you would like before pagination occurs (ie. 3, 4, 5, etc.). -1 can be used if you would like to
show all posts.
Note: The post featured image and meta information come from each post but the options to
show/hide each of these is managed in Appearance > Theme Options > Post Options. These are
included here as global post rules to make it easier to have uniformity across your site without
having to change the option(s) for each post.
Post Grid: The post grid is a great template for showing posts (based on category) that you want to
display in a grid. This grid is image based, so make sure to have a featured image set for each post
used. We’re also including several options to manage this grid including: category, filter buttons, how
many columns, grid mode, aspect ratio, image width, image height, lightbox, display post
information, title, excerpt, category, links, image hover controls and number of posts per page.
Course Catalog: This template has been specially designed to call Polytechnic Courses and display
them in a catalog type format. Use the category selection to segment business courses from liberal
studies, or select all categories to so a full selection of courses. Course categories and information
are generated by the Courses section included with the Polytechnic Courses plugin.
Faculty Grid: This template is one of a kind. It actually queries users! And can filter based on the
course categories that they are published in. For example, if Ben is faculty member > publishes his
first course > and assigns the Business course category, he’ll show up in any Faculty Grid that has
the Business category selected. If he also publishes a course in Accounting, he’ll show up there too.
This plugin is included as a helpful tool to enhance the usability of basic WordPress features of the
theme itself. We are fully committed to providing support for bug reports and basic usage questions
for this plugin and provide updates for this plugin in our theme updates. With that said, if you would
like to have access to more than the basic coverage we offer (for example: auto updates, in-depth
support, etc.) we recommend purchasing a Regular License to satisfy this need and dealing directly
with the plugin author if you are having issues with the plugin.
We are adding a custom built module called the “Custom Hover Module” to the Visual Composer
Map. If you run into any issues with this module, please let us know directly so that we can provide
full support for our addition.
This section catalogs any theme specific modules or special layout/content guidelines that we’ve
used in the demo using the Visual Composer plugin. None of the following tricks are required for
theme use of course… in fact, these are simply personal embellishments and insightful uses of the
Visual Composer drag & drop layout builder… but just to be safe, we’re logging anything specific to
the theme here so no one gets confused!
Keep in mind that you can always import all of our demo-data (posts, pages, etc.) if you want to get
your hands on the actual content!
Modules: Visual Composer comes pre-integrated into the theme… we’ve even included a handful of
our own custom twists on their modules & support for other premium plugins via the module “drag
and drop” editor. Check out the full roster of modules here.
Templates: Visual Composer also comes with a templates tool, a great way to build and save
custom layouts. They also include some starter templates for you to choose from –
For example, you’ve built this awesome page but you want to use its layout/modules for several
other pages. With this feature, you can save this page’s template – let’s call it My Custom Page > Add
your new page(s) > and add in your My Custom Page template to your new page(s) to save you some
time. Then you can add, edit and delete your imported content on this new page without loosing the
one you saved.
As mentioned before - we are adding a custom built module called the “Custom Hover Module” to
the Visual Composer Map. This module is similar to the Single Image module provided by VC with
some custom options. Essentially, this module displays a single image with hoverable content.
Using the Hover Module Settings – The following images include walkthroughs on the options
provided.
Select a Start and End Height For the Animation - This can be managed per page (ie. All Hover
Image Modules for the page) in the Page Options
The Hover Grid – Using these modules individually is great, but if you’re building a grid (like we did in
the demo home page) then you’ll want to read the next few notes that we have for you.
• Image Size/Ratio: You'll notice that these are all 674 wide. This is to maintain their size for
responsive mode/mobile viewports where each module becomes the width of the content
container and re-organized so maintain readability.
• Image Size Option: You can use each of these to create your
own images, then leave the image size option blank to allow
for the responsiveness happen (based on column widths
from the row layout). You are welcome to use the image size option, but this is included as
an override for users who want to handle this control on their own.
• Helper Class - Standard Usage v. Grid Usage: We’re including a helper class to adjust
some of the image/grid margins. This is helpful because the Hover Image module in
standard content should act like standard content (ie. an image in regular usage). But in a
grid, you’ll want to adjust this collection of Hover Images to illustrate a more defined display.
So if you’re building a grid from scratch, make sure to edit the Visual Composer row
containing your grid > and add the helper class “hover-grid”
Using WooCommerce! We have setup this theme to work with WooCommerce in a simple and
straight forward way… but WooCommerce is a very complex plugin that you can spend a LOT of time
refining and tweaking to your needs. You should expect to spend at least a couple of hours if you
intend to seriously use WooCommerce, and that’s without looking into any of their extensions.
Furthermore, while we support WooCommerce, this is not an “e-Commerce” theme persay, and our
support for the plugin will be limited to basic layout and setup questions.
Setup Note - This plugin comes recommended with the theme and is included in the initial plugin
setup prompt. We understand that lots of users won’t need all of the bulk and extra pages that
WooCommerce adds, but it’s offered in the initial install to allow users to pick and choose what they
will use after setup. If you’ve installed this plugin (and imported the Demo-Content.XML, then you
should all you should be able to skip the following steps.
Visit your Plugins > Add New panel, then just search for “WooCommerce” and follow the on-screen
instructions to install and activate the theme.
Once installed, make sure you follow the button to install the WooCommerce pages:
Make sure you click the “Install WooCommerce Pages” button. If it doesn’t show up (or you
accidentally miss the chance to click it), just deactivate the plugin and re-activate it.
Once activated and installed, you should have a handful of new pages that the WooCommerce
plugin uses:
2. Fill out the WooCommerce Settings
Your first Part should be to visit the “WooCommerce” panel on the left side of your dashboard and
get a feel for how things are organized. Once you’re ready, visit the “WooCommerce > Settings”
panel to fill out the storefront settings.
If you want, you can install the handful of products shown in the theme demo page. This works just
like an ordinary WordPress XML import, but it will ONLY import products. We’ve separated this from
the main “demo import” process because lots of people don’t want to bother with the
WooCommerce stuff.
Visit your Tools > Import panel, select the WordPress import method, and upload the XML file found
in this theme’s download package that’s named “woo_demo_products.xml”.
If you choose to skip this step, just make sure that each product has a featured-image (aka Product
Image) assigned as the layouts really look better with this setup!
Once you are happy with your storefront (you can always preview it by viewing the “Shop” page in
your Pages panel – usually the URL is “http://yoursite.com/shop/”), you should add the storefront
link to your menu so that people can find it. That’s it!
Here are some additional quick links to some commonly used resources:
- Time To UPDATE The Theme? Great Idea!
- Standard Troubleshooting Steps
- Premium Plugin FAQs