Spring Documentation

Home / Spring Documentation

01.GET STARTED

File Include

  • The theme zip file spring.zip
  • Child theme for easier customize in spring-child.zip
  • Document in Documentation.zip

Back To Top

02.INSTALLATION

System Requires

To use Spring, you must be running WordPress 3.9 or higher, PHP5.4 or higher, and MySQL 5 or higher. We have tested it with Mac, Windows and Linux. Below is a list of items you should ensure your host can comply with.

Recommended PHP Configuration Limits

Many issues that you may run into such as: white screen, demo content fails when importing, empty page content and other similar issues are all related to low PHP configuration limits. The solution is to increase the PHP limits. You can do this on your own, or contact your web host and ask them to increase those limits to a minimum as follows:

  • max_input_vars = 3000
  • memory_limit = 256M
  • max_execution_time = 300
  • max_input_time = 300
  • upload_max_filesize = 64M
  • post_max_size = 64M

Back To Top

Download Spring Theme

Get the Pure Theme installation package from your account (after login on Themeforest.net) at  downloads page  and save it to your computer.

theme-download

Back To Top

Theme Installation

Installation via WordPress

Step 1 – Login to your WordPress Dashboard

Step 2 – Go to Appearance > Themes. Click the Add New button or Add new theme link.

Step 3 – Click on the Upload Theme button. Locate “spring.zip” and click Install Now.

Step 4 – Click on the Activate button to activate Spring.

installation-via-wordpress-1

installation-via-wordpress-2

installation-via-wordpress-3

installation-via-wordpress-4

Installation via FTP

Step 1 – Log into your Hosting server using an FTP client (like FileZilla or WinSCP).

Step 2 – Locate “spring.zip” that you found in your ThemeForest Package and unzip it somewhere on your hard drive. Once it is unzipped it will look like a folder named Spring with all theme files in it.

Step 3 – Locate your WordPress installation and upload the theme directory Spring (you unzipped in the previous step) into ../wp-content/themes/ in your WordPress installation.

Step 4 – Click on the Activate button to activate Spring. Congratulations, you have now activated Spring! You can now proceed with Spring’s Plugin Installation.

Back To Top

Required Plugin Installation

You can follow the steps below:

plugin-installation-1

plugin-installation-2

The installing process status will be shown in your browser. It may takes a few minutes, so please be patient. After successful, your screen like that:

plugin-installation-3

Next,

plugin-installation-4

plugin-installation-5

Back To Top

Install Demo Content

Note: Before importing demo content, please make sure you have already installed and enabled all required plugin mentioned above. In addition, if your PHP setting doesn’t met the requirement , the System Status will be red, so please configure your setting reasonably ( see System Requires above).

import-demo-system-check

Please follow the steps below:

Step 1 – In section 9WPThemes, choose tab “Install Demos” or click Install Demo Data.

Step 2 – Choose demo you want to import, then click Install. In this case (see the image below), we have only one demo, but it includes other demos. This mean you will install all of our demos to your site.

import-demo-1

Step 3 – Choose options you want to install and please read the description carefully, then click I understand, just install it.

import-demo-2

You can click the button at bottom right of your screen to see process log:

import-demo-log

After installation success, you will see this note:

import-demo-3

If some of  your pages encounter htaccess error (see image below), you can fix this bug by saving changes Permalinks.

htaccess-error-1

htaccess-error-2n

 

Back To Top

03.CONFIGURATIONS

Theme Options Preset (Important)

Redux Theme Options (https://reduxframework.com/) is very popular with Theme Forest WordPress users. It is a great framework, and we add some more extensions make it become more flexible, especially Preset. Now, all options of Theme Options can be stored in one preset. This mean you can create various, even unlimited style for your site, which is difficult to achieve with Redux origin version.

t-o-preset-1

t-o-preset-2

+ Create a new preset:

t-o-preset-3

t-o-preset-4-n

To set preset for a page,  you can see below:

t-o-preset-5

Note: Global preset mean if you don’t set preset for a page, this page will use the global preset as default.

Back To Top

Content Template

Assuming a block content appears in many pages, you want to edit it, then what will you do?  Content Template will help you. By using Content Template, you can place the block content in every pages (even choose its position in a page), and you need only one change to change all these block contents.

Create Content Template:

content-template-1

content-template-2

Content Template in Theme Options:

content-template-3

Content Template in Metabox:

content-template-4

Note: If you leave these fields blank, they will use values from the ones in “theme options”  preset (set to current page) as default.

Content Template shortcode:

With Content Template shortcode, you can place it everywhere in your page.

content-template-5

content-template-6

Back To Top

Page Title

In Theme Options:

* Please read each field description for detail and how to use them.

page-title-1

In Metabox:

page-title-2

Note: If you leave these fields blank, they will use values from the ones in “theme options”  preset (set to current page) as default.

Back To Top

Footer

In Theme Options:

* Please read each field description for detail and how to use them.

footer-1

In Metabox:

footer-2

Note: If you leave these fields blank, they will use values from the ones in “theme options”  preset (set to current page) as default.

Back To Top

Sub Zone

* Please read each field description for detail and how to use them.

subzone-1

+) Popup Zone Settings: Determine popup zone style. Popup is integrated in shortcodes (VC element) like: Spring button, icon or configured in Header Modules.

Example:

subzone-2

+) Left Zone, Right Zone Settings: setting, style for left zone, right zone.

Example:

subzone-3

Back To Top

Header / Menu

In Theme Options:

* Please read each field description for detail and how to use them.

+) Header: Determine header layout. You can toggle header or choose modules to show here.

header-1

+) Header Style: Determine header style: link color, style for static header or sticky header, …

header-2

+) Header Modules: Determine header modules content and style.

header-3

+) Header Menu Settings: Determine style for menu item, sub menu, mega menu.

header-4

In Metabox:

Header in Metabox is showed only necessary fields. We suggest you configure header options in Theme Options, and you only use header in Metabox if your current page has some small changes compare to other pages using the same “theme options” preset.

header-5

Note: If you leave these fields blank, they will use values from the ones in “theme options” preset (set to current page) as default.

Configure menu content:

menu-1

menu-2

Configure mobile menu:

+) Header: 

mobile-menu-1

+) Sub Zone Settings:

mobile-menu-2

+) Widgets : You can configure your widgets like the image below:

mobile-menu-3

Back To Top

Mailchimp

For information and how to use it, you can read here: https://mc4wp.com/kb/

Form code for Mailchimp widgets:

mailchimp-widget

<p>
 Subscribe to our email list and receive newsletter on our regular releases and updates. Keep yourself up-to-date.
</p>
<p>
 <input type="email" name="EMAIL" placeholder="Your email address" required />
</p>
<p class="submit-button-wrapper s-font">
 <input type="submit" value="Subscribe" />
</p>

Back To Top

Right To Left (RTL) Configuration

If you need to use right to left language, and you have installed demo data, please note to configure some setting below:

Enable RTL mode

Open Theme Options, choose tab General Settings, switch Force RTL mode to On

rtl-1

Header

Configure Header (Theme Options > Header) like the image below:

rtl-2

Portfolio Single

Before create a new Portfolio Single, please note:

rtl-3

Others

Some widgets and shortcodes need to change options. For Example:

+) Spring Widget Menu

rtl-4

+) Shortcode Icon Box

rtl-5

+) 

Back To Top

Other Notes About Theme Options

Save Changes/ Save & Generate CSS / Reset Section / Reset All

After configuring theme options, you only need to hit Save Changes button. If your site is encountered some CSS bugs, then hit Save & Generate CSS (if you have SCSS skill, and you need to change SCSS code in Spring directory, you will need to use this button so you can generate SCSS to CSS). All four buttons “Save Changes/ Save & Generate CSS / Reset Section / Reset All” are only effect the current preset.

Override setting fields

In Content Template, Header, Tittle, Footer you will see something like this:

override-setting-1

This mean you can override setting (for Content Template, Header, Tittle, Footer) of post type: 404, search page, blog archive/ singer, portfolio archive / single , product archive / single.

After choosing post type you want to override setting and save changes, you will see this:

override-setting-2

Custom sidebar

If you want to add more sidebar (Apperance -> Widgets), then choose Default Preset > Custom Sidebar :

sidebar-1

sidebar-2

Most Used Colors

If you want to use some colors other than main colors (Primary color, Secondary color, Text color, Meta text color, Border color), you can define them: choose Default Preset > Colors > Define Most Used Colors.

most-used-color-1

most-used-color-2

After being defined, these color will be added to shortcode color selector:

most-used-color-3

Custom CSS

custom-css

You can use SCSS syntax in Custom CSS & Script > Custom CSS, exclude @mixin and @include (we don’t support these syntax). Some useful variables:

  • $spring-primary-color: get primary color value (eg: #BFA97D).
  • $spring-secondary-color: get secondary color value.
  • $spring-text-color: get text color value.
  • $spring-meta-text-color: get meta text color value.
  • $spring-border-color: get border color value.
  • $spring-primary-font: get primary font value (eg: Poppins).
  • $spring-secondary-font: get secondary font value.

Back To Top

Contact Form 7

Official Documentation: http://contactform7.com/docs/

Create Contact Form

You can see below:

create-contact-form-1

create-contact-form-2

create-contact-form-3

You can also use our theme form:

1. Code for contact form:

contact-form-img

<div class="spring-contact-form">
 <div class="row">
 <div class="col-md-6 mb-25">
 [text* your-name placeholder "Your full name" ]
 </div>
 <div class="col-md-6 mb-25">
 [email* your-email placeholder "Your email" ]
 </div>
 <div class="col-md-12 mb-25">
 [text* your-subject placeholder "Subject" ]
 </div>
 <div class="col-md-12 mb-25">
 [textarea* your-message x8 placeholder "Content" ]
 </div>
 <div class="col-md-12">
 <button type="submit" class="wpcf7-form-control wpcf7-submit spring-btn s-font btn-style-solid btn-shape-rounded-2 btn-size-md btn-scale-135 light-color p-bgc none-hover-color icon-effect-inner-out-text none-hover-bgc align-icon-right btn-active-effect" title="Contact us now" style="border: none;"><span>Contact Us</span><i class="w9 w9-ico-ios-arrow-thin-right"></i></button>
 </div>
 </div>
</div>

 

2. Code for subscribe form (Mailchimp integration):

Form 1

subscribe-form-1-img

<div class='spring-contact-form mailchimp-style-1'>
 [email* mc4wp-EMAIL placeholder 'Email']
 <input type="hidden" name="mc4wp-subscribe" value="1" />
 <button type="submit" class="mailchimp-submit wpcf7-form-control wpcf7-submit spring-btn light-color p-bgc p-hover-bgc-bolder "><i class="w9 w9-ico-envelope"></i></button>
</div>

 

Form 2

subscribe-form-2-img

<div class='spring-contact-form mailchimp-style-2'>
 [email* mc4wp-EMAIL placeholder 'Enter your email address']
 <input type="hidden" name="mc4wp-subscribe" value="1" />
 <button type="submit" class="mailchimp-submit wpcf7-form-control wpcf7-submit spring-btn light-color p-bgc p-hover-bgc-bolder fw-semibold ls-005">SUBCRIBE</button>
</div>

 

Form 3

subscribe-form-3-img

<div class='spring-contact-form mailchimp-style-3 input-style-bottom-line'>
 [text* mc4wp-NAME class:mb-20 placeholder 'Name']
 [email* mc4wp-EMAIL class:mb-20 placeholder 'Email Address']
 <input type="hidden" name="mc4wp-subscribe" value="1" />
 <button type="submit" class="mailchimp-submit wpcf7-form-control wpcf7-submit spring-btn light-color p-bgc p-hover-bgc-bolder fw-medium" title="SUBCRIBE">SUBCRIBE</button>
</div>

 

Add contact form to page:

add-contact-form-to-page-1

add-contact-form-to-page-2

add-contact-form-to-page-3

Back To Top

04.PAGES/SHORTCODES

Create A Page

You can follow the steps below:

 

Step 1 – In admin sidebar, choose Pages, then click Add New.

create-a-page-1

Step 2 – Input a new name for your page, and click “BACKEND EDITOR”(require Visual Composer plugins).

create-a-page-2

Step 3 – Click Add Element, then choose element you want to add to your page.

create-a-page-3

create-a-page-4

You can also add our theme template to your page:

create-a-page-5

create-a-page-6

 

Step 4 – Configure the metabox, or ignore it for default setting.

create-a-page-7

Back To Top

Create Onepage

To create onepage, you just have to create a Menu with Links as items.

create-onepage-1

After that, anywhere want menu link to section, please edit row by Visual Composer and type id on field Row ID.

create-onepage-2

Back To Top

Create Slip Screen Page

If you want to create a page like demo Music, you can follow the steps below:

Step 1 – In each Row, tick Enable slipscreen section, then fill two fields: Anchor, Navigation tooltip content.

slip-screen-1

slip-screen-2

Step 2 – Configure the metabox:

slip-screen-3

slip-screen-4

slip-screen-5

slip-screen-6

slip-screen-7

Back To Top

05.HOW TO

Apply only one demo style to your whole site

There are 13 presets: Default Preset, Demo Agency, Demo Corporate, Demo Freelancer, Demo Startup, Demo Music, Demo Shopping, Demo Portfolio, Demo Business 1, Demo Business 2, Demo Mobile App, Landing Page, Preset Shortcode. If you want to know which the preset your page is using,  you can open the page editor, then check the  Use preset field:

apply-style-1

How to apply only one demo style to your whole site ? To do this, please follow the steps below:

1) On Theme Options page, choose the preset you want and make it ‘global’.

apply-style-2

2) In each page editor, leave the Use Preset (mentioned above) blank.

3) For now, you only need to configure the preset you have chosen in step 1. However, there are some options you have to configure the Default Preset:

+) Add more widgets area to Widget page.

apply-style-3

apply-style-4

+) Add your custom font (ver 1.0.4).

apply-style-5

apply-style-6

+) Enable Maintenance mode (ver 1.0.4).

apply-style-7

 

Back To Top

How to change the header (page title) of the Blog and the Single Blog

Note: Please read the “Apply only one demo style to your whole site” first http://docs.9wpthemes.com/spring-documentation/#document-22

1) Choose the ‘global‘ preset, and select tab Title, then enable override template for Blog and Blog Single

blog-title-1

2) Configure your header (page title)

+)

blog-title-2

+) Configure the Content Template like below:

blog-title-3

blog-title-4

 

 

 

 

 

Back To Top

Speed up your site!

Here is some common step to make wordpress become faster:

  1. Optimize image with plugin EWWW Image Optimizer
  2. Enable cache , minify JS, CSS, HTML with plugin W3 Total Cache(powerful but need knowledge to use) or WP Super Cache(simple and normal effective).
  3. Enable client cache with this post
  4. Combine JS, CSS with W3 Total Cacheor Better WordPress Minify.
  5. Use CDN like https://www.cloudflare.com/(free with basic feature) or https://www.maxcdn.com/.

Note:

  • Should do optimize after configuring and build most basic content.
  • Be careful with optimize JS, It can cause problem
  • 4,5 really improve load time, GTmatrix result but not improve google page speed point.
  • Your page speed can not get exactly like our page because hosting another thing but you will see you page load really faster after optimize.

Back To Top

06.TROUBLESHOOTING

Visual Composer Shortcode: Can not click the “Save Changes” button

Sometimes the visual composer shortcodes don’t work correctly, and you can not click the Save Change. To solve the problem, please follow the steps below:

  • Remove the element you can not click the Save Changes
  • Click update page
  • Rebuild the element

If the steps above can not help you solve the problem, please disable any suspicious plugin that may conflict with the Visual Composer.

Back To Top

Page layout is broken after installing the demo

layout-s-broken-1

This problem means the CSS code of the theme is broken, and you need to general the CSS again.

layout-s-broken-2

Back To Top

404 error happen to all of pages after installing the demo data

404-error

First, it is not theme bug! Please check your permalinks setting. Normally, the permalinks should be: http://{ your domain }/%postname%/ , but in some cases : http://{ your domain }/index.php/%postname%/

404-error-2

Back To Top