Loading

Krystal Documentation

How to setup theme and How to use 1 click demo import

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 krystalpro.zip and install it
Step 2) Install all the recommended plugins
Step 3) Go to Appearance->Import Demo Data and click on Import Demo Data
Step 4) After demo import finish. You will see that your website looks like the demo preview site.

Note: You need to change the URL of the menu, as the imported menu will point to the demo site. You can change menus URL by going to Appearance->Menus
For eg: The menu will have URLs like this
https://www.spiraclethemes.com/wordpress-themes/krystal-pro/krystalpro-demo1/#home
You need to add your domain to the url like this
https://www.yourdomainname.com/#home

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

Getting started with Krystal (Manual)

Step 1) Create a new page from Pages menu and name it Home.
Step 2) Select Template as Business Template from Page Attributes section. Publish it.
Step 3) Go to Settings->Reading menu and from Front page displays settings select A static page and then select Home as Front page.
Step 4) Save it

How to change Logo

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

How to add menu

Go to Menus from Appearance-> Menus.
Create a new menu.
Click on Custom Links to add menu items
1)To Add "HOME" Menu
Enter url : yourdomainname.com/#home For eg : http://www.sitename.com/#home
Add Link Text : HOME
Then Click Add to Menu
2) For every other section. You need to know the particular section ID. For this go to
a) Appearance -> Customize -> Widgets -> Business Template
b) Click on Add a widget button
c) You will see Section ID field as the first field in widget. Enter name of your section here. (for eg about). Copy the id name ie "about" in this case.
d) Go to menu again and click on custom links and add url like this yourdomainname.com/#about.
e) Add Your Link text.
f) Link other sections like this to menu
After this Select Theme Locations Primary from bottom and click Save Menu

How to add home section background image

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

How to add videos to homepage on button click

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

How to add text and image section

Step 1) Click on Appearance -> Customize -> Widgets -> Business Template
Step 2) Click on Add a widget button
Step 3) Scroll down to Krystal: Image and Text Section and click
Step 4) Enter content and Save

Step 5) You can swap the content position also

How to add services content

Step 1) Click on Appearance -> Customize -> Widgets -> Business Template
Step 2) Click on Add a widget button
Step 3) Scroll down to Krystal: Services 3 Column Section for 3 columns icons or Krystal: Services 4 Column Section for 4 columns icons and click
Step 4) Enter content for each of the blocks
Step 5) For "Font Icon" use fontawesome code for e.g. fa-envelope
Step 6) Save & Publish

Note: You can add any number of Service Rows of having 4 or 3 columns (depending upon the widget) in each row.

Note: You can find your font awesome icon from the url below
Get Fontawesome Icons

How to add testimonial section

Step 1) Go to Appearance->Customize->Widgets->Business Template.
Step 2) Click on Add a Widget button at bottom
Step 3) Select Krystal: Testimonial Section
Step 4) Select your background image
Step 5) Add number of posts you want to see for ex 5
Step 6) After adding a number you need to click on Apply button on bottom of widget. You will see 5 blocks of testimonials.
Step 7) Add content to each of them and click on apply button on bottom of widget
Step 8) Wait for the customizer to preview
Step 9) Click on Save & Publish button on top

Note: You can also delete the blocks by entering a number lower than the entered one. for eg 3. This will delete the extra 2 blocks and their content and will show only 3 blocks from top.

How to add gallery or portfolio section

Step 1) Go to Appearance->Customize->Widgets->Business Template.
Step 2) Click on Add a Widget button at bottom
Step 3) Select Krystal: Portfolio Section
Step 4) Add Your Heading & Subheading
Step 5) Add Number of Portfolio Items for ex 12
Step 6) After adding a number you need to click on Apply button on bottom of widget. You will see 12 blocks of Portfolio Items.
Step 7) Enter content for each of the blocks.
Step 8) Save & Publish

Note: You can also delete the blocks by entering a number lower than the entered one. for eg 10. This will delete the extra 2 blocks and their content and will show only 10 blocks from top.

How to add call to action section

Step 1) Go to Appearance->Customize->Widgets->Business Template.
Step 2) Click on Add a Widget button at bottom
Step 3) Select Krystal: Call to Action Section
Step 4) Add content like background image, heading, subheading button etc. You can even add parallax effect on it. You can even switch the content position type.
Step 5) Save & Publish

How to add team members section

Step 1) Go to Appearance->Customize->Widgets->Business Template.
Step 2) Click on Add a Widget button at bottom
Step 3) Select Krystal: Team 4 Columns Section or
Krystal: Team 3 Columns Section Step 4) Add Heading and Subheading. Add content for each team member
Step 5) Save & Publish

How to add blog posts

Step 1) Click on Appearance -> Customize -> Widgets -> Business Template
Step 2) Click on Add a widget button
Step 3) Scroll down to Krystal: Blog Section and click
Step 4) Enter content and Save

How to add number counters section

Step 1) Go to Appearance->Customize->Widgets->Business Template.
Step 2) Click on Add a Widget button at bottom
Step 3) Select Krystal: Counters Section
Step 4) Add content.
Step 5) You can also add parallax effect to it.
Step 6) Save & Publish

How to add contact form

Step 1) Click on Appearance -> Customize -> Widgets -> Business Template
Step 2) Click on Add a widget button
Step 3) Scroll down to Krystal: Contact Section and click
Step 4) Enter content and Save

How to add contact form shown in demo

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) Click Appearance -> Customize -> Widgets -> Business Template
Step 5) Add this shortcode in Krystal : Contact Section
Step 6) Save & Publish

How to add social icons

Step 1) Click on Appearance -> Customize -> Footer Social Icons
Step 2) Enter Icons content. For e.g. fontawesome code and url
Step 3) Save & Publish
Note: You can find your font awesome icon from the url below
Get Fontawesome Icons

How to add copyrights text

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

How to reorder sections of theme.

Step 1) Click on Appearance -> Customize -> Widgets -> Business Template
Step 2) You will see your section widgets
Step 3) Drag up or down your widget to reorder your section.
Step 4) Click on Save & Publish button on top
Step 5) Make sure you also reorder your menu after changing section

How to enable/disable sticky header

Step 1) Click on Appearance -> Customize -> Sticky Header Settings
Step 2) Change your settings in Enable Sticky Header Feature
Step 3) Save & Publish

How to add or change Google fonts

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

How to add a preloader for my site

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

How to add slider

Step 1) Click on Appearance -> Customize -> Slider Settings
Step 2) Next choose Slider Images from the options
Step 3) Save & Publish
Step 4) Click on Appearance -> Customize -> Widgets->Business Template
Step 5) Click on Add a widget button
Step 6) Scroll down to Krystal: Slider Section and click on it
Stp 7) Drag the Krystal: Slider Section widget to the top as the slider section is the first section we want to show
Step 8) Enter content
Step 9) Save & Publish

How to add video background

Step 1) Click on Appearance -> Customize -> Slider Settings
Step 2) Next choose Video Background from the options
Step 3) Save & Publish
Step 4) Click on Appearance -> Customize -> Widgets->Business Template
Step 5) Click on Add a widget button
Step 6) Scroll down to Krystal: Video Background Section and click on it
Stp 7) Drag the Krystal: Video Background Section widget to the top as this section is the first section we want to show
Step 8) Enter content
Step 9) Save & Publish

Note: Video background do not run in mobile devices. You need to add a fallback image from the settings.