Wekala

Digital Agency Multipurpose HTML Template


Thank you for purchasing our product. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Wekala - Digital Agency Multipurpose HTML Template

 
WekalaA Bootstrap 4 based Multipurpose HTML5 Template for All kind of Portfolio, Showcase, Agency, Application, Digital Agency, Personal, Photography, gim, app showcase, business, Websites HTML5 Template.
 
Wekala - is a full-featured mulitpurpose HTML5 Template including Multipage 06 Home Variations, 07 Portfolio pages and 12 inner pages which is full fill all necessary pages and elements. On pakage includes the all essential elements and pages which will make your website different from others website/templates. Gentle and smooth interaction animations make the user experience more natural and comfortable.
 
Wekala is Responsive Designed personal Template. It is Multi-Device supported & Cross Browser Compatible. Well Documented. This Documentation provides you with a clear guideline for how to use and customize the template. If you facing any problem, please don't forget to ask any question or contact us for support. Thank You for Purchasing our Product.

Wekala Template file structure:

wekala-main
|
|-------------  assets
|------------------------  fonts
|------------------------  sass
|--------------------------------  elements
|--------------------------------  footer
|--------------------------------  forms
|--------------------------------  header
|--------------------------------  layout
|--------------------------------  media
|--------------------------------  mixins
|--------------------------------  modules
|--------------------------------  navigation
|--------------------------------  others
|--------------------------------  site
|--------------------------------  typography
|--------------------------------  variables-site
|--------------------------------  style.scss
|------------------------  js
|------------------------  images
|------------------------  css
|------------------------  webfonts
|------------- All HTML File at here

The template is built with the mobile first approach. It is responsive and uses the Bootstrap grid system. Base layout includes sections.

HTML Structure

<!DOCTYPE html>
<html lang="zxx">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!-- Page Title -->
    <title>Wekala - Multipurpose HTML5 Template</title>
    
    <!---Font Icon-->
    <link rel="stylesheet" href="assets/css/fontawesome.min.css">
    <link rel="stylesheet" href="assets/css/icomoon.css">  

    <!-- Place favicon.ico in the root directory -->
    <link rel="shortcut icon" href="assets/images/favicon.ico">

    <!-- Plugins css -->
    <link rel="stylesheet" href="assets/css/plugins.css">  

    <!-- Theme Style -->
    <link rel="stylesheet" href="assets/css/style.css">
</head>

<body>

    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        Start Site Content
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
    <div class="site-content">
       
        <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
            Site Header
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
        <header class="site-header default-header">
        </header><!--~./End site header ~-->
         <!--~~~ Sticky Header ~~~-->
        <div id="sticky-header"></div>
       
        // All section content at here
        
        <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
            Site Footer
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
        <footer class="site-footer footer-default-style">
        </footer>
        <!--~./ end site footer ~-->
    </div>
    <!-- End site content -->

   <!-- All Scripts are here --><
</body>
</html>

How to Edit Files

You can use whatever text editor you like, even default Text Editor in the OS. But we recommend using the one with the syntax highlighting such as:

  1. Atom
  2. Submile Text 3.
  3. Visual Studio Code
  4. Notepad++

 

How To Change Fonts

  1. If you are not satisfied with the default font, you can choose from hundreds of ones from the Google Fonts. After you are happy with the selected font, click SEE SPECIMEN. You'll be redirected to font detail, Then click SELECT THIS FONT. Popup window will show with text "1 Family Selected" - click it. Then you can customize your selection by clicking Customize. All necessary things are included at the popup. After that copy this code - 

    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,500i,600,700,800,900&display=swap" rel="stylesheet">

    And also the CSS font family names. 

  2. The final step is to change the font family for the <body>. Go back to Google Fonts page where you have chosen your font and find a Specify in CSS section. Then copy the highlighted text. In this example font-family: 'OpenSans'; change at the style.css file or _typography.scss

 

How To Change The Colors

There is two method of how to change the main color. 1st Just by replacing the HEX color value in the style.css (simple) and 2nd by installing node.sj and PostCSS (advanced). Here is a simple way.

Let say, that you want to change the default red color to blue one:

  1. Open the style.css in css/ folder
  2. Find the HEX value of the Default Color. If the default color is red, then HEX value is #ff0000
  3. In your text editor find Replace or Find and Replace function
  4. As original text enter the red color #ff0000 (template default color)
  5. As Replace with entering HEX value of blue color #0000ff

Or with scss color variable you can change your color code and variables

 

How To Change Section Style

If you want to change the specific section style then we know will all popular browser here is an inspect source option where we can able to find out the CSS selector easily. and with the right side, we can able to find where the CSS stays. So after finding then we can add our CSS codes

 

if This template has following javascript plugins:

all these files are located in js folder, And our custom js is located in assets/ js folder in the root directory.

Like CSS and HTML, our JavaScript codes on our main.js file are also well organized and well commented. 

Here are two Different Code Blocks, One is regular plugin activation script and another is Google Map Callback Functions. We are talking about some plugin things as like - 

We include some fallback script at function JS. So after API key, you can put your callback style of google maps

Other JS

        /*-------------------------------------------
        03. Sticky Header
        --------------------------------------------- */
        sticky_header: function() {
            if ($('#sticky-header').length) {
                var stickyMenu = $('.site-header').clone().appendTo('#sticky-header');
                $(window).on('scroll', function() {
                    var w = $(window).width();
                    if (w > 992) {
                        if ($(this).scrollTop() > 350) {
                            $('#sticky-header').slideDown(500);
                        } else {
                            $('#sticky-header').slideUp(500);
                        }
                    }
                });
            } 
        },
See all code include with separate comments. So we hope you can get it, if you aren't able to do it then please contact us, We try our best to help you
Template Name: Wekala
Template URI: https://themeforest.net/user/creative-wp
Description: A 'Wekala – Digital Agency Multipurpose HTML Template' is perfect if you like a clean and modern design. This theme is ideal for Portfolio, Showcase, Agency, Application, Digital Agency, Personal, Photography, gim, app showcase, business, and those who need an easy, attractive and effective way to share their work with clients.
Author: creative-wp
Version: 1.0
Author URI: https://themeforest.net/user/creative-wp/portfolio

We are thankful for...

Once again, thank you so much for purchasing this product. As we said at the beginning, We'd be glad to help you if you have any questions relating to this product. No guarantees, but we'll do our best to assist. If you have a more general question relating to this product on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

creative-wp