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

Need Quick Support ?

Create a new support ticket to get support from our developers