Djompo Documentation by Themes Awesome v1.0


Djompo - A Senior Care WordPress Theme

Created: 21 September 2018
By: Themes Awesome
Support: Ask support access HERE

Thank you for purchasing Djompo. If you have any questions that aren't covered in the documentation, then please send me a PM and I'll be happy to help. Thanks again!
Online Documentation: Read online HERE


Table of Contents

  1. Installation
  2. Basic Tutorial
  3. Page Builder
  4. Theme Features
  5. Included Files




A) Installation - top

WordPress Installation

This theme requires a working version of WordPress to already be installed on your server. If you need to install WordPress then please visit: http://wordpress.org/download/. If you need any help with the installation, please refer to this guide: http://codex.wordpress.org/Installing_WordPress.

Here is a brief step by step on how to install WordPress:

  1. Download and unzip the WordPress package if you haven't already.
  2. Create a database for WordPress on your web server, as well as a MySQL user who has all privileges for accessing and modifying it.
  3. Upload the WordPress files in the desired location on your web server:
    • If you want to integrate WordPress into the root of your domain (e.g. http://example.com/), move or upload all contents of the unzipped WordPress directory (but excluding the directory itself) into the root directory of your web server.
    • If you want to have your WordPress installation in its own subdirectory on your web site (e.g. http://example.com/blog/), create the blog directory on your server and upload WordPress to the directory via FTP.
    Note: If your FTP client has an option to convert file names to lower case, make sure it's disabled.
  4. Run the WordPress installation script by accessing wp-admin/install.php in a web browser.
    • If you installed WordPress in the root directory, you should visit: http://example.com/wp-admin/install.php
    • If you installed WordPress in its own subdirectory called blog, for example, you should visit: http://example.com/blog/wp-admin/install.php

Theme Installation & Setting Up

1) Uploading Djompo

The theme files need to be uploaded before you can activate the theme for use. There are two ways you can do this, FTP upload or WordPress upload.

If you are uploading via FTP upload, then you need to upload the unzipped folder Djompo to the /wp-content/themes folder of your WordPress installation.

If you are uploading via WordPress upload, then navigate within the WordPress admin area to Appearance > Add New Themes > Upload. Select the zipped file “Djompo.zip” and then hit Install Now.

2) Activating Djompo

Once you have uploaded the theme, you need to activate it by going to Appearance > Themes, and activate Djompo.

3) Install Plugins

Now that you have activated Djompo, you will see a yellow notice at the top of the screen. This notice is to let you know about the plugins that we recommend you install for use with the theme. Click 'Begin installing plugins' and install/activate the plugins one by one. You can also access this page by going to Appearance > Install Plugins.

4) One Click Import Demo

NOTE: before importing the demo content, make sure you have installed & activated all required plugins from within Appearance > Install Plugins.

This theme support one click import demo content. You can make your site as same as our demo site. You need to install Required Plugins before importing demo content.

Then go to option > demo importer.
You will find this box:

All you need is just click "Import Demo" button and wait till demo imported.

It may take a several minutes. The import is around 5-10 minutes.


B) Basic Tutorial - top

Posts

The Posts menu option on the left is where you add blog posts. To add a new blog post, select the Posts > Add New option from the left hand WordPress menu.

You will then be able to set a title for the blog post, add the body content, and also provide all the meta information such as extra details and media. In the blog meta you can set the image for the thumbnail, and also the media type for the detail page.

Support 3 post formats that will be describe in the "Post Format" section.

Widget Areas

There are widget areas that can be viewed under the Appearance > Widget. This theme also have optional Footer widget up to 4 column. You can customize it at Footer Options.

Child Theme

We have provided a child theme package ready for you to use if you wish to make changes to files, while keeping them through updates. The child theme is included within the main download folder, and is named "Djompo-child" all you need to do is upload this as well as the standard "Djompo" folder, and then activate the child theme in Appearance > Themes from the WordPress menu.


C) Page Builder - top

Djompo Elements

Djompo using drag and drop page builder that will make you easier to set and built your own website layout. Beside this theme have standard page builder widget block, this theme also have its own block. We created them with extensive options so the widgets can fully controllable.

Huntu Element (inhouse widget block) is extension feature that will available after you install Djompo Extra and Elementor Page Builder, very recommended to install all required plugins before you use them.

Djompo Head Title Block

Djompo have 8 different head title style and variant heading type such as h1 until span tag's for your title text. Head Title Block only have 2 option section. First for control and second for style.

Style Settings created conditionaly. That's mean the control will changed if you change the title style type on General Settings. Style Settings contain every Title Styles needs such as color, border color and background color if selected title have background.

Head Title Style 1
Head Title Style 2
Head Title Style 3
Head Title Style 4
Head Title Style 5
Head Title Style 6
Head Title Style 7
Head Title Style 8

Djompo Post Block

This block will show your posts to selected page as a page builder element.

As a page builder block, Post Block will allow users to customize their own posts style. Every styles inside this element have different needs so we create an option for that.

Post Block Result

Djompo Testimonial Block

Testimonial block contain repeater item that allow you to add as much as possible slides item as testimonial items.

Testimonial Example:

Djompo Team Block

This block will shown your Team post item. You need to add a post type Team before use this block.

Team block result:

Djompo Contact Form Block

This block will call your contact form template from contact form 7. But you need to create the contact form 7 before can use this block.

In case you want the contact form with same style as our demos. You need to copy this form markup to your contact form.

Contact Form style 1

<div class="booking-form contact-form-style-3 dark">
<div class="book-2-col clearfix">
<div class="contact-bordered item-column first-mar clearfix">
[text* your-name placeholder "Your Name"]</div>
<div class="contact-bordered item-column sec-mar clearfix">
[email* your-email placeholder "Your Email"]</div></div>
<div class="book-2-col clearfix">
<div class="contact-bordered item-column first-mar clearfix">
[tel phone placeholder "Phone Number"]</div>
<div class="contact-bordered item-column sec-mar clearfix">
<[select room-type "2 People" "3 People" "4 People" "5 People" "Family" "VIP"</div></div>
<div class="book-2-col clearfix">
<div class="contact-bordered item-column first-mar clearfix">
[text date placeholder "8 February, 2018"]>
<div class="book-inner-3-col sec-mar clearfix">
<div class="contact-bordered item-column clearfix">
[number book-hour class:book-hour class:col-3 placeholder "12"] [number book-minute class:book-minute class:col-3 placeholder "00"] [select book-time class:book-time class:col-3 "AM" "PM"]</div></div></div>
<div class="contact-bordered textarea-type clearfix">
[textarea text-comment placeholder "Write your message here.."]</div> <div class="contact-submit clearfix">
[submit "Submit"]</div></div>

Just copy and paste this HTML as your contact form HTML form.

Contact Form style 2

<div class="contact-form-style-1 clearfix">
<div class="contact-bordered item-column clearfix">
[email* your-email placeholder "Email"] <span class="contact-ef border-form-top"</span>
<span class="contact-ef border-form-left"</span>
<span class="contact-ef border-form-bottom"</span>
<span class="contact-ef border-form-right"</span></div>
<div class="contact-bordered item-column clearfix">
[email* your-email placeholder "Email"]>span class="contact-ef border-form-top"</span>
<span class="contact-ef border-form-left"></span>
<span class="contact-ef border-form-bottom"></span>
<span class="contact-ef border-form-right"></span></span></div></div>

Just copy and paste this HTML as your contact form HTML form.

D) Theme Features - top

Theme Options

The theme options can be used to customise the theme to suit your needs, layouts and much more. You should take the time to go through all of these options to ensure that you are getting the most out of the theme.

Djompo have 1 style for your header. You can set the header container width in this options.

We will tell you what functions we have created in header section.

Mobile Options

This options will work for your header in mobile devices version. You can change the background color because header default color is actually transparent. Header Mobile Alternative mode will only appear after you Enable "Alternative Header Scheme" options in Header Options.

Content Options

This content options will effected to all post type page and page templates. You can set your content container and background color (separated from body background in customizer. This background color needed if you want to use Fixed Footer. You can also boxed your content with on the Use Boxed Content switcher.

The "content boxed width" will give your content different width from content container. That's mean box inside box. We will give you a screenshot about this.

Boxed Content

404 Options



You can upload your own 404 background image here, gif also allowed.

Page Loader Options



You can upload your own loader image here, gif also allowed.

Font Options



Djompo allows you to use either Web Standard or Google Fonts - separately for both Body & Headings text. If you are using Web Standard, or Google Fonts, then all you need to do is select the type from the button set, and then select the font family from the provided dropdowns.

Live Customizer

Djompo will help you to customize your site instantly one by one with Extensive Live Customizer.





Page Template

Djompo theme is supported page template. There is 2 page template type for each page.

Default Template

This is standard page that can use for every page, allow comment and have an option to show or hide your page title.

This page template support elementor page builder as well, so you can edit your page with elementor. But if you want to make your page full width (with elementor) you need to "Strech Section" for current elements section because this page template have container (define page screen width).

Page Builder Template

This page not allowed page comment, and doesn't allow page wrapper option. This page template made for Elementor page builder only so if comment detected from post, your page comment doesn't come up. Also doesn't have Page Title.

Other page template will shown after you installed the required plugins, such as "Elementor Canvas" and "Slider Revolution Blank Template". Both of these pages are not stylized by us and will disappear after deactivate active plugin.


D) Included Files - top

CSS Files

styles.css - The main css for the theme, which includes the layout and styling for all aspects of the theme.

font.css - Djompo Icon font.

JavaScript Files

Main.js - This is where all the custom magic happens. Feel free to edit any of this code, but make sure to keep a backup in case anything goes wrong!

animOnScroll Licensed under the MIT license. http://www.codrops.com

Bootstrap - http://getbootstrap.com

classie - class helper functions from bonzo

jQuery Easing - http://gsgd.co.uk/sandbox/jquery/easing/

FitVids - Copyright 2013, Chris Coyier.

Headroom Nick Williams

imagesLoaded PACKAGED v4.1.1

Infinite Scroll - version 2.1.0

Isotope - PACKAGED v3.0.4 Copyright 2017 Metafizzy

lightgallery - v1.5.0 http://sachinchoolur.github.io/lightGallery/

modernizr - http://modernizr.com/download/#

Owl Carousel - v2.2.1 Copyright 2013-2017 David Deutsch

respond.js - A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more). You can find out more here: https://github.com/scottjehl/Respond.

SmartMenus jQuery Plugin - v1.0.0 http://www.smartmenus.org/

SmoothScroll - v0.9.9 Licensed under the terms of the MIT license

Sticky-kit - v1.1.2 MIT Leaf Corcoran 2015

Thumbs Plugin - 2.0.0 Gijs Rogé license The MIT License

WOW - v1.0.3 5 Matthieu Aussaguel; Licensed MIT


Once again, thank you for purchasing this theme. Customer satisfaction is our #1 priority, which is why we always endeavour to provide the best service we can. We’re only an email away if you ever need us!

Themes Awesome

Go To Table of Contents