Fore WordPress Theme

User Manual.

Knowledge base by Quadnotion

INTRODUCTION #

Fore – Modern Creative WordPress Theme

Theme Version: v 1.0

By: Quadnotion

Profile: http://themeforest.net/user/quadnotion

Email: hello@quadnotion.com

Help Desk: https://tickets.quadnotion.com

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this documentation, please feel free create topic on my help desk. Thanks so much!

WordPress Technical Requirements #

  • For localhost you can use xampp, wamp or any Apache with PHP and MySQL server.
  • Microsoft IIS with PHP 5.2.4+ and ourSQL 5.0+ support.
  • Livesite (preferably a sub-domain for testing) with PHP 5.2.4+ and MySQL 5.0+.
  • For Manual Theme Installation, you need a full installation package for WordPress, so download here and don’t forget about WordPress Server Requirements, or you may already have a WordPress powered website.

Demo Data Installation #

For beginner users and those who want to take a look at the demo content, you can install the demo data:

  1. Unpack all files and folders of the Package file you downloaded from Themeforest and open the Demo Data folder.
  2. Copy the content.xml file to your desktop for your convenience.
  3. Log-in to your WordPress back-end ( http://www.your-website.com/wp-admin or http://localhost/our-website/wp-admin ).
  4. Go to Tools menu in the left sidebar and click Import.
  5. Click WordPress and then install the WordPress Imported plugin.
  6. Once installed go back to Tools menu in the left sidebar and click Import.
  7. Click Browse and find the content.xml file on your desktop (should be on your desktop as we instructed you just above), click the file when found and then click the Open button.
  8. Click Upload now and import. It will take a minute to download the demo images from our demo site, but after that, the demo data is installed.

To import the demo settings (Theme Option), please follow the steps:

  1. Extract the download pack and locate Demo Data folder
  2. Open it and and locate theme-options.txt file
  3. Open the file theme-options.txt in a text editor and copy the contents
  4. Now open WP Admin Panel
  5. Click on Theme Options from left menu
  6. Go to Import/Export tab
  7. Click on Import from file button
  8. Paste the contents from options.txt on the textarea appeared
  9. Click on Import button
  10. Done!
The above method is a conventional method to import the demo data. Fore have one click demo installation. We will explain it in later sections.

Upgrading Theme #

Method 1: Install the WordPress Envato Market plugin:-

Once installed, activated, and setup, the Envato Market plugin will display a notice in your WordPress dashboard when an update is available. To setup:

  1. Download the Envato Market plugin and install it through the WordPress Dashboard.
  2. Activate the plugin.
  3. Navigate to the Envato Market menu, follow the instructions to generate a Global OAuth Personal Token, and enter the Token in your WordPress Dashboard:

The Settings Page:

The plugin Settings Page allows you to configure your Envato API Personal Token. This API Token is generated from build.envato.com and will allow WordPress to securely receive item updates.

Method 2: Manually Install the Update:-

You can upgrade our theme by performing following steps:

  1. Download latest theme zip file from ThemeForest
  2. Extract it and locate fore.zip
  3. Extract fore.zip and locate fore folder
  4. Copy/Replace the content of fore folder to /wp-content/themes/fore folder of your web site.

Install All The Required Plugins #

Fore WordPress theme requires following plugins: Fore Addon, King Composer, Contact Form 7, Post Types Order and Envato Market. You can find the plugin files inside the download-pack under Plugins folder

After activating the theme FORE, you will find the following notice at the top of you admin panel. You can directly install the required and recommended plugins from here.

One Click Demo Installation #

Theme Options #

After activating the theme click on the Theme Options located in left menu

General Settings #

Typography Settings #

Share Settings #

404 Error Page Settings #

Additional CSS #

Shortcode Elements #

Fore WordPress theme has got a rich set of shortcodes, which can be resued in a variety of manner to customize the theme to a great extend. If you want to use the shortcodes you must install 'fore-addon' plugin which we have already bundled in this download pack . You can find the zip version inside plugins folder.

Fore Text Block
Allows you to create any kind of text block. use dfn tag to highlight the text.

Know More
Fore Liner
Used as a line separator between the elements. There are customization options to build different kind of lines.

Know More
Fore Splash Slider
This shortcode is used to build the hero section of the home page.

Know More
Fore Slant Carousel
Used to create creative carousel block. You can add any element to this shortcode.

Know More
Fore Geometrical Elements
Used to generate geometrical elements with random position and mouse parallax effect.

Know More
Fore Slant Section
Used to build creative block with a slant shape and a background image.

Know More
Fore Team
Used to build the team section. Team section is a carousel block.

Know More
Fore Contact Icon Box
Used to build icon with title and description block.

Know More
Fore Map
Used to display the location on Google Map.

Know More
Fore Page Header
Used for specify the title of a section or a page.

Know More
Fore Service
Used to create your services with title, content and related icon.

Know More
Fore Pricing Table
Used to display different plan of your services.

Know More
Fore Portfolio
Used to display all the projects.

Know More
Fore Interactive Video
Used to display the video in the background section

Know More
Fore Lightbox Video Gallery
Used to create a video lightbox gallery.

Know More
Fore Testimonials
Used to create testimonial section with fore design.

Know More
Fore Clients
Used to display the brand logos of your clients with Carousel.

Know More
Fore Counter
Used to display the total number of items.

Know More
Fore Skill
Used to display the ability of one’s knowledge.

Know More
Fore Image Gallery
Used to create a image lightbox gallery.

Know More
Fore Social Icons
Used to display the social icons with fore creative.

Know More

Fore Text Block #

Shortcode Element Options:

 
General Settings
 ————————————————

– Content: Specify the text content. Only plain texts are recommended. You can add tags to highlight the text.

Element Semantic: Choose the text element semantic.

– Color: Choose the color for the text content.

– Extra class name: You can add custom CSS classes for the element. Add multiple classes seperated by a << SPACE >> (Eg: class_1 class_2 class_3)

 

 

Typography Settings
————————————————

– Font: Choose the font family from the three options. The three fonts can be customized from the theme options panel.

– Font Size: Specify the font size.

– Letter Spacing: Specify the spacing between the characters of the text block.

– Line Height: Specify the spacing between each line of the text block.

– Font Weight: Specify the font weight. 100 will be least bold  and 900 will be most bold.

– Text Align: Choose the text alignment: left, right or center.

– Text Transform: Specify the text transformation.

– Text Style: Specify the text style, italic or normal.

– Text Decoration: Specify the text decoration: underline or line through.

 

 

Fore Liner #

Shortcode Element Options:

 
General Settings
 ————————————————

– Color: Choose the color for the line.

– Width: Choose the width for the line.

– Height: Choose the height for the line.

– Align: Choose the line alignment: left, right or center.

– Extra class name: You can add custom CSS classes for the element. Add multiple classes seperated by a << SPACE >> (Eg: class_1 class_2 class_3) 

Fore Splash Slider #

Shortcode Element Options:

You can add multiple slide items to the slider using one instance of this shortcode.
 
 
Slider Options
 ————————————————

– Title: Specify the title for the slide item.

Sub-title: Specify the sub-title for the slide item.

– Image: Choose the image for the slide item.

– Button Text: Specify the text for the button.

– Link or URL: Add the link for the button.

– Year: Specify the year of project done.

– Extra class name: You can add custom CSS classes for the element. Add multiple classes separated by a << SPACE >> (Eg: class_1 class_2 class_3)

 

 

Fore Geometrical Elements #

Shortcode Element Options:

You can add multiple elements using one instance of this shortcode.
 
 
General Settings
 ————————————————

– Title: Specify the title for the element.

Element Shape: Choose the shape for the element.

– Element Size: Choose the size for the element.

– Element Color: Choose the color for the element.

– Extra class name: You can add custom CSS classes for the element. Add multiple classes separated by a << SPACE >> (Eg: class_1 class_2 class_3)

 

 

Fore Slant Section #

Fore Slant Section is container element. This element will occupy full width with respective to its parent. You can add any shortcode elements to this.

 

Shortcode Element Options:

 
General Settings
 ————————————————

– Title: Specify the title for the slant section.

Background Image: Choose the background image for the entire section.

– Slant Color: Choose the color for the slant.

– Extra class name: You can add custom CSS classes for the element. Add multiple classes separated by a << SPACE >> (Eg: class_1 class_2 class_3)

 

 

Fore Team #

Fore Team is container element for the shortcode “Fore Team Member”. This element will occupy full width with respective to its parent. This is just a wrap for “Fore Team Member”.

Fore Team Options:

You can add multiple Fore Team Member to the team section using one instance of this shortcode.
 
 
General Settings
 ————————————————

– Extra class name: You can add custom CSS classes for the element. Add multiple classes separated by a << SPACE >> (Eg: class_1 class_2 class_3)

Fore Team Member Options:

 
General Settings
 ————————————————

– Name: Specify the name of the team member.

– Image: Upload and set the image for the staff. Images of size 600 X 600 is recommended

– Designation: Specify the designation of the staff.

– Description: Provide the description about the staff.

– Social Icons: You can add any number of social icons items to this block.

      – Title: Specify the title of the social icon.

      – Icon: Select the social media icon.

      – Icon URL: Specify the link for the social icon.

– Extra class name: You can add custom CSS classes for the element. Add multiple classes separated by a << SPACE>> (Eg: class_1 class_2 class_3)

Fore Contact Icon Box #

Shortcode Options: 

 
General Settings
 ————————————————

– Icon: Choose the icon for the block.

– Title: Specify the title for the section.

– Content: Provide the for the block.

– Extra class name: You can add custom CSS classes for the element. Add multiple classes separated by a << SPACE >> (Eg: class_1 class_2 class_3)

Fore Map #

Shortcode Options: 

 
General Settings
 ————————————————

– Map Height: Specify the height of the map block.

– Location Latitude: Specify the Latitude of the desired location.

– Location Longitude: Specify the Longitude of the desired location.

– Pin Location Latitude: Specify the Latitude of the desired pin location.

– Pin Location Longitude: Specify the Longitude of the desired pin location.

– Map Zoom Level: Choose the zoom level of the map.

– Map Pin: Upload and set the image for the pin.

– Extra class name: You can add custom CSS classes for the element. Add multiple classes separated by a << SPACE >> (Eg: class_1 class_2 class_3)

Fore Page Header #

Shortcode Options:

 
General Settings
 ————————————————

– Page Header Title: Specify the title for the page header.

– Page Header Icon: Choose an icon for the page header section.

Show Geometric Shapes: Activate to show the geometric shapes.

Geometric Shapes: You can add any number of geometrical shapes to this block.

      – Title: Specify the title of the social icon.

      – Element Shape: Select the shape of the element.

      – Element Size: Select the size of the element.

      – Element Color: Choose the color of the element.

– Extra class name: You can add custom CSS classes for the element. Add multiple classes separated by a << SPACE>> (Eg: class_1 class_2 class_3)

Fore Service #

Shortcode Options:

 
General Settings
 ————————————————

Service Style: Select the service style. The service block have two different styles.

– Service Title: Specify the title for the service block.

Service Description: Provide the short description about the service.

Service Icon: Choose an icon for the service block.

Background image: Upload and set the background image for the service block. Image of size 1100px X 640px is recommended.

– Extra class name: You can add custom CSS classes for the element. Add multiple classes separated by a << SPACE>> (Eg: class_1 class_2 class_3)

Fore Pricing Table #

Shortcode Options:

 
General Settings
 ————————————————

Pricing Table Title: Specify the title for the plan.

– Currency Symbol: Specify the currency symbol.

Price Value: Specify the price of plan.

– Plan Duration: Specify the plan duration.

– Plan Features: Provide the plan features here. Use new line to separate features.

– Button Text: Specify the text for the button.

– Button Link: Add the link for the button.

– Highlight Plan: Enable this to make the plan highlighted or scaled.

– Extra class name: You can add custom CSS classes for the element. Add multiple classes separated by a << SPACE>> (Eg: class_1 class_2 class_3)

Fore Portfolio #

It will display the projects that are added through custom post type “Portfolio” with filters.

Shortcode Options:

 
General Settings
 ————————————————

Show Filters: Enable this option if you want to display the filter for the portfolio section.

– Display All Portfolio Items: Enable this if you want to display all the projects in the portfolio section.

– Limit Items: Specify number of portfolio items to be displayed in the section.

Add Load More Feature: Enable this option to activate the load more feature in the portfolio section.

– Load More Count: Specify the number portfolio items to be displayed on clicking load more button each time.

– Animation: Set the common animation for the portfolio items in the section.

– Animation Delay: Set the common animation delay for the portfolio items in the section.

– Extra class name: You can add custom CSS classes for the element. Add multiple classes separated by a << SPACE>> (Eg: class_1 class_2 class_3)

Fore Interactive Video #

Fore Interactive video is also a container element for the shortcode “Popup”. This element will occupy full width with respective to its parent.

 

Fore Team Options:

You can add multiple popup shortcode to the video section using one instance of this shortcode.
 
 
General Settings
 ————————————————

Background Video Link: Specify the link of the video you want to embed. Only Youtube and Vimeo videos are allowed.

Video Quality: Select the video quality.

Loop: Enable this option if you want to replay the video infinitely.

Mute: Enable this option if you want to mute the video.

Enable Overlay: Enable this option if you want an overlay over the video.

Video Start Time: Specify the video starting time in seconds.

Video End Time: Specify the video ending time in seconds.

– Extra class name: You can add custom CSS classes for the element. Add multiple classes separated by a << SPACE >> (Eg: class_1 class_2 class_3)

Popup Options:

 
General Settings
 ————————————————

– Title: Specify the title of the popup.

– Popup Trigger Appear Time: Specify the time at which the popup trigger should appear on the video.

– Popup Trigger Off Time: Specify the time at which the popup trigger have to disappear from the video.

– Popup Content Type: Choose what content have to be shown in the popup.

– Popup Video Link: This option comes up if the “Popup Content Type” is “Video”. Upload and set the image for the popup.

– Popup Image Gallery: This option comes up if the “Popup Content Type” is “Image Gallery”. Upload and set the image for the popup.

– Image: This option comes up if the “Popup Content Type” is “Single image”. Upload and set the image for the popup.

– Extra class name: You can add custom CSS classes for the element. Add multiple classes separated by a << SPACE>> (Eg: class_1 class_2 class_3)

Fore Testimonials #

Fore Testimonials Options:

 
General Settings
 ————————————————

Section Title: Provide the title for the testimonial section.

– Background Image: Upload and set the background image for the testimonial block. Image of size 1920px X 1080px is recommended.

Testimonials: You can add any number of testimonials to this block.

      – Client Name: Specify the name of the client.

      – Client Designation: Specify the designation and or organization of the client.

      – Client Image: Upload and set the image for the client. Image of size 150px X 150px is recommended.

      – Testimonial Content: Provide the testimonial content here

– Extra class name: You can add custom CSS classes for the element. Add multiple classes separated by a << SPACE>> (Eg: class_1 class_2 class_3)

Fore Clients #

Fore Clients Options:

 
General Settings
 ————————————————

– Client Logos: Upload and set the images for the clients. Images of size 900px X 600px is recommended. You can add multiple images. For better view, make sure that you are uploading images of same dimensions

– Extra class name: You can add custom CSS classes for the element. Add multiple classes separated by a << SPACE>> (Eg: class_1 class_2 class_3)

Fore Counter #

Fore Counter Options:

 
General Settings
 ————————————————

Title: Specify the title of the counter.

– Count: Set the count number.

– Extra class name: You can add custom CSS classes for the element. Add multiple classes separated by a << SPACE>> (Eg: class_1 class_2 class_3)

Fore Skill #

Fore Skill Options:

 
General Settings
 ————————————————

Skill Title: Specify the title or name of the skill.

Excellency Percentage: Specify the percentage of excellency. Only Numeric values are allowed 0-100.

– Extra class name: You can add custom CSS classes for the element. Add multiple classes separated by a << SPACE>> (Eg: class_1 class_2 class_3)

Fore Social Icons #

Fore Social Icons Options:

 
General Settings
 ————————————————

Section Title: Provide the title for the section.

Social Icons: You can add any number of videos to this block.

      – Title: Specify the title of the social icon.

      – Icon: Choose the social icon.

      – Username: Specify the username of the corresponding social media.

      – URL/Link: Specify the link of the social media profile.

– Extra class name: You can add custom CSS classes for the element. Add multiple classes separated by a << SPACE>> (Eg: class_1 class_2 class_3)

Site Maintenance #

We offer you our advice and expertise, so that you can enhance your website’s performance.

Improve Site Speed

Website loading speed is of utmost importance. Visitors don't like a slow website. We have already made the necessary changes in our theme to help your site load faster. Our theme's page speed is 90 in 'Google page speed insight test' (without this plugin). Please read the points mentioned below to know how you can improve your website loading speed.

Image Compress with TinyPNG:

You can compress images from TinyPNG website. Visit https://tinypng.com/ and compress all images before uploading them on your website. By this process, you can decrease your website loading time and provide your visitors, a better experience.

W3 Total Cache:

W3 Total Cache is our preferred plugin for website cache. You can install this plugin and also learn how this plugin works, by following the below mentioned steps:

  1. Login to WordPress admin panel (URL should be www.yourdomain.com/wp-admin ).
  2. Navigate to “Plugins > Add New” (see screenshot below).
  3. Search for “W3 Total Cache”.
  4. Install and activate the plugin.
  5. Check on “Enable”, to enable cache.

Check Website On Google Page Insights and GT Metrix:

Please follow the below mentioned steps to check your website for Google Page Speed:

  1. Visit https://developers.google.com/speed/pagespeed/insights/
  2. Type your website URL and click on “Analyze” button to know your website speed.

Please follow the below mentioned steps to check your website on GTMetrix:

  1. Visit https://gtmetrix.com/
  2. Type your website URL and click on “Analyze” button to know your website speed.