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
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:
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.
Once you have uploaded the theme, you need to activate it by going to Appearance > Themes, and activate Djompo.
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.
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.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.
You can change the theme’s logo by accessing the Theme Options and uploading your logo with the uploader under the options panel. Just go to Options > Header Option > General Header.
This logo image will set as your main site logo. You can add an alternative logo for special purposes (you have a dark background page), but we will discuss this later on Theme Options section.
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.
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.
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.
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 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.
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.
Djompo have 6 different post list styles that you can set for a page ( 5 grid and 1 masonry ).
In this section you will be able to set how much posts shown in a page. Also set the ordering for your blog loop.
Category filter will help you to sort what category to show in the page instead of showing all of your blog posts.
Set your column per row and spacing between item.
Like the section name, this section contain an option for setting the main news layout. You can set it as list (100% width) or you can make it horizontal and select the post column in a row. Add a margin bottom to each posts and give it padding if you want.
This option have 3 column select that have different function as their name, so you can set different column layout in mobile and tablet view.
This control will work and show only in Grid Style layout.
You can crop your image to smaller by set the value and force it to crop.
Contain pagination setting that you can set to use or not.
We have 3 different pagination method, and specialy for pagination infinite type we created 3 spesific styles. You can change the text and the image loader also for this pagination type.
You need to set "SPECIFIC CLASS NAME for INFINITE SCROLL" in this option if you decide to use load more.
Testimonial block contain repeater item that allow you to add as much as possible slides item as testimonial items.
In this setting, you will see the repeater items and button to add more item. Inside each item you can find a form to fill the testimonial content.
This section you will be able to set their style like colors, font size, font weight or even decide to not shown the elements.
This setting tabs contain slider option. You can set how item show in one slide. Also set other options such as navigation arrow, slides loop and play time.
This block will shown your Team post item. You need to add a post type Team before use this block.
This option will allow you to set how much post to shown in a block. Set an offset post, to jump your latest post to 2 or more post after it. Assign a post display by category and order it by variant order type.
In this section you will be able to set their style like colors.
Like the section name, this section contain an option for setting layout size.
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.
<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.
<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.
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.
We have 1 header styles that every header type have their own configuration 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.
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.
You can upload your own 404 background image here, gif also allowed.
You can upload your own loader image here, gif also allowed.
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.
Djompo will help you to customize your site instantly one by one with Extensive Live Customizer.
Djompo theme is supported page template. There is 2 page template type for each page.
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).
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.
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.
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