1. Introduction & Installation


1.1 Introduction

Sazfa theme brings a new look to creating eCommerce websites. Features include the totally new, a variety of portfolio layouts, swipe technology, GhasForing Core, Revolution Slider, Visual Composer, MailChimp for WordPress, WooCommerce, YITH WooCommerce Compare, YITH WooCommerce Wishlist and more. With this amazing theme at your disposal you cancreate any page. As you will discover as you browse this manual, Sazfa theme soptions are amazingly easy to implement.


1.2 Installation & Update

Before you can complete the installation, make certain you have unpacked the entire package. This is very important! You can complete the installation in either of two ways:

  1. WordPress Theme Manager - please go to Appearance > Themes > Add new > Upload, select the zipped theme folder called Sazfa.zip and press Install Now WordPress will do the rest for you.
  2. FTP upload-upload non-zipped Sazfatheme folder to the /wp-content/themes/ folder in the WordPress installation folder on your server.

The Second part of this guide describes how to update Sazfatheme. When first installing Sazfatheme, make sure that you don’t make any changes in the files. If you have, and you don`t want to lose them, the best way save them is to use a freeware tool for comparing files, Beyond Compare for example (How to use it can be found on their website). After comparing files, you can then upload only those files that haven’t been changed.

If you haven`t changed any theme files, all you need to do to update your current version is to download the latest package from ThemeForest, unpack the files, and upload the new files on the server while replacing the old files by overwriting them.

All your data is safe becausetheme file updates do not change anything in the database. It is still recommended to always make a backup of your files & database.

IMPORTANT!!! After theme installation, you will see a box with information about required and optional plugins. To install and activate them, navigate to Appearance > Install Plugins and install only those plugins that are required, or are optional but necessary. Plugins include: GhasForing Core (required), WPBakery Page Builder (required), Slider Revolution (required), Contact Form 7 (required), YITH WooCommerce Wishlist (required), YITH WooCommerce Compare (required), Duplicate Post (optional), Envato WordPress Toolkit (optional), Force Regenerate Thumbnails (optional), Layer Slider (optional), Recent Tweets (optional) and Visual Composer (optional).


2. Demo content

With Sazfatheme, there are two ways to upload demo content, 1 Click Ready website Demo Install, and.xml files.Both methods are described below.

2.1 1-Click Demo Install

If you use the 1 Click ready website Demo Install option, you don`t need to use .xml files. .Simply go to Sazfa > Install Ready Demo and choose what you want to install. You can selectwhole content, one of homepages, content, options or widgets.

We created totally different demos for greater usability (not only homepages, but all settings; widgets, menus, images and other elements associated with a particular demo).


3.1 Header layout

To setup header layout, navigate to Appearance > Sazfatheme Options > Header > Header and choose one of the available layouts. You can also setup use these other options:

  • Style - choose and select a header style.
  • Header scheme - Select Light, Transparent or Customize.
  • Header Navigation scheme - Select Light, Primary Color Transparent or Customize.
  • Header Navigation Layout - Select Container or Full Layout.
  • Header Navigation Hover - Select Prymary Color or Prymary Color.
  • Header Navigation Distance - Add you header navigation distance with by px.
  • Header | Minimalist - choose if you want a header without background image & padding or not.
  • Header Sticky scheme - Select Inharite, Gray, Light or Dark.
  • Search Box Type - Select Standard or Ajax Search.

3.2 Logo

To set up logos, it's sizes padding and other options, please navigate to Appearance > Sazfa theme Options > Logo > section.You can also set up additional logo options. This section contain the following options:

  • Logo (Custom) - here upload regular logo
  • Logo Height - You can set a height for the logo
  • Logo Max Height - You can set a max height for the logo
  • Logo Top/Bottom Padding - If you would like to override the default logo top/bottom padding
  • Sticky Logo Logo (Custom) - here upload logo for header when it is sticky

3.3 Social Profile

To set up social icons, right top corner, navigate Appearance > Sazfa theme Options > Social > Social Profile and set up links for social profiles.

Please Note: Each external link should always start with http://

4. Pages creation

Creating a page has been never so easy. To start, go to Pages > Add new. At first glance everything looks like the WordPress default, but when look under Visual/HTML area you will see Page Options.

4.1 Getting started

In first Visual/HTML area you can build your page using all available options in editor. Beyond the default options we included a VISUAL COMPOSER button for WordPress editor. With this option you can build any page you want based on JS COMPOSER PLUGIN. Sazfa theme short codes are Included in Js Composer

Note: You can build pages based strictly on short codes, or you can use GhasForing Builder.

GhasForing Builder Options:

Page Layout

  • Layout Style - Select Default, Box, Wide or Flot.
  • Page Layout - Select Default, Full Wide, Container or Container Fluid.
  • Page Sidebar - Select Full Wide or any sidebar.
  • Left Sidebar - Select a Sidebar Widgets.
  • Right Sidebar - Select a Sidebar Widgets.
  • Sidebar Width - Select Sidebar Wide 1/4 or 1/3.
  • Page Class Extra - Add extra custom page class

Color

  • Customize Page Color? - you can customize page color manually

Site Top & Top Drawar Bar

  • Top Drawer - You Can fully Customize top drawer bar manually for each page
  • Top Bar - You Can Customize top bar for each page

Page Header

  • Header - You can add custom header for every page manualy

Header Customize

  • Customize - Our theme support header customization. you can create custom header for the current page you are working on only.

Logo

Menu

Page Title

Page Footer

Header Mobile

After selecting all of your options on right side, you can also choose right Page Template for this site.


4.2 GhasForing Core

You will enjoy working with GhasForing Core, This elements makes creating a website fun and easy with JS Composer. A page can be split into different work row & sections, where you can choose your colors, backgrounds, layouts, sidebars, classes, and more. Within each section & row, you simply add whatever items you need.

4.2.1 Sazfa Shortcode

This is a new item which offers a variety of possibilities for creating pages. With JS Composer Add Element -> Sazfa Shortcode, you can create more advanced layouts than ever before.


5. Slider

5.1 Revolution Slider

5.1.1 Getting demo slider

In this ThemeForest download youw ill find the revolution-slider-demo folder with its many .zip files featuring different sliders for different home pages.

On the list of available sliders, in the right bottom section you will see "Import Slider" button. All you need to do to upload a slider is choose the appropriate .zip file from the revolution-slider-demo folder, and click on the "Import Slider" button.

For more details about demo slider import please check slider's documentation where everything in 'step by step' instruction was explained.


5.1.2 Slider management

After pressing the "Create New Slider" button you will be presented with a form asking you to enter a Slider Title (used for the Slider overview in the backend) and a Slider Alias (a slug used to implement the Slider in your WP later, so keep it simple and without spaces or special chars).

You are also prompted to enter the Sliders Basic Settings, a Slider Title (for you to remember the Slider by) and a Slider Alias (do not use special characters or spaces here, this defines the shortcode for you to use in your content). The options in the boxes on the right side (General Settings, Position, Appearance, Navigation, Thumbnails) present useful tool tips on mouse over, so they are not explained here.

The Slider Type can be fixed (not responsive, fix dimensions), responsive (changes depending on the size of its max. sizes given later in relation to the screen size) or full-width (always 100% in width of the screen size, but height keeping the aspect ratio).

The Sizes section is needed to fit the slider into the specified screen sizes. The height of the slider will always be calculated to keep the correct max width and height aspect ratio.

The next step is creating/editing slides. Click on "Edit Slides" in the Slider Form window. Press "New Slide" and the native WP Media Upload dialog window will appear. Choose or Upload the slide's background image, select "Full Size" and then "Insert Into Post" (just like in your WP editor). You can always click on the pic to change it.

Use the arrow handles on the right side to change the slides position in the slider (top to bottom = first to last slide to be shown), or delete it with the "Delete" button.

The "Edit Slide" leads you to the next chapter "Slide".

In the "Edit Slide" " view you arrive at the heart of our plugin. The Drag & Drop Caption editor.

Note:You still have an opportunity to change the background image with the "Change Image" button.

To create a Layer (Caption, Image or Video), press the "Add Layer" or "Add Layer: Image". button. When you have a text layer, a basic layer will be created you can use the "Text" field in the Layer Params to change the caption. The "Style" select box shows some basic styles (CSS classes) you can use to style the caption (you can always add your own CSS classes to this field or edit the existing ones via the "Edit CSS File").

In case of an Image Layer you will see the native WP Media Uploader again. In case of a Video Layer you will prompted to a custom Video selection wizard.

When you have an Image Layer, you will again see the native WP Media Uploader. If you have a Video Layer, you will prompted to a custom Video selection wizard.

You now can move the Layers around via Drag & Drop or enter the x and y coordinate in the corresponding fields.

The "Layers Sorting" drag & drop list determines the Layers' z-index. This list specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

Note that slider is a plugin, and the documentation is located in the documentation/revolution-slider-documentation folder in the ThemeForest package.

Remember to set up chmod on 777 on below folders listed below to show slider thumbnails,andmake it possible to edit CSS styles for slider in the admin panel.

wp-content/plugins/revslider/cache

wp-content/plugins/revslider/rs-plugin/css

NOTE! In the default Revolution Slider version included in this theme, you receive every one of our styles for the plugin. When a plugin is updated to a newer version,do not forget to copy slider styles from /revolution-slider-demo/captions.css (this folder is also included in theThemeForest package) to /wp-content/plugins/revslider/rs-plugin/css/captions.css

All details about Slider Revolution you can find in it's documentation.

5.1.3 How to update Revolution Slider itself?

If you need to update your current version of Revolution Slider there are 2 ways to do it:

  1. 1. Go to Revolution Slider section on the left side of the main WP dashboard. Click on the "Update Plugin" button in the right bottom corner, go to theme-name\functions\plugins folder and select revslider.zip file and just upload it. That`s all there is to it.
  2. 2. 2. You can also update via FTP. Log into your FTP server and go to the wp-content/plugins/revslider/ folder. Unpack files from revslider.zip file (described in point 1) and replace files from the unpacked folder into your FTP to wp-content/plugins/revslider/ folder.

5.1.4 Revolution Slider Purchase Code

Revolution Slider is external plugin that is included with the theme because for each product, we purchase an "Extended” license. You can always get current slider version directly from us if you need it.Just send us a request through the contact form on our profile's page http://themeforest.net/user/ghasforing and we`ll send you the current.

We update the Revolution Slider plugin with theme updates from time to time, and with each theme update, Slider is updated as well.

The option to register Revolution Slider is included in the plugin. It allows you to get automatic updates and support directly from author. Registration is not required, but if you want to get these benefits, you need to purchase this plugin directly from author. This is how it works for all ThemeForest themes.

6. Sazfa Options Panel

The Sazfatheme options panel has been especially created to make your work faster and easier. Using it is very easy and in just a few minutes you can change a lot of things on your page.

6.1 Global Setting

How to set up some global options for your site including the following:

Global Setting

  • Home Preloader - choose Enable/Disable Home Preloader
  • Smooth Scroll - Enable/Disable Smooth Scroll
  • Custom Scroll - Enable/Disable Custom Scroll
  • Panel Selector - Enable/Disable Panel Selector
  • Back To Top - Enable/Disable Back to top button
  • Enable RTL mode -Enable RTL mode
  • Enable Social Meta Tags - Enable the social meta head tag output.
  • Layout Style - Select Boxed, Wide or Float
  • Body Background Mode - Chose Background Mode
  • Body Background - Body background (Apply for Boxed layout style).

Maintenance Mode

Enable the themes maintenance mode.

Performance

<

Enable/Disable Mini File JS & CSS

Custom Favicon

  • Favicon - upload your custom favicon image in .png, .gif or .ico format
  • Apple Touch Icon - upload custom apple touch icon in .png format

404 Setting

You can setting custom 404 page for your website.


6.1.1 Logo

To set up logos, it's sizes padding and other options, please navigate to Appearance > Sazfa theme Options > Logo > section.You can also set up additional logo options. This section contain the following options:

  • Logo (Custom) - here upload regular logo
  • Logo Height - You can set a height for the logo
  • Logo Max Height - You can set a max height for the logo
  • Logo Top/Bottom Padding - If you would like to override the default logo top/bottom padding
  • Sticky Logo Logo (Custom) - here upload logo for header when it is sticky

6.1.2 Page Setting

How to set up the following page setting options for your site.

  • Layout - Select Page Layout Full Wide, Container or Containar Fluide
  • Sidebar - Set Sidebar Style for your website
  • Sidebar Width - Set Sidebar width 1/4 or 1/3
  • And set many more sazfa page optione to easily

6.2 Blog Setting

6.2.1 Blog Single Page



How to set up Header options.

6.3.1 Header layout

To setup header layout, navigate to Appearance > Sazfatheme Options > Header > Header and choose one of the available layouts. You can also setup use these other options:

  • Style - choose and select a header style.
  • Header scheme - Select Light, Transparent or Customize.
  • Header Navigation scheme - Select Light, Primary Color Transparent or Customize.
  • Header Navigation Layout - Select Container or Full Layout.
  • Header Navigation Hover - Select Prymary Color or Prymary Color.
  • Header Navigation Distance - Add you header navigation distance with by px.
  • Header | Minimalist - choose if you want a header without background image & padding or not.
  • Header Sticky scheme - Select Inharite, Gray, Light or Dark.
  • Search Box Type - Select Standard or Ajax Search.

6.3.2 Header Customize

How to Customize Header options.

Header customize navigation

Header Customize Left

Header Customize Right

Please always remember to click "Save Changes" button. Without that you will lose all your changes.


6.3.3 Mobile Header

Mobile Header Layout

  • Select header mobile layout and setting other related option

How to set up options relating to footers.

Options relating to footers:

Wrapper Layout

Select Footer Wrapper Layout Full Wide or Containar Fluid

Layout

  • Layout - Select the footer column layout.

Sidebar

  • Sidebar - Choose the default footer sidebar 1, 2, 3 and 4 Widgets

Footer Top/Bottom Padding

  • Padding - If you would like to override the default footer top/bottom padding, then you can do so here.

Background

  • Background image - You can Upload footer background image here
  • Scheme/Style - Choose footer Gray , Light , Dark or Custom
  • More Options - And easily setting more options

6.12 Styling Options

If you change color/value in this section, you must "Save & Generate CSS"

User can custom and change many options color on website.


6.5 Font Options

If you change value in font options, you must "Save & Generate CSS"

  • Body Font - Specify the body font properties.
  • H1 Font - Specify the H1 font properties.
  • H2 Font - Specify the H2 font properties.
  • H3 Font - Specify the H3 font properties.
  • H4 Font - Specify the H4 font properties.
  • H5 Font - Specify the H5 font properties.
  • H6 Font - Specify the H6 font properties.
  • Menu Font - Specify the Menu font properties.
  • Secondary Font - Specify the Secondary font properties.
  • Page Title Font - Specify the page title font properties.
  • Page Sub Title Font - Specify the page sub title font properties.

6.6 Resources Options

6.7 Social Profiles


WooCommerce

How to set up shop page options.

Woocommerce

Options related to the WooCommerce plugin:

  • Show Rating - Show/Hide Rating product.
  • Sale Flash Mode - Chose Sale Flash Mode Percent or Text .
  • Show Result Count - Show/Hide Result Count In Archive Product
  • Show Catalog Ordering - Show/Hide Catalog Ordering On or Off .
  • Show Catalog Page Size - Show/Hide Catalog Page Size On or Off .
  • Quick View - Enable/Disable Quick View Enable or Disable .
  • Add To Cart Button - Enable/Disable Add To Cart Button Enable or Disable .

Archive Product

Single Product


Custom Post Type

Portfolio Settings


6.8 Custom CSS & JS

How to create your own CSS & JS

CSS & JS

Always create/paste custom CSS here. Make sure CSS is error free.


6.9 Import & Export

This information will be especially helpful for those who wish to move settings from theme options panel between themes, or move a website from a test server to a live server. There are several ways to import or export settings.

You can also Reset settings to default to make your theme look like the one on our demo version.


7. Blog

To create a blog, you first need to create a new page Pages > Add New and set up the title eg. Blog. In the Template field, leave the default option on Default Template. In the bottom section you will find Page options such as Layout and Sidebar. You can choose whether your blog should be on full width or with a left or right sidebar. You can also add a video for each post. In the Post option section, under the Visual/HTML default editor. There are several options to set. You can set up a Vimeo or YouTube video.

When you are finished, click the Publish button on the right.

For the next step, go Settings > Reading > Front page displays > A static page > Posts page, select page that you have created and click Save changes.

We have created several features specifically for bloggers. You will find them in Theme options panel > Blog, Portfolio & Shop > Blog. These options are set on default for each new post. Full descriptions of these blog options can be found in the Theme Options

Adding new posts works similar to standard WordPress Posts > Add New. Posts will be displayed on the newly-created page.

Images for posts are added using a featured image.

With the latest version, you can use GhasForing Builder inside blog posts. You can still use WordPress' default editor, but if you wish to create something advanced, use GhasForing Builder. GhasForing Builder features a wide variety of useful options.

With this version we also created 4 posts formats: Standard Horizontal Image, Vertical Image, Quote, Video and Link.

For more information about creating posts, go to http://en.support.wordpress.com/posts/.You can also check the video on how to create a post at http://www.youtube.com/watch?v=Sa4uimrgNz8


8. Portfolio

To create a portfolio please start by creating a new page Pages > Add New and setting up the title eg. Portfolio. In the Template field set the option Portfolio template. In the bottom section you will find Page options such as Layout and Sidebar. You can then select whether your portfolio should be in full width or with a left or right sidebar.

In Portfolio section you can also add videos from Vimeo or Youtube or even upload own videos in mp4 format  for each portfolio item. Don’t forget to set up a featured image for a portfolio item when adding a video.

We have created several options for the Portfolio page. You can find them in Theme options panel > Blog, Portfolio & Shop > Portfolio. Additional information about these options can be found in Theme options panel.

Porfolio items are similar to those in a typical post. To add a new portfolio, go to Portfolio > Add new. As you can see, the options are similar to those for a blog. In the bottom section of the page you will find Page options, where you can choose whether you want a full width portfolio or the one with a left or right sidebar.

You can also type Excerpt and select Featured image. When finished, click the Publish button.


Menu creation works as in default Wordpress.

To add your own menus go to Appearance > Menus, type Name for your menu and click Create Menu.Then, in Theme Locations for position Main menu you need to choose a menu that you’ve just created.

Now you can add Pages, Posts and Custom Links from blocks located on the left. You need to save everything by clicking on Save Menu.

If you want to add special items or features to a menu such as portfolio categories, posts categories, classes for links,etc, click on the "Screen options" button in the right top corner to find additional menu item options.

For more information on creating a menu, go to http://en.support.wordpress.com/menus

This theme also features a Mega Menu option, allowing you to create attractive menuswith items in columns, with ot without titles.

For Mega Menu columns you must add each menu item using a # "URL" attribute and - as the"Navigation label" value. Under the empty columns you can add the correct menu items.

But if you want columns with "Titles" at the top, then instead of a dash (-),you must type in your own value.

To understand how we built menu with MegaMenu options, we recommend uploading an.xml file with dummy content so you can better understand how it works.


Mega Menu creation works as in default Wordpress.

o configure settings for individual menu items or submenus, visit Appearance > Menus, hover over the menu item you want to configure, and click the MEGA MENU button that appears. The Menu Item Settings Panel will display from left.


Smooth scroll effect and hashtag links for one page websites

Smooth scroll

If you create a one-page website or you want to use links with hashtags around a page, you need to create links with hashtags "#". For example, if your website is http://website.com, and on this page you want to create links with hashtags for sections go to the Appearance > Menus section where you need to create links like http://website.com#section1

For sections where you want links, you must type in the correct Custom ID which must have the same as that after the # in the link. In this case, Custom ID must be section1. Custom ID can be set up as a "Section" item inside GhasForing Builder.

If you want to get smooth scroll effect for the menu items, you need to select the correct CSS Classes field for each menu item affected. To do that, go to Appearance > Menus section, click the "Screen Options" button, and check the "CSS Classes" field. Under each menu item you should see "CSS Classes" field. where you must enter the scroll value. You will then get the desired scrolling effect for each menu item for which you entered a scroll value.


10. WooCommerce / Shop integration

Sazfatheme is fully compatible with the WooCommerce plugin. We carefully designed Sazfatheme so you can build a nice shop that is loaded with options, and one that is perfect in appearance. Since WooCommerce is an external plugin, you will find any information you may need about it in the WooCommerce author’s page. Here are several useful links:


10.1 How to install WooCommerce and setup the default shop pages

First go to Plugins > Add new section and type "WooCommerce" into search field. Then click "Search Plugins" button.

Once that is done, and you see the result, click on the"Install now" button next to "WooCommerce - excelling eCommerce" plugin.

Once WooCommerce is installed, click on the "Activate plugin" link.

In a few moments you will see a WooCommerce Purple Notification Bar at the top of the plugin page. Clicking the Install WooCommmerce Pages button in the purple bar will install all the default pages.

Please Note: Once you are done installing WooComerce and the default pages, you can go to the Appearance > Menu section of your admin and add all the WooCommerce pages to your menu. They will be listed at the top under the most recent pages.


10.2 How to add new product

Go to Products > Add product section. You will see a page that looks like the one below.All you need to do is fill those fields with your own values.

Information about adding a new product will be found at on http://docs.woothemes.com/document/managing-products/


10.3 How to use WooCommerce shortcodes and setup pages for shop

The pages you need for WooCommerce are in WooCommerce > Settings > Catalog section. If you want shortcodes for pages like cart or checkout you need go to WooCommerce > Settings > Pages section. (Most WooCommerce pages must be created manually.That’s why for each one you need a shortcode).

To locate the full listing of WooCommerce plugin shortcodes go to http://docs.woothemes.com/document/woocommerce-shortcodes/

For a list of all the available pages for the WooCommerce plugin,go to http://docs.woothemes.com/document/woocommerce-pages/



Footer is divided into 3 different sections:Call to action, Widgets and Copyright & Social icons. This screenshot illustrates how these sections are presented:

  1. Call to Action - text for this item can be edited in Appearance > Sazfatheme Options > Footer section in Footer Call To Action field
  2. Widgets -We created 4 sections for widgets. To add/edit widgets inside a footer, navigate to the Appearance > Widgets section and choose widgets for Footer area #1, Footer area #2, Footer area #3 and/or Footer area #4 sidebars.
  3. Copyright & Social icons - copyright text can be changed in Appearance > Sazfatheme Options > Footer section. There is field called Footer Copyright. If you leave this field empty, the default copyright will be displayed. Social icons will only show when you fill Appearance > Sazfatheme Options > Social section with proper links to social media pages.


11.2 Widgets & Sidebars

We included unlimited custom widgets but in total there are different widgets available. To access them, all you need to do is to drag any available widget and drop into the correct sidebar. If you prefer to create your own sidebar, navigate to Appearance > Widgets and you can create as many sidebars as you need.You can then go back to the Appearance > Widgets section and continue to move widgets into new sidebars.


12. Support & contact us

You can contact us in several ways, depending on your needs.

  • If you have a question about the theme,enter your question in the Sazfa theme forum. We will answer support questions in comments or emails, but we prefer that you use the forum as your question and our response can be helpful to others.
  • If you use Comments, please limit your questions to presale questions or comments that are not related to support.
  • If you have a major problem, and you need to give us access to your account (which can only be accessed by support personnel) you can contact us by using the contact form on our profile`s page on Themeforest http://themeforest.net/user/ThemeGhasForing

There is no other way contact us, so please don`t attempt to contact us through YouTube, Facebook, or Twitter. Your question could easily get lost in these communication channels.


13. Advanced theme customization

Sometimes you may occasionally encounter a moment when you want to change something on your site that is not available in theme options panel. , e.g., font size, color, margin, or some other customization. You don`t have to contact us and wait for a response. With Sazfatheme, you can easily do it on your own.


14. Visual Composer plugin

We added Visual Composer in Sazfatheme for those who prefer working with this plugin. To activate the VC plugin following theme installation, go to Appearance > Install Plugins section, install it, and activate it. The plugin will then be ready to use.

Plugin installation following theme activation is available in the same section where the default WordPress editor is visible. In the create/edit page above the WordPress editor you will see two large, blue buttons called Backend Editor and Frontend Editor. These are exactly what you need to build content within Visual Composer.

To explore the capabilities of Visual Composer, we recommend you study the documentation and watch the video below: