Contact the Support

Kitchen Design Free Theme Documentation

Installation

Through Dashboard
  • Log in to the WordPress Dashboard.
  • Go to Appearance -> Themes.
  • Click on Add New Theme.
  • Click on Upload Theme button.
  • Click on Choose File button and select kitchen-design.zip then click on Install Now button and wait for the install to complete.
  • After the theme installed successfully, click on Activate button.
Manual Installation using FTP
  • Unzip kitchen-design.zip to your Desktop.
  • Use an FTP client to access your host web server. Go to /wp-content/themes/
  • Upload theme to /wp-content/themes/.
  • Go to Appearance -> Themes and activate theme from Dashboard.

Customize FREE Version

  • Go to Appearance -> Customize
  • See screenshot below...
  • Home Page Setting [ Kindly Go to Appearance -> Customize -> Homepage Settings ]
  • For Displaying Slider On Home Page Select "A Static Page" and then Select Homepage From Dropdown
  • How to Set Homepage Slider?
  • How to Set Slider Page?
  • How to Set Homepage Section One?
  • How to Set Homepage Section Two?
  • How to Set Homepage Section Three?
  • How to Set Logo [ Kindly Go to Appearance -> Customize -> Site Identity :: Click On Select Logo]
  • How to Set Header Topbar?
  • How to Set Footer Widgets?
  • How to Change Color Scheme?
  • How to Set Menu?

Home Page Setup

If you have followed the above video then your home page might have got created automatically. In case you want to setup manually and don't want demo content then follow the steps below:

How to set up Home Page?
  • Go to WordPress Dashboard -> Appearance -> Customize -> Front Page -> Homepage Settings.
    Click on "A static page" and select Home and Blog page from the dropdowns.
  • Note: If you don't want to import demo content then you have to create Home(by selecting SKT Page Builder template) and Blog page manually and set them here.

Slider Setup

How to manage Slider?
  • Go to WordPress Dashboard -> Appearance -> Customize -> Front Page -> Slider.

Kitchen Design Pro Home Sections

How to manage Home Sections ?
  • Go to WordPress Dashboard -> Pages
  • Open home page and click on Edit with SKT Builder button.
  • Note: Home page is based on SKT Page Builder, click here to know more.
How to Add Video in Section
  • Add Youtube video url in same pattern: https://www.youtube.com/embed/aVS4W7GZSq0
  • Add vimeo video url in same pattern: https://player.vimeo.com/video/20597320
  • Multilingual

    How to make translate ready ?
    • First Install Plugin qTranslate X from WordPress plugin.
    • Used following code for making text translate ready : [:en]English Text[:de]Deutsch Text[:]
    • Viewing in Dutch used website url : http://www.yourwebsiteurl.com/de/
    • Viewing in English used website url : http://www.yourwebsiteurl.com/en/
    • Check below screen shot for making slider translation ready.

    • Dutch Translated
      English Translated

    Basic Options

    Customize Basic Options
    • Click on Appearance>Customize>Basic
    • Basic
      • SITE LAYOUT
      • Site Layout Boxed
      • COLORS OPTIONS
      • Managed Following Under Color Options:
      • Site Background Color
        Site Background Image
        Site content Text Color
        Other Elements Background
        Other Elements Text Color
        Default Anchor Color
        Default Anchor Hover Color
        H1, H2, H3, H4, H5, H6 Color
        H1, H2, H3, H4, H5, H6 Hover Color
        Team Box Background Color
        Social Icon Bgcolor
        Social Icon Hover Bgcolor
        Testimonial Box Bgcolor
        Testimonial Pager Color
        Testimonial Active Pager Color
        Gallery Active Filter Bgcolor
        Skills Bar Background Color
        Skills Bar Text Color
        Post Title Color
        Sidebar Widgets Background Color
        Sidebar Widget Title Color
        Sidebar Widget Text Color
        Sidebar Widget Link Color
      • FONT TYPOGRAPHY
      • Managed Following Under Font Typography:
      • Site Content Font [family, subsets, size]
        H1, H2, H3, H4, H5, H6 [family, subsets, size]
        Turn All Headings to Uppercase
      • CUSTOM CSS
      • SITE IDENTITY

    Header Option

    Customize Header Options
    • Click on Appearance>Customize>Header
    • Header
      • HEADER
      • We also use widget for top right and top left instead of customize header option.
      • SITE TITLE
      • SITE LOGO
      • HEADER LAYOUT

    Inner Page Header

    Inner Page & Posts Header

    • First on custom field option from page & posts edit screen. if it is not on.
    • Add embeded map, shortcode Or any video code in header instead of feauted image page & post header. create custom field with name "headercode" and put code in custom box.

    Post & Page Options

    Customize Post & Page Options
    • Click on Appearance>Customize>Post & Page
    • Post & Page
      • POSTS SETTINGS
      • SINGLE POST LAYOUT
      • PAGE HEADER SETTINGS
      • Page Header With Featured Image
      • If page have not assign featured image. so from page header settings have set background color or background image for header. also there is have hide page header option for hide header.
      • BLOG PAGE SETTINGS
      • CONTACT PAGE SETTINGS

    Customize Buttons

    Customize Section Buttons

    • Click on Appearance>Customize>Sections Buttons
    • Section Buttons
      • SECTION BLOCKS BUTTON

    Page Templates

    Page Templates

    • Default Template
      • Helps in setting up the content on any page with Right Sidebar
    • Page Left Sidebar
      • Helps in setting up the content on any page with Left Sidebar
    • Page No Sidebar
      • Helps in setting up the content on any page No Sidebar
    • Page Full Width
      • Helps in setting up the content on any page without Sidebar
    • Contact Layout1 & Contact Layout2
      • Select page template for set contact page layout.
    • Testimonials
      • Select testimonials template for showing all testimonials.

    Testimonials Page Setup

    Set up Testimonials page

    • Set up by using Page Template:

    Contact page Setup

    Set up Contact page

    • Set up by using Page Template:

    Setup Blog Page

    Setup Blog page

    • Set up by using Page Template Blog on any page to show blog posts
    • Blog Full Width, Blog Left Sidebar, Blog No Sidebar, Blog Right Sidebar page templates

    Set up Sidebar

    Set up Sidebar

    • Go to Appearance->Widgets->Page Sidebar
    • Go to Appearance->Widgets->Blog Sidebar
    • Drag and Drop anythings you want also text widget drag and drop write thire anythings you want.

    Disable Page Comments

    Disable Page Comments

    • All you need to do is go to that page after Log into WordPress dashboard. Scroll down and check the section: Discussion (if not able to see check above Screen Options to show Comments).
    • Uncheck the box: Allow Comments and click on Update.
    • If you want to remove comments sidewide on Pages use this plugin: “Disable Comments” https://wordpress.org/plugins/disable-comments/

    Setting up Shop

    Setting up Shop

    • Go to Plugins -> Add New in the WordPress Admin panel
    • Type WooCommerce is search box and click on search button
    • Install and then Activate the plugin.
    • It will ask whether to set up default pages. Kindly click on setting up default pages of the WooCommerce
    • That’s it now you can go to shop page and check the default product.

    Kitchen Design Pro Shortcodes

    Shortcodes

    • Our Team:
    • [our-team-slider show="-1"]
    • [ourteam col="4" show="4" excerptlength="10"]
    • [ourteam col="3" show="3" excerptlength="10"]
    • [ourteam col="2" show="2" excerptlength="10"]
    • [ourteam col="1" show="1" excerptlength="10"]
    • col="4" means four columns in a single row and show="3" means number of team member show.
    • [our-team-slider show="-1"]
    • [ourteam col="4" show="4" excerptlength="10"]
    • [ourteam col="3" show="3" excerptlength="10"]
    • [ourteam col="2" show="2" excerptlength="10"]
    • [ourteam col="1" show="1" excerptlength="10"]
    • Services:
    • 
                                  [service pattern="boxpattern-1" image="ADD IMAGE URL HERE" title="PC & MAC Computers" readmore="READ MORE" url="#"]Vestibulum mimperdiet. Pellentesque quam arcu, dignissi gravida, faucibus pharetra nisi curabitur.[/service]
      
                                  
    • 
                                [service pattern="boxpattern-2" image="ADD IMAGE URL HERE" title="PC & MAC Computers" readmore="READ MORE" url="#"]Vestibulum mimperdiet. Pellentesque quam arcu, dignissi gravida, faucibus pharetra nisi curabitur.[/service]
                                  
    • 
                                 [service pattern="boxpattern-3" image="ADD IMAGE URL HERE" title="PC & MAC Computers" readmore="READ MORE" url="#"]Vestibulum mimperdiet. Pellentesque quam arcu, dignissi gravida, faucibus pharetra nisi curabitur.[/service]
                                  
    • 
      							[service pattern="boxpattern-4" image="ADD IMAGE URL HERE" title="PC & MAC Computers" readmore="READ MORE" url="#"]Vestibulum mimperdiet. Pellentesque quam arcu, dignissi gravida, faucibus pharetra nisi curabitur.[/service]
                                  
    • Clear:
    • [clear]
    • Photo Gallery:
    • [photogallery filter="true"]
    • Show Without Filters Use Shortcode : [photogallery filter="false"]
    • Photo Gallery Carousel:
    • [gallery-carousel]
    • 1. To set up a gallery go to Photo Gallery option from you WordPress dashboard
    • 2. Click on Add New option
    • 3. Enter the title of the image. If you want to show Video then add video URL. For image set the featured image.
    • Recent Posts:
    • [posts-style1 show="4" cat="1" excerptlength="24"]
    • [posts-style2 show="2" cat="1" excerptlength="24"]
    • [posts-style3 show="4" cat="1" excerptlength="24"]
    • [posts-style4 show="4" cat="1" excerptlength="24"]
    • [posts-style3 show="2" cat="" excerptlength="15"]
      "show=2" means display two posts if you want to display 4 or 6 or etc. so just change show=4 or show=6. and "excerptlength=24" set box character length. and "cat=1" ID of display posts category
    • [posts-style4 show=3" cat="" excerptlength="21"]
      "show=2" means display two posts if you want to display 4 or 6 or etc. so just change show=4 or show=6. and "excerptlength=24" set box character length. and "cat=1" ID of display posts category
    • Above listed two types of posts style shortcode.
    • [posts-style1 show="4" cat="1" excerptlength="24"]
      "show=4" means display four posts if you want to display 6 or 8 or etc. so just change show=6 or show=8. and "excerptlength=24" set box character length. and "cat=1" ID of display posts category
    • [posts-style2 show="2" cat="1" excerptlength="24"]
      "show=2" means display two posts if you want to display 4 or 6 or etc. so just change show=4 or show=6. and "excerptlength=24" set box character length. and "cat=1" ID of display posts category
    • Post Timeline:
    • [posts-timeline show="4" cat="1" excerptlength="24"]
    • Post Grid:
    • [posts-grid show="4" cat="1" excerptlength="24"]
    • Skill:
    • [skill title="HTML" percent="80" bgcolor="#a0ce4e"][skill title="Wordpress" percent="99" bgcolor="#a0ce4e"][skill title="Web Design" percent="90" bgcolor="#a0ce4e"][skill title="Web Development" percent="95" bgcolor="#a0ce4e"][skill title="Responsive" percent="85" bgcolor="#a0ce4e"]
    • Clients
    • [client url="#" image="image url"]
    • Social Icons
    • [social_area]
          [social icon="facebook" link="#"]
          [social icon="twitter" link="#"]
          [social icon="google-plus" link="#"]	
          [social icon="linkedin" link="#"]
          [social icon="pinterest" link="#"]
      [/social_area]
    • Flip Box
    • Horizontal Flip:
      [flipbox fliptype="h" frontimage="ADD YOUR IMAGE URL HERE" fronttitle="The Front Title" frontdescription="Some Lorem Content Description Goes Here" backtitle="The Back Title" backdescription="This is the back description for testing purpose will added some dummy description text. This is the back description for testing purpose will added some dummy description text.This is the back description for testing purpose will added some dummy description text." backurl="#" backbutton="Read More"]
    • Vertical Flip:
      [flipbox fliptype="v" frontimage="ADD YOUR IMAGE URL HERE" fronttitle="The Front Title" frontdescription="Some Lorem Content Description Goes Here" backtitle="The Back Title" backdescription="This is the back description for testing purpose will added some dummy description text. This is the back description for testing purpose will added some dummy description text.This is the back description for testing purpose will added some dummy description text." backurl="#" backbutton="Read Now"]
    • Dividers:
    • [divider style="divider1"]
    • [divider style="divider2"]
    • [divider style="divider3"]
    • [divider style="divider4"]
    • [divider style="divider5"]
    • [divider style="divider6"]
    • [headingdivider text="Heading Title"]
    • Promotion Box:
    • [promobox1 bgcolor="#f7f7f7" topbordercolor="#a0ce4e" otherbordercolor="#e8e6e6"]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/promobox1]
    • [promobox2 bgcolor="#f7f7f7" leftbordercolor="#a0ce4e" button="Hello Text" url="#"]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/promobox2]
    • [promobox3 bgcolor="#f7f7f7" bottombordercolor="#a0ce4e" button="Hello Text" url="#"]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/promobox3]
    • [promobox4 bgcolor="#f7f7f7" bordercolor="#a0ce4e"]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/promobox4]
    • [squarebox image="image" title="title" url="#" target="blank"]
    • [ourteamexpanded show="4"]
    • [perfectbox image="image" title="title" description="description" url="#" target="blank"]
    • [blockbox url="url" image="image" title="title" titlecolor="titlecolor" target="self"]
    • 
      [titlearea align="left" title="OUR SERVICES" titlelast="" subtitle="" titlecolor="#444444" titlelastcolor="" seperatorcolor="#3dbad5"]
      [titlearea align="center" title="OUR SERVICES" titlelast="" subtitle="" titlecolor="#444444" titlelastcolor="" seperatorcolor="#3dbad5"]
      [titlearea align="right" title="OUR SERVICES" titlelast="" subtitle="" titlecolor="#444444" titlelastcolor="" seperatorcolor="#3dbad5"]
      
      

    • [headingseperator align="center" text="SHOP FOR MORE OFFERS"]
    • [boxthumb name="name" url="#" image="image" target="blank"]