Overview

Gatsby WordPress Theme Documentation v1.0

Version: 1.0
Author: mad_velikorodnov.
Designed by: http://themeforest.net/user/mad_velikorodnov/


Welcome to Gatsby!

We would like to thank you for purchasing Gatsby WordPress + eCommerce Theme! We are very pleased you have chosen Gatsby Wordpress for your website, you will be never disappointed! Before you get started, please be sure to always check out this documentation. We outline all kinds of good information, and provide you with all the details you need to use Gatsby WordPress Theme. Gatsby WordPress can only be used with WordPress and we assume that you already have WordPress installed and ready to go.

If you are unable to find your answer here in our documentation, we encourage you to contact us through themeforest item support page with your site CPanel (or FTP) and WordPress admin details. We're very happy to help you and you will get reply from us more faster than you expected.

Thank you, we hope you to enjoy using Gatsby WordPress Theme!

Install WordPress

If you haven't have a working version of WordPress, you need to install it first in order to install Gatsby theme. You can find many instructions to install WordPress in WordPress Codex or the Instructional Video created by Woo Themes. Below are some helpful links for you about WordPress information.


1. Install Theme

1.1 Installation

- Requirements for Theme

You can click here to find out more about requirements of WordPress.

Below are three requirements for working version of WordPress, php, and mysql.

You also need to make sure that your host can comply with follow requirements. We recommend using WP Engine or Blue Host for all your hosting needs.

  1. Your web host has the minimum requirements to run WordPress.
  2. Your host are running the latest version of WordPress.
  3. You can download the latest release of WordPress from official WordPress website.
  4. Always create secure passwords for FTP and Database.

- Recommended PHP Configuration Limits

Low PHP configuration limits can cause many issues. When related issues occur, you need increase your PHP limits to a minimum as follows:



1.2 Theme Installation

- Install new theme manually via FTP Client

In order to add a new Theme to your WordPress installation, follow these basic steps:

  1. Download the zip package of Gatsby theme in ThemeForest
  2. Unzip Gatsby.zip package which you can find inside Theme files folder.
  3. Connect to your FTP server and navigate to the WordPress installation folder.
  4. Go to wp-content/themes/ and upload Gatsby folder.
  5. Open WordPress admin panel (navigate through web browser to the folder where you have installed the WordPress e.g www.your_domain.com/wp-admin/) and go Appearance > Themes on admin sidebar. Activate Gatsby theme.


- Install Theme via WordPress Admin Panel

 

  1. Open WordPress admin panel (e.g www.your_domain.com/wp-admin/) and go Appearance > Themes on admin sidebar and click "Add New" button. After that, click Upload Theme link and upload zip package of Gatsby theme


  2. Once uploading theme is finished, it will install theme automatically.

    You can click Activate link or go to Appearance > Themes on admin sidebar to activate theme.


  3. Once theme is installed, you need to install Required Plugins to get full working features.


Once theme is installed, you need to install Required Plugins to get full working features.



1.3 Plugins Installation

After installing and activating the theme you will see the following message at the top of the page.

You should click Begin Installing plugins link in order to install needed plugins for Gatsby theme.




You will be redirected to Install Required Plugins page, here you will find all of the theme required plugins. In order to install these plugins, you just need to check all of theme and select install then click apply. The picture below will list some required plugins for Gatsby.




 


After finishing plugin install, you need to configure the plugins.


1.4 Plugin Configuration

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. Moreover, now you can choose either work on a backend or move your page building process to frontend and instantly see changes you make.

You can see here for more details.

 

WooCommerce is the most popular WordPress eCommerce plugin. Packed full of features, perfectly integrated into your self-hosted WordPress website.

You can see here for more details and woocommerce documentation.

- Install Woocommerce Pages

You can see the following message after install woocommerce plugin and you should click Install Woocommerce Pages.

Important! If you want to import dummy data, you can skip to install woocommerce pages.

You can see "Shop", "Cart", "Checkout" and "My Account" pages in Pages on admin sidebar.

- Change Image Sizes

You can change the product image sizes in Woocommerce > Settings > Products > Display > Product Images on admin sidebar.



We used the following image sizes on our demo sites:

After change the image sizes, you should regenerate all the thumbnails using Regenerate Thumbnails plugins.

- Enable Registration on My Account

Please go to WooCommerce > Settings > Account > Registration Options and enable registration on the "My Account" page.


This plugin used to get your twitter images based in your twitter User ID and Access token

In order to add User ID and access token of your twitter account, click Appearance > Twitter API in admin sidebar

Once Required Plugins are configured, you may be interested to install sample content as our demo sites. In the next section, we will guide you about demo installation.


1.5 Demo Installation

- Traditional Method

Click Appearance --> Install Demos in admin sidebar and you will find option for import demo.

It takes several minutes.



- Import Dummy Content

Click Import in Import Dummy Content.

If the process of import demo is failed, we suggest you to increase max_execution_time in php.ini.

We recommend:

 


- Import Demo

After finishing process of importing widget, you should select demo. Please read the message.

 

- Alternative Method

Remember that your site database will reset entirely after using this method.

Please follow steps lised below to import demo.

- Step 1: Install and activate All-in-One WP Migration plugin to use this method.

- Step 2: Download Demo backup file.

- Step 3: Upload backup file to wp-content/ai1wm-backups folder.

- Step 4: Navigate to All-in-One WP Migration > Backups on admin sidebar

.

- Step 5: Click Restore button and wait for few seconds. You will see success message after click continue.

- Step 6: Login to the site with account: Username: admin, Password: admin. After login with this account, you can change username and password back to your credentials.

- Step 7: If you want to change demo version, you should select demo in Theme Options > Import Demo > Import Demo on admin sidebar. Please read the message and click OK.


2. Build Your Site

2.1 Build Your Site (if you didn't make our demo import)

- Before Build Your Site

You need to configure WordPress and the plugins.

Please read carefully Theme Installation / Plugin Configuration before perform these follow configurations.

2.2 WP Configuration

- WordPress Configuration

You can adjust WordPress settings as follows:

2.3 Theme Options

Gatsby uses Redux Framework with plenty settings


You can see Theme Options for more details.

2.4 Menu Setup

Gatsby provides 4 areas of the theme where you can assign a menu.


- Add Menu

In order create new menus, you can navigate to Appearance > Menus in admin sidebar then click Create a new menu links. Give your new menu a name and click "Create Menu" button.

After that, you can select menu location for your menu in Menu Settings.


3. Theme Options

Gatsby comes with advanced settings panel that is loaded with options. We have the options organized into logical tabbed sections, and each option has a description of what it will do on the front end. Because of the sizable amount of options Gatsby provides, we cannot go over them in full detail here in our documentation. We encourage you to please take some time and navigate through each tab to see what we offer. Go to Appearance > Theme Options on admin sidebar to access the setting options. See below for screenshots and short descriptions of our Theme Options panel.

3.1 Theme Options

There are 2 ways to access theme options.

1) Click Gatsby links in the top of page.

2) Click Gatsby in admin sidebar.


After that, you will see a logical tabbed sections including a lot of tabs for you to discover.


3.2 General

- In this tab, you can show or hide preloader, choose boxed or wide page layout, default sidebar and position.

 

Here you can upload Logos for different header types and upload favicon. We have different headers (transparent, black and white). Depends on header you have to use dark or light logo image

 


3.3 Skin

You can change border radiuses and primary colors. For sure you can inspect any element and replace color using custom.css by yourself

Here you can change typography for all fonts and H1- H6 tags

 

Here you can change typography for all fonts and H1- H6 tags

 

Here you can change typography and colors for Main Menu for different headers

 

Here you can change color, images for footer

 

Here you can change color styles for Shop elements

 

Here you can insert your custom css. It's dynamic css and it will be saved after updates

 



3.4 Header

Theme has 9 headers. Here you hide/show some elements on different header types

 

Different header types has different settings. Here you can edit them or show/hide some elements

 

We have 9 different headers. Here you can choose default Header

 

Here you can choose Default header for Shop Pages

 

 

3.5 Breadcrumbs

Pages & Posts, Portfolio, testimonials, Team Members have the same settings. Here you can adjust show/hide Titles, breadcrumbs and upload background images

- you have tons of option to adjust this area. You can use mono or color background, image or video, breadcrumbs or zoom out effect

Here you can adjust show/hide Titles, breadcrumbs and upload background image and adjust Opacity Overlay

 

 


3.6 Blog

- These option allow you to switch on/off visibility of Date, Author, Categories, Tags and Comments

Here you can adjust Excerpt Lenght for different Blog Post Styles

 

Here you can choose default Sidebar position and Blog style

 

Here you can choose default Sidebar position and show/hide content elements

 

3.7 Portfolio

- These options affect your website's sidebar's positions portfolio style. You can choose default Portfolio style for Archive Portfolio Page


- Here you show/hide Portfolio elements and choose 'order by' for related works


3.8 Team Members

- Here you can adjust Excerpt Length for Member description.


- Here you choose layout type, description position and column numbers



3.9 Testimonials

- These options give you several great options to customize Testimonials Archive Page


3.10 Javascript Code

- Here you can add your custom js code.


3.11 Footer

- Here you can insert copyright and show or hide bottom Menu.


- Here you show/hide social links and add social profile links


3.12 404 Page

Gatsby gives you 3 types of 404 page. Choose one and upload own images and insert your text



3.13 Shop

- This tab contains several choices to change apperance of your compare, wishlist, quick-view, labels


- Here you choose default sidebar position, sidebar, product layout, view mode and columns for Shop Archive page


- Here you choose default sidebar position, product elements visability, columns and labels


- Here you adjust Cross-Sells products on Cart page


3.14 Google

- Here you have to insert Google Map API Key. How to create it read here https://developers.google.com/maps/documentation/javascript/get-api-key


3.15 Import/Export

- Here you can make import/export demo data file.


4. Content Types

To use Gatsby content type, please ensure that Gatsby Custom Content Types and Taxonomies plugin, which allows you to create some custom post types, is already installed. If not, you can install this by following some steps below.

 



4.1 Post

- General Information

Gatsby provides many options to present your blog posts, along with several different blog layouts. In addition there are numerous Theme Options and Blog VC Options. The Gatsby blog is very powerful. The following sections will cover each of these aspects of the blog that are listed below.


- Creating / Editing Posts

Step 1 - Navigate to Posts in your WordPress admin sidebar.

Step 2 - Click on the Add New option to make a new post. Create a title, and insert your post content in the editing field.


Step 4 - Post it.



4.2 Photography

We have very cool post type Photography. You can add images and drag and drop them to adjust the position, order and size


- Creating / Editing Photography

Step 1 - Navigate to Photography in your WordPress admin sidebar.

Step 2 - Click on the Add New option to make a new post. Create a title, and insert images and adjust them.


Step 4 - Post it.



4.3 Team Members

Creating / Editing block

Step 1 - Navigate to Team Members in your WordPress admin sidebar.

Step 2 - Click on the Add New option to make a new content. Create a title, and insert your block content in the editing field.

Step 3 - If you need you can assign categories from the right side to post.


Step 4 - Post it.




4.4 Testimonials

- Creating / Editing portfolio

Step 1 - Navigate to Testimonials in your WordPress admin sidebar.

Step 2 - Click on the Add New option to make a new Testimonial. Create a title, and insert your Testimonial content in the editing field.


Step 3 - Post it.



4.5 Portfolio

- Creating / Editing team

Step 1 - Navigate to Portfolio in your WordPress admin. Click on the Add New option and enter all needed information for Portfolio such as title, and content in the editing field.



 



5. Visual Composer elements

Remember to install and activate Gatsby Custom Content Types and Taxonomies plugin.

- How to add shortcodes using visual composer

You should enable visual composer editor.

You should select the element. If you click the following button, will be show the popup.



There are several content elements for you to choose.


- WooCommerce

Image below lists a lot of useful shortcodes of WooCommerce such as Cart, Product, Checkout and My Account.


- Gatsby Shortcodes

In total, Gatsby provides a lot of effective shortcodes for you. Besides some general settings for animations such as animation type, item delay and extra class, each shortcodes will contain their own options.

5.1 Gatsby Accordions

This shortcodes will help you to show accordion or toggle. Type shortcode have accordion or toggle option.

 



- Text: Write lists

- Style: Choose Classic or Secondary style

- Toggle: choose toggle option if you need it

 


Below is the screenshot of accordions and toggles:

- Several styles

 

 

5.2 Gatsby Alert Boxes

It allows you to display item of Alert Boxes.



This shortcode lets you:

- Style: Success, Warning, Fail and Info

- Type: We have Style 1 and 2

- Write your Text


Below is the screenshot of shortcode Alert Boxes:


5.3 Gatsby Buttons

Gatsby provides this shortcode for you to display different buttons.



- Write text button

- Choose shape

- Button size.

- Alignment

- and color reverse.

 

Below is the screenshot of shortcode buttons:

- See all styles.

 

5.4 Gatsby Call to Action

This shortcode will display different Call to Action blocks.



- Write Call to Action Text

- Choose the style

- Add the button or newsletter form

- If you need add the second button



- Add the button link

 

Below will be screenshot for layout of Call to Action.

5.5 Gatsby Testimonials Carousels

It helps you to create Carousels.



For this shortcode, you also can:

- Write the title block

- Choose the style of layout

- Enable Carousel

- Choose the number of items

Below will be screenshot for layout of Carousels.

5.6 Gatsby Images Carousel

In this shortcode allows you to make image carousel.



For this shortcode, you can:

- Add images and choose how to open them

 

Below will be screenshot for layout of Carousels.

5.7 Gatsby Counters

This shortcode show counters.



- Write the text

- Value

- Choose the icon

 

Below will be screenshot for Counters.



 

5.8 Gatsby Blog element

This shortocode show different blog elements.There are 4 layouts:

- Masonry v1

- Masonry v2

- Small thumbnails

- Big thumbnails

 



- Write title and choose the font size

- Choose the style

- Choose Columns

- If you need you can switch on carusel

- If you choose filter yes you can choose different categories

- Choose number of blog post output

- Choose categories and order

- You can switch on/off pagination

Below will be screenshot for layout of Blog.




5.9 Gatsby Dropcap

This shortocode show different dropcap.There are 3 layouts

Depend on type you can upload background image or choose the color



- Select design type.

- If you need upload the image or choose the color

- Write the letter, add the text

Below is the screenshot of shortcode Grid Portfolio:

5.10 Gatsby Infoblocks

Main infoblock element has such settings:

- Title and font size

- 5 styles

- Number of columns

 



- Write the title

- Choose the small icon

- write small text

 

Info Block view

5.11 Gatsby Lists

This shortocode has 5 design layouts

See all settings:

 



- Choose the icon

- Write the text

- Choose the style

 

Below is the screenshot of 2 Product box types:

 

5.12 Gatsby Separators

This shortocode show Separators elements settings

See all settings:

 



- Choose the color

- Alignment

- Style

- Border width

- Element width

Below is the screenshot of Lookbook Page:

5.13 Gatsby Pricing Tables

This shortocode show Pricing Tables settings

See main settings:

 

 



- Write title

- Price

- Features

- Title and link

- Make Featured

- Upload the background image

 

Below is the screenshot of Pricing tables:

5.14 Gatsby Progress Bar

This shortocode show progress bar settings

See main settings:

 



- Choose style

- Add label

- Value

- and color

 

Below is the screenshot of progress bars:

5.15 Gatsby Tables

This shortocode show progress bar settings

See main settings:

 



- Choose style

- Add items

 

Below is the screenshot of tables:

5.16 Gatsby Tabs

This shortocode show tabs settings. This element has 4 styles

See main settings:

 


- Write the title

- Choose style

 

Below is the screenshot of tables:

5.17 Gatsby Portfolio

This shortocode show tabs settings. This element has 4 styles

See main settings:

 

 

 

 


- We have 3 type of gallery: Classic, Tilt, Grid. Choose one of them

- Choose massonry or not

- Choose spacing between images: With spacing or Not

- Filter. If yes - you can choose different categories

- Choose columns between 2 and 5

- Choose number of works on this page

- You can choose Pagination, Load More button or hide both buttons

- Choose categories to output and order by

- Choose Pagination per page

 

You can create tons of variants. Below is one of variants. You can find more on our demo site:

6. Widgets

6.1 Gatsby Advertizing area widget


6.2 Gatsby Contact Us widget

6.3 Gatsby Flickr feed widget

This widget helps you to filter products into a list all product.


6.4 Gatsby Instagram widget

This widget helps you to show image flick in library image count flick.

6.5 Gatsby Popular and Latest Posts widget

This widget helps you to show like page facebook.

6.6 Gatsby Social links widget

This widget helps you to show post new about post.

6.7 Gatsby Testimonials widget

This widget helps you to show video vimeo and video youtube.

 



7. Translation

Use WPML

WPML is the most popular plugin for multi language support. Below you will find documentation their team created for using WPML plugin. If you've purchased WPML and have any questions or issues, please check the links below.




8. Site Speed Up

We recommend using the WP Super Cache, W3 Total Cache plugins.

Excluding pages from the cache

If using caching plugins, make sure you exclude the following pages from the cache through their respective settings panels:

These pages need to stay dynamic since they display information specific to the current customer.

9. Plugin's Documentation

We do not provide the support for 3rd party plugins and modules. In this case you will have to purchase a personal license on the plugin's/module's official website in order to get the help
Please read following documentations