We would like to thank you for purchasing GridX!

This documentation file helps you to understand the whole theme concept and how it works. You should read all sections of the file before start your work. Here have multiple detailed explain of elements, theme sections and included video tutorials.

If you have any questions that are beyond the scope of this help file, please check out and search for Forum page.

After that you still can't find the solution yet, please leave a ticket on Support system then support agents help your issue.

Surely you have already installed WordPress on your server. If you don't installed it yet and you are new to WP and have problems installing it, you might want to check out following tips.

About WordPress
Detailed instruction about WordPress
Installing Tutorials
Installation tutorial by WordPress
Instructional Video
Video lessons by Woo Themes
Getting Started
WordPress Tips for Beginners
WP101 Basix Training
Some great videos from WPTuts on WordPress

You need to download theme files after you've purchased the it. Following image describes downloads section of the item and you have 2 download choices.

Download Package

 

Downloading All Files gives you a all-files.zip file with all the content listed below

Documentation
This is costumer's handbook. Obviously, If you can reading this file, you're open this file :)
GridX (Zip)
You can use this file for install function of built in WordPress.
GridX-Child (Zip)
Child theme. Please make your file changes in it. And this child theme helps you to keep your changes in it even updated main theme continually. You should read more details about child theme here.
Licencing (Folder)
This contains the licensing files.
DummyData (Folder)
You have an One Click option for import demo data. But if you need detailed xml files please pick up those here. You should read about how to use it from Dummy Data part of this document.
Changelog (Text)
Contains changes history, date and modified files list.

You can either choose to upload the theme via WordPress upload function or via ftp to your site.

1. Via WordPress theme uploader (recommended)

Step 1
Login to your website
Step 2
Go to Appearance -> Themes
Step 3
Click on Install Themes tab
Step 4
Click on Upload link and Browse to the GridX.zip file (it is located in the folder you've downloaded from ThemeForest).
Step 5
Click Install Now button
Step 6
Then you see GridX settings page right side on Dashboard menu section.
Step 7
Now you are ready to go. Create your new site and control it.
Step 1

2. Via FTP client

Step 1
Login to your hosting via FTP client application (such as FileZilla and CuteFTP)
Step 2
Go to wp-content -> themes directory
Step 3
Upload GridX folder (uncompressed) into this directory
Step 4
Refresh Appearance -> Themes of your dashboard and Activate the theme.

After the activation you see this notice at top of your dashboard. This theme requires those three additional plugins and you need to install those.

Please click on Begin insalling plugins.

Step 1
Envato Toolkit
The Envato WordPress Toolkit enables you to access your Envato WordPress purchases from within your WordPress Dashboard. It allows you to not only install themes, but also to receive update notifications and update automatically, just like regular WordPress themes.
Visual Composer
The most advanced PageBuilder Plugin that 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
Ultimate VC Addons
This plugin adds several premium elements in your Visual Composer. Every single element in the package is crafted with utmost attention to details and a simple objective to provide you an ultimate experience.
Revloution Slider
This plugin features tons of unique transition effects, an image preloader, video embedding, autoplay that stops on user interaction and lots of easy to set options to create your own effects.
ThemeTon Portfolio
This plugin an optional plugin but highly recommended for your portfolio. It has own features and sinlge post options those compatible with portfolio details section. Your portfolio posts won't let go after you activated different themes on your site and that's the biggest reason why we are adding portfolio post type as in a custom plugin.

Please select all plugins and select Install option on dropdown and finally click on Apply button.

Step 2

You will see this page after activated plugins.

Step 3

Configure Envato Toolkit Plugin

Envato Toolkit plugin requires MarketPlace username and API Key. You can get API key from your Settings tab of ThemeForest account. Lets provide those infomation and get theme update anytime and easily.

Step 4

One Click Demo Data Options

Theme has dedicated data option. You should click one of those link and select your desired home page layout. Action will set few important tasks including selection of Home page, Main navigation setting and Sidebar widgets when you click on Import Demo Data button.

Demo data

Demo data

Please wait for a while until imports all the content.

 

Full content Demo site setup

Previous option helps you to include minimized demo content on your site reason for quick include. But you can have full demo data with regular XML data imports.

  1. Go to Tools → Import
  2. Choose WordPress from the list.
  3. Upload the demo content.xml using the form provided on download.
  4. You will be asked to map the authors in this export file to users on the blog. For each author, you may choose to map to an existing user on the blog or to create a new user.
  5. You will then have the choice to import attachments, so click on the “Download and import file attachments” box.
  6. Please be patient while WordPress imports all the content. Posts, Pages, Projects, and Menus are imported. You will need assign the menu a theme location & you’ll need to configure widgets. This is a limitation of WordPress’ import system.

Note

Please make sure you backup your existing theme folder before updating. Additionally we recommend performing the update on a development site before making it on your live site.

Via Envato Toolkit Plugin (recommended)

Hope you have provided your account information in Envato Toolkit plugin. If you go to the plugin page, you'll see similar to following image. Let's click on Update automatically link at right bottom. This is a most efficienat and easy way to integrate latest verion on your site.

Update

After clicking to auto-update, you’ll see the confirmation that everything worked correctly.

Via WordPress theme uploader

Go to the Appearance => Themes and activate another theme than GridX such as TwentyTwelve, TwentyThirteen or GridX child theme. Delete the old version of the theme because folder name existing error comes up when we try to install it without deletion. Then install the theme again as you see early in this documentation.

Via FTP client application

Usually updating a theme means replacing the old files with the new ones. You can see changelog.txt file from the new download archive and you can get updated files list as modified/added and deleted. Upload and overwrite those files on your theme directory.

If theme changed lots of files and you really hard to collect changed files, there is a better way to do it when it comes to WordPress themes.

WordPress treats two version of the same theme as different themes. That is, if you have GridX v1.2 and v1.3 in your wp-content/themes folder they are treated as two different themes independent of each other.

That means you can have multiple version of the same theme installed on your blog. So whenever there is a new version of your theme available, instead of replacing or deleting the files of the older version follow this procedure.

  1. Try to upload new theme archive to the site
  2. If the folder name of the new version clashes with the old version, rename the folder of new version.
  3. Upload the new version to your wp-content/themes folder via FTP or through the interface provided by your web host or by using the upload feature in WordPress.
  4. Activate the new version from your dashboard.

The main advantage of following the above procedure is you can quickly switch back to the old version of the theme if you find any problems with the new version or if it clashes with any plugins you are using.

Live Customize panel has many options those help you to control your site. You have to know only where your desired options exist and how to use them. Please take some time to navigate through each tab and read option's description.

Group Class Description
General Primary color The color that fills title background, link, link hover and pagination etc. But if the color doesn't fit for your area, you can set correct one at specific areas. Those customizations won't be overwritten by this.
Dark/LightGeneral font family options
Body FontGeneral font family options
Body Background Color
Body Background Image
Content widthContent area width. Default 1170px
Boxed layoutEnable option for boxed layout
Wrapper widthEx: 1170, 1240 or 1440px. Works in boxed layout only and larger value than content width is convenient.
Overall Site SpacingThis ratio unit value determines overall site Vertical spacing including all the elements margin bottom, sections padding, footer spacing and widget bottom space. The option referring:
  • Page title area space = X * 2
  • Content area space = X * 2
  • Footer area space = X * 2.5
  • Sub footer space = X * 1.5
  • Full screen section default spacing = X
  • HTML elements margin bottom = X
  • Widget margin bottom = X * 1.5
LogoLogo Text ColorUnnecessary if you set logo image on following options
Logo Text FontFont family / Font size / Font weight
Logo Image Options 
Logo ImageChoose you logo image and see live result. If you think your logo image bigger at top, you can edit directly the image from media library popup.
Logo WidthDon't you remember? Just click on your logo image and see the image details from media library.
Retina Logo Imagex2 size of your original logo image.
Favicon16x16, PNG/ICO/JPG
Login Page Logoup to 274x95px
AdvancedHeader
Header Style
Header Height (px)It increases header padding by difference between logo height and this value. But it doesn't show any result if you set lower value than logo height.
Header Background Color
Fixed/Sticky header
Fixed header height
Search BoxAllows search box after the main navigation.
Shop CartAllows shop cart after the main navigation.
Menu 
Menu FontFont family / Font size / Font weight
Menu AlignLeft / Right
Menu ColorIncluding search icon, socials links
Menu Active/Hover Color
Sub Menu FontFont family / Font size / Font weight
Sub Menu Color 
Sub Menu Active Color 
Dropdown Background Color
Dropdown WidthIn pixel
Title Area 
Title Top Space 
Title Bottom Space 
Background Image 
Title Background Color 
Page Title Color 
Title fontFont family / Font size / Font weight
Overlay StyleOptional texture or polygon on background
BreadcrumbOn/off
Content
Heading Color
Heading FontFont family option for H1-H6 tags and Post title
Heading WeightOption for H1-H6 tags and Post title
Sidebar options 
Widget Background ColorOnly for boxed/bordered widgets
Widget Title color 
Widget Title FontFont family / Font size / Font weight
Widget Text Color 
Footer
Enable FooterOn/Off
Footer Style 
Background Image 
Background ColorSub Footer color is 10% darker than footer.
Footer Heading color 
Footer Title FontFont family / Font size / Font weight
Footer Text Color 
Footer Link Color10% darker for Hover color
Sub Footer
Enable Sub FooterOn/Off
Sub Footer TypeChoose Content / Left Content + Right Menu / Left Menu + Right Content
Sub footer contentYou can add here some html code and make own design
Go to Top anchorOn / Off
Post TypesPost Options 
Related PostsOn/Off
Author BoxOn/Off
Post CommentsOn/Off
Next/Prev linksOn/Off
Page Options 
Author BoxOn/Off
Page CommentOn/Off
Portfolio Options 
Portfolio LabelUse this field to rename your portfolio custom post type.
Portfolio SlugChanges the default slug for this post type.
Related PostsOn/Off
CommentOn/Off
Next/Prev linksOn/Off
Portfolio Main PagePlease select here main portfolio page. It's important for your breadcrumb.
Portfolio SidebarYou can set here default portfolio sidebar area.
WooCommerce 
Shop Page Layout 
Product Page Layout 
Overlay Transition 
Shop Page Sidebar 
Product Page Sidebar 
Share Buttons 
FacebookOn/Off 
TwitterOn/Off 
Google+On/Off 
EmailOn/Off 
On PostsOn/Off 
On PagesOn/Off 
On PortfolioOn/Off 
On ProductsOn/Off 
ExtrasExport/Import 
Custom CSS / JS
General CSS
Tablet CSSScreen width between 768px and 991px
Wide Phone CSSScreen width between 481px and 767px. Ex: iPhone landscape.
Phone CSSScreen width up to 480px. Ex: iPhone portrait.
WidgetsYou can add your widgets here.

After the installation, you can configure something on following place for Visual Composer

General Page Options

You should select layout property like this and build your gird content. The selection has a few related options.

Visual Composer Visual Composer

Grid X Style

You should select layout property like this and build your gird content. The selection has a few related options.

General Page Options

You need to set post size on every single posts those need to be show as featured/different styled.

Post Options

Even Style

You should select layout property like this and build your gird content. The selection has a few related options.

General Page Options

Masonry Style

After the installation, you can configure something on following place for Visual Composer

General Page Options

You'll find Page options at bottom of your main editor. Then you can control your page with that. Please read the option name and description and use them :)

General Page Options

This is a new feature of our theme and hope you like it. Setup is simple and you can apply this on your regular pages. Please see below image and follow the steps.

  1. Open your page
  2. Select One Page Template on page attributes
  3. Edit the row properties that you wanted to point
  4. Turn your rows to one page sections and add your Title and Slug
  5. Select your menu type by your page sections on One Page Options box.
One Page Options

Menu system works through WordPress core functions. Then I hope you don't have any trouble with it. We extended menu options with a few options such as Menu Icon and Mega menu options. Please look at next images and follow the steps for your menu.

Automatic installation

Automatic installation is the easiest option as WordPress handles the file transfers itself and you don’t even need to leave your web browser. To do an automatic install of WooCommerce log in to your WordPress admin panel and go to: Plugins > Add New.

In the search field type “WooCommerce” and click Search Plugins. Once you’ve found the plugin you can view details about it such as the the point release, rating and description. Most importantly of course, you can install it by simply clicking Install Now. After clicking that link you will be asked if you’re sure you want to install the plugin. Click “yes” and WordPress will automatically complete the installation.

It’s possible at this stage that you will be taken to a page requesting the FTP details of your webserver. This will be the case if you’ve not installed a plugin on this particular installation of WordPress before. If so, simply fill in your details to complete the installation.

Manual installation


The manual installation involves downloading the plugin and uploading it to your webserver via your favourite FTP application.

  1. Download the plugin to your computer.
  2. Unzip the file.
  3. Using an FTP program, or your hosting control panel, upload the unzipped plugin folder to your WordPress installation’s wp-content/plugins directory.
  4. Activate the plugin from the Plugins menu within the WordPress admin.

After you’ve installed and activated the plugin, be sure to select ‘Install WooCommerce Pages‘ to get started.

More details of WooCommerce setup

If you need more detailed documentation of WooCommerce usage, you should visit this link and get your information.

WooCommerce options (builtin the theme)

You can control some options from Live Customize => Post Types => WooCommerce

Download Package

Our theme is translatable to your language and every static text section located in translate functions such as __() and _e(). You can use included PO file for your new language like following embedded way.

WPML plugin

If you want to use any custom plugin for your translation, yeah please go ahead and install WPML plugin because our theme is compatible with it and I wanna recommend it for you.

- Getting started guide

- Languages configuration

- Static theme text translation

- Menu / navigation translation

- Content translation guide

- Check theme compatibility certificate

Our theme is compatible with Contact form 7 and please put following markup on the Form field of your form. Then your form turns into our style.

<span class="form-field small-field">[text* your-name class:form-control placeholder "Your Name"] </span><span class="form-field small-field">[email* your-email class:form-control placeholder "Your email"]</span>
<span class="form-field">[text your-subject class:form-control placeholder "Subject"]</span>
<span class="form-field">[textarea your-message class:form-control placeholder "Your Message..."]</span>
[submit "Send"]

Note: I didn't make extra space between first 2 elements because of preventing unnecessary BR from CF7.

Thank you to all who developed following projects/products. We really appreciate your support and time. We definitely couldn't do this template without you. We wish you all the best.

Special thanks to:

Images

Open Source Projects

Premium Projects