Hammer

Construction, Building Business, Renovation, Industry Joomla Template


You can choose to install the template with the full demo package or only the template itself. Note that we Highly Recommend the Full Demo Quickstart installation rather than only the template itself.

1. Install full Joomla 3 demo package:

 

2. Template installation:
If you already have an installed Joomla use the first method and if you want to make a fresh install of Joomla + the template only use the installation method.

Template installation only:
1. Open your site administration (www.yoursite.com/administrator)
2. Go to "Extensions" > "Extension Manager"
3. Click "Browse" in the field called "Upload Package File" > locate the template file in your computer and select it > Click "Upload & Install"
4. Other modules - the complete list of modules can be found below in the documentation.
Installing only the template you'll need to install all the extensions by downloading them from the creator's sites - please check the credits to get extension links.

 

All your customization (custom code) should be placed in your "Custom Style Sheet" file. This is the custom.css file. By default, the custom.css file does not exists, so you will need to create it. You need to create this file in templates/TEMPLATE-NAME/css/custom.css.

Customizations from the template settings page:

First you need to go to Joomla administration > Extensions > Template manager > and choose the template you're using (it will be called TEMPLATE-NAME - Default). You will find 9 tabs as follows:

  1. Basic (basic template options)
  2. Presets (define main color theme)
  3. Layout (template layout and module positions)
  4. Menu (menu options)
  5. Typography (define heading, menu and content fonts)
  6. Custom Code (add custom css or js)
  7. Advanced (cache and LESS settings)
  8. Blog (comments, social share and post format)
  9. Assignment (assign the template to specific menus)

1. Basic Tab:

Header:

Boxed Layout: choose between boxed or full-width layout.

Logo:

Body Background Image:

Footer:

Social Icons:

Contact Information:

Coming Soon:

2. Presets:

By default you have 4 preset styles with color schemes included. By default you can choose 3 main colors:

Please note that all the colors will work if the LESS option from the Advanced tab is enabled! This way the LESS files will automatically generate your CSS files with those colors.

3. Layout:

By default in the Layout tab you will find the preset modle positions and template layout. You can either use the created module positions or create your own module positions.

Customizing module position or entire row from the template settings:

Customize entire row settings: click on the Settings button on the right of the row you want to customize and change the options depending to your needs. Per example, you can change the row background, text color, add background image, or disable it on desktop, tablet or mobile views.

Same applies for a module position: by clicking on the 3 cogs icon you will load the settings applied to this particular module position.

4. Menu:

5. Typography:

From this tab you can choose different fonts for different headings, menu, content or add a custom font which can be assigned to specific classes.

6. Custom Code: here you can add custom lines of code if needed.

7. Advanced:

Cache Settings:

Compile LESS to CSS: with this option enalbed the CSS files will be autogenerated from the LESS files.

8. Blog:

9. Assignment: assign any of your menus to the template.

This option is used mostly when you want to display different preset on a different menu.

If you want to have a different color theme on any of your menus you need to:

Module Positions:

To add or rearrange modules you need to go to:

Site admin > Extensions > Template manager;
click on the template name;
click on the Layout tab;
You can drag and drop the modules or content or create new positions/ rows.

Module variations:

The template comes with 6 different module title variations (Module Class Suffix):
default (leave the module class suffix empty), title1, title2, title3, title4, title5, title6


Layout Builder:

You can open the layout builder from Joomla admin > Extensions > Template manager > Template-Name > click on the Layout tab. You can create new rows or change the columns layout of a current position. You can change both columns settings and column/ position settings.

To create new module positions you need to:

1. Open templates/Template-Name/templateDetails.xml and locate the following lines:

<positions>
        <position>title</position>
        <position>logo</position>

2. Copy one line - per example <position>title</position> and paste it below the other one, then rename it (in this example the new position will be called "newposition"):

<positions>
        <position>title</position>
        <position>newposition</position>
        <position>logo</position>

- save and close the file

3. Open the Layout tab in the template settings > choose wherever to place the new position (the position should first have a row and then click on the cogs icon) > when you click on the cogs icon you'll see the drop down list Module Position > choose the "newposition" from the list and save.

4. Go to templates/Template-Name/less/theme.less and add the new css style for the new position. The class of the new position should be:

#sp-newposition


5. Finally create a module and publish it in the new position.

Updating the template is really easy. Here are the steps you need to perform:

  1. Download the new version of the template from the "Download" section on our website
  2. Go to "Extensions" -> "Manage" and click on the "Browse" button
  3. Select the template file you downloaded in step 1. It will usually be called "TEMPLATE-NAME-template-only.zip"
  4. Click on the "Upload & Install" button.
IMPORTANT: If you have customized some of the original LESS or CSS files of the template, after the update you might lose those changes. We recommend to create a custom.css file in the folder templates/TEMPLATE-NAME/css/ where you can add all your customizations, without worring that you might lose them.

We also recommend to make a full site backup, after major customizations or after adding big amount of content.

The template comes with 6 preset module variations (Module Class Suffixes):

title1 - with this class the module will be clean and plain with only a custom image element below the title, the heading and element are centered;

title2 - same as title1, but the element is replaced with transparent gray 5px line with rounded corners;

title3 - same as title1 and title2, but with colored element below the title, which will change depending to your main color;

title4 - same as title2, but the text is aligned to the left and the element is with your main color;

title5 - the whole module content will be surrounded by a 5px solid border in the main color of the template;

title6 - the whole module is with white text color and the background is dark (the color is coming from the main text color).

Hammer comes with 6 preset module variations (Module Class Suffixes):

title1 - with this class the module will be clean and plain with only a colored line above the title, the heading and element are centered;

title2 - again a plain module style with colored dot on the left side of the module title; the color is same as the default main theme color;

title3 - this is the same module title as title1, except the element and the text are aligned left;

title4 - same module title as title3, but with gray element positioned below the module title;

title5 - this is a colored module with white dot on the left side of the module title; the module is with rounder borders;

title6 - dark gray module (same color as the main text color) with colored title and a ruler background image on the right side.

The default Joomla editor (TinyMCE) is known for stripping the code in articles or Custom HTML modules, or any other modules that use an editor.
We recommend to use JCE as a text editor or disable the text editor at all.

1. JCE - download and install JCE from https://www.joomlacontenteditor.net/

You can turn it on by going to Site Admin > Global Configuration > Default Editor * > select "Editor - JCE" and save.
Thus when you open an article or a module you will see the "Toggle Editor" button, from which you can switch between HTML editor and Text editor.

EXAMPLE:
Let's say you open a module and this module is "Social Icons". When you open it with TinyMCE you won't see any code and you might think that the icons are there - if you save the code will get stripped.
Now if you have enabled JCE as a default editor and open the module, again you won't see the icons, BUT if you click on the "Toggle Editor" button the code will be displayed. You can edit it and save. Thus you will not lose any code neither from article or module.

2. No Editor - You can turn off the editor by going to Site Admin > Global Configuration > Default Editor * > select "Editor - None" and save.
Thus when you open any article or module you will see the original code and when saving no code will get stripped.

Thin Stroke Icons 7 set by pixeden are integrated in the template. A series of iOS 7 inspired vector icons in a custom @font-face icon font that can be styled dynamically using CSS. Those retina ready icons have a very modern style that will beautifully complement any project.

Demo of icons you can find here:

http://themes-pixeden.com/font-demos/7-stroke/index.html

Documentation for usage of these icons you can find here:

http://themes-pixeden.com/font-demos/7-stroke/documentation.html#
 

Example usage:

<span class="pe-7s-map-marker"></span>
<i class="pe-7s-home"></i>

Place vector icons anywhere using an icon font.

UI Kit component is using the fantastic Font Awesome icon font, a project by Dave Gandy. Altogether Font Awesome provides more than 300 symbols and glyphs for web-related actions. Icon fonts are great, because they enable you to easily change color, size and more via CSS. They are scalable vector graphics, which means that they look great on high-resolution displays.

Usage

To apply this component, add any .uk-icon-* class to an <i> or <span> element. Et voilà, you have a vector icon, which inherits size and color just like your text does.

More about Font Awesome icons you can find here: http://getuikit.com/docs/icon.html

Buttons - Default Size:

<a class="uk-button" href="#">Default Button</a>
<a class="uk-button uk-button-primary" href="#">Primary Button</a>
<a class="uk-button uk-button-primary2" href="#">Primary Button 2</a>
<a class="uk-button uk-button-success" href="#">Success Button</a>
<a class="uk-button uk-button-danger" href="#">Danger Button</a>


Buttons - Mini Size:

<a class="uk-button uk-button-mini" href="#">Default Button</a>
<a class="uk-button uk-button-primary uk-button-mini" href="#">Primary Button</a>
<a class="uk-button uk-button-primary2 uk-button-mini" href="#">Primary Button 2</a>
<a class="uk-button uk-button-success uk-button-mini" href="#">Success Button</a>
<a class="uk-button uk-button-danger uk-button-mini" href="#">Danger Button</a>

Buttons Large size:

<a class="uk-button uk-button-large" href="#">Default Button</a>
<a class="uk-button uk-button-primary uk-button-large" href="#">Primary Button</a>
<a class="uk-button uk-button-primary2 uk-button-large" href="#">Primary Button 2</a>
<a class="uk-button uk-button-success uk-button-large" href="#">Success Button</a>
<a class="uk-button uk-button-danger uk-button-large" href="#">Danger Button</a>

Full width button:

<button class="uk-button uk-button-large uk-width-1-1" type="button">Button</button>


Full width primary button:

<button class="uk-button uk-button-primary uk-button-large uk-width-1-1" type="button">Button</button>

1. Home Page Slider
Unite Revolution Slider 2
Module Position: slide
Module Class Suffix: none
Show Title: Hide


2. Main Services

RokSprocket > Strips Layout > Default theme
Strip HTML Tags: No
Content: Simple
Preview per page: 3
Items per row: 3
Module Position: top3
Module Class Suffix: title1
Show Title: Show


3. Construction Process

Custom HTML Module
Module Position: top7
Module Class Suffix: title1
Show Title: Show

<div class="uk-grid uk-grid-divider-2">

<div class="uk-width-medium-1-5" data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:300}">
  <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
    <span class="hi-icon pe-7s-exapnd2"></span><h4>Pre-Construction</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

<div class="uk-width-medium-1-5" data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:500}">
  <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
    <span class="hi-icon pe-7s-vector"></span><h4>Design-Build</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

<div class="uk-width-medium-1-5" data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:700}">
  <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
    <span class="hi-icon pe-7s-note2"></span><h4>Plan/ Spec</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

<div class="uk-width-medium-1-5" data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:900}">
  <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
    <span class="hi-icon pe-7s-calculator"></span><h4>Cost Estimating</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

<div class="uk-width-medium-1-5" data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:1100}">
  <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
    <span class="hi-icon pe-7s-home"></span><h4>Project Building</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

</div>

4. Renovation Masters

Custom HTML Module
Module Position: top11
Module Class Suffix: title1
Show Title: Show


<div class="uk-position-relative uk-display-inline-block" data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:600}">
<img alt="Renovation Masters" src="images/Demo/elements/interior.png" style="margin-bottom: -57px;">

<div data-uk-dropdown="{mode:'click', pos:'bottom-left'}" class="uk-position-absolute uk-hidden-small uk-display-inline-block" aria-haspopup="true" aria-expanded="false" style="left:60%;top:30%; ">
<button class="uk-button uk-button-primary"><i class="uk-icon-caret-down"></i></button>
<div class="uk-dropdown" style="font-size: 14px;">
<div class="uk-margin uk-text-left">
<h4>Interior Door</h4>
<ul class="spot">
<li>Door Thickness: 4.5cm</li>
<li>Core Type: Solid</li>
<li>Color: White</li>
</ul>      
</div>
</div>
</div>

<div data-uk-dropdown="{mode:'click', pos:'right-center'}" class="uk-position-absolute uk-hidden-small uk-display-inline-block" aria-haspopup="true" aria-expanded="false" style="left:25%;top:75%; ">
<button class="uk-button uk-button-primary"><i class="uk-icon-caret-down"></i></button>
<div class="uk-dropdown" style="font-size: 14px;">
<div class="uk-margin uk-text-left">
<h4>Laminated wooden flooring</h4>
<ul class="spot">
<li>Color: Amber Oak</li>
<li>Thickness: 12mm </li>
</ul>      
</div>
</div>
</div>

<div data-uk-dropdown="{mode:'click', pos:'left-center'}" class=" uk-position-absolute uk-hidden-small uk-display-inline-block" aria-haspopup="true" aria-expanded="false" style="left:80%;top:60%; ">
<button class="uk-button uk-button-primary"><i class="uk-icon-caret-down"></i></button>
<div class="uk-dropdown" style="font-size: 14px;">
<div class="uk-margin uk-text-left">
<h4>Custom Furniture design</h4>
<ul class="spot">
<li>TV Cabin: 1pcs</li>
<li>Shelves: 12 pcs</li>
<li>Wardrobe: 1 pcs</li>
</ul>      
</div>
</div>
</div>

</div>

<div class="uk-visible-small uk-margin-large-top">
<div class="uk-margin uk-text-left">
<h4>Interior Door</h4>
<ul class="spot">
<li>Door Thickness: 4.5cm</li>
<li>Core Type: Solid</li>
<li>Color: White</li>
</ul>      
</div>

<div class="uk-margin uk-text-left">
<h4>Laminated wooden flooring</h4>
<ul class="spot">
<li>Color: Amber Oak</li>
<li>Thickness: 12mm </li>
</ul>      
</div>

<div class="uk-margin uk-text-left">
<h4>Custom Furniture design</h4>
<ul class="spot">
<li>TV Cabin: 1pcs</li>
<li>Shelves: 12 pcs</li>
<li>Wardrobe: 1 pcs</li>
</ul>      
</div>

</div>

5. Portfolio: Recent Projects

RokSprocket > Mosaic Layout > Gallery theme
Strip HTML Tags: No
Content: Simple
Columns: 3
Blocks per view: 6
Module Position: user1
Module Class Suffix: title1
Show Title: Show


6. Limitless Ideas (parallax)

Custom HTML Module
Module Position: top11
Module Class Suffix: none
Show Title: Hide

<div style="height: 100%; background-image: url(images/Demo/elements/parallax1.jpg); background-color: #ffb400; background-repeat: repeat-y;"  data-uk-parallax="{bg: -300}" class="uk-flex uk-flex-center uk-flex-middle">
<div style="padding: 70px;" class="uk-width-large-1-1 uk-width-medium-1-1 uk-container-center">

<div class="uk-grid uk-flex-middle">

<div class="uk-width-medium-1-2" data-uk-scrollspy="{cls:'uk-animation-slide-left', delay:300}">
<img style="float: right;" src="images/Demo/elements/bricks.png" alt="Limitless Ideas">
</div>

<div class="uk-width-medium-1-2" data-uk-scrollspy="{cls:'uk-animation-slide-right', delay:600}">
<h4><strong class="uk-text-contrast">We have thousands ideas for your project</strong></h4>
<h1 class="uk-hidden-small"style="font-size: 72px; margin-top: -10px;">Limitless</h1>
<h1 class="uk-text-contrast big-shadow uk-hidden-small" style="font-size: 115px; margin-top: -30px;">IDEAS</h1>
<h1 class="uk-visible-small"style="font-size: 52px; margin-top: -10px;">Limitless</h1>
<h1 class="uk-text-contrast big-shadow uk-visible-small" style="font-size: 75px; margin-top: -30px;">IDEAS</h1>
<a class="uk-button uk-button-success uk-button-small" href="index.php/more/pages/get-a-quote">Get A Quote Now</a>
</div>

</div>

</div>
</div>

7. ARTICLE: Our Builders


<div class="sp-module title1"><h3 class="sp-module-title">Our Builders</h3></div>

<div class="uk-grid">

<div class="uk-width-medium-1-4">

<div class="uk-overlay uk-align-center">
<img class="uk-align-center" title="Our Team" src="images/Demo/elements/team1.jpg" alt="Our Team" />
<div class="uk-overlay-area">
<div class="uk-overlay-area-content">
<h4>Stephen Morph</h4>
<p>Builder</p>
<p>
<a href="#" class="uk-icon-button uk-icon-linkedin"></a>
<a href="#" class="uk-icon-button uk-icon-facebook"></a>
<a href="#" class="uk-icon-button uk-icon-twitter"></a>
<a href="#" class="uk-icon-button uk-icon-youtube"></a>
</p>
</div>
</div>
</div>

</div>

<div class="uk-width-medium-1-4">

<div class="uk-overlay uk-align-center">
<img class="uk-align-center" title="Our Team" src="images/Demo/elements/team3.jpg" alt="Our Team" />
<div class="uk-overlay-area">
<div class="uk-overlay-area-content">
<h4>Jonnah Harris</h4>
<p>Builder</p>
<p>
<a href="#" class="uk-icon-button uk-icon-linkedin"></a>
<a href="#" class="uk-icon-button uk-icon-facebook"></a>
<a href="#" class="uk-icon-button uk-icon-twitter"></a>
<a href="#" class="uk-icon-button uk-icon-youtube"></a>
</p>
</div>
</div>
</div>

</div>

<div class="uk-width-medium-1-4">

<div class="uk-overlay uk-align-center">
<img class="uk-align-center" title="Our Team" src="images/Demo/elements/team4.jpg" alt="Our Team" />
<div class="uk-overlay-area">
<div class="uk-overlay-area-content">
<h4>Miranda Peterson</h4>
<p>Builder</p>
<p>
<a href="#" class="uk-icon-button uk-icon-linkedin"></a>
<a href="#" class="uk-icon-button uk-icon-facebook"></a>
<a href="#" class="uk-icon-button uk-icon-twitter"></a>
<a href="#" class="uk-icon-button uk-icon-youtube"></a>
</p>
</div>
</div>
</div>

</div>

<div class="uk-width-medium-1-4">

<div class="uk-overlay uk-align-center">
<img class="uk-align-center" title="Our Team" src="images/Demo/elements/team2.jpg" alt="Our Team" />
<div class="uk-overlay-area">
<div class="uk-overlay-area-content">
<h4>Sebastian Gray</h4>
<p>Builder</p>
<p>
<a href="#" class="uk-icon-button uk-icon-linkedin"></a>
<a href="#" class="uk-icon-button uk-icon-facebook"></a>
<a href="#" class="uk-icon-button uk-icon-twitter"></a>
<a href="#" class="uk-icon-button uk-icon-youtube"></a>
</p>
</div>
</div>
</div>

</div>

</div>

<div class="uk-grid">
<div class="uk-width-medium-1-2">
<p class="sp-dropcap">Hammer Construction LTD started in the late 90's. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum.</p>
</div>
<div class="uk-width-medium-1-2">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident
</div>
</div>

8. Latest Construction News

RokSprocket > Strips Layout > Separated theme
Strip HTML Tags: No
Content: Simple
Previews per page: 3
Items per row: 3
Module Position: position1
Module Class Suffix: title1
Show Title: Show


9. Some Of Our Best Clients

Custom HTML Module
Module Position: position5
Module Class Suffix: title1
Show Title: Show

<br>
<div class="uk-grid" data-uk-scrollspy="{cls:'uk-animation-scale-up', delay:600}">

<div class="uk-width-medium-1-5">
  <img class="uk-align-center" alt="Our Clients" src="images/Demo/elements/logo1-2.png">
</div>

<div class="uk-width-medium-1-5">
  <img class="uk-align-center" alt="Our Clients" src="images/Demo/elements/logo2-2.png">
</div>

<div class="uk-width-medium-1-5">
  <img class="uk-align-center" alt="Our Clients" src="images/Demo/elements/logo3-2.png">
</div>

<div class="uk-width-medium-1-5">
  <img class="uk-align-center" alt="Our Clients" src="images/Demo/elements/logo4-2.png">
</div>

<div class="uk-width-medium-1-5">
  <img class="uk-align-center" alt="Our Clients" src="images/Demo/elements/logo5-2.png">
</div>

</div>

10. What Our Customers Say

Title: Testimonials Parallax FULL
Custom HTML Module
Module Position: parallax2
Module Class Suffix: none
Show Title: Hide
We have loaded a RokSprocket Quotes module in this module.

<div style="height: 100%; background-image: url(images/Demo/elements/parallax2.jpg); background-color: #36383b; background-repeat: repeat-y;"  data-uk-parallax="{bg: -300}" class="uk-text-contrast uk-flex uk-flex-centrer">

<div class="uk-width-large-1-2 uk-width-medium-1-1 uk-container-center" style="padding:50px;">

<div class="sp-module title1"><h3 class="sp-module-title">What Our Customers Say</h3></div>
[module-124]

</div>


</div>

11. Get A Coupon

Custom HTML Module
Module Position: bottom5
Module Class Suffix: none
Show Title: Hide

<div class="uk-block uk-block-primary uk-contrast" data-uk-scrollspy="{cls:'uk-animation-scale-down', delay:600}">

<div class="uk-container">

<div data-uk-grid-margin="" class="uk-grid uk-grid-match">

<div class="uk-width-medium-1-2 uk-text-center uk-flex uk-flex-middle">
<div class="uk-panel">
<div>GET UP TO</div>
<h1 class="big-shadow" style="font-size: 100px;">30% OFF </h1>
<div>+ FREE ESTIMATE!</div>
</div>
</div>

<div class="uk-width-medium-1-2 uk-flex uk-flex-middle">
<div class="uk-panel">
<img class="uk-align-center" alt="Get A Coupon" src="images/Demo/elements/coupon.jpg">
</div>
</div>

</div>
</div>
</div>

1. Meet Our Team

Custom HTML Module
Module Position: top3
Module Class Suffix: title3
Show Title: Show

<p><img width="1170" height="300" src="images/Demo/elements/ourteam.jpg" alt="Meet Our Team"></p>
<br>
<div class="uk-grid uk-margin-bottom">

<div class="uk-width-medium-1-2">
<p class="sp-dropcap">Hammer Construction LTD started in the late 90's. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum.</p>
</div>

<div class="uk-width-medium-1-2">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident
</div>

</div>

2. Why To Choose Us

Custom HTML Module
Module Position: top7
Module Class Suffix: title3
Show Title: Show

<div class="uk-grid uk-text-center">

<div class="uk-width-medium-1-3">
  <div class="uk-panel uk-panel-box uk-panel-box-secondary uk-panel-hover">
    <i class="pe-7s-portfolio pe-4x pe-va"></i>
    <h4>Professionals</h4>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
  </div>
</div>

<div class="uk-width-medium-1-3">
  <div class="uk-panel uk-panel-box uk-panel-box-secondary uk-panel-hover">
    <i class="pe-7s-vector pe-4x pe-va"></i>
    <h4>Design Skills</h4>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
  </div>
</div>

<div class="uk-width-medium-1-3">
  <div class="uk-panel uk-panel-box uk-panel-box-secondary uk-panel-hover">
    <i class="pe-7s-rocket pe-4x pe-va"></i>
    <h4>Fast Delivery</h4>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
  </div>
</div>

</div>

<div class="uk-grid uk-text-center">

<div class="uk-width-medium-1-3">
  <div class="uk-panel uk-panel-box uk-panel-box-secondary uk-panel-hover">
    <i class="pe-7s-magic-wand pe-4x pe-va"></i>
    <h4>Unique Ideas</h4>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
  </div>
</div>

<div class="uk-width-medium-1-3">
  <div class="uk-panel uk-panel-box uk-panel-box-secondary uk-panel-hover">
    <i class="pe-7s-tools pe-4x pe-va"></i>
    <h4>Quality Materials</h4>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
  </div>
</div>

<div class="uk-width-medium-1-3">
  <div class="uk-panel uk-panel-box uk-panel-box-secondary uk-panel-hover">
    <i class="pe-7s-ribbon pe-4x pe-va"></i>
    <h4>Warranty</h4>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
  </div>
</div>

</div>

3. Our Latest Projects - it is an ARTICLE, named About Us

We have loaded a RokSprocket Strips Layout module in order to display the news in the right column.

<div class="sp-module title3"><h3 class="sp-module-title">Our Latest Projects</h3></div>

<div class="uk-grid">

<div class="uk-width-medium-2-3">
  [module-113]
</div>

<div class="uk-width-medium-1-3">
  <img class="uk-align-center" alt="About Us" src="images/Demo/elements/helmet.jpg">
</div>

</div>

4. Testimonials

RokSprocket > Quotes Layout
Strip HTML Tags: No
Content: Simple
Preview per page: 2
Items per row: 2
Module Position: position1
Module Class Suffix: title1
Show Title: Show


5. Our Clients

Custom HTML Module
Module Position: bottom1
Module Class Suffix: title1
Show Title: Show

<div class="uk-grid">

<div class="uk-width-medium-1-5">
  <img class="uk-align-center" alt="Our Clients" src="images/Demo/elements/logo1.png">
</div>

<div class="uk-width-medium-1-5">
  <img class="uk-align-center" alt="Our Clients" src="images/Demo/elements/logo2.png">
</div>

<div class="uk-width-medium-1-5">
  <img class="uk-align-center" alt="Our Clients" src="images/Demo/elements/logo3.png">
</div>

<div class="uk-width-medium-1-5">
  <img class="uk-align-center" alt="Our Clients" src="images/Demo/elements/logo4.png">
</div>

<div class="uk-width-medium-1-5">
  <img class="uk-align-center" alt="Our Clients" src="images/Demo/elements/logo5.png">
</div>

</div>

1. Our Services
Custom HTML Module
Module Position: top3
Module Class Suffix: none
Show Title: Hide

<div class="uk-grid uk-grid-divider">

<div class="uk-width-medium-1-3">
<h4><i class="pe-7s-airplay pe-2x pe-va"></i>&nbsp;&nbsp;&nbsp;<strong>Roofing</strong></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<div class="uk-width-medium-1-3">
<h4><i class="pe-7s-paint-bucket pe-2x pe-va"></i>&nbsp;&nbsp;&nbsp;<strong>Plumbing</strong></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<div class="uk-width-medium-1-3">
<h4><i class="pe-7s-tools pe-2x pe-va"></i>&nbsp;&nbsp;&nbsp;<strong>Renovation</strong></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

</div>

<hr class="uk-grid-divider">

<div class="uk-grid uk-grid-divider">

<div class="uk-width-medium-1-3">
<h4><i class="pe-7s-sun pe-2x pe-va"></i>&nbsp;&nbsp;&nbsp;<strong>Air Conditioning</strong></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<div class="uk-width-medium-1-3">
<h4><i class="pe-7s-leaf pe-2x pe-va"></i>&nbsp;&nbsp;&nbsp;<strong>Landscaping</strong></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<div class="uk-width-medium-1-3">
<h4><i class="pe-7s-paint pe-2x pe-va"></i>&nbsp;&nbsp;&nbsp;<strong>Painting</strong></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

</div>

2. Project Management

Custom HTML Module
Module Position: top7
Module Class Suffix: title1
Show Title: Show

<div class="uk-grid">

<div class="uk-width-medium-1-2">
<div style="min-height: 480px; background-image: url(images/Demo/elements/parallax1.png); background-color: transparent; background-repeat: no-repeat;" data-uk-parallax="{bg: -300}" class="uk-text-contrast uk-text-center uk-flex uk-flex-center uk-flex-middle">
<img style="margin: 0 auto; display: block;" title="Project Management" src="images/Demo/elements/truck.png" alt="Project Management">
</div>
</div>

<div class="uk-width-medium-1-2">
<h4><strong>01.</strong> Planing</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" class="uk-button uk-button-primary uk-button-mini">Read more</a>
<hr>
<h4><strong>02.</strong> Coordination</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" class="uk-button uk-button-primary uk-button-mini">Read more</a>
<hr>
<h4><strong>03.</strong> Project Control</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" class="uk-button uk-button-primary uk-button-mini">Read more</a>
</div>

</div>

3. Pricing - it is an ARTICLE, named Services

We have loaded a RokSprocket Tables Layout module in order to display the pricing tables.

<div class="sp-module title1"><h3 class="sp-module-title">Pricing</h3></div>
[module-93]


4. Special Offer

Custom HTML Module
Module Position: position1
Module Class Suffix: title1
Show Title: Show

<div class="uk-grid">

<div class="uk-width-medium-1-5">
  <img class="uk-align-center" alt="Our Clients" src="images/Demo/elements/logo1.png">
</div>

<div class="uk-width-medium-1-5">
  <img class="uk-align-center" alt="Our Clients" src="images/Demo/elements/logo2.png">
</div>

<div class="uk-width-medium-1-5">
  <img class="uk-align-center" alt="Our Clients" src="images/Demo/elements/logo3.png">
</div>

<div class="uk-width-medium-1-5">
  <img class="uk-align-center" alt="Our Clients" src="images/Demo/elements/logo4.png">
</div>

<div class="uk-width-medium-1-5">
  <img class="uk-align-center" alt="Our Clients" src="images/Demo/elements/logo5.png">
</div>

</div>

5. Call To Action | Inner Pages

Custom HTML Module
Module Position: parallax2
Module Class Suffix: none
Show Title: Hide

<div style="min-height: 160px; background-color: #292c2f; background-repeat: no-repeat;" data-uk-parallax="{bg: -300}" class="uk-text-contrast uk-flex uk-flex-center">

<div style="padding:60px 15px;" class="container1170">

<div class="inverted">

</div>

<div class="uk-grid">
<div class="uk-width-medium-3-4">
  <h3 style="margin-top:15px;">Do you want the best in the business to work for you?</h3>
</div>
<div class="uk-width-medium-1-4 uk-text-right inverted">
<h3 style="margin-top:5px;"><a href="index.php/more/pages/get-a-quote" class="uk-button">Get A Quote Now</a></h3>
</div>
</div>

</div>

</div>

1. Luxury Residential Building

Custom HTML Module
Module Position: top3
Module Class Suffix: title3
Show Title: Show

<div data-uk-grid-margin="" class="uk-grid">

<div class="uk-width-medium-2-4">
  <a title="Luxury Residential Building" data-uk-lightbox="{group:'group1'}" href="images/Demo/elements/villa1.jpg">
    <img width="1150" height="500" alt="Luxury Residential Building" src="images/Demo/elements/villa1.jpg">
  </a>
</div>

<div class="uk-width-medium-1-4">
  <a title="Luxury Residential Building" data-uk-lightbox="{group:'group1'}" href="images/Demo/elements/villa2.jpg">
    <img width="1150" height="500" alt="Luxury Residential Building" src="images/Demo/elements/villa2.jpg">
  </a>
  <hr>
  <a title="Luxury Residential Building" data-uk-lightbox="{group:'group1'}" href="images/Demo/elements/villa3.jpg">
    <img width="1150" height="500" alt="Luxury Residential Building" src="images/Demo/elements/villa3.jpg">
  </a>
  <hr>
  <a title="Luxury Residential Building" data-uk-lightbox="{group:'group1'}" href="images/Demo/elements/villa4.jpg">
    <img width="1150" height="500" alt="Luxury Residential Building" src="images/Demo/elements/villa4.jpg">
  </a>
</div>

<div class="uk-width-medium-1-4">
  <strong>New building with unique location overlooking the iconic Golden Gate Bridge, San Francisco.</strong><hr>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
  <p>
  <a href="#" class="uk-icon-button uk-icon-facebook"></a>
  <a href="#" class="uk-icon-button uk-icon-twitter"></a>
  <a href="#" class="uk-icon-button uk-icon-youtube"></a>
  <a href="#" class="uk-icon-button uk-icon-linkedin"></a>
  </p>
</div>

</div>
<br>

2. More Details

Custom HTML Module
Module Position: top7
Module Class Suffix: title3
Show Title: Show

<div data-uk-scrollspy="{cls:'uk-animation-scale-up'}" class="uk-grid">

<div class="uk-width-medium-1-2">
  <p><strong>How we did it :)</strong></p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p class="blockquote-pc">The road to success is always under construction.</p>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>

<div class="uk-width-medium-1-2">
<iframe src="https://player.vimeo.com/video/97714812?loop=1&color=ffb400" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

</div>

3. Check our recent projects - it is an ARTICLE, named Projects

We have loaded a RokSprocket Mosaic Layout module in order to display the portfolio.

<div class="sp-module title3"><h3 class="sp-module-title">Check our recent projects</h3></div>
<hr>
[module-121]


4. Call To Action | Inner Pages

Custom HTML Module
Module Position: parallax2
Module Class Suffix: none
Show Title: Hide

<div style="min-height: 160px; background-color: #292c2f; background-repeat: no-repeat;" data-uk-parallax="{bg: -300}" class="uk-text-contrast uk-flex uk-flex-center">

<div style="padding:60px 15px;" class="container1170">

<div class="inverted">

</div>

<div class="uk-grid">
<div class="uk-width-medium-3-4">
  <h3 style="margin-top:15px;">Do you want the best in the business to work for you?</h3>
</div>
<div class="uk-width-medium-1-4 uk-text-right inverted">
<h3 style="margin-top:5px;"><a href="index.php/more/pages/get-a-quote" class="uk-button">Get A Quote Now</a></h3>
</div>
</div>

</div>

</div>

The Web is full of all kinds of different Joomla extensions. Throughout the years we had the chance to work with many extensions from many different providers which helped us to filter the best of best ones. The extensions that we use in our templates have the cleanest code, the best functionality and they've been very well supported by their developers.

Almost all of the extensions that we use are FREE! If there is a premium (paid) extensions, we usually try to include a FREE alternative for it.

Below you will find the Download link and the Documentation for each extension (Component, Module, Plugin) that we have used in this template.