Constrot Documentation

We would like to thank you for purchasing Constrot! We are very pleased you have chosen Constrot for your website, you will not be disappointed! Before you get started, please be sure to always check out these documentation files. We outline all kinds of good information, and provide you with all the details you need to use Constrot. Constrot can only be used with Joomla and we assume that you already have Joomla installed and ready to go. If you do not, please see our section on Joomla to help you get started.

If you are unable to find your answer here in our documentation, we encourage you to search our Knowledgebase, watch our Video Tutorials, and also perform a Forum Search for your answer. Chances are your question or issue have been brought up already and the answer is waiting to be found. If you are unable to find it anywhere, then please go go our forum section and post up a new topic with all the details we need. Please be sure to include your site URL as well. Thank you, we hope you enjoy using Constrot!

Constrot Template

Joomla Information

With this theme you can install on a working version of Joomla already installed or use Quickstart version of this theme. We recommanded you to install Quickstart version. If you need help installing Joomla, follow the instructions you can watch the Instructional Video created by Incredible Tutorials. Below are all the useful links for Joomla information.

Requirements For Constrot

To use Constrot, you must be running Joomla 3.0 or higher, PHP5 or higher, and mysql 5 or higher. We have tested it with Mac, Windows and Linux. Below are a list of items you should ensure your host can comply with.

  • Check to ensure that your web host has the minimum requirements to run Joomla.
  • Always make sure they are running the latest version of Joomla
  • You can download the latest release of Joomla from official Joomla website
  • Always create secure passwords FTP and Database
Hosting is more secure when PHP applications, like Joomla, are run using your account’s username instead of the server’s default shared username (www or www-data). The most common way for hosting companies to do this is using suPHP. Just ask your potential host if they run suPHP or something similar.

We recommend using CloudAccess.net for all your hosting needs.

What’s Included

When you purchase our theme from Themeforest, you need to download the Constrot zipped file from your Themeforest account.

Constrot zipped file – contains six folders like image on the right.

  • Templates, Modules and Component – folder contains template, modules, components zip file to install Constrot template with Joomla Install method.
  • Quickstart – folder contains quickstart.zip file. All you need to install with FTP method.

Installation

You can install Constrot Template in two ways: through Joomla Installation, or via FTP. The quickstart.zip file is all you need and the quickest way to install the template throw FTP. Please see the following sections for each method and watch our video tutorial on how to install Constrot. But first, you need to download the Constrot files from your Themeforest account.

Joomla Installation

Watch the video on the right to install via Joomla.

Notice that: when you install Constrot template throw Joomla Install method your database for the template is empty. So you need to create data (K2 content) and menus, modules, ... to work with this template.

We recommend you to install Constrot Template throw FTP Method.

FTP Installation

Follow the steps below to install via FTP.

Step 1 – Log into your hosting space via an FTP software

Step 2 – Upload the extracted quickstart.zip file in Quickstart folder into your host folder

Step 3 – Creating a Database!.

Step 4 – Open your browser. Go to Your Site and following the steps in the screenshort bellow.

Template Configuration

To Change Your Logo, favicon and preset Color, ..

Template Manager

Go to Extensions -> Templates. From back end menu bar, Constrot Templates tab and Select Constrot template

Blue PageBuilder

Have you ever noticed how much time you spend fighting with [shortcodes]? No more trial and errors with “shortcodes magic” – PageBuilder will take care of that for you. You only use your mouse for Drag & Drop so much elements we provided, very friendly and save a lot of time.

  • Introduction
  • Elements

Introduction


Have you ever noticed how much time you spend fighting with [shortcodes]? No more trial and errors with “shortcodes magic” – PageBuilder will take care of that for you. You only use your mouse for Drag & Drop so much elements we provided, very friendly and save a lot of time.

Elements

In back end: Go to Component menu at the top and Elementy Blue Page Builder. There are so many elements and you can build whatever you want with this page builder, just drag element on the left side and drop to the page area (the right side).

Element: "Column": Support grid layout Bootstrap

Element: "Divider: Help you set separator/space for each area in layout

Element: "HTML: Allows you to create your own HTML using a WYSIWYG editor, additional you can embed Shortcode and HTML Format(see below)

Element: "Module: You can call a module in Joomla (of course it must publish)

Element: "Contact Form: It's so easy to make a contact form.

Element: "Portfolio: Display articles from k2 with Isotope jQuery plugin

Element: "Gmap: Display Google Map

Element: "Tabs+Accordion: Allow display multiple tab

Element: "Slider: You can make a slider by Drag and Drop images.

Element: "Services: Display articles from K2

Element: "Statistic: Create statistic by Drag and Drop images.

Element: "Pricing: Display Pricing table

Element: "Youtube: Display testimonial slider

Element: "Skill: Create statistic by Drag and Drop images.

  • Then Elementy on "Save".
  • Goto Menus menu at the top and Elementy Main Menu
  • Elementy on New,choice menu type "Blue Page Builder => Page Builder"
  • Elementy on Advanced Options tab
  • Select the Item you created before step and choose color for this page
  • finally, Elementy "Save"

Customizing Style


  • Going to (root)\plugins\system\bluetheme\assets
  • Copy folder st-template to (root)\templates\Constrot\html
  • Then modify element template.

Create Home 1

  • Instroduction
  • Setting Up The Module for Home 1

1. Create New Page

Click Components -> Blue PageBuilder -> Click new or edit your page

Image Preview For Admin below

2. Create New Menu:

Click Menus -> Main Menu -> Click new or edit your menu

Image Preview For Admin below

3.Create Menu Module

Step1: Click Extension -> Modules -> Click New - Choose module type Menu (or edit)

Step2: You enter a title, select Main Menu from menu manager, select the display position is menu

Step3: Click Menu Assignment tab and assign it to your menu

Image Preview below for create menu module in admin



4.Create layout: Flexslider Content

Step1: Click Components -> United Slider


    Step2: Click Create new Slider






    HTML code:
    		<span class="text-uppercase" style="font-family:'Roboto' ;"><span class="text-primary">We Build </span> Your Dream</span>
        

    Step3: Create new modules slider:


Image Preview For Frontend below


5.Create layout: BEST QUALITY

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop HTML Element -> Click to edit


  2. Click Toggle, then input html code below


    -> Click Save

    HTML code:
    		<div class="section-full overlay-wraper z-99" style="background-image: url('images/background/bg1.jpg');">
    			<div class="overlay-main" style="opacity: 0.90; background-color: #273447;"> </div>
    			<div class="container">
    				<div class="row">
    					<div class="col-md-8 p-t15 p-b30 support-skew">
    						<div style="z-index: 2; position: relative;">
    							<div class="col-md-6 p-tb10">
    								<div class="wt-icon-box-wraper left ">
    									<div class="icon-md text-primary"><a class="icon-cell" href="#"> <img src="images/icons/besty-quality.png" alt="" /> </a></div>
    									<div class="icon-content text-white">
    										<h5 class="wt-tilte text-uppercase m-b5 text-white">best quality</h5>
    										<p>Lorem ipsum dolor sit amet, cdipiscing elit, sed diam non dolore [...]</p>
    									</div>
    								</div>
    							</div>
    							<div class="col-md-6 p-tb10">
    								<div class="wt-icon-box-wraper left">
    									<div class="icon-md text-primary"><a class="icon-cell" href="#"> <img src="images/icons/24-call-icon.png" alt="" /> </a></div>
    									<div class="icon-content text-white">
    										<h5 class="wt-tilte text-uppercase m-b0 text-white">24 hour support</h5>
    										<p>Lorem ipsum dolor sit amet, cdipiscing elit, sed diam non dolore [...]</p>
    									</div>
    								</div>
    							</div>
    							<div class="clearfix"> </div>
    						</div>
    					</div>
    					<div class="col-md-3 p-t50 p-b50 col-md-offset-1">
    						<div class=""><a class="site-button skew-icon-btn m-r15 text-uppercase" style="font-weight: 600;">Contact us <i class="fa fa-angle-double-right"></i></a></div>
    					</div>
    				</div>
    			</div>
    		</div>
        

Image Preview For Frontend below


6.Create layout: ABOUT COMPANY

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element, divide into 2 columns -> Click to edit


  2. Click to change parameters:

    Title: ''

    Under Title: ''

    Icon Name: ''

    Section ID: ''

    Section Class: 'section-full p-tb100'

    Container Class: 'container'

    Row Class: ' '

    Heading Style: ''

    Heading align: ''

    Background Image: 'images/background/pic-c-1bg.png'

    Padding: ''

    -> Click Save


  3. Drag&Drop 2 HTML elements into 2 columns above


    • The first, we need setup properties for columns



    • -> Click Save

      Do the same to setup properties for extant column

    • Then, Click to edit the HTML element in the first column


    Click Toggle, then input html code below


    -> Click Save

    HTML code:
    		<div class="about-com-pic"><img class="img-responsive" src="images/pic-c-1.png" alt="" /></div>
        

    Do the same with extant HTML element
Image Preview For Frontend below


7.Create layout: LATEST PROJECTS

Step1: Click Components -> K2 -> Extra Field Groups -> Click new or edit Extra Field Group

Step2: Click Components -> K2 -> Extra Fields -> Click new or edit Extra Field , are belong extra field group

Step3: Click Components -> K2 -> Categories -> Click new or edit categorie Portfolio, associated extra field group

Step4: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element -> Click to edit


  2. Click to change parameters:

    Title: ' '

    Under Title: ''

    Icon Name: ''

    Section ID: ''

    Section Class: 'section-full p-t80 bg-color-dark bg-4'

    Container Class: ' '

    Heading Style: ''

    Heading align: ''

    Background Image: ''

    Padding: ''

    -> Click Save


  3. Drag&Drop 1 Portfolio element into the column above


    • The first, we need setup properties for columns



    • -> Click Save

    • Then, Click to edit Portfolio element


    • Click to change parameters:

      Category: Select category'Portfolio from com_k2'

      Title: 'LATEST PROJECTS'

      Description: ''

      ID: ''

      Menu ID: '138'

      Class: ''

      Count: '8'

      Image Size: 'M'

      Columns: '4 columns'

      Template: 'Choose template Default3'

      -> Click Save



Image Preview For Frontend below

8.Create layout: WHY CHOOSE US

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element -> Click to edit


  2. Click to change parameters:

    Title: ' Why Choose us'

    Description: ' Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.'

    Icon Name: ''

    Section ID: ' '

    Section Class: 'section-full bg-gray p-t80 p-b120'

    Container Class: 'container'

    Row Class: ' '

    Heading Style: ''

    Heading align: ''

    Background Image: ''

    Padding: ''

    -> Click Save


  3. Drag&Drop 1 HTML element into column above


    • The first, we need setup properties for columns



    • -> Click Save

      Do the same to setup properties for extant column

    • Then, Click to edit the HTML element


    Click Toggle, then input html code below


    -> Click Save

    HTML code:
    		<div class="row">
    			<!-- COLUMNS 1 -->
    			<div class="col-md-4 col-sm-6 p-tb15">
    				<div class="wt-icon-box-wraper  p-a20 left bg-white">
    					<div class="icon-sm text-primary m-b20"><a class="icon-cell" href="#"><i class="fa fa-life-ring" aria-hidden="true"></i></a></div>
    					<div class="icon-content">
    						<h5 class="wt-tilte text-uppercase">BEST QUALITY</h5>
    						<div class="wt-separator bg-primary"> </div>
    						<p>Lorem Ipsum is simply dummy text of the printing and typesg indtrysum has been the Ipsum dummy of the printing indus [...]</p>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 2 -->
    			<div class="col-md-4 col-sm-6 p-tb15">
    				<div class="wt-icon-box-wraper  p-a20 left bg-white">
    					<div class="icon-sm text-primary m-b20"><a class="icon-cell" href="#"><i class="fa fa-trophy" aria-hidden="true"></i></a></div>
    					<div class="icon-content ">
    						<h5 class="wt-tilte text-uppercase">INTEGRITY</h5>
    						<div class="wt-separator bg-primary"> </div>
    						<p>Lorem Ipsum is simply dummy text of the printing and typesg indtrysum has been the Ipsum dummy of the printing indus [...]</p>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 3 -->
    			<div class="col-md-4 col-sm-6 p-tb15">
    				<div class="wt-icon-box-wraper  p-a20 left bg-white">
    					<div class="icon-sm text-primary m-b20"><a class="icon-cell" href="#"><i class="fa fa-thumbs-up" aria-hidden="true"></i></a></div>
    					<div class="icon-content">
    						<h5 class="wt-tilte text-uppercase">STRATEGY</h5>
    						<div class="wt-separator bg-primary"> </div>
    						<p>Lorem Ipsum is simply dummy text of the printing and typesg indtrysum has been the Ipsum dummy of the printing indus [...]</p>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 4 -->
    			<div class="col-md-4 col-sm-6 p-tb15">
    				<div class="wt-icon-box-wraper  p-a20 left bg-white">
    					<div class="icon-sm text-primary m-b20"><a class="icon-cell" href="#"><i class="fa fa-users" aria-hidden="true"></i></a></div>
    					<div class="icon-content">
    						<h5 class="wt-tilte text-uppercase">SAFETY</h5>
    						<div class="wt-separator bg-primary"> </div>
    						<p>Lorem Ipsum is simply dummy text of the printing and typesg indtrysum has been the Ipsum dummy of the printing indus [...]</p>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 5 -->
    			<div class="col-md-4 col-sm-6 p-tb15">
    				<div class="wt-icon-box-wraper  p-a20 left bg-white">
    					<div class="icon-sm text-primary m-b20"><a class="icon-cell" href="#"><i class="fa fa-area-chart" aria-hidden="true"></i></a></div>
    					<div class="icon-content">
    						<h5 class="wt-tilte text-uppercase">COMMUNITY</h5>
    						<div class="wt-separator bg-primary"> </div>
    						<p>Lorem Ipsum is simply dummy text of the printing and typesg indtrysum has been the Ipsum dummy of the printing indus [...]</p>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 6 -->
    			<div class="col-md-4 col-sm-6 p-tb15">
    				<div class="wt-icon-box-wraper  p-a20 left bg-white">
    					<div class="icon-sm text-primary m-b20"><a class="icon-cell" href="#"><i class="fa fa-cogs" aria-hidden="true"></i></a></div>
    					<div class="icon-content">
    						<h5 class="wt-tilte text-uppercase">SUSTAINABILITY</h5>
    						<div class="wt-separator bg-primary"> </div>
    						<p>Lorem Ipsum is simply dummy text of the printing and typesg indtrysum has been the Ipsum dummy of the printing indus [...]</p>
    					</div>
    				</div>
    			</div>
    		</div>
        

    Do the same with extant HTML element
Image Preview For Frontend below


9.Create layout: PROJECT COMPLETED

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element, divide into 2 columns -> Click to edit


  2. Click to change parameters:

    Title: ''

    Under Title: ''

    Icon Name: ''

    Section ID: ''

    Section Class: 'section-full overlay-wraper'

    Container Class: 'container'

    Row Class: ' '

    Heading Style: ''

    Heading align: ''

    Background Image: 'images/background/bg-5.jpg'

    Overlay Class: 'overlay-main bg-color-dark'

    Padding: ''

    -> Click Save


  3. Drag&Drop 2 HTML elements into 2 columns above


    • The first, we need setup properties for columns



    • -> Click Save

      Do the same to setup properties for extant column

    • Then, Click to edit the HTML element in the first column


    Click Toggle, then input html code below


    -> Click Save

    HTML code:
    		<div style="position: relative;">
    			<div class="labour-pic"><img class="img-responsive" src="images/labour.png" alt="" width="600" height="790" /></div>
    		</div>
        

    Do the same with extant HTML element
Image Preview For Frontend below


10.Create layout: OUR TEAM

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element, divide into 4 columns -> Click to edit


  2. Click to change parameters:

    Title: 'Our team'

    Description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.'

    Icon Name: ''

    Section ID: ''

    Section Class: 'section-full wt-our-team bg-white p-t80 p-b50'

    Container Class: 'container'

    Row Class: ' '

    Heading Style: ''

    Heading align: ''

    Background Image: ''

    Padding: ''

    -> Click Save


  3. Drag&Drop 4 HTML elements into 4 columns above


    • The first, we need setup properties for columns



    • -> Click Save

      Do the same to setup properties for extant column

    • Then, Click to edit the HTML element in the first column


    Click Toggle, then input html code below


    -> Click Save

    HTML code:
    		<div class="wt-team-four">
    			<div class="wt-team-media"><a href="#"><img src="images/our-team/pic1.jpg" alt="" /></a></div>
    			<div class="wt-team-info">
    				<div class="wt-team-skew-block p-t10">
    					<div class="social-icons-outer bg-primary  p-a25">
    						<ul class="social-icons social-square social-dark white-border m-b0">
    							<li><a class="fa fa-facebook" href="#"></a></li>
    							<li><a class="fa fa-twitter" href="#"></a></li>
    							<li><a class="fa fa-linkedin" href="#"></a></li>
    							<li><a class="fa fa-rss" href="#"></a></li>
    						</ul>
    					</div>
    				</div>
    				<div class="p-a20">
    					<h4 class="wt-team-title text-uppercase"><a href="#">Richard Wagner</a></h4>
    					<p>Building Worker</p>
    				</div>
    			</div>
    		</div>
        

    Do the same with extant HTML element
Image Preview For Frontend below


11.Create layout: Latest From News

Step1: Click Components -> K2 -> Extra Field Groups -> Click new or edit Extra Field Group

Step2: Click Components -> K2 -> Extra Fields -> Click new or edit Extra Field , are belong extra field group

Step3: Click Components -> K2 -> Categories -> Click new or edit categorie Blog, associated extra field group

Step 3: Click Components -> K2 -> Categories -> Click new or edit categories Blog

Step 4: Click Extension -> Modules -> Click New - Choose module type K2 Content (or edit)

Select categories Blog from com_k2

Click Menu Assignment tab to assign it to your menu


Step 5: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element -> Click to edit


  2. Click to change parameters:

    Title: 'Latest blog post'

    Description: ' Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been tahe industry.'

    Icon Name: ''

    Section ID: ''

    Section Class: 'section-full latest-blog bg-gray p-t80 p-b50'

    Container Class: 'container'

    Heading Style: ''

    Heading align: ''

    Background Image: ''

    Padding: ''

    -> Click Save


  3. Drag&Drop 1 Module element into the column above


    • The first, we need setup properties for column



    • -> Click Save

    • Then, Click to edit Module element

    Choose module The Blog, ID = 109 from module manager and choose Default template


    -> Click Save
Image Preview For Frontend below


12.Create layout: Testimonials

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element -> Click to edit


  2. Click to change parameters:

    Title: 'What Our Client Say'

    Class Title: 'text-white'

    Icon Name: ''

    Section ID: ''

    Section Class: 'section-full p-t80 p-b50 overlay-wraper'

    Container Class: 'container'

    Heading Style: ''

    Heading align: ''

    Background Image: 'images/background/bg2.jpg'

    Overlay Class: 'overlay-main bg-black'

    Padding: ''


    -> Click Save

  3. Drag&Drop 1 Testimonials element into the columns above


    • The first, we need setup properties for columns



    • -> Click Save

    • Then, Click to edit the Testimonials element

    Enter image url -> Go -> Drag&Drop -> Click into each image, change title, position & description

    Click Config tab, change parameters:

    Title:

    Class:

    Template: Testimonial

    -> Click Save


Image Preview For Frontend below


13.Create layout: BEST QUALITY

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop HTML Element -> Click to edit


  2. Click Toggle, then input html code below


    -> Click Save

    HTML code:
    		<div class="section-full p-t80 p-b50">
    			<div class="container">
    				<!-- TITLE START -->
    				<div class="section-head text-center">
    					<h2 class="text-uppercase">Our Client</h2>
    					<div class="wt-separator-outer">
    						<div class="wt-separator style-square"><span class="separator-left bg-primary"></span> <span class="separator-right bg-primary"></span></div>
    					</div>
    					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
    				</div>
    				<!-- TITLE END -->
    				<!-- IMAGE CAROUSEL START -->
    				<div class="section-content">
    					<div class="owl-carousel client-logo-carousel">
    						<!-- COLUMNS 1 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo1.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 2 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo2.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 3 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo3.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 4 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo4.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 5 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo5.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 6 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo6.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 7 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo1.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 8 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo2.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 9 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo3.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 10 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo4.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 11 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo5.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 12 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo6.png" alt="" /></a></div>
    							</div>
    						</div>
    					</div>
    				</div>
    				<!-- IMAGE CAROUSEL START -->
    			</div>
    		</div>
        

Image Preview For Frontend below


Create Home 2

  • Instroduction
  • Setting Up The Module for Home 2

1. Create New Page

Click Components -> Blue PageBuilder -> Click new or edit your page

Image Preview For Admin below

2. Create New Menu:

Click Menus -> Main Menu -> Click new or edit your menu

Image Preview For Admin below

3.Create Menu Module

Step1: Click Extension -> Modules -> Click New - Choose module type Menu (or edit)

Step2: You enter a title, select Main Menu from menu manager, select the display position is menu

Step3: Click Menu Assignment tab and assign it to your menu

Image Preview below for create menu module in admin



4.Create layout: Flexslider Content

Step1: Click Components -> United Slider


    Step2: Click Create new Slider






    HTML code:
    		<span class="text-uppercase" style="font-family:'Roboto' ;"><span class="text-primary">We Build </span> Your Dream</span>
        

    Step3: Create new modules slider:


Image Preview For Frontend below


5.Create layout: BEST QUALITY

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop HTML Element -> Click to edit


  2. Click Toggle, then input html code below


    -> Click Save

    HTML code:
    		<div class="section-full overlay-wraper z-99" style="background-image: url('images/background/bg1.jpg');">
    			<div class="overlay-main" style="opacity: 0.90; background-color: #273447;"> </div>
    			<div class="container">
    				<div class="row">
    					<div class="col-md-8 p-t15 p-b30 support-skew">
    						<div style="z-index: 2; position: relative;">
    							<div class="col-md-6 p-tb10">
    								<div class="wt-icon-box-wraper left ">
    									<div class="icon-md text-primary"><a class="icon-cell" href="#"> <img src="images/icons/besty-quality.png" alt="" /> </a></div>
    									<div class="icon-content text-white">
    										<h5 class="wt-tilte text-uppercase m-b5 text-white">best quality</h5>
    										<p>Lorem ipsum dolor sit amet, cdipiscing elit, sed diam non dolore [...]</p>
    									</div>
    								</div>
    							</div>
    							<div class="col-md-6 p-tb10">
    								<div class="wt-icon-box-wraper left">
    									<div class="icon-md text-primary"><a class="icon-cell" href="#"> <img src="images/icons/24-call-icon.png" alt="" /> </a></div>
    									<div class="icon-content text-white">
    										<h5 class="wt-tilte text-uppercase m-b0 text-white">24 hour support</h5>
    										<p>Lorem ipsum dolor sit amet, cdipiscing elit, sed diam non dolore [...]</p>
    									</div>
    								</div>
    							</div>
    							<div class="clearfix"> </div>
    						</div>
    					</div>
    					<div class="col-md-3 p-t50 p-b50 col-md-offset-1">
    						<div class=""><a class="site-button skew-icon-btn m-r15 text-uppercase" style="font-weight: 600;">Contact us <i class="fa fa-angle-double-right"></i></a></div>
    					</div>
    				</div>
    			</div>
    		</div>
        

Image Preview For Frontend below


6.Create layout: WHY CHOOSE US

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element -> Click to edit


  2. Click to change parameters:

    Title: ' Why Choose us'

    Description: ' Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.'

    Icon Name: ''

    Section ID: ' '

    Section Class: 'section-full p-t80 p-b50'

    Container Class: 'container'

    Row Class: ' '

    Heading Style: ''

    Heading align: ''

    Background Image: 'images/background/bg-8.jpg'

    Padding: ''

    -> Click Save


  3. Drag&Drop 1 HTML element into column above


    • The first, we need setup properties for columns



    • -> Click Save

      Do the same to setup properties for extant column

    • Then, Click to edit the HTML element


    Click Toggle, then input html code below


    -> Click Save

    HTML code:
    		<div class="row">
    			<!-- COLUMNS 1 -->
    			<div class="col-md-4 col-sm-6 p-tb15">
    				<div class="wt-icon-box-wraper  p-a20 left bg-white">
    					<div class="icon-sm text-primary m-b20"><a class="icon-cell" href="#"><i class="fa fa-life-ring" aria-hidden="true"></i></a></div>
    					<div class="icon-content">
    						<h5 class="wt-tilte text-uppercase">BEST QUALITY</h5>
    						<div class="wt-separator bg-primary"> </div>
    						<p>Lorem Ipsum is simply dummy text of the printing and typesg indtrysum has been the Ipsum dummy of the printing indus [...]</p>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 2 -->
    			<div class="col-md-4 col-sm-6 p-tb15">
    				<div class="wt-icon-box-wraper  p-a20 left bg-white">
    					<div class="icon-sm text-primary m-b20"><a class="icon-cell" href="#"><i class="fa fa-trophy" aria-hidden="true"></i></a></div>
    					<div class="icon-content ">
    						<h5 class="wt-tilte text-uppercase">INTEGRITY</h5>
    						<div class="wt-separator bg-primary"> </div>
    						<p>Lorem Ipsum is simply dummy text of the printing and typesg indtrysum has been the Ipsum dummy of the printing indus [...]</p>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 3 -->
    			<div class="col-md-4 col-sm-6 p-tb15">
    				<div class="wt-icon-box-wraper  p-a20 left bg-white">
    					<div class="icon-sm text-primary m-b20"><a class="icon-cell" href="#"><i class="fa fa-thumbs-up" aria-hidden="true"></i></a></div>
    					<div class="icon-content">
    						<h5 class="wt-tilte text-uppercase">STRATEGY</h5>
    						<div class="wt-separator bg-primary"> </div>
    						<p>Lorem Ipsum is simply dummy text of the printing and typesg indtrysum has been the Ipsum dummy of the printing indus [...]</p>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 4 -->
    			<div class="col-md-4 col-sm-6 p-tb15">
    				<div class="wt-icon-box-wraper  p-a20 left bg-white">
    					<div class="icon-sm text-primary m-b20"><a class="icon-cell" href="#"><i class="fa fa-users" aria-hidden="true"></i></a></div>
    					<div class="icon-content">
    						<h5 class="wt-tilte text-uppercase">SAFETY</h5>
    						<div class="wt-separator bg-primary"> </div>
    						<p>Lorem Ipsum is simply dummy text of the printing and typesg indtrysum has been the Ipsum dummy of the printing indus [...]</p>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 5 -->
    			<div class="col-md-4 col-sm-6 p-tb15">
    				<div class="wt-icon-box-wraper  p-a20 left bg-white">
    					<div class="icon-sm text-primary m-b20"><a class="icon-cell" href="#"><i class="fa fa-area-chart" aria-hidden="true"></i></a></div>
    					<div class="icon-content">
    						<h5 class="wt-tilte text-uppercase">COMMUNITY</h5>
    						<div class="wt-separator bg-primary"> </div>
    						<p>Lorem Ipsum is simply dummy text of the printing and typesg indtrysum has been the Ipsum dummy of the printing indus [...]</p>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 6 -->
    			<div class="col-md-4 col-sm-6 p-tb15">
    				<div class="wt-icon-box-wraper  p-a20 left bg-white">
    					<div class="icon-sm text-primary m-b20"><a class="icon-cell" href="#"><i class="fa fa-cogs" aria-hidden="true"></i></a></div>
    					<div class="icon-content">
    						<h5 class="wt-tilte text-uppercase">SUSTAINABILITY</h5>
    						<div class="wt-separator bg-primary"> </div>
    						<p>Lorem Ipsum is simply dummy text of the printing and typesg indtrysum has been the Ipsum dummy of the printing indus [...]</p>
    					</div>
    				</div>
    			</div>
    		</div>
        

    Do the same with extant HTML element
Image Preview For Frontend below


7.Create layout: LATEST PROJECTS

Step1: Click Components -> K2 -> Extra Field Groups -> Click new or edit Extra Field Group

Step2: Click Components -> K2 -> Extra Fields -> Click new or edit Extra Field , are belong extra field group

Step3: Click Components -> K2 -> Categories -> Click new or edit categorie Portfolio, associated extra field group

Step4: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element -> Click to edit


  2. Click to change parameters:

    Title: ' LATEST PROJECT'

    Class Title: 'text-white'

    Icon Name: ''

    Section ID: ''

    Section Class: 'section-full bg-white p-t80 p-b80 bg-4 bg-color-dark'

    Container Class: ' '

    Heading Style: ''

    Heading align: ''

    Background Image: ''

    Padding: ''

    -> Click Save


  3. Drag&Drop 1 Portfolio element into the column above


    • The first, we need setup properties for columns



    • -> Click Save

    • Then, Click to edit Portfolio element


    • Click to change parameters:

      Category: Select category'Portfolio from com_k2'

      Title: 'LATEST PROJECTS'

      Description: ''

      ID: ''

      Menu ID: '138'

      Class: ''

      Count: '8'

      Image Size: 'M'

      Columns: '4 columns'

      Template: 'Choose template Default4'

      -> Click Save



Image Preview For Frontend below

8.Create layout: ABOUT COMPANY

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element, divide into 2 columns -> Click to edit


  2. Click to change parameters:

    Title: ''

    Under Title: ''

    Icon Name: ''

    Section ID: ''

    Section Class: 'section-full p-tb100'

    Container Class: 'container'

    Row Class: ' '

    Heading Style: ''

    Heading align: ''

    Background Image: 'images/background/pic-c-1bg.png'

    Padding: ''

    -> Click Save


  3. Drag&Drop 2 HTML elements into 2 columns above


    • The first, we need setup properties for columns



    • -> Click Save

      Do the same to setup properties for extant column

    • Then, Click to edit the HTML element in the first column


    Click Toggle, then input html code below


    -> Click Save

    HTML code:
    		<div class="about-com-pic"><img class="img-responsive" src="images/pic-c-1.png" alt="" /></div>
        

    Do the same with extant HTML element
Image Preview For Frontend below


9.Create layout: PROJECT COMPLETED

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element, divide into 2 columns -> Click to edit


  2. Click to change parameters:

    Title: ''

    Under Title: ''

    Icon Name: ''

    Section ID: ''

    Section Class: 'section-full overlay-wraper'

    Container Class: 'container'

    Row Class: ' '

    Heading Style: ''

    Heading align: ''

    Background Image: 'images/background/bg-5.jpg'

    Overlay Class: 'overlay-main bg-color-dark'

    Padding: ''

    -> Click Save


  3. Drag&Drop 2 HTML elements into 2 columns above


    • The first, we need setup properties for columns



    • -> Click Save

      Do the same to setup properties for extant column

    • Then, Click to edit the HTML element in the first column


    Click Toggle, then input html code below


    -> Click Save

    HTML code:
    		<div style="position: relative;">
    			<div class="labour-pic"><img class="img-responsive" src="images/labour.png" alt="" width="600" height="790" /></div>
    		</div>
        

    Do the same with extant HTML element
Image Preview For Frontend below


10.Create layout: OUR TEAM

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element, divide into 4 columns -> Click to edit


  2. Click to change parameters:

    Title: 'Our team'

    Description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.'

    Icon Name: ''

    Section ID: ''

    Section Class: 'section-full wt-our-team bg-white p-t80 p-b50'

    Container Class: 'container'

    Row Class: ' '

    Heading Style: ''

    Heading align: ''

    Background Image: ''

    Padding: ''

    -> Click Save


  3. Drag&Drop 4 HTML elements into 4 columns above


    • The first, we need setup properties for columns



    • -> Click Save

      Do the same to setup properties for extant column

    • Then, Click to edit the HTML element in the first column


    Click Toggle, then input html code below


    -> Click Save

    HTML code:
    		<div class="wt-team-four">
    			<div class="wt-team-media"><a href="#"><img src="images/our-team/pic1.jpg" alt="" /></a></div>
    			<div class="wt-team-info">
    				<div class="wt-team-skew-block p-t10">
    					<div class="social-icons-outer bg-primary  p-a25">
    						<ul class="social-icons social-square social-dark white-border m-b0">
    							<li><a class="fa fa-facebook" href="#"></a></li>
    							<li><a class="fa fa-twitter" href="#"></a></li>
    							<li><a class="fa fa-linkedin" href="#"></a></li>
    							<li><a class="fa fa-rss" href="#"></a></li>
    						</ul>
    					</div>
    				</div>
    				<div class="p-a20">
    					<h4 class="wt-team-title text-uppercase"><a href="#">Richard Wagner</a></h4>
    					<p>Building Worker</p>
    				</div>
    			</div>
    		</div>
        

    Do the same with extant HTML element
Image Preview For Frontend below


11.Create layout: Latest From News

Step1: Click Components -> K2 -> Extra Field Groups -> Click new or edit Extra Field Group

Step2: Click Components -> K2 -> Extra Fields -> Click new or edit Extra Field , are belong extra field group

Step3: Click Components -> K2 -> Categories -> Click new or edit categorie Blog, associated extra field group

Step 3: Click Components -> K2 -> Categories -> Click new or edit categories Blog

Step 4: Click Extension -> Modules -> Click New - Choose module type K2 Content (or edit)

Select categories Blog from com_k2

Click Menu Assignment tab to assign it to your menu


Step 5: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element -> Click to edit


  2. Click to change parameters:

    Title: 'Latest blog post'

    Description: ' Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been tahe industry.'

    Icon Name: ''

    Section ID: ''

    Section Class: 'section-full latest-blog bg-gray p-t80 p-b50'

    Container Class: 'container'

    Heading Style: ''

    Heading align: ''

    Background Image: ''

    Padding: ''

    -> Click Save


  3. Drag&Drop 1 Module element into the column above


    • The first, we need setup properties for column



    • -> Click Save

    • Then, Click to edit Module element

    Choose module The Blog, ID = 109 from module manager and choose Default template


    -> Click Save
Image Preview For Frontend below


12.Create layout: Testimonials

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element -> Click to edit


  2. Click to change parameters:

    Title: 'What Our Client Say'

    Class Title: 'text-white'

    Icon Name: ''

    Section ID: ''

    Section Class: 'section-full p-t80 p-b50 overlay-wraper'

    Container Class: 'container'

    Heading Style: ''

    Heading align: ''

    Background Image: 'images/background/bg2.jpg'

    Overlay Class: 'overlay-main bg-black'

    Padding: ''


    -> Click Save

  3. Drag&Drop 1 Testimonials element into the columns above


    • The first, we need setup properties for columns



    • -> Click Save

    • Then, Click to edit the Testimonials element

    Enter image url -> Go -> Drag&Drop -> Click into each image, change title, position & description

    Click Config tab, change parameters:

    Title:

    Class:

    Template: Testimonial

    -> Click Save


Image Preview For Frontend below


13.Create layout: OUR PLANS

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element, divide into 3 columns -> Click to edit


  2. Click to change parameters:

    First Title: 'Our Plans'

    Description: ''

    Title: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.'

    Icon Name: ''

    Section ID: ''

    Section Class: 'section-full p-t80 p-b50 bg-gray'

    Container Class: 'container'

    Row Class: 'pricingtable-row m-b30'

    Heading Style: ' '

    Heading align: ''

    Background Image: ''

    Padding: ''

    Full Width: 'No'

    -> Click Save


  3. Drag&Drop 3 Pricing element into the 3 column above


    • The first, we need setup properties for columns



    • -> Click Save

      Do the same to setup properties for extant column

    • Then, Click to edit the Pricing element

    • Click to change parameters:

      Class: ' '

      Description: ' '

      Icon Name: ''

      Price: '10'

      Unit: '$'

      Time: 'M'

      Text Button: 'Sign up'

      Link Button: '#'

      Title: 'Basic Plan'

      Feature: ''

      Features: 'Full Responsive| Multi color theme| With Bootstrap| Easy to customize| Many shortcodes'

      Template: 'Default'

      -> Click Save

    -> Click Save


    Do the same with extant Pricing element
Image Preview For Frontend below


14.Create layout: BEST QUALITY

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop HTML Element -> Click to edit


  2. Click Toggle, then input html code below


    -> Click Save

    HTML code:
    		<div class="section-full p-t80 p-b50">
    			<div class="container">
    				<!-- TITLE START -->
    				<div class="section-head text-center">
    					<h2 class="text-uppercase">Our Client</h2>
    					<div class="wt-separator-outer">
    						<div class="wt-separator style-square"><span class="separator-left bg-primary"></span> <span class="separator-right bg-primary"></span></div>
    					</div>
    					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
    				</div>
    				<!-- TITLE END -->
    				<!-- IMAGE CAROUSEL START -->
    				<div class="section-content">
    					<div class="owl-carousel client-logo-carousel">
    						<!-- COLUMNS 1 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo1.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 2 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo2.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 3 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo3.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 4 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo4.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 5 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo5.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 6 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo6.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 7 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo1.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 8 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo2.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 9 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo3.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 10 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo4.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 11 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo5.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 12 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo6.png" alt="" /></a></div>
    							</div>
    						</div>
    					</div>
    				</div>
    				<!-- IMAGE CAROUSEL START -->
    			</div>
    		</div>
        

Image Preview For Frontend below


Create Home 3

  • Instroduction
  • Setting Up The Module for Home 3

1. Create New Page

Click Components -> Blue PageBuilder -> Click new or edit your page

Image Preview For Admin below

2. Create New Menu:

Click Menus -> Main Menu -> Click new or edit your menu

Image Preview For Admin below

3.Create Menu Module

Step1: Click Extension -> Modules -> Click New - Choose module type Menu (or edit)

Step2: You enter a title, select Main Menu from menu manager, select the display position is menu

Step3: Click Menu Assignment tab and assign it to your menu

Image Preview below for create menu module in admin



4.Create layout: Flexslider Content

Step1: Click Components -> United Slider


    Step2: Click Create new Slider






    HTML code:
    		<span class="text-uppercase" style="font-family:'Roboto' ;"><span class="text-primary">We Build </span> Your Dream</span>
        

    Step3: Create new modules slider:


Image Preview For Frontend below


5.Create layout: OUR SERVICES

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element -> Click to edit


  2. Click to change parameters:

    Title: 'Our Services'

    Description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.'

    Icon Name: ''

    Section ID: ' '

    Section Class: 'section-full bg-gray p-t80 p-b120'

    Container Class: 'container'

    Row Class: ' '

    Heading Style: ''

    Heading align: ''

    Background Image: ''

    Padding: ''

    -> Click Save


  3. Drag&Drop 1 HTML element into column above


    • The first, we need setup properties for columns



    • -> Click Save

      Do the same to setup properties for extant column

    • Then, Click to edit the HTML element


    Click Toggle, then input html code below


    -> Click Save

    HTML code:
    		<div class="owl-carousel blog-carousel  owl-btn-vertical-center">
    			<div class="item">
    				<div class="ow-event-post date-style-2">
    					<div class="wt-media wt-img-effect img-reflection"><img src="images/our-work2/pic1.jpg" alt="" /></div>
    					<div class="wt-info p-a20 bg-white">
    						<h4 class="m-t0 text-uppercase m-b5"><a title="Video post" href="#">BEST QUALITY</a></h4>
    						<div class="text-right"><a class="site-button button-sm" title="READ MORE" href="#" rel="bookmark"> Read more</a></div>
    					</div>
    				</div>
    			</div>
    			<div class="item">
    				<div class="ow-event-post date-style-2">
    					<div class="wt-media wt-img-effect img-reflection"><img src="images/our-work2/pic2.jpg" alt="" /></div>
    					<div class="wt-info p-a20 bg-white">
    						<h4 class="m-t0 text-uppercase m-b5"><a title="Video post" href="#">Integrity</a></h4>
    						<div class="text-right"><a class="site-button button-sm" title="READ MORE" href="#" rel="bookmark"> Read more</a></div>
    					</div>
    				</div>
    			</div>
    			<div class="item">
    				<div class="ow-event-post date-style-2">
    					<div class="wt-media wt-img-effect img-reflection"><img src="images/our-work2/pic3.jpg" alt="" /></div>
    					<div class="wt-info p-a20 bg-white">
    						<h4 class="m-t0 text-uppercase m-b5"><a title="Video post" href="#">Strategy</a></h4>
    						<div class="text-right"><a class="site-button button-sm" title="READ MORE" href="#" rel="bookmark"> Read more</a></div>
    					</div>
    				</div>
    			</div>
    			<div class="item">
    				<div class="ow-event-post date-style-2">
    					<div class="wt-media wt-img-effect img-reflection"><img src="images/our-work2/pic4.jpg" alt="" /></div>
    					<div class="wt-info p-a20 bg-white">
    						<h4 class="m-t0 text-uppercase m-b5"><a title="Video post" href="#">Safety</a></h4>
    						<div class="text-right"><a class="site-button button-sm" title="READ MORE" href="#" rel="bookmark"> Read more</a></div>
    					</div>
    				</div>
    			</div>
    			<div class="item">
    				<div class="ow-event-post date-style-2">
    					<div class="wt-media wt-img-effect img-reflection"><img src="images/our-work2/pic5.jpg" alt="" /></div>
    					<div class="wt-info p-a20 bg-white">
    						<h4 class="m-t0 text-uppercase m-b5"><a title="Video post" href="#">Community</a></h4>
    						<div class="text-right"><a class="site-button button-sm" title="READ MORE" href="#" rel="bookmark"> Read more</a></div>
    					</div>
    				</div>
    			</div>
    		</div>
        

    Do the same with extant HTML element
Image Preview For Frontend below


6.Create layout: What are you looking for

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element, divide into 2 columns -> Click to edit


  2. Click to change parameters:

    Title: ''

    Under Title: ''

    Icon Name: ''

    Section ID: ''

    Section Class: 'section-full p-tb100 bg-white'

    Container Class: 'container'

    Row Class: ' '

    Heading Style: ''

    Heading align: ''

    Background Image: 'images/background/pic-c-1bg.png'

    Padding: ''

    -> Click Save


  3. Drag&Drop 2 HTML elements into 2 columns above


    • The first, we need setup properties for columns



    • -> Click Save

      Do the same to setup properties for extant column

    • Then, Click to edit the HTML element in the first column


    Click Toggle, then input html code below


    -> Click Save

    HTML code:
    		<div class="wt-box m-b30"><span class="text-primary display-block title-second font-20 center-block m-b15">What are you looking for?</span>
    			<h2 class="text-uppercase display-block m-b15 m-t0">We'll get it done, like us there are none.</h2>
    			<p class="m-b15">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, no when an unknown printer took a galley of type and scrambled it to make a type onis specimen book.Lorem Ipsum has been the industry's standard dummy text ever is a since the 1500s, no when an unknown printer took.</p>
    			<ul class="list-check-circle primary m-b15">
    				<li>Simply dummy text of the Lorem Ipsum is printing and type setting.</li>
    				<li>Dummy text of the printing and typesetting industry. Text of the printing</li>
    				<li>And typesetting industry Lorem Ipsum has been. Ipsum has been the</li>
    			</ul>
    			<a class="site-button" href="#">Read more</a>
    		</div>
        

    Do the same with extant HTML element
Image Preview For Frontend below


7.Create layout: LATEST PROJECTS

Step1: Click Components -> K2 -> Extra Field Groups -> Click new or edit Extra Field Group

Step2: Click Components -> K2 -> Extra Fields -> Click new or edit Extra Field , are belong extra field group

Step3: Click Components -> K2 -> Categories -> Click new or edit categorie Portfolio, associated extra field group

Step4: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element -> Click to edit


  2. Click to change parameters:

    Title: ' '

    Class Title: ' '

    Icon Name: ''

    Section ID: ''

    Section Class: 'section-full bg-white p-t80 p-b50 bg-no-repeat bg-bottom-center'

    Container Class: ' '

    Heading Style: ''

    Heading align: ''

    Background Image: 'images/background/bg5.jpg'

    Padding: ''

    -> Click Save


  3. Drag&Drop 1 Portfolio element into the column above


    • The first, we need setup properties for columns



    • -> Click Save

    • Then, Click to edit Portfolio element


    • Click to change parameters:

      Category: Select category'Portfolio from com_k2'

      Title: 'LATEST PROJECTS'

      Description: ''

      ID: ''

      Menu ID: '138'

      Class: ''

      Count: '8'

      Image Size: 'M'

      Columns: '4 columns'

      Template: 'Choose template Default5'

      -> Click Save



Image Preview For Frontend below

8.Create layout: Skill Counter

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element, divide into 4 columns -> Click to edit


  2. Click to change parameters:

    Title: ' '

    Under Title: ''

    Icon Name: ''

    Section ID: ''

    Section Class: 'section-full p-t50 p-b20 bg-white'

    Container Class: 'container'

    Heading Style: ''

    Heading align: ''

    Background Image: ' '

    Padding: ''

    Full Width: 'No'

    -> Click Save


  3. Drag&Drop 4 Skill elements into 4 columns


    • The first, we need setup properties for columns



    • -> Click Save

      Do the same to setup properties for extant column

  4. Then, Click to edit the Skill element in the first column



  5. Click setting skill:

    Title: 'Happy Clients'

    Short Description: ''

    Precent| Number: '1000'

    Background image: ''

    class | Icon class: 'fa fa-building'

    Template: 'Counter'


    -> Click Save

Image Preview For Frontend below


9.Create layout: OUR TEAM

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element, divide into 4 columns -> Click to edit


  2. Click to change parameters:

    Title: 'Our team'

    Description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.'

    Icon Name: ''

    Section ID: ''

    Section Class: 'section-full text-center wt-our-team bg-gray p-t80 p-b50'

    Container Class: 'container'

    Row Class: ' '

    Heading Style: ''

    Heading align: ''

    Background Image: ''

    Padding: ''

    -> Click Save


  3. Drag&Drop 4 HTML elements into 4 columns above


    • The first, we need setup properties for columns



    • -> Click Save

      Do the same to setup properties for extant column

    • Then, Click to edit the HTML element in the first column


    Click Toggle, then input html code below


    -> Click Save

    HTML code:
    		<div class="wt-team-four">
    			<div class="wt-team-media"><a href="#"><img src="images/our-team/pic1.jpg" alt="" /></a></div>
    			<div class="wt-team-info">
    				<div class="wt-team-skew-block p-t10">
    					<div class="social-icons-outer bg-primary  p-a25">
    						<ul class="social-icons social-square social-dark white-border m-b0">
    							<li><a class="fa fa-facebook" href="#"></a></li>
    							<li><a class="fa fa-twitter" href="#"></a></li>
    							<li><a class="fa fa-linkedin" href="#"></a></li>
    							<li><a class="fa fa-rss" href="#"></a></li>
    						</ul>
    					</div>
    				</div>
    				<div class="p-a20">
    					<h4 class="wt-team-title text-uppercase"><a href="#">Richard Wagner</a></h4>
    					<p>Building Worker</p>
    				</div>
    			</div>
    		</div>
        

    Do the same with extant HTML element
Image Preview For Frontend below


10.Create layout: WHY CHOOSE US

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element -> Click to edit


  2. Click to change parameters:

    Title: ' Why Choose us'

    Description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.'

    Icon Name: ''

    Section ID: ' '

    Section Class: 'section-full bg-white p-t80 p-b50'

    Container Class: 'container'

    Row Class: ' '

    Heading Style: ''

    Heading align: ''

    Background Image: ''

    Padding: ''

    -> Click Save


  3. Drag&Drop 1 HTML element into column above


    • The first, we need setup properties for columns



    • -> Click Save

      Do the same to setup properties for extant column

    • Then, Click to edit the HTML element


    Click Toggle, then input html code below


    -> Click Save

    HTML code:
    		<div class="row">
    			<!-- COLUMNS 1 -->
    			<div class="col-md-4 col-sm-6 p-tb15">
    				<div class="wt-icon-box-wraper  p-a20 center bg-white">
    					<div class="wt-icon-box-sm text-primary bg-white radius bdr-2 m-b20"><a class="icon-cell" href="#"><i class="fa fa-life-ring" aria-hidden="true"></i></a></div>
    					<div class="icon-content">
    						<h5 class="wt-tilte text-uppercase">BEST QUALITY</h5>
    						<div class="wt-separator bg-primary"> </div>
    						<p>Lorem Ipsum is simply dummy text of the printing and typesg indtrysum has been the Ipsum dummy of the printing indus [...]</p>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 2 -->
    			<div class="col-md-4 col-sm-6 p-tb15">
    				<div class="wt-icon-box-wraper  p-a20 center bg-white">
    					<div class="wt-icon-box-sm text-primary bg-white radius bdr-2 m-b20"><a class="icon-cell" href="#"><i class="fa fa-trophy" aria-hidden="true"></i></a></div>
    					<div class="icon-content ">
    						<h5 class="wt-tilte text-uppercase">INTEGRITY</h5>
    						<div class="wt-separator bg-primary"> </div>
    						<p>Lorem Ipsum is simply dummy text of the printing and typesg indtrysum has been the Ipsum dummy of the printing indus [...]</p>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 3 -->
    			<div class="col-md-4 col-sm-6 p-tb15">
    				<div class="wt-icon-box-wraper  p-a20 center bg-white">
    					<div class="wt-icon-box-sm text-primary bg-white radius bdr-2 m-b20"><a class="icon-cell" href="#"><i class="fa fa-thumbs-up" aria-hidden="true"></i></a></div>
    					<div class="icon-content">
    						<h5 class="wt-tilte text-uppercase">STRATEGY</h5>
    						<div class="wt-separator bg-primary"> </div>
    						<p>Lorem Ipsum is simply dummy text of the printing and typesg indtrysum has been the Ipsum dummy of the printing indus [...]</p>
    					</div>
    				</div>
    			</div>
    		</div>
        

    Do the same with extant HTML element
Image Preview For Frontend below


11.Create layout: Latest From News

Step1: Click Components -> K2 -> Extra Field Groups -> Click new or edit Extra Field Group

Step2: Click Components -> K2 -> Extra Fields -> Click new or edit Extra Field , are belong extra field group

Step3: Click Components -> K2 -> Categories -> Click new or edit categorie Blog, associated extra field group

Step 3: Click Components -> K2 -> Categories -> Click new or edit categories Blog

Step 4: Click Extension -> Modules -> Click New - Choose module type K2 Content (or edit)

Select categories Blog from com_k2

Click Menu Assignment tab to assign it to your menu


Step 5: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element -> Click to edit


  2. Click to change parameters:

    Title: 'Latest blog post'

    Description: ' Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been tahe industry.'

    Icon Name: ''

    Section ID: ''

    Section Class: 'section-full latest-blog bg-gray p-t80 p-b50'

    Container Class: 'container'

    Heading Style: ''

    Heading align: ''

    Background Image: ''

    Padding: ''

    -> Click Save


  3. Drag&Drop 1 Module element into the column above


    • The first, we need setup properties for column



    • -> Click Save

    • Then, Click to edit Module element

    Choose module The Blog, ID = 109 from module manager and choose Default template


    -> Click Save
Image Preview For Frontend below


12.Create layout: Testimonials

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element -> Click to edit


  2. Click to change parameters:

    Title: 'What Our Client Say'

    Class Title: 'text-white'

    Description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been tahe industry.'

    Section ID: ''

    Section Class: 'section-full p-t80 p-b50 overlay-wraper'

    Container Class: 'container'

    Heading Style: ''

    Heading align: ''

    Background Image: 'images/background/bg4.jpg'

    Overlay Class: 'overlay-main bg-black'

    Padding: ''


    -> Click Save

  3. Drag&Drop 1 Testimonials element into the columns above


    • The first, we need setup properties for columns



    • -> Click Save

    • Then, Click to edit the Testimonials element

    Enter image url -> Go -> Drag&Drop -> Click into each image, change title, position & description

    Click Config tab, change parameters:

    Title:

    Class:

    Template: Testimonial1

    -> Click Save


Image Preview For Frontend below


Create Home 4

  • Instroduction
  • Setting Up The Module for Home 4

1. Create New Page

Click Components -> Blue PageBuilder -> Click new or edit your page

Image Preview For Admin below

2. Create New Menu:

Click Menus -> Main Menu -> Click new or edit your menu

Image Preview For Admin below

3.Create Menu Module

Step1: Click Extension -> Modules -> Click New - Choose module type Menu (or edit)

Step2: You enter a title, select Main Menu from menu manager, select the display position is menu

Step3: Click Menu Assignment tab and assign it to your menu

Image Preview below for create menu module in admin



4.Create layout: Flexslider Content

Step1: Click Components -> United Slider


    Step2: Click Create new Slider






    HTML code:
    		<span class="text-uppercase" style="font-family:'Roboto' ;"><span class="text-primary">We Build </span> Your Dream</span>
        

    Step3: Create new modules slider:


Image Preview For Frontend below


5.Create layout: ABOUT COMPANY

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element, divide into 2 columns -> Click to edit


  2. Click to change parameters:

    Title: ''

    Under Title: ''

    Icon Name: ''

    Section ID: ''

    Section Class: 'section-full p-tb100'

    Container Class: 'container'

    Row Class: ' '

    Heading Style: ''

    Heading align: ''

    Background Image: 'images/background/pic-c-1bg.png'

    Padding: ''

    -> Click Save


  3. Drag&Drop 2 HTML elements into 2 columns above


    • The first, we need setup properties for columns



    • -> Click Save

      Do the same to setup properties for extant column

    • Then, Click to edit the HTML element in the first column


    Click Toggle, then input html code below


    -> Click Save

    HTML code:
    		<div class="about-com-pic"><img class="img-responsive" src="images/pic-c-1.png" alt="" /></div>
        

    Do the same with extant HTML element
Image Preview For Frontend below


6. Create layout: Skill Counter

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element, divide into 4 columns -> Click to edit


  2. Click to change parameters:

    Title: ' '

    Under Title: ''

    Icon Name: ''

    Section ID: ''

    Section Class: 'section-full overlay-wraper p-t50 p-b20'

    Container Class: 'container'

    Heading Style: ''

    Heading align: ''

    Background Image: ' images/background/bg-5.jpg'

    Overlay Class: ' overlay-main bg-color-dark'

    Padding: ''

    Full Width: 'No'

    -> Click Save


  3. Drag&Drop 4 Skill elements into 4 columns


    • The first, we need setup properties for columns



    • -> Click Save

      Do the same to setup properties for extant column

  4. Then, Click to edit the Skill element in the first column



  5. Click setting skill:

    Title: 'PROJECT COMPLETED'

    Short Description: ''

    Precent| Number: '2500'

    Background image: ''

    class | Icon class: 'fa fa-building'

    Template: 'Counter1'


    -> Click Save

Image Preview For Frontend below


7.Create layout: WHY CHOOSE US

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element -> Click to edit


  2. Click to change parameters:

    Title: ' Why Choose us'

    Description: ' Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.'

    Icon Name: ''

    Section ID: ' '

    Section Class: 'section-full bg-gray p-t80 p-b120'

    Container Class: 'container'

    Row Class: ' '

    Heading Style: ''

    Heading align: ''

    Background Image: 'images/background/bg-6.jpg'

    Padding: ''

    -> Click Save


  3. Drag&Drop 1 HTML element into column above


    • The first, we need setup properties for columns



    • -> Click Save

      Do the same to setup properties for extant column

    • Then, Click to edit the HTML element


    Click Toggle, then input html code below


    -> Click Save

    HTML code:
    		<div class="row">
    			<!-- COLUMNS 1 -->
    			<div class="col-md-4 col-sm-6 p-tb15">
    				<div class="wt-icon-box-wraper  p-a20 left bg-white">
    					<div class="icon-sm text-primary m-b20"><a class="icon-cell" href="#"><i class="fa fa-life-ring" aria-hidden="true"></i></a></div>
    					<div class="icon-content">
    						<h5 class="wt-tilte text-uppercase">BEST QUALITY</h5>
    						<div class="wt-separator bg-primary"> </div>
    						<p>Lorem Ipsum is simply dummy text of the printing and typesg indtrysum has been the Ipsum dummy of the printing indus [...]</p>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 2 -->
    			<div class="col-md-4 col-sm-6 p-tb15">
    				<div class="wt-icon-box-wraper  p-a20 left bg-white">
    					<div class="icon-sm text-primary m-b20"><a class="icon-cell" href="#"><i class="fa fa-trophy" aria-hidden="true"></i></a></div>
    					<div class="icon-content ">
    						<h5 class="wt-tilte text-uppercase">INTEGRITY</h5>
    						<div class="wt-separator bg-primary"> </div>
    						<p>Lorem Ipsum is simply dummy text of the printing and typesg indtrysum has been the Ipsum dummy of the printing indus [...]</p>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 3 -->
    			<div class="col-md-4 col-sm-6 p-tb15">
    				<div class="wt-icon-box-wraper  p-a20 left bg-white">
    					<div class="icon-sm text-primary m-b20"><a class="icon-cell" href="#"><i class="fa fa-thumbs-up" aria-hidden="true"></i></a></div>
    					<div class="icon-content">
    						<h5 class="wt-tilte text-uppercase">STRATEGY</h5>
    						<div class="wt-separator bg-primary"> </div>
    						<p>Lorem Ipsum is simply dummy text of the printing and typesg indtrysum has been the Ipsum dummy of the printing indus [...]</p>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 4 -->
    			<div class="col-md-4 col-sm-6 p-tb15">
    				<div class="wt-icon-box-wraper  p-a20 left bg-white">
    					<div class="icon-sm text-primary m-b20"><a class="icon-cell" href="#"><i class="fa fa-users" aria-hidden="true"></i></a></div>
    					<div class="icon-content">
    						<h5 class="wt-tilte text-uppercase">SAFETY</h5>
    						<div class="wt-separator bg-primary"> </div>
    						<p>Lorem Ipsum is simply dummy text of the printing and typesg indtrysum has been the Ipsum dummy of the printing indus [...]</p>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 5 -->
    			<div class="col-md-4 col-sm-6 p-tb15">
    				<div class="wt-icon-box-wraper  p-a20 left bg-white">
    					<div class="icon-sm text-primary m-b20"><a class="icon-cell" href="#"><i class="fa fa-area-chart" aria-hidden="true"></i></a></div>
    					<div class="icon-content">
    						<h5 class="wt-tilte text-uppercase">COMMUNITY</h5>
    						<div class="wt-separator bg-primary"> </div>
    						<p>Lorem Ipsum is simply dummy text of the printing and typesg indtrysum has been the Ipsum dummy of the printing indus [...]</p>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 6 -->
    			<div class="col-md-4 col-sm-6 p-tb15">
    				<div class="wt-icon-box-wraper  p-a20 left bg-white">
    					<div class="icon-sm text-primary m-b20"><a class="icon-cell" href="#"><i class="fa fa-cogs" aria-hidden="true"></i></a></div>
    					<div class="icon-content">
    						<h5 class="wt-tilte text-uppercase">SUSTAINABILITY</h5>
    						<div class="wt-separator bg-primary"> </div>
    						<p>Lorem Ipsum is simply dummy text of the printing and typesg indtrysum has been the Ipsum dummy of the printing indus [...]</p>
    					</div>
    				</div>
    			</div>
    		</div>
        

    Do the same with extant HTML element
Image Preview For Frontend below


8.Create layout: LATEST PROJECTS

Step1: Click Components -> K2 -> Extra Field Groups -> Click new or edit Extra Field Group

Step2: Click Components -> K2 -> Extra Fields -> Click new or edit Extra Field , are belong extra field group

Step3: Click Components -> K2 -> Categories -> Click new or edit categorie Portfolio, associated extra field group

Step4: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element -> Click to edit


  2. Click to change parameters:

    Title: ' Latest Projects'

    Class Title: ' '

    Icon Name: ''

    Section ID: ''

    Section Class: 'section-full bg-white p-t80'

    Container Class: ' '

    Heading Style: ''

    Heading align: ''

    Background Image: ' '

    Padding: ''

    -> Click Save


  3. Drag&Drop 1 Portfolio element into the column above


    • The first, we need setup properties for columns



    • -> Click Save

    • Then, Click to edit Portfolio element


    • Click to change parameters:

      Category: Select category'Portfolio from com_k2'

      Title: ' '

      Description: ''

      ID: ''

      Menu ID: '138'

      Class: ''

      Count: '8'

      Image Size: 'M'

      Columns: '4 columns'

      Template: 'Choose template Default3'

      -> Click Save



Image Preview For Frontend below

9.Create layout: OUR TEAM

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element -> Click to edit


  2. Click to change parameters:

    Title: 'Our team'

    Description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.'

    Icon Name: ''

    Section ID: ' '

    Section Class: 'section-full text-center wt-our-team bg-white p-t80'

    Container Class: 'container'

    Row Class: ' '

    Heading Style: ''

    Heading align: ''

    Background Image: 'images/background/bg-8.jpg'

    Padding: ''

    -> Click Save


  3. Drag&Drop 1 HTML element into column above


    • The first, we need setup properties for columns



    • -> Click Save

      Do the same to setup properties for extant column

    • Then, Click to edit the HTML element


    Click Toggle, then input html code below


    -> Click Save

    HTML code:
    		<div class="wt-team-five-warper  clearfix">
    			<!-- COLUMNS 1 -->
    			<div class="wt-col-5 team-col-one">
    				<div class="wt-team-five">
    					<div class="wt-team-media"><a href="#"><img src="images/our-team3/pic1.png" alt="" /></a></div>
    					<div class="wt-team-info">
    						<div class="p-a20 bg-primary ">
    							<h4 class="wt-team-title text-uppercase m-a0 m-b10"><a href="#">Richard Wagner</a></h4>
    							<div class="wt-team-position">Building Worker</div>
    						</div>
    						<div class="p-a20 bg-black wt-arrow-up">
    							<ul class="social-icons social-square social-dark white-border m-a0">
    								<li><a class="fa fa-facebook" href="#"></a></li>
    								<li><a class="fa fa-twitter" href="#"></a></li>
    								<li><a class="fa fa-linkedin" href="#"></a></li>
    								<li><a class="fa fa-rss" href="#"></a></li>
    							</ul>
    						</div>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 2 -->
    			<div class="wt-col-5 team-col-two">
    				<div class="wt-team-five">
    					<div class="wt-team-media"><a href="#"><img src="images/our-team3/pic2.png" alt="" /></a></div>
    					<div class="wt-team-info">
    						<div class="p-a20 bg-primary ">
    							<h4 class="wt-team-title text-uppercase m-a0 m-b10"><a href="#">Richard Wagner</a></h4>
    							<div class="wt-team-position">Building Worker</div>
    						</div>
    						<div class="p-a20 bg-black wt-arrow-up">
    							<ul class="social-icons social-square social-dark white-border m-a0">
    								<li><a class="fa fa-facebook" href="#"></a></li>
    								<li><a class="fa fa-twitter" href="#"></a></li>
    								<li><a class="fa fa-linkedin" href="#"></a></li>
    								<li><a class="fa fa-rss" href="#"></a></li>
    							</ul>
    						</div>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 3 -->
    			<div class="wt-col-5 team-col-three wt-team-active">
    				<div class="wt-team-five">
    					<div class="wt-team-media"><a href="#"><img src="images/our-team3/pic3.png" alt="" /></a></div>
    					<div class="wt-team-info">
    						<div class="p-a20 bg-primary ">
    							<h4 class="wt-team-title text-uppercase m-a0 m-b10"><a href="#">Richard Wagner</a></h4>
    							<div class="wt-team-position">Building Worker</div>
    						</div>
    						<div class="p-a20 bg-black wt-arrow-up">
    							<ul class="social-icons social-square social-dark white-border m-a0">
    								<li><a class="fa fa-facebook" href="#"></a></li>
    								<li><a class="fa fa-twitter" href="#"></a></li>
    								<li><a class="fa fa-linkedin" href="#"></a></li>
    								<li><a class="fa fa-rss" href="#"></a></li>
    							</ul>
    						</div>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 4 -->
    			<div class="wt-col-5  team-col-four">
    				<div class="wt-team-five">
    					<div class="wt-team-media"><a href="#"><img src="images/our-team3/pic4.png" alt="" /></a></div>
    					<div class="wt-team-info">
    						<div class="p-a20 bg-primary ">
    							<h4 class="wt-team-title text-uppercase m-a0 m-b10"><a href="#">Richard Wagner</a></h4>
    							<div class="wt-team-position">Building Worker</div>
    						</div>
    						<div class="p-a20 bg-black wt-arrow-up">
    							<ul class="social-icons social-square social-dark white-border m-a0">
    								<li><a class="fa fa-facebook" href="#"></a></li>
    								<li><a class="fa fa-twitter" href="#"></a></li>
    								<li><a class="fa fa-linkedin" href="#"></a></li>
    								<li><a class="fa fa-rss" href="#"></a></li>
    							</ul>
    						</div>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 5 -->
    			<div class="wt-col-5 team-col-five">
    				<div class="wt-team-five">
    					<div class="wt-team-media"><a href="#"><img src="images/our-team3/pic5.png" alt="" /></a></div>
    					<div class="wt-team-info">
    						<div class="p-a20 bg-primary ">
    							<h4 class="wt-team-title text-uppercase m-a0 m-b10"><a href="#">Richard Wagner</a></h4>
    							<div class="wt-team-position">Building Worker</div>
    						</div>
    						<div class="p-a20 bg-black wt-arrow-up">
    							<ul class="social-icons social-square social-dark white-border m-a0">
    								<li><a class="fa fa-facebook" href="#"></a></li>
    								<li><a class="fa fa-twitter" href="#"></a></li>
    								<li><a class="fa fa-linkedin" href="#"></a></li>
    								<li><a class="fa fa-rss" href="#"></a></li>
    							</ul>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
        

    Do the same with extant HTML element
Image Preview For Frontend below


10.Create layout: Latest From News

Step1: Click Components -> K2 -> Extra Field Groups -> Click new or edit Extra Field Group

Step2: Click Components -> K2 -> Extra Fields -> Click new or edit Extra Field , are belong extra field group

Step3: Click Components -> K2 -> Categories -> Click new or edit categorie Blog, associated extra field group

Step 3: Click Components -> K2 -> Categories -> Click new or edit categories Blog

Step 4: Click Extension -> Modules -> Click New - Choose module type K2 Content (or edit)

Select categories Blog from com_k2

Click Menu Assignment tab to assign it to your menu


Step 5: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element -> Click to edit


  2. Click to change parameters:

    Title: 'Latest blog post'

    Description: ' Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been tahe industry.'

    Icon Name: ''

    Section ID: ''

    Section Class: 'section-full latest-blog bg-gray p-t80 p-b50'

    Container Class: 'container'

    Heading Style: ''

    Heading align: ''

    Background Image: ''

    Padding: ''

    -> Click Save


  3. Drag&Drop 1 Module element into the column above


    • The first, we need setup properties for column



    • -> Click Save

    • Then, Click to edit Module element

    Choose module The Blog, ID = 109 from module manager and choose Default template


    -> Click Save
Image Preview For Frontend below


11.Create layout: Testimonials

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element -> Click to edit


  2. Click to change parameters:

    Title: 'What Our Client Say'

    Class Title: 'text-white'

    Description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been tahe industry.'

    Section ID: ''

    Section Class: 'section-full p-t80 p-b50 overlay-wraper'

    Container Class: 'container'

    Heading Style: ''

    Heading align: ''

    Background Image: 'images/background/bg3.jpg'

    Overlay Class: 'overlay-main bg-black'

    Padding: ''


    -> Click Save

  3. Drag&Drop 1 Testimonials element into the columns above


    • The first, we need setup properties for columns



    • -> Click Save

    • Then, Click to edit the Testimonials element

    Enter image url -> Go -> Drag&Drop -> Click into each image, change title, position & description

    Click Config tab, change parameters:

    Title:

    Class:

    Template: Testimonial2

    -> Click Save


Image Preview For Frontend below


12.Create layout: BEST QUALITY

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop HTML Element -> Click to edit


  2. Click Toggle, then input html code below


    -> Click Save

    HTML code:
    		<div class="section-full p-t80 p-b50">
    			<div class="container">
    				<!-- TITLE START -->
    				<div class="section-head text-center">
    					<h2 class="text-uppercase">Our Client</h2>
    					<div class="wt-separator-outer">
    						<div class="wt-separator style-square"><span class="separator-left bg-primary"></span> <span class="separator-right bg-primary"></span></div>
    					</div>
    					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
    				</div>
    				<!-- TITLE END -->
    				<!-- IMAGE CAROUSEL START -->
    				<div class="section-content">
    					<div class="owl-carousel client-logo-carousel">
    						<!-- COLUMNS 1 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo1.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 2 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo2.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 3 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo3.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 4 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo4.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 5 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo5.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 6 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo6.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 7 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo1.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 8 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo2.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 9 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo3.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 10 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo4.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 11 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo5.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 12 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo6.png" alt="" /></a></div>
    							</div>
    						</div>
    					</div>
    				</div>
    				<!-- IMAGE CAROUSEL START -->
    			</div>
    		</div>
        

Image Preview For Frontend below


Create Home 5

  • Instroduction
  • Setting Up The Module for Home 5

1. Create New Page

Click Components -> Blue PageBuilder -> Click new or edit your page

Image Preview For Admin below

2. Create New Menu:

Click Menus -> Main Menu -> Click new or edit your menu

Image Preview For Admin below

3.Create Menu Module

Step1: Click Extension -> Modules -> Click New - Choose module type Menu (or edit)

Step2: You enter a title, select Main Menu from menu manager, select the display position is menu

Step3: Click Menu Assignment tab and assign it to your menu

Image Preview below for create menu module in admin



4.Create layout: Flexslider Content

Step1: Click Components -> United Slider


    Step2: Click Create new Slider






    HTML code:
    		<h2 class="tp-caption tp-resizeme caption-1 text-uppercase">Welcome to the Constrot</h2>
        

    Step3: Create new modules slider:


Image Preview For Frontend below


5.Create layout: WHY CHOOSE US

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element -> Click to edit


  2. Click to change parameters:

    Title: ' Why Choose us'

    Description: ' Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.'

    Icon Name: ''

    Section ID: ' '

    Section Class: 'section-full bg-gray p-t80 p-b120'

    Container Class: 'container'

    Row Class: ' '

    Heading Style: ''

    Heading align: ''

    Background Image: 'images/background/bg-6.jpg'

    Padding: ''

    -> Click Save


  3. Drag&Drop 1 HTML element into column above


    • The first, we need setup properties for columns



    • -> Click Save

      Do the same to setup properties for extant column

    • Then, Click to edit the HTML element


    Click Toggle, then input html code below


    -> Click Save

    HTML code:
    		<div class="row">
    			<!-- COLUMNS 1 -->
    			<div class="col-md-4 col-sm-6 p-tb15">
    				<div class="wt-icon-box-wraper  p-a20 left bg-white">
    					<div class="icon-sm text-primary m-b20"><a class="icon-cell" href="#"><i class="fa fa-life-ring" aria-hidden="true"></i></a></div>
    					<div class="icon-content">
    						<h5 class="wt-tilte text-uppercase">BEST QUALITY</h5>
    						<div class="wt-separator bg-primary"> </div>
    						<p>Lorem Ipsum is simply dummy text of the printing and typesg indtrysum has been the Ipsum dummy of the printing indus [...]</p>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 2 -->
    			<div class="col-md-4 col-sm-6 p-tb15">
    				<div class="wt-icon-box-wraper  p-a20 left bg-white">
    					<div class="icon-sm text-primary m-b20"><a class="icon-cell" href="#"><i class="fa fa-trophy" aria-hidden="true"></i></a></div>
    					<div class="icon-content ">
    						<h5 class="wt-tilte text-uppercase">INTEGRITY</h5>
    						<div class="wt-separator bg-primary"> </div>
    						<p>Lorem Ipsum is simply dummy text of the printing and typesg indtrysum has been the Ipsum dummy of the printing indus [...]</p>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 3 -->
    			<div class="col-md-4 col-sm-6 p-tb15">
    				<div class="wt-icon-box-wraper  p-a20 left bg-white">
    					<div class="icon-sm text-primary m-b20"><a class="icon-cell" href="#"><i class="fa fa-thumbs-up" aria-hidden="true"></i></a></div>
    					<div class="icon-content">
    						<h5 class="wt-tilte text-uppercase">STRATEGY</h5>
    						<div class="wt-separator bg-primary"> </div>
    						<p>Lorem Ipsum is simply dummy text of the printing and typesg indtrysum has been the Ipsum dummy of the printing indus [...]</p>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 4 -->
    			<div class="col-md-4 col-sm-6 p-tb15">
    				<div class="wt-icon-box-wraper  p-a20 left bg-white">
    					<div class="icon-sm text-primary m-b20"><a class="icon-cell" href="#"><i class="fa fa-users" aria-hidden="true"></i></a></div>
    					<div class="icon-content">
    						<h5 class="wt-tilte text-uppercase">SAFETY</h5>
    						<div class="wt-separator bg-primary"> </div>
    						<p>Lorem Ipsum is simply dummy text of the printing and typesg indtrysum has been the Ipsum dummy of the printing indus [...]</p>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 5 -->
    			<div class="col-md-4 col-sm-6 p-tb15">
    				<div class="wt-icon-box-wraper  p-a20 left bg-white">
    					<div class="icon-sm text-primary m-b20"><a class="icon-cell" href="#"><i class="fa fa-area-chart" aria-hidden="true"></i></a></div>
    					<div class="icon-content">
    						<h5 class="wt-tilte text-uppercase">COMMUNITY</h5>
    						<div class="wt-separator bg-primary"> </div>
    						<p>Lorem Ipsum is simply dummy text of the printing and typesg indtrysum has been the Ipsum dummy of the printing indus [...]</p>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 6 -->
    			<div class="col-md-4 col-sm-6 p-tb15">
    				<div class="wt-icon-box-wraper  p-a20 left bg-white">
    					<div class="icon-sm text-primary m-b20"><a class="icon-cell" href="#"><i class="fa fa-cogs" aria-hidden="true"></i></a></div>
    					<div class="icon-content">
    						<h5 class="wt-tilte text-uppercase">SUSTAINABILITY</h5>
    						<div class="wt-separator bg-primary"> </div>
    						<p>Lorem Ipsum is simply dummy text of the printing and typesg indtrysum has been the Ipsum dummy of the printing indus [...]</p>
    					</div>
    				</div>
    			</div>
    		</div>
        

    Do the same with extant HTML element
Image Preview For Frontend below


6.Create layout: LATEST PROJECTS

Step1: Click Components -> K2 -> Extra Field Groups -> Click new or edit Extra Field Group

Step2: Click Components -> K2 -> Extra Fields -> Click new or edit Extra Field , are belong extra field group

Step3: Click Components -> K2 -> Categories -> Click new or edit categorie Portfolio, associated extra field group

Step4: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element -> Click to edit


  2. Click to change parameters:

    Title: ' Latest Projects'

    Class Title: ' '

    Icon Name: ''

    Section ID: ''

    Section Class: 'section-full bg-white p-t80'

    Container Class: ' '

    Heading Style: ''

    Heading align: ''

    Background Image: ' '

    Padding: ''

    -> Click Save


  3. Drag&Drop 1 Portfolio element into the column above


    • The first, we need setup properties for columns



    • -> Click Save

    • Then, Click to edit Portfolio element


    • Click to change parameters:

      Category: Select category'Portfolio from com_k2'

      Title: ' '

      Description: ''

      ID: ''

      Menu ID: '138'

      Class: ''

      Count: '8'

      Image Size: 'M'

      Columns: '4 columns'

      Template: 'Choose template Default3'

      -> Click Save



Image Preview For Frontend below

7.Create layout: ABOUT COMPANY

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element, divide into 2 columns -> Click to edit


  2. Click to change parameters:

    Title: ''

    Under Title: ''

    Icon Name: ''

    Section ID: ''

    Section Class: 'section-full p-tb100'

    Container Class: 'container'

    Row Class: ' '

    Heading Style: ''

    Heading align: ''

    Background Image: 'images/background/pic-c-1bg.png'

    Padding: ''

    -> Click Save


  3. Drag&Drop 2 HTML elements into 2 columns above


    • The first, we need setup properties for columns



    • -> Click Save

      Do the same to setup properties for extant column

    • Then, Click to edit the HTML element in the first column


    Click Toggle, then input html code below


    -> Click Save

    HTML code:
    		<div class="about-com-pic"><img class="img-responsive" src="images/pic-c-1.png" alt="" /></div>
        

    Do the same with extant HTML element
Image Preview For Frontend below


8. Create layout: Skill Counter

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element, divide into 4 columns -> Click to edit


  2. Click to change parameters:

    Title: ' '

    Under Title: ''

    Icon Name: ''

    Section ID: ''

    Section Class: 'section-full overlay-wraper p-t50 p-b20'

    Container Class: 'container'

    Heading Style: ''

    Heading align: ''

    Background Image: ' images/background/bg-5.jpg'

    Overlay Class: ' overlay-main bg-color-dark'

    Padding: ''

    Full Width: 'No'

    -> Click Save


  3. Drag&Drop 4 Skill elements into 4 columns


    • The first, we need setup properties for columns



    • -> Click Save

      Do the same to setup properties for extant column

  4. Then, Click to edit the Skill element in the first column



  5. Click setting skill:

    Title: 'PROJECT COMPLETED'

    Short Description: ''

    Precent| Number: '2500'

    Background image: ''

    class | Icon class: 'fa fa-building'

    Template: 'Counter1'


    -> Click Save

Image Preview For Frontend below


9.Create layout: OUR TEAM

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element -> Click to edit


  2. Click to change parameters:

    Title: 'Our team'

    Description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.'

    Icon Name: ''

    Section ID: ' '

    Section Class: 'section-full text-center wt-our-team bg-white p-t80'

    Container Class: 'container'

    Row Class: ' '

    Heading Style: ''

    Heading align: ''

    Background Image: 'images/background/bg-8.jpg'

    Padding: ''

    -> Click Save


  3. Drag&Drop 1 HTML element into column above


    • The first, we need setup properties for columns



    • -> Click Save

      Do the same to setup properties for extant column

    • Then, Click to edit the HTML element


    Click Toggle, then input html code below


    -> Click Save

    HTML code:
    		<div class="wt-team-five-warper  clearfix">
    			<!-- COLUMNS 1 -->
    			<div class="wt-col-5 team-col-one">
    				<div class="wt-team-five">
    					<div class="wt-team-media"><a href="#"><img src="images/our-team3/pic1.png" alt="" /></a></div>
    					<div class="wt-team-info">
    						<div class="p-a20 bg-primary ">
    							<h4 class="wt-team-title text-uppercase m-a0 m-b10"><a href="#">Richard Wagner</a></h4>
    							<div class="wt-team-position">Building Worker</div>
    						</div>
    						<div class="p-a20 bg-black wt-arrow-up">
    							<ul class="social-icons social-square social-dark white-border m-a0">
    								<li><a class="fa fa-facebook" href="#"></a></li>
    								<li><a class="fa fa-twitter" href="#"></a></li>
    								<li><a class="fa fa-linkedin" href="#"></a></li>
    								<li><a class="fa fa-rss" href="#"></a></li>
    							</ul>
    						</div>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 2 -->
    			<div class="wt-col-5 team-col-two">
    				<div class="wt-team-five">
    					<div class="wt-team-media"><a href="#"><img src="images/our-team3/pic2.png" alt="" /></a></div>
    					<div class="wt-team-info">
    						<div class="p-a20 bg-primary ">
    							<h4 class="wt-team-title text-uppercase m-a0 m-b10"><a href="#">Richard Wagner</a></h4>
    							<div class="wt-team-position">Building Worker</div>
    						</div>
    						<div class="p-a20 bg-black wt-arrow-up">
    							<ul class="social-icons social-square social-dark white-border m-a0">
    								<li><a class="fa fa-facebook" href="#"></a></li>
    								<li><a class="fa fa-twitter" href="#"></a></li>
    								<li><a class="fa fa-linkedin" href="#"></a></li>
    								<li><a class="fa fa-rss" href="#"></a></li>
    							</ul>
    						</div>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 3 -->
    			<div class="wt-col-5 team-col-three wt-team-active">
    				<div class="wt-team-five">
    					<div class="wt-team-media"><a href="#"><img src="images/our-team3/pic3.png" alt="" /></a></div>
    					<div class="wt-team-info">
    						<div class="p-a20 bg-primary ">
    							<h4 class="wt-team-title text-uppercase m-a0 m-b10"><a href="#">Richard Wagner</a></h4>
    							<div class="wt-team-position">Building Worker</div>
    						</div>
    						<div class="p-a20 bg-black wt-arrow-up">
    							<ul class="social-icons social-square social-dark white-border m-a0">
    								<li><a class="fa fa-facebook" href="#"></a></li>
    								<li><a class="fa fa-twitter" href="#"></a></li>
    								<li><a class="fa fa-linkedin" href="#"></a></li>
    								<li><a class="fa fa-rss" href="#"></a></li>
    							</ul>
    						</div>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 4 -->
    			<div class="wt-col-5  team-col-four">
    				<div class="wt-team-five">
    					<div class="wt-team-media"><a href="#"><img src="images/our-team3/pic4.png" alt="" /></a></div>
    					<div class="wt-team-info">
    						<div class="p-a20 bg-primary ">
    							<h4 class="wt-team-title text-uppercase m-a0 m-b10"><a href="#">Richard Wagner</a></h4>
    							<div class="wt-team-position">Building Worker</div>
    						</div>
    						<div class="p-a20 bg-black wt-arrow-up">
    							<ul class="social-icons social-square social-dark white-border m-a0">
    								<li><a class="fa fa-facebook" href="#"></a></li>
    								<li><a class="fa fa-twitter" href="#"></a></li>
    								<li><a class="fa fa-linkedin" href="#"></a></li>
    								<li><a class="fa fa-rss" href="#"></a></li>
    							</ul>
    						</div>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 5 -->
    			<div class="wt-col-5 team-col-five">
    				<div class="wt-team-five">
    					<div class="wt-team-media"><a href="#"><img src="images/our-team3/pic5.png" alt="" /></a></div>
    					<div class="wt-team-info">
    						<div class="p-a20 bg-primary ">
    							<h4 class="wt-team-title text-uppercase m-a0 m-b10"><a href="#">Richard Wagner</a></h4>
    							<div class="wt-team-position">Building Worker</div>
    						</div>
    						<div class="p-a20 bg-black wt-arrow-up">
    							<ul class="social-icons social-square social-dark white-border m-a0">
    								<li><a class="fa fa-facebook" href="#"></a></li>
    								<li><a class="fa fa-twitter" href="#"></a></li>
    								<li><a class="fa fa-linkedin" href="#"></a></li>
    								<li><a class="fa fa-rss" href="#"></a></li>
    							</ul>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
        

    Do the same with extant HTML element
Image Preview For Frontend below


10.Create layout: Latest From News

Step1: Click Components -> K2 -> Extra Field Groups -> Click new or edit Extra Field Group

Step2: Click Components -> K2 -> Extra Fields -> Click new or edit Extra Field , are belong extra field group

Step3: Click Components -> K2 -> Categories -> Click new or edit categorie Blog, associated extra field group

Step 3: Click Components -> K2 -> Categories -> Click new or edit categories Blog

Step 4: Click Extension -> Modules -> Click New - Choose module type K2 Content (or edit)

Select categories Blog from com_k2

Click Menu Assignment tab to assign it to your menu


Step 5: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element -> Click to edit


  2. Click to change parameters:

    Title: 'Latest blog post'

    Description: ' Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been tahe industry.'

    Icon Name: ''

    Section ID: ''

    Section Class: 'section-full latest-blog bg-gray p-t80 p-b50'

    Container Class: 'container'

    Heading Style: ''

    Heading align: ''

    Background Image: ''

    Padding: ''

    -> Click Save


  3. Drag&Drop 1 Module element into the column above


    • The first, we need setup properties for column



    • -> Click Save

    • Then, Click to edit Module element

    Choose module The Blog, ID = 109 from module manager and choose Default template


    -> Click Save
Image Preview For Frontend below


11.Create layout: Testimonials

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element -> Click to edit


  2. Click to change parameters:

    Title: 'What Our Client Say'

    Class Title: 'text-white'

    Description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been tahe industry.'

    Section ID: ''

    Section Class: 'section-full p-t80 p-b50 overlay-wraper'

    Container Class: 'container'

    Heading Style: ''

    Heading align: ''

    Background Image: 'images/background/bg3.jpg'

    Overlay Class: 'overlay-main bg-black'

    Padding: ''


    -> Click Save

  3. Drag&Drop 1 Testimonials element into the columns above


    • The first, we need setup properties for columns



    • -> Click Save

    • Then, Click to edit the Testimonials element

    Enter image url -> Go -> Drag&Drop -> Click into each image, change title, position & description

    Click Config tab, change parameters:

    Title:

    Class:

    Template: Testimonial2

    -> Click Save


Image Preview For Frontend below


12.Create layout: OUR PLANS

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element, divide into 3 columns -> Click to edit


  2. Click to change parameters:

    First Title: 'The Best Industry services'

    Description: ''

    Title: 'High Performance Services For Multiple Insdustries And Technologies!'

    Icon Name: ''

    Section ID: ''

    Section Class: 'section-full p-t80 p-b50 bg-gray'

    Container Class: 'container'

    Row Class: 'pricingtable-row m-b30 p-lr15 no-col-gap'

    Heading Style: ' '

    Heading align: ''

    Background Image: ''

    Padding: ''

    Full Width: 'No'

    -> Click Save


  3. Drag&Drop 3 Pricing element into the 3 column above


    • The first, we need setup properties for columns



    • -> Click Save

      Do the same to setup properties for extant column

    • Then, Click to edit the Pricing element

    • Click to change parameters:

      Class: ' '

      Description: ' '

      Icon Name: ''

      Price: '10'

      Unit: '$'

      Time: 'M'

      Text Button: 'Sign up'

      Link Button: '#'

      Title: 'Basic Plan'

      Feature: ''

      Features: 'Full Responsive| Multi color theme| With Bootstrap| Easy to customize| Many shortcodes'

      Template: 'Default1'

      -> Click Save

    -> Click Save


    Do the same with extant Pricing element
Image Preview For Frontend below


13.Create layout: BEST QUALITY

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop HTML Element -> Click to edit


  2. Click Toggle, then input html code below


    -> Click Save

    HTML code:
    		<div class="section-full p-t80 p-b50">
    			<div class="container">
    				<!-- TITLE START -->
    				<div class="section-head text-center">
    					<h2 class="text-uppercase">Our Client</h2>
    					<div class="wt-separator-outer">
    						<div class="wt-separator style-square"><span class="separator-left bg-primary"></span> <span class="separator-right bg-primary"></span></div>
    					</div>
    					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
    				</div>
    				<!-- TITLE END -->
    				<!-- IMAGE CAROUSEL START -->
    				<div class="section-content">
    					<div class="owl-carousel client-logo-carousel">
    						<!-- COLUMNS 1 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo1.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 2 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo2.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 3 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo3.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 4 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo4.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 5 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo5.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 6 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo6.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 7 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo1.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 8 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo2.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 9 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo3.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 10 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo4.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 11 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo5.png" alt="" /></a></div>
    							</div>
    						</div>
    						<!-- COLUMNS 12 -->
    						<div class="item">
    							<div class="ow-client-logo">
    								<div class="client-logo wt-img-effect on-color"><a href="#"><img src="images/client-logo/logo6.png" alt="" /></a></div>
    							</div>
    						</div>
    					</div>
    				</div>
    				<!-- IMAGE CAROUSEL START -->
    			</div>
    		</div>
        

Image Preview For Frontend below


Create About Us 1 Page

  • Instroduction
  • Setting Up The Module for About Us 1 Page

1. Create New Page

Click Components -> Blue PageBuilder -> Click new or edit your page

Image Preview For Admin below

2. Create New Menu:

Click Menus -> Main Menu -> Click new or edit your menu

Image Preview For Admin below

3.Create Menu Module

Step1: Click Extension -> Modules -> Click New - Choose module type Menu (or edit)

Step2: You enter a title, select Main Menu from menu manager, select the display position is menu

Step3: Click Menu Assignment tab and assign it to your menu

Image Preview below for create menu module in admin



4.Create layout: OUR PROJECTS

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element -> Click to edit


  2. Click to change parameters:

    Title: ' Our Projects'

    Description: ' Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book has survived.'

    Icon Name: ''

    Section ID: ' '

    Section Class: 'section-full p-t80 p-b50'

    Container Class: 'container'

    Row Class: ' '

    Heading Style: ''

    Heading align: ''

    Background Image: ''

    Padding: ''

    -> Click Save


  3. Drag&Drop 1 HTML element into column above


    • The first, we need setup properties for columns



    • -> Click Save

      Do the same to setup properties for extant column

    • Then, Click to edit the HTML element


    Click Toggle, then input html code below


    -> Click Save

    HTML code:
    		<div class="row">
    			<!-- COLUMNS 1 -->
    			<div class="col-md-4 col-sm-4 p-tb15">
    				<div class="wt-box bg-white">
    					<div class="wt-media"><a href="#"><img src="images/our-work/pic1.jpg" alt="" /></a></div>
    					<div class="wt-info p-tb30">
    						<h4 class="wt-title m-t0"><a href="#">Shopping Mall</a></h4>
    						<p>Lorem ipsum dolor consectetur adipiscing Fusce varius euismod lacus eget feugiat rorem ipsum dolor consectetur Fusce varius .</p>
    						<a class="site-button outline   black" href="#"><strong class="text-center">Read More</strong></a>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 2 -->
    			<div class="col-md-4 col-sm-4 p-tb15">
    				<div class="wt-box bg-white">
    					<div class="wt-media"><a href="#"><img src="images/our-work/pic2.jpg" alt="" /></a></div>
    					<div class="wt-info p-tb30">
    						<h4 class="wt-title m-t0"><a href="#">Hospital Building</a></h4>
    						<p>Lorem ipsum dolor consectetur adipiscing Fusce varius euismod lacus eget feugiat rorem ipsum dolor consectetur Fusce varius .</p>
    						<a class="site-button outline   black" href="#"><strong class="text-center">Read More</strong></a>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 3 -->
    			<div class="col-md-4 col-sm-4 p-tb15">
    				<div class="wt-box bg-white">
    					<div class="wt-media"><a href="#"><img src="images/our-work/pic3.jpg" alt="" /></a></div>
    					<div class="wt-info p-tb30">
    						<h4 class="wt-title m-t0"><a href="#">Garden House</a></h4>
    						<p>Lorem ipsum dolor consectetur adipiscing Fusce varius euismod lacus eget feugiat rorem ipsum dolor consectetur Fusce varius .</p>
    						<a class="site-button outline   black" href="#"><strong class="text-center">Read More</strong></a>
    					</div>
    				</div>
    			</div>
    		</div>
        

    Do the same with extant HTML element
Image Preview For Frontend below


5.Create layout: OUR BEST SERVICES

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element -> Click to edit


  2. Click to change parameters:

    Title: ' '

    Description: ' '

    Icon Name: ''

    Section ID: ' '

    Section Class: 'section-full p-t80 p-b50 bg-black-light text-white'

    Container Class: 'container'

    Row Class: ' '

    Heading Style: ''

    Heading align: ''

    Background Image: ''

    Padding: ''

    -> Click Save


  3. Drag&Drop 1 HTML element into column above


    • The first, we need setup properties for columns



    • -> Click Save

      Do the same to setup properties for extant column

    • Then, Click to edit the HTML element


    Click Toggle, then input html code below


    -> Click Save

    HTML code:
    		<div class="section-head">
    			<h2 class="text-uppercase">Our best services</h2>
    			<span class="title-small">Best construction Deals</span>
    			<div class="wt-separator bg-primary"> </div>
    		</div>
    		<!-- OUR BEST SERVICES BLOCKS START -->
    		<div class="section-content">
    			<div class="row">
    				<!-- COLUMNS 1 -->
    				<div class="col-md-6 col-sm-6">
    					<div class="wt-icon-box-wraper bx-style-1 p-a30 left m-b30">
    						<div class="wt-icon-box-sm radius bg-primary"><span class="icon-cell text-white"><i class="fa fa-trophy"></i></span></div>
    						<div class="icon-content">
    							<h5 class="wt-tilte text-uppercase">BEST QUALITY</h5>
    							<p>Lorem ipsum dolor sit amet elit sed diam nonummy nibh euismod.</p>
    						</div>
    					</div>
    				</div>
    				<!-- COLUMNS 2 -->
    				<div class="col-md-6 col-sm-6">
    					<div class="wt-icon-box-wraper bx-style-1 p-a30 left m-b30">
    						<div class="wt-icon-box-sm radius bg-primary"><span class="icon-cell text-white"><i class="fa fa-pencil"></i></span></div>
    						<div class="icon-content">
    							<h5 class="wt-tilte text-uppercase">INTEGRITY</h5>
    							<p>Lorem ipsum dolor sit amet elit sed diam nonummy nibh euismod.</p>
    						</div>
    					</div>
    				</div>
    				<!-- COLUMNS 3 -->
    				<div class="col-md-6 col-sm-6">
    					<div class="wt-icon-box-wraper bx-style-1 p-a30 left m-b30">
    						<div class="wt-icon-box-sm radius bg-primary"><span class="icon-cell text-white"><i class="fa fa-flag-checkered"></i></span></div>
    						<div class="icon-content">
    							<h5 class="wt-tilte text-uppercase">STRATEGY</h5>
    							<p>Lorem ipsum dolor sit amet elit sed diam nonummy nibh euismod.</p>
    						</div>
    					</div>
    				</div>
    				<!-- COLUMNS 4 -->
    				<div class="col-md-6 col-sm-6">
    					<div class="wt-icon-box-wraper bx-style-1 p-a30 left m-b30">
    						<div class="wt-icon-box-sm radius bg-primary"><span class="icon-cell text-white"><i class="fa fa-hand-rock-o"></i></span></div>
    						<div class="icon-content">
    							<h5 class="wt-tilte text-uppercase">SAFETY</h5>
    							<p>Lorem ipsum dolor sit amet elit sed diam nonummy nibh euismod.</p>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
        

    Do the same with extant HTML element
Image Preview For Frontend below


6.Create layout: OUR TEAM

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element, divide into 4 columns -> Click to edit


  2. Click to change parameters:

    Title: 'Our team'

    Description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.'

    Icon Name: ''

    Section ID: ''

    Section Class: 'section-full text-center wt-our-team bg-gray p-t80 p-b50'

    Container Class: 'container'

    Row Class: ' '

    Heading Style: ''

    Heading align: ''

    Background Image: ''

    Padding: ''

    -> Click Save


  3. Drag&Drop 4 HTML elements into 4 columns above


    • The first, we need setup properties for columns



    • -> Click Save

      Do the same to setup properties for extant column

    • Then, Click to edit the HTML element in the first column


    Click Toggle, then input html code below


    -> Click Save

    HTML code:
    		<div class="wt-team-four">
    			<div class="wt-team-media"><a href="#"><img src="images/our-team/pic1.jpg" alt="" /></a></div>
    			<div class="wt-team-info">
    				<div class="wt-team-skew-block p-t10">
    					<div class="social-icons-outer bg-primary  p-a25">
    						<ul class="social-icons social-square social-dark white-border m-b0">
    							<li><a class="fa fa-facebook" href="#"></a></li>
    							<li><a class="fa fa-twitter" href="#"></a></li>
    							<li><a class="fa fa-linkedin" href="#"></a></li>
    							<li><a class="fa fa-rss" href="#"></a></li>
    						</ul>
    					</div>
    				</div>
    				<div class="p-a20">
    					<h4 class="wt-team-title text-uppercase"><a href="#">Richard Wagner</a></h4>
    					<p>Building Worker</p>
    				</div>
    			</div>
    		</div>
        

    Do the same with extant HTML element
Image Preview For Frontend below


Create About Us 2 Page

  • Instroduction
  • Setting Up The Module for About Us 2 Page

1. Create New Page

Click Components -> Blue PageBuilder -> Click new or edit your page

Image Preview For Admin below

2. Create New Menu:

Click Menus -> Main Menu -> Click new or edit your menu

Image Preview For Admin below

3.Create Menu Module

Step1: Click Extension -> Modules -> Click New - Choose module type Menu (or edit)

Step2: You enter a title, select Main Menu from menu manager, select the display position is menu

Step3: Click Menu Assignment tab and assign it to your menu

Image Preview below for create menu module in admin



4.Create layout: OUR BEST SERVICES

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element -> Click to edit


  2. Click to change parameters:

    Title: ' Our best services'

    Description: ' Best construction Deals'

    Icon Name: ''

    Section ID: ' '

    Section Class: 'section-full text-center bg-gray p-t80 p-b50'

    Container Class: 'container'

    Row Class: ' '

    Heading Style: ''

    Heading align: ''

    Background Image: ''

    Padding: ''

    -> Click Save


  3. Drag&Drop 1 HTML element into column above


    • The first, we need setup properties for columns



    • -> Click Save

      Do the same to setup properties for extant column

    • Then, Click to edit the HTML element


    Click Toggle, then input html code below


    -> Click Save

    HTML code:
    		<div class="section-content no-col-gap">
    			<div class="row">
    				<!-- COLUMNS 1 -->
    				<div class="col-md-4 col-sm-6 animate_line">
    					<div class="wt-icon-box-wraper  p-a30 center bg-white m-a5">
    						<div class="icon-sm text-primary m-b20"><a class="icon-cell" href="#"><i class="fa fa-life-ring" aria-hidden="true"></i></a></div>
    						<div class="icon-content">
    							<h5 class="wt-tilte text-uppercase">BEST QUALITY</h5>
    							<p>Lorem Ipsum is simply dummy text of the printing and typesg indtrysum has been the Ipsum dummy of the printing indus .</p>
    						</div>
    					</div>
    				</div>
    				<!-- COLUMNS 2 -->
    				<div class="col-md-4 col-sm-6 animate_line">
    					<div class="wt-icon-box-wraper  p-a30 center bg-white m-a5">
    						<div class="icon-sm text-primary m-b20"><a class="icon-cell" href="#"><i class="fa fa-trophy" aria-hidden="true"></i></a></div>
    						<div class="icon-content ">
    							<h5 class="wt-tilte text-uppercase">INTEGRITY</h5>
    							<p>Lorem Ipsum is simply dummy text of the printing and typesg indtrysum has been the Ipsum dummy of the printing indus .</p>
    						</div>
    					</div>
    				</div>
    				<!-- COLUMNS 3 -->
    				<div class="col-md-4 col-sm-6 animate_line">
    					<div class="wt-icon-box-wraper  p-a30 center bg-white m-a5">
    						<div class="icon-sm text-primary m-b20"><a class="icon-cell" href="#"><i class="fa fa-thumbs-up" aria-hidden="true"></i></a></div>
    						<div class="icon-content">
    							<h5 class="wt-tilte text-uppercase">STRATEGY</h5>
    							<p>Lorem Ipsum is simply dummy text of the printing and typesg indtrysum has been the Ipsum dummy of the printing indus .</p>
    						</div>
    					</div>
    				</div>
    				<!-- COLUMNS 4 -->
    				<div class="col-md-4 col-sm-6 animate_line">
    					<div class="wt-icon-box-wraper  p-a30 center bg-white m-a5">
    						<div class="icon-sm text-primary m-b20"><a class="icon-cell" href="#"><i class="fa fa-users" aria-hidden="true"></i></a></div>
    						<div class="icon-content">
    							<h5 class="wt-tilte text-uppercase">SAFETY</h5>
    							<p>Lorem Ipsum is simply dummy text of the printing and typesg indtrysum has been the Ipsum dummy of the printing indus .</p>
    						</div>
    					</div>
    				</div>
    				<!-- COLUMNS 5 -->
    				<div class="col-md-4 col-sm-6 animate_line">
    					<div class="wt-icon-box-wraper  p-a30 center bg-white m-a5">
    						<div class="icon-sm text-primary m-b20"><a class="icon-cell" href="#"><i class="fa fa-area-chart" aria-hidden="true"></i></a></div>
    						<div class="icon-content">
    							<h5 class="wt-tilte text-uppercase">COMMUNITY</h5>
    							<p>Lorem Ipsum is simply dummy text of the printing and typesg indtrysum has been the Ipsum dummy of the printing indus .</p>
    						</div>
    					</div>
    				</div>
    				<!-- COLUMNS 6 -->
    				<div class="col-md-4 col-sm-6 animate_line">
    					<div class="wt-icon-box-wraper  p-a30 center bg-white m-a5">
    						<div class="icon-sm text-primary m-b20"><a class="icon-cell" href="#"><i class="fa fa-cogs" aria-hidden="true"></i></a></div>
    						<div class="icon-content">
    							<h5 class="wt-tilte text-uppercase">SUSTAINABILITY</h5>
    							<p>Lorem Ipsum is simply dummy text of the printing and typesg indtrysum has been the Ipsum dummy of the printing indus .</p>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
        

    Do the same with extant HTML element
Image Preview For Frontend below


5.Create layout: Skill Counter

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element, divide into 4 columns -> Click to edit


  2. Click to change parameters:

    Title: ' Counter'

    Description: 'Best construction Deals'

    Icon Name: ''

    Section ID: ''

    Section Class: 'section-full p-t50 p-b20 bg-white'

    Container Class: 'container'

    Heading Style: ''

    Heading align: ''

    Background Image: ' '

    Padding: ''

    Full Width: 'No'

    -> Click Save


  3. Drag&Drop 4 Skill elements into 4 columns


    • The first, we need setup properties for columns



    • -> Click Save

      Do the same to setup properties for extant column

  4. Then, Click to edit the Skill element in the first column



  5. Click setting skill:

    Title: 'Happy Clients'

    Short Description: ''

    Precent| Number: '1000'

    Background image: ''

    class | Icon class: 'fa fa-building'

    Template: 'Counter'


    -> Click Save

Image Preview For Frontend below


6.Create layout: OUR BEST PROJECTS

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element -> Click to edit


  2. Click to change parameters:

    Title: ' '

    Description: ' '

    Icon Name: ''

    Section ID: ' '

    Section Class: 'section-full p-t80 p-b50 bg-black-light text-white'

    Container Class: 'container'

    Row Class: ' '

    Heading Style: ''

    Heading align: ''

    Background Image: ''

    Padding: ''

    -> Click Save


  3. Drag&Drop 1 HTML element into column above


    • The first, we need setup properties for columns



    • -> Click Save

      Do the same to setup properties for extant column

    • Then, Click to edit the HTML element


    Click Toggle, then input html code below


    -> Click Save

    HTML code:
    		<div class="section-head">
    			<h2 class="text-uppercase">Our best services</h2>
    			<span class="title-small">Best construction Deals</span>
    			<div class="wt-separator bg-primary"> </div>
    		</div>
    		<!-- OUR BEST SERVICES BLOCKS START -->
    		<div class="section-content">
    			<div class="row">
    				<!-- COLUMNS 1 -->
    				<div class="col-md-6 col-sm-6">
    					<div class="wt-icon-box-wraper bx-style-1 p-a30 left m-b30">
    						<div class="wt-icon-box-sm radius bg-primary"><span class="icon-cell text-white"><i class="fa fa-trophy"></i></span></div>
    						<div class="icon-content">
    							<h5 class="wt-tilte text-uppercase">BEST QUALITY</h5>
    							<p>Lorem ipsum dolor sit amet elit sed diam nonummy nibh euismod.</p>
    						</div>
    					</div>
    				</div>
    				<!-- COLUMNS 2 -->
    				<div class="col-md-6 col-sm-6">
    					<div class="wt-icon-box-wraper bx-style-1 p-a30 left m-b30">
    						<div class="wt-icon-box-sm radius bg-primary"><span class="icon-cell text-white"><i class="fa fa-pencil"></i></span></div>
    						<div class="icon-content">
    							<h5 class="wt-tilte text-uppercase">INTEGRITY</h5>
    							<p>Lorem ipsum dolor sit amet elit sed diam nonummy nibh euismod.</p>
    						</div>
    					</div>
    				</div>
    				<!-- COLUMNS 3 -->
    				<div class="col-md-6 col-sm-6">
    					<div class="wt-icon-box-wraper bx-style-1 p-a30 left m-b30">
    						<div class="wt-icon-box-sm radius bg-primary"><span class="icon-cell text-white"><i class="fa fa-flag-checkered"></i></span></div>
    						<div class="icon-content">
    							<h5 class="wt-tilte text-uppercase">STRATEGY</h5>
    							<p>Lorem ipsum dolor sit amet elit sed diam nonummy nibh euismod.</p>
    						</div>
    					</div>
    				</div>
    				<!-- COLUMNS 4 -->
    				<div class="col-md-6 col-sm-6">
    					<div class="wt-icon-box-wraper bx-style-1 p-a30 left m-b30">
    						<div class="wt-icon-box-sm radius bg-primary"><span class="icon-cell text-white"><i class="fa fa-hand-rock-o"></i></span></div>
    						<div class="icon-content">
    							<h5 class="wt-tilte text-uppercase">SAFETY</h5>
    							<p>Lorem ipsum dolor sit amet elit sed diam nonummy nibh euismod.</p>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
        

    Do the same with extant HTML element
Image Preview For Frontend below


Create Services 1 Page

  • Instroduction
  • Setting Up The Module for Services 1 Page

1. Create New Page

Click Components -> Blue PageBuilder -> Click new or edit your page

Image Preview For Admin below

2. Create New Menu:

Click Menus -> Main Menu -> Click new or edit your menu

Image Preview For Admin below

3.Create Menu Module

Step1: Click Extension -> Modules -> Click New - Choose module type Menu (or edit)

Step2: You enter a title, select Main Menu from menu manager, select the display position is menu

Step3: Click Menu Assignment tab and assign it to your menu

Image Preview below for create menu module in admin



4.Create layout: Services

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element -> Click to edit


  2. Click to change parameters:

    Title: ' '

    Description: ' '

    Icon Name: ''

    Section ID: ' '

    Section Class: 'section-full p-t80 p-b50 bg-service-team'

    Container Class: 'container'

    Row Class: ' '

    Heading Style: ''

    Heading align: ''

    Background Image: ''

    Padding: ''

    -> Click Save


  3. Drag&Drop 1 HTML element into column above


    • The first, we need setup properties for columns



    • -> Click Save

      Do the same to setup properties for extant column

    • Then, Click to edit the HTML element


    Click Toggle, then input html code below


    -> Click Save

    HTML code:
    		<div class="section-content m-b50 ">
    			<div class="row">
    				<!-- COLUMNS 1 -->
    				<div class="col-md-4 col-sm-6 m-tb20 bg-white">
    					<div class="wt-icon-box-wraper center">
    						<div class="wt-icon-box-sm radius text-primary bdr-2 m-b20"><a class="icon-cell"><i class="fa fa-trophy"></i></a></div>
    						<div class="icon-content">
    							<h5 class="wt-tilte text-uppercase">Best Quality</h5>
    							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod [...]</p>
    							<button class="site-button skew-icon-btn m-r15" type="button">More <i class="fa fa-angle-double-right"></i></button>
    						</div>
    					</div>
    				</div>
    				<!-- COLUMNS 2 -->
    				<div class="col-md-4 col-sm-6 m-tb20 bg-white">
    					<div class="wt-icon-box-wraper center">
    						<div class="wt-icon-box-sm radius text-primary bdr-2 m-b20"><a class="icon-cell"><i class="fa fa-pencil"></i></a></div>
    						<div class="icon-content">
    							<h5 class="wt-tilte text-uppercase">Integrity</h5>
    							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod [...]</p>
    							<button class="site-button skew-icon-btn m-r15" type="button">More <i class="fa fa-angle-double-right"></i></button>
    						</div>
    					</div>
    				</div>
    				<!-- COLUMNS 3 -->
    				<div class="col-md-4 col-sm-6 m-tb20 bg-white">
    					<div class="wt-icon-box-wraper center">
    						<div class="wt-icon-box-sm radius text-primary bdr-2 m-b20"><a class="icon-cell"><i class="fa fa-flag-checkered"></i></a></div>
    						<div class="icon-content">
    							<h5 class="wt-tilte text-uppercase">Strategy</h5>
    							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod [...]</p>
    							<button class="site-button skew-icon-btn m-r15" type="button">More <i class="fa fa-angle-double-right"></i></button>
    						</div>
    					</div>
    				</div>
    				<!-- COLUMNS 4 -->
    				<div class="col-md-4 col-sm-6 m-tb20 bg-white">
    					<div class="wt-icon-box-wraper center">
    						<div class="wt-icon-box-sm radius text-primary bdr-2 m-b20"><a class="icon-cell"><i class="fa fa-hand-rock-o"></i></a></div>
    						<div class="icon-content">
    							<h5 class="wt-tilte text-uppercase">Safety</h5>
    							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod [...]</p>
    							<button class="site-button skew-icon-btn m-r15" type="button">More <i class="fa fa-angle-double-right"></i></button>
    						</div>
    					</div>
    				</div>
    				<!-- COLUMNS 5 -->
    				<div class="col-md-4 col-sm-6 m-tb20 bg-white">
    					<div class="wt-icon-box-wraper center">
    						<div class="wt-icon-box-sm radius text-primary bdr-2 m-b20"><a class="icon-cell"><i class="fa fa-recycle"></i></a></div>
    						<div class="icon-content">
    							<h5 class="wt-tilte text-uppercase">Community</h5>
    							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod [...]</p>
    							<button class="site-button skew-icon-btn m-r15" type="button">More <i class="fa fa-angle-double-right"></i></button>
    						</div>
    					</div>
    				</div>
    				<!-- COLUMNS 6 -->
    				<div class="col-md-4 col-sm-6 m-tb20 bg-white">
    					<div class="wt-icon-box-wraper center">
    						<div class="wt-icon-box-sm radius text-primary bdr-2 m-b20"><a class="icon-cell"><i class="fa fa-graduation-cap"></i></a></div>
    						<div class="icon-content">
    							<h5 class="wt-tilte text-uppercase">Sustainability</h5>
    							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod [...]</p>
    							<button class="site-button skew-icon-btn m-r15" type="button">More <i class="fa fa-angle-double-right"></i></button>
    						</div>
    					</div>
    				</div>
    				<!-- COLUMNS 7 -->
    				<div class="col-md-4 col-sm-6 m-tb20 bg-white">
    					<div class="wt-icon-box-wraper center">
    						<div class="wt-icon-box-sm radius text-primary bdr-2 m-b20"><a class="icon-cell"><i class="fa fa-trophy"></i></a></div>
    						<div class="icon-content">
    							<h5 class="wt-tilte text-uppercase">Best Quality</h5>
    							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod [...]</p>
    							<button class="site-button skew-icon-btn m-r15" type="button">More <i class="fa fa-angle-double-right"></i></button>
    						</div>
    					</div>
    				</div>
    				<!-- COLUMNS 8 -->
    				<div class="col-md-4 col-sm-6 m-tb20 bg-white">
    					<div class="wt-icon-box-wraper center">
    						<div class="wt-icon-box-sm radius text-primary bdr-2 m-b20"><a class="icon-cell"><i class="fa fa-pencil"></i></a></div>
    						<div class="icon-content">
    							<h5 class="wt-tilte text-uppercase">Integrity</h5>
    							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod [...]</p>
    							<button class="site-button skew-icon-btn m-r15" type="button">More <i class="fa fa-angle-double-right"></i></button>
    						</div>
    					</div>
    				</div>
    				<!-- COLUMNS 9 -->
    				<div class="col-md-4 col-sm-6 m-tb20 bg-white">
    					<div class="wt-icon-box-wraper center">
    						<div class="wt-icon-box-sm radius text-primary bdr-2 m-b20"><a class="icon-cell"><i class="fa fa-flag-checkered"></i></a></div>
    						<div class="icon-content">
    							<h5 class="wt-tilte text-uppercase">Strategy</h5>
    							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod [...]</p>
    							<button class="site-button skew-icon-btn m-r15" type="button">More <i class="fa fa-angle-double-right"></i></button>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
        

    Do the same with extant HTML element
Image Preview For Frontend below


Create Services 2 Page

  • Instroduction
  • Setting Up The Module for Services 2 Page

1. Create New Page

Click Components -> Blue PageBuilder -> Click new or edit your page

Image Preview For Admin below

2. Create New Menu:

Click Menus -> Main Menu -> Click new or edit your menu

Image Preview For Admin below

3.Create Menu Module

Step1: Click Extension -> Modules -> Click New - Choose module type Menu (or edit)

Step2: You enter a title, select Main Menu from menu manager, select the display position is menu

Step3: Click Menu Assignment tab and assign it to your menu

Image Preview below for create menu module in admin



4.Create layout: Services

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element -> Click to edit


  2. Click to change parameters:

    Title: ' Our Projects'

    Description: ' Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book has survived.'

    Icon Name: ''

    Section ID: ' '

    Section Class: 'section-full p-t80 p-b50'

    Container Class: 'container'

    Row Class: ' '

    Heading Style: ''

    Heading align: ''

    Background Image: ''

    Padding: ''

    -> Click Save


  3. Drag&Drop 1 HTML element into column above


    • The first, we need setup properties for columns



    • -> Click Save

      Do the same to setup properties for extant column

    • Then, Click to edit the HTML element


    Click Toggle, then input html code below


    -> Click Save

    HTML code:
    		<div class="row">
    			<!-- COLUMNS 1 -->
    			<div class="col-md-4 col-sm-4 p-tb15">
    				<div class="wt-box bg-white">
    					<div class="wt-media"><a href="#"><img src="images/our-work/pic1.jpg" alt="" /></a></div>
    					<div class="wt-info p-a30 bg-gray">
    						<h4 class="wt-title m-t0"><a href="#">Shopping Mall</a></h4>
    						<p>Lorem ipsum dolor consectetur adipiscing Fusce varius euismod lacus eget feugiat rorem ipsum dolor consectetur Fusce varius [...]</p>
    						<a class="site-button skew-icon-btn" href="#">More<i class="fa fa-angle-double-right"></i></a>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 2 -->
    			<div class="col-md-4 col-sm-4 p-tb15">
    				<div class="wt-box bg-white">
    					<div class="wt-media"><a href="#"><img src="images/our-work/pic2.jpg" alt="" /></a></div>
    					<div class="wt-info p-a30 bg-gray">
    						<h4 class="wt-title m-t0"><a href="#">Hospital Building</a></h4>
    						<p>Lorem ipsum dolor consectetur adipiscing Fusce varius euismod lacus eget feugiat rorem ipsum dolor consectetur Fusce varius [...]</p>
    						<a class="site-button skew-icon-btn" href="#">More<i class="fa fa-angle-double-right"></i></a>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 3 -->
    			<div class="col-md-4 col-sm-4 p-tb15">
    				<div class="wt-box bg-white">
    					<div class="wt-media"><a href="#"><img src="images/our-work/pic3.jpg" alt="" /></a></div>
    					<div class="wt-info p-a30 bg-gray">
    						<h4 class="wt-title m-t0"><a href="#">Garden House</a></h4>
    						<p>Lorem ipsum dolor consectetur adipiscing Fusce varius euismod lacus eget feugiat rorem ipsum dolor consectetur Fusce varius [...]</p>
    						<a class="site-button skew-icon-btn" href="#">More<i class="fa fa-angle-double-right"></i></a>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 4 -->
    			<div class="col-md-4 col-sm-4 p-tb15">
    				<div class="wt-box bg-white">
    					<div class="wt-media"><a href="#"><img src="images/our-work/pic4.jpg" alt="" /></a></div>
    					<div class="wt-info p-a30 bg-gray">
    						<h4 class="wt-title m-t0"><a href="#">Pyramid Design</a></h4>
    						<p>Lorem ipsum dolor consectetur adipiscing Fusce varius euismod lacus eget feugiat rorem ipsum dolor consectetur Fusce varius [...]</p>
    						<a class="site-button skew-icon-btn" href="#">More<i class="fa fa-angle-double-right"></i></a>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 5 -->
    			<div class="col-md-4 col-sm-4 p-tb15">
    				<div class="wt-box bg-white">
    					<div class="wt-media"><a href="#"><img src="images/our-work/pic5.jpg" alt="" /></a></div>
    					<div class="wt-info p-a30 bg-gray">
    						<h4 class="wt-title m-t0"><a href="#">Swimming Pool</a></h4>
    						<p>Lorem ipsum dolor consectetur adipiscing Fusce varius euismod lacus eget feugiat rorem ipsum dolor consectetur Fusce varius [...]</p>
    						<a class="site-button skew-icon-btn" href="#">More<i class="fa fa-angle-double-right"></i></a>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 6 -->
    			<div class="col-md-4 col-sm-4 p-tb15">
    				<div class="wt-box bg-white">
    					<div class="wt-media"><a href="#"><img src="images/our-work/pic6.jpg" alt="" /></a></div>
    					<div class="wt-info p-a30 bg-gray">
    						<h4 class="wt-title m-t0"><a href="#">Bridge</a></h4>
    						<p>Lorem ipsum dolor consectetur adipiscing Fusce varius euismod lacus eget feugiat rorem ipsum dolor consectetur Fusce varius [...]</p>
    						<a class="site-button skew-icon-btn" href="#">More<i class="fa fa-angle-double-right"></i></a>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 7 -->
    			<div class="col-md-4 col-sm-4 p-tb15">
    				<div class="wt-box bg-white">
    					<div class="wt-media"><a href="#"><img src="images/our-work/pic7.jpg" alt="" /></a></div>
    					<div class="wt-info p-a30 bg-gray">
    						<h4 class="wt-title m-t0"><a href="#">Highway</a></h4>
    						<p>Lorem ipsum dolor consectetur adipiscing Fusce varius euismod lacus eget feugiat rorem ipsum dolor consectetur Fusce varius [...]</p>
    						<a class="site-button skew-icon-btn" href="#">More<i class="fa fa-angle-double-right"></i></a>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 8 -->
    			<div class="col-md-4 col-sm-4 p-tb15">
    				<div class="wt-box bg-white">
    					<div class="wt-media"><a href="#"><img src="images/our-work/pic8.jpg" alt="" /></a></div>
    					<div class="wt-info p-a30 bg-gray">
    						<h4 class="wt-title m-t0"><a href="#">Dam</a></h4>
    						<p>Lorem ipsum dolor consectetur adipiscing Fusce varius euismod lacus eget feugiat rorem ipsum dolor consectetur Fusce varius [...]</p>
    						<a class="site-button skew-icon-btn " href="#">More<i class="fa fa-angle-double-right"></i></a>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 9 -->
    			<div class="col-md-4 col-sm-4 p-tb15">
    				<div class="wt-box bg-white">
    					<div class="wt-media"><a href="#"><img src="images/our-work/pic1.jpg" alt="" /></a></div>
    					<div class="wt-info p-a30 bg-gray">
    						<h4 class="wt-title m-t0"><a href="#">Electric</a></h4>
    						<p>Lorem ipsum dolor consectetur adipiscing Fusce varius euismod lacus eget feugiat rorem ipsum dolor consectetur Fusce varius [...]</p>
    						<a class="site-button skew-icon-btn" href="#">More<i class="fa fa-angle-double-right"></i></a>
    					</div>
    				</div>
    			</div>
    		</div>
        

    Do the same with extant HTML element
Image Preview For Frontend below


Create Career Page

  • Instroduction
  • Setting Up The Module for Career Page

1. Create New Page

Click Components -> Blue PageBuilder -> Click new or edit your page

Image Preview For Admin below

2. Create New Menu:

Click Menus -> Main Menu -> Click new or edit your menu

Image Preview For Admin below

3.Create Menu Module

Step1: Click Extension -> Modules -> Click New - Choose module type Menu (or edit)

Step2: You enter a title, select Main Menu from menu manager, select the display position is menu

Step3: Click Menu Assignment tab and assign it to your menu

Image Preview below for create menu module in admin



4.Create layout: DEFAULT ACCORDION SPACE

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element, divide into 2 columns -> Click to edit


  2. Click to change parameters:

    First Title: ''

    Short Description: ''

    Section ID: ''

    Section Class: 'section-full p-t80 p-b50'

    Container ID: ''

    Container Class: 'container'

    Heading Tag: ''

    Heading Style: ''

    Heading align: ''

    Background Image: ''

    Background Color: ''

    Padding: ''

    -> Click Save


  3. Drag&Drop 1 accordion&tab element into first column & 1 contact form into column above


    • The first, we need setup properties for columns




    • -> Click Save

  4. Then, Click to edit the HTML element

  5. Click Toggle, then input html code below


    -> Click Save

    HTML code:
    		<div class="acod-content p-tb15">Web design lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised sheets containing Lorem Ipsum passagese.</div>
        

  6. Finally, Click to edit the Contact element

  7. Change parameters:

    Title: 'Apply Now Your Suggetion'

    Phone: ''

    Subject: 'We are online from 09.00 - 18.00, Mountain Time'

    Thanks Message: 'Thanks for contacting us'

    Captcha secret: '6LcmtPsSAAAAAPyaElzphAhPVJXWwxQ2IazGzc9A'

    Captcha sitekey: '6LcmtPsSAAAAADtLfsf2lxbhsNoe8vWnlsdoyioh'

    Email: 'hello@domain.inc'

    Section class: 'wt-box border-2'

    Section id: ''

    Container class: ''

    Template: 'Default'


    -> Click Save
Image Preview For Frontend below


Create Team Page

  • Instroduction
  • Setting Up The Module for Team Page

1. Create New Page

Click Components -> Blue PageBuilder -> Click new or edit your page

Image Preview For Admin below

2. Create New Menu:

Click Menus -> Main Menu -> Click new or edit your menu

Image Preview For Admin below

3.Create Menu Module

Step1: Click Extension -> Modules -> Click New - Choose module type Menu (or edit)

Step2: You enter a title, select Main Menu from menu manager, select the display position is menu

Step3: Click Menu Assignment tab and assign it to your menu

Image Preview below for create menu module in admin



4.Create layout: OUR TEAM

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element -> Click to edit


  2. Click to change parameters:

    Title: 'Our Team'

    Description: ' Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.'

    Icon Name: ''

    Section ID: ' '

    Section Class: 'section-full p-t80 p-b50'

    Container Class: 'container'

    Row Class: ' '

    Heading Style: ''

    Heading align: ''

    Background Image: ''

    Padding: ''

    -> Click Save


  3. Drag&Drop 1 HTML element into column above


    • The first, we need setup properties for columns



    • -> Click Save

      Do the same to setup properties for extant column

    • Then, Click to edit the HTML element


    Click Toggle, then input html code below


    -> Click Save

    HTML code:
    		<div class="row">
    			<!-- COLUMNS 1 -->
    			<div class="col-md-3 col-sm-6 col-xs-6 col-xs-100pc m-t30">
    				<div class="wt-team-four">
    					<div class="wt-team-media"><a href="#"><img src="images/our-team/pic1.jpg" alt="" /></a></div>
    					<div class="wt-team-info">
    						<div class="wt-team-skew-block p-t10">
    							<div class="social-icons-outer bg-primary  p-a25">
    								<ul class="social-icons social-square social-dark white-border m-b0">
    									<li><a class="fa fa-facebook" href="#"></a></li>
    									<li><a class="fa fa-twitter" href="#"></a></li>
    									<li><a class="fa fa-linkedin" href="#"></a></li>
    									<li><a class="fa fa-rss" href="#"></a></li>
    								</ul>
    							</div>
    						</div>
    						<div class="p-a20">
    							<h4 class="wt-team-title text-uppercase"><a href="#">Richard Wagner</a></h4>
    							<p>Building Worker</p>
    						</div>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 2 -->
    			<div class="col-md-3 col-sm-6 col-xs-6 col-xs-100pc m-t30">
    				<div class="wt-team-four">
    					<div class="wt-team-media"><a href="#"><img src="images/our-team/pic2.jpg" alt="" /></a></div>
    					<div class="wt-team-info">
    						<div class="wt-team-skew-block p-t10">
    							<div class="social-icons-outer bg-primary  p-a25">
    								<ul class="social-icons social-square social-dark white-border m-b0">
    									<li><a class="fa fa-facebook" href="#"></a></li>
    									<li><a class="fa fa-twitter" href="#"></a></li>
    									<li><a class="fa fa-linkedin" href="#"></a></li>
    									<li><a class="fa fa-rss" href="#"></a></li>
    								</ul>
    							</div>
    						</div>
    						<div class="p-a20">
    							<h4 class="wt-team-title text-uppercase"><a href="#">Lisa Anderson</a></h4>
    							<p>Building Worker</p>
    						</div>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 3 -->
    			<div class="col-md-3 col-sm-6 col-xs-6 col-xs-100pc m-t30">
    				<div class="wt-team-four">
    					<div class="wt-team-media"><a href="#"><img src="images/our-team/pic3.jpg" alt="" /></a></div>
    					<div class="wt-team-info">
    						<div class="wt-team-skew-block p-t10">
    							<div class="social-icons-outer bg-primary  p-a25">
    								<ul class="social-icons social-square social-dark white-border m-b0">
    									<li><a class="fa fa-facebook" href="#"></a></li>
    									<li><a class="fa fa-twitter" href="#"></a></li>
    									<li><a class="fa fa-linkedin" href="#"></a></li>
    									<li><a class="fa fa-rss" href="#"></a></li>
    								</ul>
    							</div>
    						</div>
    						<div class="p-a20">
    							<h4 class="wt-team-title text-uppercase"><a href="#">Tommy Atkins</a></h4>
    							<p>Building Worker</p>
    						</div>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 4 -->
    			<div class="col-md-3 col-sm-6 col-xs-6 col-xs-100pc m-t30">
    				<div class="wt-team-four">
    					<div class="wt-team-media"><a href="#"><img src="images/our-team/pic4.jpg" alt="" /></a></div>
    					<div class="wt-team-info">
    						<div class="wt-team-skew-block p-t10">
    							<div class="social-icons-outer bg-primary  p-a25">
    								<ul class="social-icons social-square social-dark white-border m-b0">
    									<li><a class="fa fa-facebook" href="#"></a></li>
    									<li><a class="fa fa-twitter" href="#"></a></li>
    									<li><a class="fa fa-linkedin" href="#"></a></li>
    									<li><a class="fa fa-rss" href="#"></a></li>
    								</ul>
    							</div>
    						</div>
    						<div class="p-a20">
    							<h4 class="wt-team-title text-uppercase"><a href="#">John Halpern</a></h4>
    							<p>Building Worker</p>
    						</div>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 5 -->
    			<div class="col-md-3 col-sm-6 col-xs-6 col-xs-100pc m-t30">
    				<div class="wt-team-four">
    					<div class="wt-team-media"><a href="#"><img src="images/our-team/pic5.jpg" alt="" /></a></div>
    					<div class="wt-team-info">
    						<div class="wt-team-skew-block p-t10">
    							<div class="social-icons-outer bg-primary  p-a25">
    								<ul class="social-icons social-square social-dark white-border m-b0">
    									<li><a class="fa fa-facebook" href="#"></a></li>
    									<li><a class="fa fa-twitter" href="#"></a></li>
    									<li><a class="fa fa-linkedin" href="#"></a></li>
    									<li><a class="fa fa-rss" href="#"></a></li>
    								</ul>
    							</div>
    						</div>
    						<div class="p-a20">
    							<h4 class="wt-team-title text-uppercase"><a href="#">Nicolas Cage</a></h4>
    							<p>Building Worker</p>
    						</div>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 6 -->
    			<div class="col-md-3 col-sm-6 col-xs-6 col-xs-100pc m-t30">
    				<div class="wt-team-four">
    					<div class="wt-team-media"><a href="#"><img src="images/our-team/pic6.jpg" alt="" /></a></div>
    					<div class="wt-team-info">
    						<div class="wt-team-skew-block p-t10">
    							<div class="social-icons-outer bg-primary  p-a25">
    								<ul class="social-icons social-square social-dark white-border m-b0">
    									<li><a class="fa fa-facebook" href="#"></a></li>
    									<li><a class="fa fa-twitter" href="#"></a></li>
    									<li><a class="fa fa-linkedin" href="#"></a></li>
    									<li><a class="fa fa-rss" href="#"></a></li>
    								</ul>
    							</div>
    						</div>
    						<div class="p-a20">
    							<h4 class="wt-team-title text-uppercase"><a href="#">Charlie Sheen</a></h4>
    							<p>Building Worker</p>
    						</div>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 7 -->
    			<div class="col-md-3 col-sm-6 col-xs-6 col-xs-100pc m-t30">
    				<div class="wt-team-four">
    					<div class="wt-team-media"><a href="#"><img src="images/our-team/pic7.jpg" alt="" /></a></div>
    					<div class="wt-team-info">
    						<div class="wt-team-skew-block p-t10">
    							<div class="social-icons-outer bg-primary  p-a25">
    								<ul class="social-icons social-square social-dark white-border m-b0">
    									<li><a class="fa fa-facebook" href="#"></a></li>
    									<li><a class="fa fa-twitter" href="#"></a></li>
    									<li><a class="fa fa-linkedin" href="#"></a></li>
    									<li><a class="fa fa-rss" href="#"></a></li>
    								</ul>
    							</div>
    						</div>
    						<div class="p-a20">
    							<h4 class="wt-team-title text-uppercase"><a href="#">Johnny Depp</a></h4>
    							<p>Building Worker</p>
    						</div>
    					</div>
    				</div>
    			</div>
    			<!-- COLUMNS 8 -->
    			<div class="col-md-3 col-sm-6 col-xs-6 col-xs-100pc m-t30">
    				<div class="wt-team-four">
    					<div class="wt-team-media"><a href="#"><img src="images/our-team/pic8.jpg" alt="" /></a></div>
    					<div class="wt-team-info">
    						<div class="wt-team-skew-block p-t10">
    							<div class="social-icons-outer bg-primary  p-a25">
    								<ul class="social-icons social-square social-dark white-border m-b0">
    									<li><a class="fa fa-facebook" href="#"></a></li>
    									<li><a class="fa fa-twitter" href="#"></a></li>
    									<li><a class="fa fa-linkedin" href="#"></a></li>
    									<li><a class="fa fa-rss" href="#"></a></li>
    								</ul>
    							</div>
    						</div>
    						<div class="p-a20">
    							<h4 class="wt-team-title text-uppercase"><a href="#">Leonardo Diaprio</a></h4>
    							<p>Building Worker</p>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
        

    Do the same with extant HTML element
Image Preview For Frontend below


Create FAQ 1 Page

  • Instroduction
  • Setting Up The Module for FAQ 1 Page

1. Create New Page

Click Components -> Blue PageBuilder -> Click new or edit your page

Image Preview For Admin below

2. Create New Menu:

Click Menus -> Main Menu -> Click new or edit your menu

Image Preview For Admin below

3.Create Menu Module

Step1: Click Extension -> Modules -> Click New - Choose module type Menu (or edit)

Step2: You enter a title, select Main Menu from menu manager, select the display position is menu

Step3: Click Menu Assignment tab and assign it to your menu

Image Preview below for create menu module in admin



4.Create layout: Accordion

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element -> Click to edit


  2. Click to change parameters:

    First Title: ''

    Short Description: ''

    Section ID: ''

    Section Class: 'section-full p-t80'

    Container ID: ''

    Container Class: 'container'

    Heading Tag: ''

    Heading Style: ''

    Heading align: ''

    Background Image: ''

    Background Color: ''

    Padding: ''

    -> Click Save


  3. Drag&Drop 1 HTML element into the column above


    • The first, we need setup properties for columns



    • -> Click Save

  4. Then, Click to edit the HTML element

  5. Click Toggle, then input html code below


    -> Click Save

    HTML code:
    		<div class="acod-content p-tb15">Web design lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised sheets containing Lorem Ipsum passagese.web design lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised sheets containing Lorem Ipsum passagese. design lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised sheets containing Lorem Ipsum passagese.web design lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised sheets containing Lorem Ipsum passagese.</div>
        

Image Preview For Frontend below


5.Create layout: TOGGLES STYLE

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element -> Click to edit


  2. Click to change parameters:

    First Title: ''

    Short Description: ''

    Section ID: ''

    Section Class: 'section-full p-t80'

    Container ID: ''

    Container Class: 'container'

    Heading Tag: ''

    Heading Style: ''

    Heading align: ''

    Background Image: ''

    Background Color: ''

    Padding: ''

    -> Click Save


  3. Drag&Drop 1 HTML element into the column above


    • The first, we need setup properties for columns



    • -> Click Save

  4. Then, Click to edit the HTML element

  5. Click Toggle, then input html code below


    -> Click Save

    HTML code:
    		<div class="acod-content p-tb15">Web design lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised sheets containing Lorem Ipsum passagese.</div>
        

Image Preview For Frontend below


Create FAQ 2 Page

  • Instroduction
  • Setting Up The Module for FAQ 2 Page

1. Create New Page

Click Components -> Blue PageBuilder -> Click new or edit your page

Image Preview For Admin below

2. Create New Menu:

Click Menus -> Main Menu -> Click new or edit your menu

Image Preview For Admin below

3.Create Menu Module

Step1: Click Extension -> Modules -> Click New - Choose module type Menu (or edit)

Step2: You enter a title, select Main Menu from menu manager, select the display position is menu

Step3: Click Menu Assignment tab and assign it to your menu

Image Preview below for create menu module in admin



4.Create layout: Accordion

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element -> Click to edit


  2. Click to change parameters:

    First Title: ''

    Short Description: ''

    Section ID: ''

    Section Class: 'section-full p-t80 p-b50'

    Container ID: ''

    Container Class: 'container'

    Heading Tag: ''

    Heading Style: ''

    Heading align: ''

    Background Image: ''

    Background Color: ''

    Padding: ''

    -> Click Save


  3. Drag&Drop 1 HTML element into the column above


    • The first, we need setup properties for columns



    • -> Click Save

  4. Then, Click to edit the HTML element

  5. Click Toggle, then input html code below


    -> Click Save

    HTML code:
    		<div>Web design lorem ipsum dolor sit amet, adipiscing elit, sed diam nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Claritas est etiam processus. ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Claritas est etiam processus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu.</div>
        

Image Preview For Frontend below


Create 403 Page

  • Instroduction
  • Setting Up The Module for 403 Page

1. Create New Page

Click Components -> Blue PageBuilder -> Click new or edit your page

Image Preview For Admin below

2. Create New Menu:

Click Menus -> Main Menu -> Click new or edit your menu

Image Preview For Admin below

3.Create Menu Module

Step1: Click Extension -> Modules -> Click New - Choose module type Menu (or edit)

Step2: You enter a title, select Main Menu from menu manager, select the display position is menu

Step3: Click Menu Assignment tab and assign it to your menu

Image Preview below for create menu module in admin



4.Create layout: ERROR 403

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop HTML Element -> Click to edit


  2. Click Toggle, then input html code below


    -> Click Save

    HTML code:
    		<div class="section-full p-t80 p-b50">
    			<div class="container">
    				<div class="section-content">
    					<div class="row">
    						<div class="col-lg-8 col-md-6 col-sm-6">
    							<div class="page-notfound text-center">
    								<form method="post"><strong class="text-uppercase">Error</strong> <strong>4<i class="fa fa-frown-o text-primary"></i>3</strong> <span>Access Forbidden</span> <a class="site-button skew-icon-btn" href="#">GO TO HOME <i class="fa fa-angle-double-right"></i></a></form>
    							</div>
    						</div>
    						<div class="col-lg-4 col-md-6 col-sm-6">
    							<div class="page-notfound-left text-center bg-gray">
    								<div class="constrot-strip"> </div>
    								<span class="flaticon-plumber-working"></span>
    								<div class="constrot-strip"> </div>
    							</div>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
        

Image Preview For Frontend below


Create 404 Page

  • Instroduction
  • Setting Up The Module for 404 Page

1. Create New Page

Click Components -> Blue PageBuilder -> Click new or edit your page

Image Preview For Admin below

2. Create New Menu:

Click Menus -> Main Menu -> Click new or edit your menu

Image Preview For Admin below

3.Create Menu Module

Step1: Click Extension -> Modules -> Click New - Choose module type Menu (or edit)

Step2: You enter a title, select Main Menu from menu manager, select the display position is menu

Step3: Click Menu Assignment tab and assign it to your menu

Image Preview below for create menu module in admin



4.Create layout: ERROR 404

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop HTML Element -> Click to edit


  2. Click Toggle, then input html code below


    -> Click Save

    HTML code:
    		<div class="section-full p-t80 p-b50">
    			<div class="container">
    				<div class="section-content">
    					<div class="row">
    						<div class="col-lg-8 col-md-6 col-sm-6">
    							<div class="page-notfound text-center">
    								<form method="post"><strong class="text-uppercase">Error</strong> <strong>4<i class="fa fa-frown-o text-primary"></i>4</strong> <span>Page not found</span> <a class="site-button skew-icon-btn" href="#">GO TO HOME <i class="fa fa-angle-double-right"></i></a></form>
    							</div>
    						</div>
    						<div class="col-lg-4 col-md-6 col-sm-6">
    							<div class="page-notfound-left text-center bg-gray">
    								<div class="constrot-strip"> </div>
    								<span class="flaticon-plumber-working"></span>
    								<div class="constrot-strip"> </div>
    							</div>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
        

Image Preview For Frontend below


Create 500 Page

  • Instroduction
  • Setting Up The Module for 500 Page

1. Create New Page

Click Components -> Blue PageBuilder -> Click new or edit your page

Image Preview For Admin below

2. Create New Menu:

Click Menus -> Main Menu -> Click new or edit your menu

Image Preview For Admin below

3.Create Menu Module

Step1: Click Extension -> Modules -> Click New - Choose module type Menu (or edit)

Step2: You enter a title, select Main Menu from menu manager, select the display position is menu

Step3: Click Menu Assignment tab and assign it to your menu

Image Preview below for create menu module in admin



4.Create layout: ERROR 500

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop HTML Element -> Click to edit


  2. Click Toggle, then input html code below


    -> Click Save

    HTML code:
    		<div class="section-full p-t80 p-b50">
    			<div class="container">
    				<div class="section-content">
    					<div class="row">
    						<div class="col-lg-8 col-md-6 col-sm-6">
    							<div class="page-notfound text-center">
    								<form method="post"><strong class="text-uppercase">Error</strong> <strong>5<i class="fa fa-frown-o text-primary"></i><i class="fa fa-frown-o text-primary"></i></strong> <span>Internal Error</span> <a class="site-button skew-icon-btn" href="#">GO TO HOME <i class="fa fa-angle-double-right"></i></a></form>
    							</div>
    						</div>
    						<div class="col-lg-4 col-md-6 col-sm-6">
    							<div class="page-notfound-left text-center bg-gray">
    								<div class="constrot-strip"> </div>
    								<span class="flaticon-plumber-working"></span>
    								<div class="constrot-strip"> </div>
    							</div>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
        

Image Preview For Frontend below


Create Contact Us 1 Page

  • Instroduction
  • Setting Up The Module for Contact Us 1 Page

1. Create New Page

Click Components -> Blue PageBuilder -> Click new or edit your page

Image Preview For Admin below

2. Create New Menu:

Click Menus -> Main Menu -> Click new or edit your menu

Image Preview For Admin below

3.Create Menu Module

Step1: Click Extension -> Modules -> Click New - Choose module type Menu (or edit)

Step2: You enter a title, select Main Menu from menu manager, select the display position is menu

Step3: Click Menu Assignment tab and assign it to your menu

Image Preview below for create menu module in admin



4.Create layout:GMAP

Step 1: Click Extension -> Modules -> Click New - Choose module type Custom Html (or edit)

Click Menu Assignment tab to assign it to your menu

Click Toggle, then input html code below

-> Click Save

HTML code:
		<div>
			<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2603.7797986268397!2d-123.1260999847824!3d49.26161948018453!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x548673c28db3e7ed%3A0xf09486e6e83bb967!2zQuG7h25oIHZp4buHbiDEkGEga2hvYSBWYW5jb3V2ZXI!5e0!3m2!1svi!2s!4v1582107891121!5m2!1svi!2s" width="100%" height="850" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
		</div>
    


Step 5: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element, divide into 2 columns -> Click to edit


  2. Click to change parameters:

    Title: ' '

    Short Description: ''

    Section ID: ''

    Section Class: 'wt-contact-wrap row equal-wraper'

    Container Class: ' '

    Row Class: ' '

    Heading Tag: ''

    Heading Style: ' '

    Heading align: ''

    Background Image: ''

    Background Color: ''

    Padding: ''

    -> Click Save


  3. Drag&Drop 1 Modules element into first column and 1 Html element & 1 contact form into column above


    • The first, we need setup properties for columns



    • -> Click Save

      Do the same to setup properties for extant columns

  4. Then, Click to edit Module element

  5. Choose module Gmap embed, ID = 110


    -> Click Save
  6. Finally, Click to edit the Contact element

  7. Change parameters:

    Title: 'Contact Form '

    Phone: ''

    Subject: 'We are online from 09.00 - 18.00, Mountain Time'

    Thanks Message: 'Thanks for contacting us'

    Captcha secret: '6LcmtPsSAAAAAPyaElzphAhPVJXWwxQ2IazGzc9A'

    Captcha sitekey: '6LcmtPsSAAAAADtLfsf2lxbhsNoe8vWnlsdoyioh'

    Email: 'hello@domain.inc'

    Section class: 'wt-box border-2'

    Section id: ''

    Container class: ''

    Template: 'Default'


    -> Click Save

Image Preview For Frontend below


Create Contact Us 2 Page

  • Instroduction
  • Setting Up The Module for Contact Us 2 Page

1. Create New Page

Click Components -> Blue PageBuilder -> Click new or edit your page

Image Preview For Admin below

2. Create New Menu:

Click Menus -> Main Menu -> Click new or edit your menu

Image Preview For Admin below

3.Create Menu Module

Step1: Click Extension -> Modules -> Click New - Choose module type Menu (or edit)

Step2: You enter a title, select Main Menu from menu manager, select the display position is menu

Step3: Click Menu Assignment tab and assign it to your menu

Image Preview below for create menu module in admin



4.Create layout: Send Us A Message

Step1: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element, divide into 2 columns -> Click to edit


  2. Click to change parameters:

    First Title: ''

    Short Description: ''

    Section ID: ''

    Section Class: 'section-full p-t80 p-b50'

    Container ID: ''

    Container Class: 'container-fluid'

    Row Class: ''

    Heading Tag: ''

    Heading Style: ''

    Heading align: ''

    Background Image: ''

    Background Color: ''

    Padding: ''

    -> Click Save


  3. Drag&Drop 1 HTML element into the first column and Drag&Drop 1 Contact element into the column above


    • The first, we need setup properties for columns



    • -> Click Save

      Do the same to setup properties for extant columns

  4. Finally, Click to edit the Contact element

  5. Change parameters:

    Title: ''

    Phone: ''

    Subject: 'We are online from 09.00 - 18.00, Mountain Time'

    Thanks Message: 'Thanks for contacting us'

    Captcha secret: '6LcmtPsSAAAAAPyaElzphAhPVJXWwxQ2IazGzc9A'

    Captcha sitekey: '6LcmtPsSAAAAADtLfsf2lxbhsNoe8vWnlsdoyioh'

    Email: 'hello@domain.inc'

    Section class: ''

    Section id: ''

    Container class: ''

    Template: 'Default'


    -> Click Save
  6. Then, Click to edit the HTML element

  7. Click Toggle, then input html code below


    -> Click Save

    HTML code:
    		<h4 class="text-uppercase">Contact Detail</h4>
    		<div class="wt-separator-outer m-b30">
    			<div class="wt-separator style-square"><span class="separator-left bg-primary"></span> <span class="separator-right bg-primary"></span></div>
    		</div>
    		<div class="row">
    			<div class="col-md-6 col-sm-6 m-b30">
    				<div class="wt-icon-box-wraper bx-style-1 p-a15 left clearfix">
    					<div class="wt-icon-box-sm bg-primary corner"><span class="icon-cell text-white"> <i class="fa fa-phone"></i> </span></div>
    					<div class="icon-content">
    						<h5 class="wt-tilte text-uppercase">Phone</h5>
    						<p>+91 564 548 4854</p>
    					</div>
    				</div>
    			</div>
    			<div class="col-md-6 col-sm-6 m-b30">
    				<div class="wt-icon-box-wraper bx-style-1 p-a15 left clearfix">
    					<div class="wt-icon-box-sm bg-primary corner"><span class="icon-cell text-white"> <i class="fa fa-envelope"></i> </span></div>
    					<div class="icon-content">
    						<h5 class="wt-tilte text-uppercase">Email</h5>
    						<p>demo@gmail.com</p>
    					</div>
    				</div>
    			</div>
    			<div class="col-md-6 col-sm-6 m-b30">
    				<div class="wt-icon-box-wraper bx-style-1 p-a15 left clearfix">
    					<div class="wt-icon-box-sm bg-primary corner"><span class="icon-cell text-white"> <i class="fa fa-fax"></i> </span></div>
    					<div class="icon-content">
    						<h5 class="wt-tilte text-uppercase">Fax</h5>
    						<p>+91 564 548 4854</p>
    					</div>
    				</div>
    			</div>
    			<div class="col-md-6 col-sm-6 m-b30">
    				<div class="wt-icon-box-wraper bx-style-1 p-a15 left clearfix">
    					<div class="wt-icon-box-sm bg-primary corner"><span class="icon-cell text-white"> <i class="fa fa-map-marker"></i> </span></div>
    					<div class="icon-content">
    						<h5 class="wt-tilte text-uppercase">Address</h5>
    						<p>252 W 43rd St New York, NY</p>
    					</div>
    				</div>
    			</div>
    		</div>
        

Image Preview For Frontend below


5.Create layout:GMAP

Step 1: Click Extension -> Modules -> Click New - Choose module type Custom Html (or edit)

Click Menu Assignment tab to assign it to your menu

Click Toggle, then input html code below

-> Click Save

HTML code:
		<div>
			<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2603.7797986268397!2d-123.1260999847824!3d49.26161948018453!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x548673c28db3e7ed%3A0xf09486e6e83bb967!2zQuG7h25oIHZp4buHbiDEkGEga2hvYSBWYW5jb3V2ZXI!5e0!3m2!1svi!2s!4v1582107891121!5m2!1svi!2s" width="100%" height="500" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
		</div>
    


Step 5: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element, divide into 2 columns -> Click to edit


  2. Click to change parameters:

    Title: ' '

    Short Description: ''

    Section ID: ''

    Section Class: 'section-full '

    Container Class: ' '

    Row Class: ' '

    Heading Tag: ''

    Heading Style: ' '

    Heading align: ''

    Background Image: ''

    Background Color: ''

    Padding: ''

    -> Click Save


  3. Drag&Drop 1 Modules element into column above


    • The first, we need setup properties for columns



    • -> Click Save

      Do the same to setup properties for extant columns



  4. Then, Click to edit Module element

  5. Choose module Gmap embed, ID = 111


    -> Click Save
Image Preview For Frontend below


Create Contact Us 3 Page

  • Instroduction
  • Setting Up The Module for Contact Us 3 Page

1. Create New Page

Click Components -> Blue PageBuilder -> Click new or edit your page

Image Preview For Admin below

2. Create New Menu:

Click Menus -> Main Menu -> Click new or edit your menu

Image Preview For Admin below

3.Create Menu Module

Step1: Click Extension -> Modules -> Click New - Choose module type Menu (or edit)

Step2: You enter a title, select Main Menu from menu manager, select the display position is menu

Step3: Click Menu Assignment tab and assign it to your menu

Image Preview below for create menu module in admin



4.Create layout: CONTACT FORM + GMAP

Step 1: Click Extension -> Modules -> Click New - Choose module type Custom Html (or edit)

Click Menu Assignment tab to assign it to your menu

Click Toggle, then input html code below

-> Click Save

HTML code:
		<div>
			<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2603.7797986268397!2d-123.1260999847824!3d49.26161948018453!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x548673c28db3e7ed%3A0xf09486e6e83bb967!2zQuG7h25oIHZp4buHbiDEkGEga2hvYSBWYW5jb3V2ZXI!5e0!3m2!1svi!2s!4v1582107891121!5m2!1svi!2s" width="100%" height="400" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
		</div>
    


Step 5: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element, divide into 2 columns -> Click to edit


  2. Click to change parameters:

    Title: ' '

    Short Description: ''

    Section ID: ''

    Section Class: 'section-full'

    Container Class: ' '

    Row Class: ' '

    Heading Tag: ''

    Heading Style: ' '

    Heading align: ''

    Background Image: ''

    Background Color: ''

    Padding: ''

    -> Click Save


  3. Drag&Drop 1 Modules element into first column & 1 Contact element into column above


    • The first, we need setup properties for columns



    • -> Click Save

      Do the same to setup properties for extant columns


  4. Finally, Click to edit the Contact element

  5. Change parameters:

    Title: ' Contact Form'

    Title: ' '

    Phone: ''

    Subject: 'We are online from 09.00 - 18.00, Mountain Time'

    Thanks Message: 'Thanks for contacting us'

    Captcha secret: '6LcmtPsSAAAAAPyaElzphAhPVJXWwxQ2IazGzc9A'

    Captcha sitekey: '6LcmtPsSAAAAADtLfsf2lxbhsNoe8vWnlsdoyioh'

    Email: 'hello@domain.inc'

    Section class: ' '

    Section id: ''

    Container class: ''

    Template: 'Default'


    -> Click Save

  6. Then, Click to edit Module element

  7. Choose module Gmap embed, ID = 111


    -> Click Save
Image Preview For Frontend below


Create Portfolio 1 Page

  • Instroduction
  • Setting Up The Module for Portfolio 1 Page

1. Create New Page

Click Components -> Blue PageBuilder -> Click new or edit your page

Image Preview For Admin below

2. Create New Menu:

Click Menus -> Main Menu -> Click new or edit your menu

Image Preview For Admin below

3.Create Menu Module

Step1: Click Extension -> Modules -> Click New - Choose module type Menu (or edit)

Step2: You enter a title, select Main Menu from menu manager, select the display position is menu

Step3: Click Menu Assignment tab and assign it to your menu

Image Preview below for create menu module in admin



4.Create layout: LATEST PROJECTS

Step1: Click Components -> K2 -> Extra Field Groups -> Click new or edit Extra Field Group

Step2: Click Components -> K2 -> Extra Fields -> Click new or edit Extra Field , are belong extra field group

Step3: Click Components -> K2 -> Categories -> Click new or edit categorie Portfolio, associated extra field group

Step4: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element -> Click to edit


  2. Click to change parameters:

    Title: ' '

    Under Title: ''

    Icon Name: ''

    Section ID: ''

    Section Class: 'section-full p-t80 p-b50'

    Container Class: ' container-fluid'

    Heading Style: ''

    Heading align: ''

    Background Image: ''

    Padding: ''

    -> Click Save


  3. Drag&Drop 1 Portfolio element into the column above


    • The first, we need setup properties for columns



    • -> Click Save

    • Then, Click to edit Portfolio element


    • Click to change parameters:

      Category: Select category'Portfolio from com_k2'

      Title: ' '

      Description: ''

      ID: ''

      Menu ID: '138'

      Class: ''

      Count: '9'

      Image Size: 'M'

      Columns: '3 columns'

      Template: 'Choose template Default'

      -> Click Save



Image Preview For Frontend below

Create Portfolio 2 Page

  • Instroduction
  • Setting Up The Module for Portfolio 2 Page

1. Create New Page

Click Components -> Blue PageBuilder -> Click new or edit your page

Image Preview For Admin below

2. Create New Menu:

Click Menus -> Main Menu -> Click new or edit your menu

Image Preview For Admin below

3.Create Menu Module

Step1: Click Extension -> Modules -> Click New - Choose module type Menu (or edit)

Step2: You enter a title, select Main Menu from menu manager, select the display position is menu

Step3: Click Menu Assignment tab and assign it to your menu

Image Preview below for create menu module in admin



4.Create layout: LATEST PROJECTS

Step1: Click Components -> K2 -> Extra Field Groups -> Click new or edit Extra Field Group

Step2: Click Components -> K2 -> Extra Fields -> Click new or edit Extra Field , are belong extra field group

Step3: Click Components -> K2 -> Categories -> Click new or edit categorie Portfolio, associated extra field group

Step4: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element -> Click to edit


  2. Click to change parameters:

    Title: ' '

    Under Title: ''

    Icon Name: ''

    Section ID: ''

    Section Class: 'section-full p-t80 p-b50'

    Container Class: ' container '

    Heading Style: ''

    Heading align: ''

    Background Image: ''

    Padding: ''

    -> Click Save


  3. Drag&Drop 1 Portfolio element into the column above


    • The first, we need setup properties for columns



    • -> Click Save

    • Then, Click to edit Portfolio element


    • Click to change parameters:

      Category: Select category'Portfolio from com_k2'

      Title: ' '

      Description: ''

      ID: ''

      Menu ID: '138'

      Class: ''

      Count: '9'

      Image Size: 'M'

      Columns: '3 columns'

      Template: 'Choose template Default1'

      -> Click Save



Image Preview For Frontend below

Create Portfolio 3 Page

  • Instroduction
  • Setting Up The Module for Portfolio 3 Page

1. Create New Page

Click Components -> Blue PageBuilder -> Click new or edit your page

Image Preview For Admin below

2. Create New Menu:

Click Menus -> Main Menu -> Click new or edit your menu

Image Preview For Admin below

3.Create Menu Module

Step1: Click Extension -> Modules -> Click New - Choose module type Menu (or edit)

Step2: You enter a title, select Main Menu from menu manager, select the display position is menu

Step3: Click Menu Assignment tab and assign it to your menu

Image Preview below for create menu module in admin



4.Create layout: LATEST PROJECTS

Step1: Click Components -> K2 -> Extra Field Groups -> Click new or edit Extra Field Group

Step2: Click Components -> K2 -> Extra Fields -> Click new or edit Extra Field , are belong extra field group

Step3: Click Components -> K2 -> Categories -> Click new or edit categorie Portfolio, associated extra field group

Step4: Click Components -> Blue PageBuilder -> Click new or edit your page

  1. Drag&Drop Columns Element -> Click to edit


  2. Click to change parameters:

    Title: ' '

    Under Title: ''

    Icon Name: ''

    Section ID: ''

    Section Class: 'section-full p-t80 p-b50'

    Container Class: ' '

    Heading Style: ''

    Heading align: ''

    Background Image: ''

    Padding: ''

    -> Click Save


  3. Drag&Drop 1 Portfolio element into the column above


    • The first, we need setup properties for columns



    • -> Click Save

    • Then, Click to edit Portfolio element


    • Click to change parameters:

      Category: Select category'Portfolio from com_k2'

      Title: ' '

      Description: ''

      ID: ''

      Menu ID: '138'

      Class: ''

      Count: '9'

      Image Size: 'M'

      Columns: '3 columns'

      Template: 'Choose template Default2'

      -> Click Save



Image Preview For Frontend below

Setup Blog List Page

  • Instroduction
  • Setting Up The layout for Blog List Page

1.Setup Blog List Page

Step1: Click Components -> K2 -> Extra Field Groups -> Click new or edit Extra Field Group

Step2: Click Components -> K2 -> Extra Fields -> Click new or edit Extra Field , belong Extra Field Group

Step3: Click Components -> K2 -> Categories -> Click new or edit category Blog List, they are Associated extra field group














Step3: Click Menus -> Main Menu -> Click new or edit your menu

Image Preview For Frontend below

2.Sidebar

  1. SEARCH
  2. Click Extension -> Modules -> Click new module type K2 Tools - or edit

    Select module functionality Search Box and select the display position for it is right

    Click Menu Assignment tab to assign it to your menu

    Image Preview For Admin below



  3. RECENT POSTS
  4. Step1: Click Components -> K2 -> Extra Field Groups -> Click new or edit Extra Field Group

    Step2: Click Components -> K2 -> Extra Fields -> Click new or edit Extra Field , belong Extra Field Group

    Step3: Click Components -> K2 -> Categories -> Click new or edit category Blog Gird, they are Associated extra field group

    Step3: Click Extension -> Modules -> Click new module type K2 Content - or edit

    Select category Blog Gird from com_k2 and select the display position for it is right

    CLick Menu Assignment tab to assign it to your menu

    Image Preview For Admin below



  5. CATEGORIES
  6. Click Extension -> Modules -> Click new module type K2 Tools - or edit

    Select module functionality Categories List and select the display position for it is right

    Click Menu Assignment tab to assign it to your menu

    Image Preview For Admin below



  7. Tags
  8. Click Extension -> Modules -> Click new module type K2 Tools - or edit

    Select module functionality is Tag Cloud and select the display position for it is right

    Click Menu Assignment tab to assign it to your menu

    Image Preview For Admin below



1. Create Module (mod_custom): Footer Contact

Step1: Click Extension -> Modules -> Click new Module type Custom HTML - or edit

Step2: You enter title, select the display position for module is footer-top

Step3: Click Menu Assignment tab and assign it to your menu

Step4: Click Toggle, then Input HTML code below into the box:

HTML code:
		<div class="call-to-action-wrap call-to-action-skew" style="background-image: url('images/background/bg-4.png'); background-repeat: repeat; background-color: #273447;">
			<div class="container">
				<div class="row">
					<div class="col-md-8 col-sm-8">
						<div class="call-to-action-left p-tb20 p-r50">
							<h4 class="text-uppercase m-b10">We are ready to build your dream tell us more about your project</h4>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse viverra mauris eget tortor.</p>
						</div>
					</div>
					<div class="col-md-3">
						<div class="call-to-action-right p-tb30"><a class="site-button skew-icon-btn m-r15 text-uppercase" style="font-weight: 600;" href="contact-1.html"> Contact us <i class="fa fa-angle-double-right"></i> </a></div>
					</div>
				</div>
			</div>
		</div>
    

Image Preview For Frontend below

2. Create Module (mod_custom): ABOUT COMPANY

Step1: Click Extension -> Modules -> Click new Module type Custom HTML - or edit

Step2: You enter title, select the display position for module is footer-about-company

Step3: Click Menu Assignment tab and assign it to your menu

Step4: Click Toggle, then Input HTML code below into the box:

HTML code:
		<div class="logo-footer clearfix p-b15"><a href="index.html"><img src="images/logo.png" alt="" width="230" height="67" /></a></div>
		<p>construct ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore agna aliquam erat . wisi enim ad minim veniam, quis tation. sit amet, consec tetuer. ipsum dolor sit amet, consectetuer adipiscing.ipsum dolor sit [...]</p>
    

Image Preview For Frontend below

3. Create Module (mod_K2 Content): Recent Posts

Step1: Click Components -> K2 -> Extra Field Groups -> Click new or edit Extra Field Group

Step2: Click Components -> K2 -> Extra Fields -> Click new or edit Extra Field , belong Extra Field Group Slider

Step3: Click Components -> K2 -> Categories -> Click new or edit category Blog Gird, they are Associated extra field group

Click Extension -> Modules -> Click new module type K2 Content - or edit

Select module functionality is and select the display position for it is footer-recent-post

Click Menu Assignment tab to assign it to your menu


Image Preview For Admin below


4. Create Module (mod_custom): USEFUL LINKS

Step1: Click Extension -> Modules -> Click new Module type Custom HTML - or edit

Step2: You enter title, select the display position for module is footer-useful-link

Step3: Click Menu Assignment tab and assign it to your menu

Step4: Click Toggle, then Input HTML code below into the box:

HTML code:
		<ul>
			<li><a href="#">About</a></li>
			<li><a href="#">FAQ</a></li>
			<li><a href="#">Career</a></li>
			<li><a href="#">Our Team</a></li>
			<li><a href="#">Services</a></li>
			<li><a href="#">Gallery</a></li>
		</ul>
    

Image Preview For Frontend below

5. Create Module (mod_K2 Content): NEWSLETTER

Click Extension -> Modules -> Click new module type acy Mailing - or edit

Select the display position for it is footer-subcribe

Click Menu Assignment tab to assign it to your menu


Image Preview For Admin below


6. Create Module (mod_custom): Footer Social

Step1: Click Extension -> Modules -> Click new Module type Custom HTML - or edit

Step2: You enter title, select the display position for module is footer-social

Step3: Click Menu Assignment tab and assign it to your menu

Step4: Click Toggle, then Input HTML code below into the box:

HTML code:
		<ul class="social-icons social-square social-darkest">
			<li><a class="fa fa-facebook" href="#"></a></li>
			<li><a class="fa fa-twitter" href="#"></a></li>
			<li><a class="fa fa-linkedin" href="#"></a></li>
			<li><a class="fa fa-rss" href="#"></a></li>
			<li><a class="fa fa-youtube" href="#"></a></li>
			<li><a class="fa fa-instagram" href="#"></a></li>
		</ul>
    

Image Preview For Frontend below

7. Create Module (mod_custom): Address Phone Email

Step1: Click Extension -> Modules -> Click new Module type Custom HTML - or edit

Step2: You enter title, select the display position for module is footer-social

Step3: Click Menu Assignment tab and assign it to your menu

Step4: Click Toggle, then Input HTML code below into the box:

HTML code:
		<div class="row">
			<div class="col-md-3 col-sm-6  p-tb20">
				<div class="wt-icon-box-wraper left  bdr-1 bdr-gray-dark p-tb15 p-lr10 clearfix">
					<div class="icon-md text-primary"><span class="flaticon-placeholder"></span></div>
					<div class="icon-content">
						<h5 class="wt-tilte text-uppercase m-b0">Address</h5>
						<p>No.123 Chalingt Gates, Supper market New York</p>
					</div>
				</div>
			</div>
			<div class="col-md-3 col-sm-6  p-tb20 ">
				<div class="wt-icon-box-wraper left  bdr-1 bdr-gray-dark p-tb15 p-lr10 clearfix ">
					<div class="icon-md text-primary"><span class="flaticon-smartphone"></span></div>
					<div class="icon-content">
						<h5 class="wt-tilte text-uppercase m-b0">Phone</h5>
						<p class="m-b0">+41 555 888 9585</p>
						<p>+41 555 888 9585</p>
					</div>
				</div>
			</div>
			<div class="col-md-3 col-sm-6  p-tb20">
				<div class="wt-icon-box-wraper left  bdr-1 bdr-gray-dark p-tb15 p-lr10 clearfix">
					<div class="icon-md text-primary"><span class="flaticon-fax"></span></div>
					<div class="icon-content">
						<h5 class="wt-tilte text-uppercase m-b0">Fax</h5>
						<p class="m-b0">FAX: (123) 123-4567</p>
						<p>FAX: (123) 123-4567</p>
					</div>
				</div>
			</div>
			<div class="col-md-3 col-sm-6 p-tb20">
				<div class="wt-icon-box-wraper left  bdr-1 bdr-gray-dark p-tb15 p-lr10 clearfix">
					<div class="icon-md text-primary"><span class="flaticon-email"></span></div>
					<div class="icon-content">
						<h5 class="wt-tilte text-uppercase m-b0">Email</h5>
						<p class="m-b0">info@demo.com</p>
						<p>info@demo1234.com</p>
					</div>
				</div>
			</div>
		</div>
    

Image Preview For Frontend below

8. Create Module (mod_custom): Footer Copyright

Step1: Click Extension -> Modules -> Click new Module type Custom HTML - or edit

Step2: You enter title, select the display position for module is footer-Copyright

Step3: Click Menu Assignment tab and assign it to your menu

Step4: Click Toggle, then Input HTML code below into the box:

HTML code:
		<p><span class="copyrights-text">© 2020 Your Company. All Rights Reserved. Designed By Constrot.</span></p>
    

Image Preview For Frontend below

9. Create Module (mod_custom): Footer Menu

Step1: Click Extension -> Modules -> Click new Module type Custom HTML - or edit

Step2: You enter title, select the display position for module is footer-menu

Step3: Click Menu Assignment tab and assign it to your menu

Step4: Click Toggle, then Input HTML code below into the box:

HTML code:
		<ul class="copyrights-nav pull-right">
			<li><a href="#">Terms & Condition</a></li>
			<li><a href="#">Privacy Policy</a></li>
			<li><a href="#">Contact Us</a></li>
		</ul>
    

Image Preview For Frontend below

;