Krystal Documentation

You can create your website like the preview demo in just a few steps 
Step 1) First of all install this theme by going to Appearance->Themes->Add New. Upload krystal.zip and install it
Step 2) Install all the recommended plugins and activate plugins 
Step 3) Go to Appearance->Import Demo Data
Step 4) You need to manually upload 3 files ie one for XML content, second one for widgets and third one for customizer
Step 5) Go to Krystal details page Click here to go 
Step 6) Scroll down to Krystal Theme Demos 
Step 7) Download the zip file of demo you want 
Step 8) Extract it in your desktop, you will get the 3 files ie demo-content.xml, demo-customizer.dat and demo-widgets.wie
Step 9) After selecting those files. Click on Import Demo Data button

Note : You need to change the URL of some of the menu items, as the imported menu will point to the demo site. You can change menus URL by going to Appearance->Menus

Note: You need to change the URL of scroll down button also. Navigate to Appearance->Customize->Scroll Down Settings and change URL

You can create your website like the preview demo in just few steps 

Step 1) First of all install this theme by going to Appearance->Themes->Add New. Upload the krystalpro.zip and install it
Step 2) Install and activate all the recommended plugins 

Step 3) After plugin activation, the WooCommerce setup dialog box will open. Skip the WooCommerce setup.


Step 4) Now go to Appearance->Import Demo Data 
Step 5) Choose the demo
Step 6) Click on Import Demo Data button

Step 7) Once demo import done, you need to generate the WooCommerce pages if the demo has shop page in live preview otherwise you can skip these steps below

Method: You have to go to WooCommerce -> Status and then you have to click on Tools tab. You need to scroll down a little bit and find the Create default WooCommerce pages and click on Create Pages button

Step 8) That’s it. Refresh your homepage.

Step 1) Create new pages from Pages menu and name it Home for home page and Blog for blog page 
Step 2) Go to Settings->Reading menu and from Your homepage displays settings select A static page and then select Home as Front page and Blog as blog page 
Step 3) Save it

Step 1) Go to Appearance->Customize
Step 2) Click on Site Identity Tab. 
Step 3) Upload a logo of your own. 
Step 4) Save & Publish

Go to Menus from Appearance-> Menus. 
Step 1) Create a new menu. 
Step 2) Select pages from left and add it to menu 
Step 3) After this Select Theme Locations Primary from bottom and click Save Menu

Step 1) Go to Pages->Add New
Step 2) Enter Page Title for eg About 
Step 3) Click on the blue button Edit with Elementor

Step 1) Click on Appearance -> Customize -> General Settings 
Step 2) Scroll to Home Background Image 
Step 3) Upload Image and save

Step 1) Go to Appearance->Customize->General Settings
Step 2) On scroll down, you will see options to add 2 buttons.
Step 3) Add the url in Button URL if you want to add video on button click. For eg : https://www.youtube.com/watch?v=VZ9MBYfu_0A
Step 4) Click Save & Publish
Step 1) Go to Appearance -> Customize -> General Settings 
Step 2) At bottom, you will see Enable Parallax scroll 
Step 3) Click on Yes
Step 4) Save & Publish
Step 1) Go to Appearance->Customize
Step 2) Click on Header Styles Tab.
Step 3) Select your header style
Step 4) Save & Publish
Step 1) Click on Contact -> Add New
Step 2) Create your new form or you can use our form


Step 3) Copy the shortcode
Step 4) Open your page
Step 5) Add this shortcode using Text Widget
Step 6) Save
Step 1) Click on Contact -> Add New
Step 2) Create your new form or you can use our form


Step 3) Copy the shortcode
Step 4) Paste your shortcode using Text Widget
Step 5) Save & Publish
Step 1) Click on Appearance -> Customize -> Footer Settings
Step 2) Scroll down to Footer copyrights text
Step 3) Enter your content
Step 4) Save & Publish
Step 1) Click on Appearance -> Customize -> Sticky Header Settings 
Step 2) Change your settings in Enable Sticky Header Feature 
Step 3) Upload logo for sticky header
Step 4) Publish
Step 1) Click on Appearance -> Customize -> Preloader Settings 
Step 2) Choose your settings
Step 3) You can also upload a preloader GIF image.
Step 4) Save & Publish
Step 1) Go to Appearance->Customize->General Settings
Step 2) Scroll down to the last option and check it ie Use this for Blog Homepage
Step 3) Go to Settings->Reading. Select your homepage displays as Your latest posts
Step 4) Save & Publish
Step 1) Go to Appearance->Customize->General Settings
Step 2) Scroll down to the last option and uncheck it ie Use this for Blog Homepage
Step 3) Save & Publish
Step 1) Go to Appearance->Customize
Step 2) Click on Page Settings
Step 3) Choose your option ie background color or image
Step 4) Upload image or choose color based on your selection
Step 5) Publish

Scenario 1 – Random Sale Items
I want to display four random on sale products.

[products limit="4" columns="4" orderby="popularity" class="quick-sale" on_sale="true" ]


Scenario 2 – Featured Products

I want to display my featured products, two per row, with a maximum of four items.
[products limit="4" columns="2" visibility="featured" ]


Scenario 3 – Best Selling Products

I want to display my three top best selling products in one row.
[products limit="3" columns="3" best_selling="true" ]


Scenario 4 – Newest Products

I want to display the newest products first – four products across one row.
[products limit="4" columns="4" orderby="id" order="DESC" visibility="visible"]


Scenario 5 – Specific Categories Products

I only want to display hoodies and shirts, but not accessories. I’ll use two rows of four.
[products limit="8" columns="4" category="hoodies, tshirts" cat_operator="AND"]

Step 1) Go to Appearance-> Customize

Step 2) Go to Slider Settings

Step 3) Check Slider Images option



Step 4) Go to Slider -> Add New Slide

Step 5) Fill all the fields



Step 6) Save & Publish
Step 1) Go to Portfolio -> Add New Portfolio Item 

Step 2) Fill all the fields



Step 3) Go to Pages and open your page in Elementor page builder

Step 4) Add a new section in page using Elementor page builder

Step 5) Drag the Krystalpro: Portfolio Section widget to the section



Step 6) Apply changes and Save
When you import the pro demo you will find your portfolio section image is opened twice. This is because of the Elementor Page builder default settings to open the image in its own Lightbox plugin. To stop this you need to follow these steps

Step 1) Go to your page and open it with Elementor Page Builder

Step 2) Click on the left bar icon on top left of Elementor panel



Step 3) Click on Global Settings



Step 4) Click on the Lightbox tab and turn off the Image Lightbox option
Step 1) Go to Appearance->Customize->Page Settings

Step 2) Choose Background Image as option in Choose Page Title Background Color or Background Image:

Step 3) Click on Publish

Step 4) Now go to your page from Pages menu in dashboard

Step 5) From Featured Image choose your image to be shown in page title background

Step 6) Save page

Note: If you don’t add featured image to your page the default background image will show up which can be changed from the Page Settings
Step 1) Click on Appearance -> Customize -> Fonts Settings 

Step 2) From here you can change Body fonts, Headings fonts, Body font size and headings font size

Step 3) To Add fonts simply go to Google Fonts 

Step 4) Select a font from there for eg Roboto

google-fonts


Step 5) Now copy the family part eg. Roboto:300,400,500,700 and paste in the Font Name for eg Body Font Name or Headings Font Name

Step 6) Copy the CSS rules under Specify in CSS and paste in Font Family (Body Font Family or Headings Font Family) For eg Roboto, sans-serif Note: Do not include the quote and semicolon while copying it  Step 7) Save & Publish
Step 1) Go to Appearance -> Menus Step 2) Create a new menu named “Social Menu



Step 3) Now on left find Custom Links and add details. Check image below



Step 4) After that click on Add to Menu

Step 5) After adding all the icons. Next you need to go to Appearance -> Widgets and drag the Crater: Footer Social Widget to one of the Footer Column



You can use following icons

1) Twitter
Link Text: twitter.com

2) Facebook
Link Text: facebook.com

3) Github
Link Text: github.com

4) Linkedin
Link Text: linkedin.com

5) Instagram
Link Text: instagram.com

6) Google Plus
Link Text: plus.google.com

7) Pinterest
Link Text: pinterest.com

8) Behance
Link Text: behance.net

9) YouTube
Link Text: youtube.com

10) Amazon
Link Text: amazon.com

11) Dribbble
Link Text: dribbble.com

12) Flickr
Link Text: flickr.com

13) Reddit
Link Text: reddit.com

Note: The images used in the demo are for demonstration purpose only. We recommend you to use your own images. Please check image copyrights before using an image.

Need Quick Support ?

Create a new support ticket to get support from our developers