KITKAT

Kit User Guide


Thank you for purchasing our Kit. Please do not forget to rate the Kit and We'll be waiting for your Feedback. It would be nice to see your comments on our product, this documentation consists of several parts and shows you how to set up and administrate your WordPress site.

We did our best to make this documentation as clear as possible. However, if you have any difficulties with the our theme or any suggestions on improving the Kit or the documentation, feel free to contact us via our support link: studio@radiuzz.com

First of all what is WordPress CMS?

WordPress is a free and open source blogging tool and a content management system (CMS) based on PHP and MySQL. It enables you to build Websites and powerful on-line applications and requires almost no technical skills or knowledge to manage. Many aspects, including its ease of use and extensibility, have made WordPress the most popular Web site software available. Learn More

What is a WordPress Theme ?

A WordPress Theme is a skin for a website built with the WordPress CMS platform. In other words, you can easily change your WordPress Web site appearance by installing a new Theme in a few easy steps. With all its simplicity, a WordPress Theme is provided with all the necessary source files and you are free to edit or extend it the way you need.

What is a layers wp?

Layers is activated as a WordPress theme and works directly with the built-in WordPress Customizer, A code-free interface gives you control over the content and aesthetics of your site while still maintaining good design fundamentals. Download Layers and create anything you want, from gorgeous themes to powerful extensions, or contribute to the core on GitHub

The Kit package you have downloaded consists of several folders. Let's see what each folder contains:

Documentation

Licensing

Kit
  images
  pages-presets
  css.txt
  dinasu-content.xml
  

1) Download & Organize Files

After downloading the ZIP file from ThemeForest UNIZP that file, after unzipping you see various structure of Kit.
  • Kit
  • Documentation (Directory which includes theme documentation file)
  • Licensing (File which include information about wordpress & theme under GPL liscense)

2) Install Plugins


  1. install plugin "contact form 7" if you want styled contact form, go to plugins > add new > search for "contact form 7" and install/actiavate
  2. Install easy reservation easyReservations plugin. also it can be downloaded from Wordpres plugins
  3. For gallery we are using this gallery plugins download
  4. Install testimonials slider in the footer dlownload
  5. and lastly weather plugin in the footer dlownload
  6. note: All plugins provided here is free and free to download and use

3) Import Content


  1. From your WordPress admin panel, click on TOOLS → IMPORT (If you are prompted to install the WordPress Importer, go ahead and install/activate it.)
  2. Choose WordPress from the Import screen
  3. Browse to the location of your style-kit files and select the content.xml file and click OPEN
  4. Click UPLOAD FILE AND IMPORT
  5. Select your name from the Assign Authors drop-down, and check “Download and import file attachments”! If you get an error on the image import, we’ll address that in step 8
  6. Click > SUBMIT (The import will begin and may take a few minutes. If you see several failure messages on importing media, this is normal and can be ignored.)
  7. When complete, you will see a success message.
  8. Click on Media in your admin menu and check for the demo images. If they are not there, click on ADD NEW
  9. Browse to your Style Kit’s folder and open the image folder. Select all the images and click OPEN to upload them manually.

If your kit did not come with an XML file, go to PAGES →ADD NEW, name your page and select the Layers template from the Page Template drop-down. SAVE your page and continue.

4) Import Page Layouts

  1. Go to LAYERS → LAYERS PAGES and locate the page you want to work on first. Click its title to enter the editor.
  2. Click on the UPLOAD & IMPORT button in the Import Layout box, located in the center column under the Build Page button
    page-import
  3. The Media Library will open. Click the Upload Files tab, then either browse to the page’s preset.json file, or drag and drop it into the window upload-files-media-library
  4. When complete, click the UPLOAD & IMPORT button in the lower-right (You may need to wait several seconds for the import to complete. While the file uploads, nothing may appear to be happening in the editor – be patient! This should not take longer than a minute.)
  5. When the upload is complete, the box will refresh with a green border and a success message.
    import-complete
  6. Click BUILD YOUR PAGE
  7. Your preset layout should appear, complete with images and all widgets set. You will need to configure your global settings and save some of your widgets to finalize the design:

5) Customize

Your style kit likely comes with some custom styling in the form of a txt file. The code in this file is added to your main Layers setup and helps add final touches. Importing this code is not required for the style kit to work, but is most likely the core component of what makes the style kit look the way it does

  1. On your computer, browse to the location of your Style Kit files and open the css.txt file
  2. Copy the contents
    copy-css
  3. Back in WordPress, you should be at the main Visual Customizer screen. If you already clicked Edit Layout, simply click the back arrow at top-left.
  4. Click the CSS tab near the bottom to expand the Custom CSS field
  5. Paste in the copied code.
    vc-global-custom-css
  6. If you haven’t set up the rest of your site options yet, now is a good time to choose your Header, Navigation, Content and Footer options. For detailed help on these sections, see the Layers Setup Guide.
  7. Expand the Font section and set any recommended fonts specified in your Style Kit’s readme.txt file, or choose your own!
  8. Finally, click on Edit Layout and expand the page’s Body panel at the top.
  9. Customize the widget text as desired, then click SAVE & PUBLISH

5) Implementing Booking system


note: all booking forms and reservation widgets will be imported during pages import, information belov is provided just for use it in case you need to us it on different pages or you wnat to create new pages with same style

First of all you have to install easyReservations plugin. it can be downloaded from Wordpres plugins

How to use this pluing globally and how to work with it, here is a geat video tutorial about it Video

Booking form on the homepage

to use this form you just need to add easy reservation wdget from wordpress live customizer, open your page and customize it with layers, choose easyreservation widget and add it

after this add this shortcode in the widget content
<div class="input_container">
    <div class="input_prefix">
        Check in:
    </div>[date-from]
</div>
<div class="input_container">
    <div class="input_prefix">
        Check out:
    </div>[date-to]
</div>
<div class="input_container">
    <div class="text-above">
        Adults
    </div>[adults 1 5]
</div>
<div class="input_container">
    <div class="text-above">
        Children
    </div>[childs 1 5]
</div>

Reservation form in the single accomodation page

after creating accomodation use content widget of layerwp and ust code provideb below in the excerpt to receive reservation widget similarry to demo

[easy_form small style="none" submit="Reservation successfully sent" subsubmit="Please continue by paying through PayPal or enter your credit card details." credit="Reservation complete" subcredit="You'll receive an email with the reservations details" resourcename="Superior Class Room" price="1" pers="1" resource="102"]

please consider you have to change resouce id here according to your accomodation resource (PLease check easy reservation documentation or video for more)

Booking form

To use Booking form on the page create layersw page and use this code

[easy_form style="none" submit="Reservation successfully sent" subsubmit="Please continue by paying through PayPal or enter your credit card details." credit="Reservation complete" subcredit="You'll receive an email with the reservations details" resourcename="Room" price="1" pers="1" resource="2290" multiple="full" validate="Reservation successfully verified" subvalidate="Either make additional reservations or submit"]

This kit uses the following Layers Settings:



1) Site Settings:

2) Header:
3) Footer:

Note: IN the footer place 3 widgets