Documentation
An overview of GridX, how to install and use, theme options and examples, and more.
An overview of GridX, how to install and use, theme options and examples, and more.
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.
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.
Downloading All Files gives you a all-files.zip file with all the content listed below
Downloading the installalable WordPress theme only gives you the GridX.zip file.
You can either choose to upload the theme via WordPress upload function or via ftp to your site.
Appearance -> Themes
Install Themes
tabGridX.zip
file (it is located in the folder you've downloaded from ThemeForest).Install Now
buttonwp-content -> themes
directoryAppearance -> 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.
Please select all plugins and select Install option on dropdown and finally click on Apply button.
You will see this page after activated plugins.
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.
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.
Please wait for a while until imports all the content.
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.
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.
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.
After clicking to auto-update, you’ll see the confirmation that everything worked correctly.
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.
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.
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/Light | General font family options | |
Body Font | General font family options | |
Body Background Color | ||
Body Background Image | ||
Content width | Content area width. Default 1170px | |
Boxed layout | Enable option for boxed layout | |
Wrapper width | Ex: 1170, 1240 or 1440px. Works in boxed layout only and larger value than content width is convenient. | |
Overall Site Spacing | This 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:
| |
Logo | Logo Text Color | Unnecessary if you set logo image on following options |
Logo Text Font | Font family / Font size / Font weight | |
Logo Image Options | ||
Logo Image | Choose 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 Width | Don't you remember? Just click on your logo image and see the image details from media library. | |
Retina Logo Image | x2 size of your original logo image. | |
Favicon | 16x16, PNG/ICO/JPG | |
Login Page Logo | up to 274x95px | |
Advanced | Header | |
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 Box | Allows search box after the main navigation. | |
Shop Cart | Allows shop cart after the main navigation. | |
Menu | ||
Menu Font | Font family / Font size / Font weight | |
Menu Align | Left / Right | |
Menu Color | Including search icon, socials links | |
Menu Active/Hover Color | ||
Sub Menu Font | Font family / Font size / Font weight | |
Sub Menu Color | ||
Sub Menu Active Color | ||
Dropdown Background Color | ||
Dropdown Width | In pixel | |
Title Area | ||
Title Top Space | ||
Title Bottom Space | ||
Background Image | ||
Title Background Color | ||
Page Title Color | ||
Title font | Font family / Font size / Font weight | |
Overlay Style | Optional texture or polygon on background | |
Breadcrumb | On/off | |
Content | ||
Heading Color | ||
Heading Font | Font family option for H1-H6 tags and Post title | |
Heading Weight | Option for H1-H6 tags and Post title | |
Sidebar options | ||
Widget Background Color | Only for boxed/bordered widgets | |
Widget Title color | ||
Widget Title Font | Font family / Font size / Font weight | |
Widget Text Color | ||
Footer | ||
Enable Footer | On/Off | |
Footer Style | ||
Background Image | ||
Background Color | Sub Footer color is 10% darker than footer. | |
Footer Heading color | ||
Footer Title Font | Font family / Font size / Font weight | |
Footer Text Color | ||
Footer Link Color | 10% darker for Hover color | |
Sub Footer | ||
Enable Sub Footer | On/Off | |
Sub Footer Type | Choose Content / Left Content + Right Menu / Left Menu + Right Content | |
Sub footer content | You can add here some html code and make own design | |
Go to Top anchor | On / Off | |
Post Types | Post Options | |
Related Posts | On/Off | |
Author Box | On/Off | |
Post Comments | On/Off | |
Next/Prev links | On/Off | |
Page Options | ||
Author Box | On/Off | |
Page Comment | On/Off | |
Portfolio Options | ||
Portfolio Label | Use this field to rename your portfolio custom post type. | |
Portfolio Slug | Changes the default slug for this post type. | |
Related Posts | On/Off | |
Comment | On/Off | |
Next/Prev links | On/Off | |
Portfolio Main Page | Please select here main portfolio page. It's important for your breadcrumb. | |
Portfolio Sidebar | You can set here default portfolio sidebar area. | |
WooCommerce | ||
Shop Page Layout | ||
Product Page Layout | ||
Overlay Transition | ||
Shop Page Sidebar | ||
Product Page Sidebar | ||
Share Buttons | ||
On/Off | ||
On/Off | ||
Google+ | On/Off | |
On/Off | ||
On Posts | On/Off | |
On Pages | On/Off | |
On Portfolio | On/Off | |
On Products | On/Off | |
Extras | Export/Import | |
Custom CSS / JS | ||
General CSS | ||
Tablet CSS | Screen width between 768px and 991px | |
Wide Phone CSS | Screen width between 481px and 767px. Ex: iPhone landscape. | |
Phone CSS | Screen width up to 480px. Ex: iPhone portrait. | |
Widgets | You can add your widgets here. |
After the installation, you can configure something on following place for Visual Composer
You should select layout property like this and build your gird content. The selection has a few related options.
You should select layout property like this and build your gird content. The selection has a few related options.
You need to set post size on every single posts those need to be show as featured/different styled.
You should select layout property like this and build your gird content. The selection has a few related options.
After the installation, you can configure something on following place for Visual Composer
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 :)
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.
Title
and Slug
One Page Options
box.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 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.
The manual installation involves downloading the plugin and uploading it to your webserver via your favourite FTP application.
After you’ve installed and activated the plugin, be sure to select ‘Install WooCommerce Pages‘ to get started.
If you need more detailed documentation of WooCommerce usage, you should visit this link and get your information.
You can control some options from Live Customize => Post Types => WooCommerce
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.
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.
- Static theme text translation
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: