Documentation

Installation

The most important decision to make before proceeding with your installation is whether you should install the template manually, or if you can use the Quickstart package, which will install everything for you.

Which installation method you should use depends on the current status of your site. Also, before installing either the template manually or the Quickstart Package, please make sure you meet the Joomla! and the template requirements.

Requirements

  • Apache 2.2+ or Microsoft IIS 7 (Apache strongly recommended)
  • PHP 5.4+ (PHP 5.5+ Recommended)
  • MySQL 5.1+
  • Joomla 3.4+

Also, please have a look at the Joomla requirements. Basically, they are the same as the above, but you will find some additional details there.

Quickstart Installation

The Quickstart Package consist of a full installation of Joomla! that installs Joomla itself, the template, the extensions, the demo content and the database data to match our demo layout. Have in mind that as this is a full Joomla! installation it may only be used on a clean server; the package cannot be installed in an existing Joomla installation. It can only be used when you start a new project/website.

99% of the customers purchase Joomla Templates because of the Quickstart Package. They just install it, replace the demo content with theirs and the site is ready. Installing the Quickstart Package will save you a lot of work.

Installing the Quickstart Package is a fairly simple process. Generally, a Quickstart install will consist of these small steps:

  1. Ensure you have installed an FTP client and prepared a database for your server, or have the credentials for an existing database.
  2. Download and extract the Quickstart Package.
  3. FTP the extracted Quickstart contents to your preferred install location.
  4. Open your browser to the install location on your server to begin the Joomla! installation process, entering the database credentials where required.

Once this final step is complete you will have a fresh install of Joomla!, along with the template and all the settings and content needed to match the demo, including sample article content. However, the images from the demo will NOT be included, as they are licensed via a third party. Instead, blank placeholder images will be included so that you can customize the content easily with your own images. For some users, the above steps are all that is needed for a successful installation of the Quickstart Package, but for those who are less experienced with this process, we recorded the following video.

Manual Installation

Manual Installation refers to installing the template on your Joomla! powered website. This means you already have a website with content items, modules, extensions, so you just decided you want to improve the design of your website.

Manual installation steps:

  1. Download the template-only file, which will be called tpl_it_TEMPLATE-NAME.zip.
  2. Go to Joomla administration > Extensions > Manage > click on the Browse button > locate the template file > install the template.
  3. Finally go to Extensions > Template manager > and set the template as default.
If you install just the template over an existing Joomla website you will need to install and configure all extensions that are installed in the demo site and configure them absolutely the same way as they are configured in the demo site in order for your website to look like the demo site. For this purpose you will still need to install the Quickstart Package on another location, see how everything is configured there and just duplicate it on your installation.

Customization

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 root/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 it_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:

  • Sticky Header - enable fixed/sticky header
  • Favicon - change the default Joomla favicon (you can also replace the favicon.ico file in root/templates/TEMPLATE_NAME/images/)

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

Logo:

  • Logo Type - choose between image logo or text logo
  • Module position - from the drop down menu you can choose in which position to load the logo
  • Image - select your logo image (you need to first upload it in root/images/ folder)
  • Retina Logo - choose a logo image which needs to be 2x bigger than the original logo image
  • Mobile Logo - choose logo image which will appear on mobile devices

Body Background Image:

  • Select Image - choose the main background image (mostly used for boxed versions)
  • Background Repeat - choose if the background image will be repeated or not
  • Background Size - choose the size attribute of the image
  • Background Attachement - choose the attachement atribute
  • Background Position - choose the image position

Footer:

  • Copyright - show or hide the copyright information in the footer
  • Module Position - select the module position in which you will load the footer settings
  • Copyright Notice - if the Copyright option is enabled you need to fill this field with your information

Social Icons:

  • Social Icons - show or hide the social icons
  • Module Position - select the module position in which you will load the social icons
  • All following fields will show the coresponding icon on the site's frontend if you add your social media link

Contact Information:

  • Enable - choose either to show or hide the contact information
  • Module Position - select the module position in which you will load the contanct information
  • Phone - add your phone
  • Email - add contact email

Coming Soon:

  • Coming Soon Mode - enable or disable the mode
  • Coming Soon Title - write your coming soon title
  • Date - add the date on which your site will be online
  • Content - this is the place to add your coming soon message if you want to have one

2. Presets:

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

  • Background Color - by default it's white (#ffffff)
  • Text Color - your content and headings color
  • Major Color - this is the main color theme that your site will use

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 module 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. For 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:

  • Select Menu - choose which of your menus will be loaded in the menu position
  • Menu Type - here you choose from Mega Menu (which is only the menu), Off Canvas Menu (only the menu toggler) or combination of both
  • Dropdown width - choose the width of the dropdown menu
  • Dropdown animation - choose the dropdown animation

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:

  • Compress CSS - enable or disable CSS compression
  • Compress Javascript - enable or disable JS files compression
  • Exclude Javascript - you can exclude some JS files from compression

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

8. Blog:

  • Post Format/ Show icon - by enabling this option you can display a little icon before the article's title in the blog layout
  • Comments Settings - choose different comment plugins to run on your site
  • Social share - add the most popular social sharing buttons to your articles

9. Assignments: 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:

  • Duplicate the template from Template Manager
  • Open the duplicated template and rename it, for example "Template Color 2"
  • Click on the Presets tab and choose different preset (for example "Preset 2")
  • Change the colors depending on your needs
  • Click on the Assignment tab and select the menu on which you want to display the different color
  • Finally save the settings and test your menus

Adding New Module Position

Layout Builder

You can open the Layout Builder from Joomla admin > Extensions > Template manager > it_elemento > 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 root/templates/it_elemento/templateDetails.xml and locate the following lines:

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

  4. <positions>
      <position>title</position>
      <position>newposition</position>
      <position>logo</position>
  5. Save and close the file
  6. Open the Layout tab in the template settings > choose where you want 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.
  7. Go to root/templates/it_elemento/less/theme.less and add the new css style for the new position. The class of the new position should be:

  8. #sp-newposition
  9. Finally create a module and publish it in the new position

Update

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 tpl_it_TEMPLATE_NAME.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 will most probably lose those changes, the files will be overwritten. We recommend to create a custom.css file in the root/templates/TEMPLATE_NAME/css/ folder 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.

How to make my site look like the Demo

There are two ways to make your own site to look exactly like our Demo product:

  • First is to install the quickstart package and to change our texts and images.
  • Second, if you have a site with your own content, that already exists, you have to install only the template. Here in the documentation we have explain almost every detail from the demo, but here is our advice too:
Our Advice: It will be best if you install the whole quickstart somewhere as well, so you can check how the whole demo is build.

Module Variations

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

  1. title1 - with this class the module will be clean and plain with dark grey title and first letter in a transparent black
  2. title2 - a plain module style with dark module title on the left
  3. title3 - a plain module with centered dark module title with a shadow and two squares around the title
  4. title4 - a plain module with centered dark module title and a colored circle with shadow and with a star in it under na title
  5. title5 - this is a colored module with white module title
  6. title6 - white module with dark border and dark title

Change section color and background

How to change background color and image

The following video shows how to change background color and background image of a section in Elemento:

Watch the Video

How to add custom background image

The following video shows how to add custom background image to any section in Elemento:

Watch the Video

Text Editor (IMPORTANT)

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
  2. 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 the "Social Icons" module. When you open it with TinyMCE you won't see any code and you might think that the icons are there - but if you click on "Save", the HTML 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 it. Thus you will not lose any code.

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

Material Design Icons from FlatIcon

Elemento is equipped with 420+ material design icons from Flaticon, designed by Google.

How to use the icons

  • Download the whole material desing icons package (when you open the link, click on the "Download Pack" button on the top right)
  • Unzip the package on your hard drive
  • Click on the flaticon.html file, which will load all the icons in your browser. There you will find the list with all icons
  • To use the icons you need to simply add one of the lines from the "Example Code" below in your code:

Example Usage:

<span class="flaticon-world96"></span>
<i class="flaticon-world96"></i>

In the icons download you will find as well, all icons in png and psd formats.

Font Awesome Icons

Place vector icons anywhere using an icon font.

UIKit Icon 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.

Buttons

We have used UIKit buttons, styled for the purposes of our template.

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-success" href="#">Success Button</a>
<a class="uk-button uk-button-warning" href="#">Warning 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-success uk-button-mini" href="#">Success Button</a>
<a class="uk-button uk-button-warning uk-button-mini" href="#">Warning 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-success uk-button-large" href="#">Success Button</a>
<a class="uk-button uk-button-warning uk-button-large" href="#">Warning 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>

More Cool Stuff

Hover Icons

<div class="uk-grid">

  <div class="uk-width-large-1-4" data-uk-scrollspy="{cls:'uk-animation-fade', delay:300}">
    <div class="hi-icon-wrap hi-icon-effect-3 hi-icon-effect-3a">
      <a class="hi-icon flaticon-world96"></a>
      <h5>Web Design</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit.</p>
    </div>
  </div>

  <div class="uk-width-large-1-4" data-uk-scrollspy="{cls:'uk-animation-fade', delay:600}">
    <div class="hi-icon-wrap hi-icon-effect-3 hi-icon-effect-3a">
      <a class="hi-icon flaticon-web37"></a>
      <h5>Content Building</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit.</p>
    </div>
  </div>

  <div class="uk-width-large-1-4" data-uk-scrollspy="{cls:'uk-animation-fade', delay:900}">
    <div class="hi-icon-wrap hi-icon-effect-3 hi-icon-effect-3a">
      <a class="hi-icon flaticon-google119"></a>
      <h5>SEO | SEM | SMO</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit.</p>
    </div>
  </div>

  <div class="uk-width-large-1-4" data-uk-scrollspy="{cls:'uk-animation-fade', delay:1200}">
    <div class="hi-icon-wrap hi-icon-effect-3 hi-icon-effect-3a">
      <a class="hi-icon flaticon-cell11"></a>
      <h5>Mobile Apps</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit.</p>
    </div>
  </div>

</div>

Hover Boxes

<div class="uk-grid" data-uk-scrollspy="{cls:'uk-animation-slide-left', delay:400}">

  <div class="uk-width-medium-1-3">
    <div class="uk-panel uk-panel-box uk-panel-box-secondary uk-panel-hover">
      <div class="uk-panel-teaser">
        <a href="#"><img src="/images/Demo/elements/study1.jpg" alt="Case studies" class="uk-align-center"></a>
      </div>
      <div class="uk-badge uk-badge-more uk-badge-more-success"><a href="#"><i class="uk-icon-star"></i></a></div>
      <h6>Sound Design</h6><p class="uk-text-gray">Church-key offal keffiyeh fap, deep v vegan leggings heirloom post-ironic literally truffaut cray retro squid.</p>
    </div>
  </div>

  <div class="uk-width-medium-1-3">
    <div class="uk-panel uk-panel-box uk-panel-box-secondary uk-panel-hover">
      <div class="uk-panel-teaser">
        <a href="#"><img src="/images/Demo/elements/study2.jpg" alt="Case studies" class="uk-align-center"></a>
      </div>
      <div class="uk-badge uk-badge-more uk-badge-more-warning"><a href="#"><i class="uk-icon-cog"></i></a></div>
      <h6>User Experience</h6><p class="uk-text-gray">Church-key offal keffiyeh fap, deep v vegan leggings heirloom post-ironic literally truffaut cray retro squid.</p>
    </div>
  </div>

  <div class="uk-width-medium-1-3">
    <div class="uk-panel uk-panel-box uk-panel-box-secondary uk-panel-hover">
      <div class="uk-panel-teaser">
        <a href="#"><img src="/images/Demo/elements/study3.jpg" alt="Case studies" class="uk-align-center"></a>
      </div>
      <div class="uk-badge uk-badge-more uk-badge-more-danger"><a href="#"><i class="uk-icon-twitter"></i></a></div>
      <h6>Social Media</h6><p class="uk-text-gray">Church-key offal keffiyeh fap, deep v vegan leggings heirloom post-ironic literally truffaut cray retro squid.</p>
    </div>
  </div>

</div>

Box Shadows

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

  <div class="uk-width-large-1-4" data-uk-scrollspy="{cls:'uk-animation-scale-down', delay:300}">
    <div class="uk-padding shadow1">
      <h5>Shadow 1</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit.</p>
    </div>
  </div>

  <div class="uk-width-large-1-4" data-uk-scrollspy="{cls:'uk-animation-scale-down', delay:600}">
    <div class="uk-padding shadow2">
      <h5>Shadow 2</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit.</p>
    </div>
  </div>

  <div class="uk-width-large-1-4" data-uk-scrollspy="{cls:'uk-animation-scale-down', delay:900}">
    <div class="uk-padding shadow3">
      <h5>Shadow 3</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit.</p>
    </div>
  </div>

  <div class="uk-width-large-1-4" data-uk-scrollspy="{cls:'uk-animation-scale-down', delay:1200}">
    <div class="uk-padding shadow4">
      <h5>Shadow 4</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit.</p>
    </div>
  </div>

</div>

Text Shadows

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

  <div class="uk-width-large-1-4" data-uk-scrollspy="{cls:'uk-animation-scale-down', delay:300}">
    <div class="uk-padding text-shadow1">
      <h4>Shadow 1</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit.</p>
    </div>
  </div>

  <div class="uk-width-large-1-4" data-uk-scrollspy="{cls:'uk-animation-scale-down', delay:600}">
    <div class="uk-padding text-shadow2">
      <h4>Shadow 2</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit.</p>
    </div>
  </div>

  <div class="uk-width-large-1-4" data-uk-scrollspy="{cls:'uk-animation-scale-down', delay:900}">
    <div class="uk-padding text-shadow3">
      <h4>Shadow 3</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit.</p>
    </div>
  </div>

  <div class="uk-width-large-1-4" data-uk-scrollspy="{cls:'uk-animation-scale-down', delay:1200}">
    <div class="uk-padding text-shadow4">
      <h4>Shadow 4</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit.</p>
    </div>
  </div>

</div>

Zoom with Shadows

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

  <div class="uk-width-large-1-2" data-uk-scrollspy="{cls:'uk-animation-scale-down', delay:300}">
    <div class="uk-padding zoom">
      <h5>Zoom 1</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit.</p>
    </div>
  </div>

  <div class="uk-width-large-1-2" data-uk-scrollspy="{cls:'uk-animation-scale-down', delay:600}">
    <div class="uk-padding zoom2">
      <h5>Zoom 2</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit.</p>
    </div>
  </div>

</div>

Our Team Effect

<div class="uk-grid uk-text-center">
  
  <div class="uk-width-large-1-4" data-uk-scrollspy="{cls:'uk-animation-scale-down', delay:300}">
    <div class="uk-overlay">
      <img class="uk-container-center uk-border-circle" src="/images/Demo/elements/team1.jpg" alt="Our Team" />
      <div class="uk-overlay-area uk-border-circle">
        <div class="uk-overlay-area-content">
          <p>
            <a class="uk-icon-button uk-icon-linkedin" href="#"></a>
            <a class="uk-icon-button uk-icon-facebook" href="#"></a>
            <a class="uk-icon-button uk-icon-twitter" href="#"></a>
            <a class="uk-icon-button uk-icon-youtube" href="#"></a>
          </p>
        </div>
      </div>
    </div>
    <h5>Stacy Gold</h5>
  </div>
  
  <div class="uk-width-large-1-4" data-uk-scrollspy="{cls:'uk-animation-scale-down', delay:600}">
    <div class="uk-overlay">
      <img class="uk-container-center uk-border-circle" src="/images/Demo/elements/team2.jpg" alt="Our Team" />
      <div class="uk-overlay-area uk-border-circle">
        <div class="uk-overlay-area-content">
          <p>
            <a class="uk-icon-button uk-icon-linkedin" href="#"></a>
            <a class="uk-icon-button uk-icon-facebook" href="#"></a>
            <a class="uk-icon-button uk-icon-twitter" href="#"></a>
            <a class="uk-icon-button uk-icon-youtube" href="#"></a>
          </p>
        </div>
      </div>
    </div>
    <h5>Fizzy Bubbler</h5>
  </div>
  
  <div class="uk-width-large-1-4" data-uk-scrollspy="{cls:'uk-animation-scale-down', delay:900}">
    <div class="uk-overlay">
      <img class="uk-container-center uk-border-circle" src="/images/Demo/elements/team3.jpg" alt="Our Team" />
      <div class="uk-overlay-area uk-border-circle">
        <div class="uk-overlay-area-content">
          <p>
            <a class="uk-icon-button uk-icon-linkedin" href="#"></a>
            <a class="uk-icon-button uk-icon-facebook" href="#"></a>
            <a class="uk-icon-button uk-icon-twitter" href="#"></a>
            <a class="uk-icon-button uk-icon-youtube" href="#"></a>
          </p>
        </div>
      </div>
    </div>
    <h5>Amanda Stewart</h5>
  </div>
  
  <div class="uk-width-large-1-4" data-uk-scrollspy="{cls:'uk-animation-scale-down', delay:1200}">
    <div class="uk-overlay">
      <img class="uk-container-center uk-border-circle" src="/images/Demo/elements/team4.jpg" alt="Our Team" />
      <div class="uk-overlay-area uk-border-circle">
        <div class="uk-overlay-area-content">
          <p>
            <a class="uk-icon-button uk-icon-linkedin" href="#"></a>
            <a class="uk-icon-button uk-icon-facebook" href="#"></a>
            <a class="uk-icon-button uk-icon-twitter" href="#"></a>
            <a class="uk-icon-button uk-icon-youtube" href="#"></a>
          </p>
        </div>
      </div>
    </div>
    <h5>Jasiel Robinson</h5>
  </div>
  
</div>

Home Page

1. Home Page Slider

Module: Unite Revolution Slider 2
Module Position: slide
Module Class Suffix: none
Show Title: Hide

2. Services

Module: Custom HTML
Module Position: top3
Module Class Suffix: title1
Show Title: Show
<div class="uk-grid">
  
  <div class="uk-width-large-1-4" data-uk-scrollspy="{cls:'uk-animation-fade', delay:300}">
    <div class="hi-icon-wrap hi-icon-effect-3 hi-icon-effect-3a">
      <a class="hi-icon flaticon-world96"></a>
      <h5>Web Design</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit.</p>
    </div>
  </div>
  
  <div class="uk-width-large-1-4" data-uk-scrollspy="{cls:'uk-animation-fade', delay:600}">
    <div class="hi-icon-wrap hi-icon-effect-3 hi-icon-effect-3a">
      <a class="hi-icon flaticon-web37"></a>
      <h5>Content Building</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit.</p>
    </div>
  </div>
  
  <div class="uk-width-large-1-4" data-uk-scrollspy="{cls:'uk-animation-fade', delay:900}">
    <div class="hi-icon-wrap hi-icon-effect-3 hi-icon-effect-3a">
      <a class="hi-icon flaticon-google119"></a>
      <h5>SEO | SEM | SMO</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit.</p>
    </div>
  </div>
  
  <div class="uk-width-large-1-4" data-uk-scrollspy="{cls:'uk-animation-fade', delay:1200}">
    <div class="hi-icon-wrap hi-icon-effect-3 hi-icon-effect-3a">
      <a class="hi-icon flaticon-cell11"></a>
      <h5>Mobile Apps</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit.</p>
    </div>
  </div>
  
</div>

3. Case Studies

Module: Custom HTML
Module Position: top7
Module Class Suffix: title1
Show Title: Show
<div class="uk-grid" data-uk-scrollspy="{cls:'uk-animation-slide-left', delay:400}">
  
  <div class="uk-width-medium-1-3">
    <div class="uk-panel uk-panel-box uk-panel-box-secondary uk-panel-hover">
      <div class="uk-panel-teaser">
        <a href="#"><img src="/images/Demo/elements/study1.jpg" alt="Case studies" class="uk-align-center"></a>
      </div>
      <div class="uk-badge uk-badge-more"><a href="#"><i class="uk-icon-star"></i></a></div>
      <h6>Sound Design</h6><p class="uk-text-gray">Church-key offal keffiyeh fap, deep v vegan leggings heirloom post-ironic literally truffaut cray retro squid.</p>
    </div>
  </div>
  
  <div class="uk-width-medium-1-3">
    <div class="uk-panel uk-panel-box uk-panel-box-secondary uk-panel-hover">
      <div class="uk-panel-teaser">
        <a href="#"><img src="/images/Demo/elements/study2.jpg" alt="Case studies" class="uk-align-center"></a>
      </div>
      <div class="uk-badge uk-badge-more"><a href="#"><i class="uk-icon-cog"></i></a></div>
      <h6>User Experience</h6><p class="uk-text-gray">Church-key offal keffiyeh fap, deep v vegan leggings heirloom post-ironic literally truffaut cray retro squid.</p>
    </div>
  </div>
  
  <div class="uk-width-medium-1-3">
    <div class="uk-panel uk-panel-box uk-panel-box-secondary uk-panel-hover">
      <div class="uk-panel-teaser">
        <a href="#"><img src="/images/Demo/elements/study3.jpg" alt="Case studies" class="uk-align-center"></a>
      </div>
      <div class="uk-badge uk-badge-more"><a href="#"><i class="uk-icon-twitter"></i></a></div>
      <h6>Social Media</h6><p class="uk-text-gray">Church-key offal keffiyeh fap, deep v vegan leggings heirloom post-ironic literally truffaut cray retro squid.</p>
    </div>
  </div>
  
</div>

4. Awards

Module: Custom HTML
Module Position: top11
Module Class Suffix: title1
Show Title: Show
<div class="uk-grid uk-text-center">
  
  <div class="uk-width-large-1-4" data-uk-scrollspy="{cls:'uk-animation-scale-down', delay:300}">
    <div class="uk-padding shadow1">
      <img class="uk-container-center" title="Our Awards" src="/images/Demo/elements/award1.png" alt="Our Awards" />
      <h5>TV Spot</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit.</p>
    </div>
  </div>
  
  <div class="uk-width-large-1-4" data-uk-scrollspy="{cls:'uk-animation-scale-down', delay:600}">
    <div class="uk-padding shadow2">
      <img class="uk-container-center" title="Our Awards" src="/images/Demo/elements/award2.png" alt="Our Awards" />
      <h5>Social Presence</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit.</p>
    </div>
  </div>
  
  <div class="uk-width-large-1-4" data-uk-scrollspy="{cls:'uk-animation-scale-down', delay:900}">
    <div class="uk-padding shadow3">
      <img class="uk-container-center" title="Our Awards" src="/images/Demo/elements/award3.png" alt="Our Awards" />
      <h5>Best Mobile App</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit.</p>
    </div>
  </div>
  
  <div class="uk-width-large-1-4" data-uk-scrollspy="{cls:'uk-animation-scale-down', delay:1200}">
    <div class="uk-padding shadow4">
      <img class="uk-container-center" title="Our Awards" src="/images/Demo/elements/award4.png" alt="Our Awards" />
      <h5>Content Kings</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit.</p>
    </div>
  </div>
  
</div>

5. Why Us

Module: Custom HTML
Module Position: user1
Module Class Suffix: title1
Show Title: Show
<div class="uk-grid">
  
  <div class="uk-width-large-1-2" data-uk-scrollspy="{cls:'uk-animation-fade', delay:400}">
    
    <h5>Design Skills (99%)</h5>
    <div class="shadow4">
      <div class="uk-progress uk-progress-small">
        <div style="width: 99%;" class="uk-progress-bar"></div>
      </div>
    </div>
    <br>
    <h5>Coding Ability (97%)</h5>
    <div class="shadow3">
      <div class="uk-progress uk-progress-small">
        <div style="width: 97%;" class="uk-progress-bar"></div>
      </div>
    </div>
    <br>
    <h5>Social Media Knowledge (89%)</h5>
    <div class="shadow2">
      <div class="uk-progress uk-progress-small">
        <div style="width: 89%;" class="uk-progress-bar"></div>
      </div>
    </div>
    <br>
    <h5>Coffee Making (35%)</h5>
    <div class="shadow1">
      <div class="uk-progress uk-progress-small">
        <div style="width: 35%;" class="uk-progress-bar"></div>
      </div>
    </div>
    
    <p>Here at Elemento Studio, we want to build long lasting friendships with our clients. We value every customer and we work on every project like our life depend on it.</p>
    <p><a href="http://www.inspiretheme.com/" class="uk-button uk-button-large">Join Our Club</a></p>
    
  </div>
  
  <div class="uk-width-large-1-2 uk-text-center margin-100" data-uk-scrollspy="{cls:'uk-animation-slide-right', delay:800}">
    <img class="uk-container-center" src="/images/Demo/elements/man.png" alt="Why Us" />
  </div>
  
</div>

6. Latest Project

Module: Custom HTML
Module Position: parallax1
Module Class Suffix: none
Show Title: Hide
<div data-uk-parallax="{bg: -300}" class="parallax1">
  
  <div class="uk-grid uk-text-white">
    
    <div class="uk-width-medium-1-2 uk-text-center uk-padding-x2" data-uk-scrollspy="{cls:'uk-animation-fade', delay:400}">
      <p><i class="fl-xxl flaticon-bubble8"></i></p>
      <br>
      <div class="sp-module title1"><h3 class="sp-module-title">5.Latest Project</h3></div>
      <p><a class="uk-button uk-button-large" href="http://www.inspiretheme.com/">View All</a></p>
    </div>
    
    <div class="uk-width-medium-1-2" data-uk-scrollspy="{cls:'uk-animation-slide-right', delay:600}">
      <div class="uk-block uk-block-gray uk-padding-x2">
        <h5>Client: <span class="uk-text-success">Infinity Stadium</span></h5>
        <div class="uk-badge uk-badge-more uk-badge-more-success"><a href="#"><i class="uk-icon-plus"></i></a></div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <h5>Task: <span class="uk-text-success">Rebrand</span></h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <h5>Budget: <span class="uk-text-success">$ 500 000</span></h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
    
  </div>
  
</div>

7. Testimonials

Module: Custom HTML
Module Position: parallax1
Module Class Suffix: none
Show Title: Hide
<div class="uk-grid uk-grid-collapse uk-grid-match" data-uk-grid-match="">
  <div class="uk-width-medium-1-3" data-uk-scrollspy="{cls:'uk-animation-fade', delay:400}">
    <p class="blockquote-pc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do.<br><strong>John Willow // CEO</strong></p>
  </div>
  
  <div class="uk-width-medium-1-3" data-uk-scrollspy="{cls:'uk-animation-fade', delay:800}">
    <p class="blockquote-pc2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do.<br><strong>Misha Collins // Finance</strong></p>
  </div>
  
  <div class="uk-width-medium-1-3" data-uk-scrollspy="{cls:'uk-animation-fade', delay:1200}">
    <p class="blockquote-pc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do.<br><strong>Dean Stark // Manager</strong></p>
  </div>
</div>

8. Blog

The code is placed in the ARTICLE, named Home.

<div class="sp-module title1"><h3 class="sp-module-title">6.Blog</h3></div>
<p>[module-96]</p>

[module-96] - This is the shortcode from RokSprocket module with Strips Layout. Do not select position, because when you want to use the shortcode of the RokSprocket module, you do not need to place the module in any position.

Module: RokSprocket > Strips Layout > Separated theme
Content: Joomla! Provider
Display Limit: ∞ articles
Preview Length: 18 words
Previews Per Page: 3
Items Per Row: 3
Strip HTML Tags: Yes
Arrow Navigation: Show
Pagination: Show
Animation: Fade Delayed
Article Details: Show only date
Autoplay: Disable

9. Our Team

Module: Custom HTML
Module Position: position1
Module Class Suffix: title1
Show Title: Show
<div class="uk-grid uk-text-center">
  
  <div class="uk-width-large-1-4" data-uk-scrollspy="{cls:'uk-animation-scale-down', delay:300}">
    <div class="uk-overlay">
      <img class="uk-container-center uk-border-circle" src="/images/Demo/elements/team1.jpg" alt="Our Team" />
      <div class="uk-overlay-area uk-border-circle">
        <div class="uk-overlay-area-content">
          <p>
            <a class="uk-icon-button uk-icon-linkedin" href="#"></a>
            <a class="uk-icon-button uk-icon-facebook" href="#"></a>
            <a class="uk-icon-button uk-icon-twitter" href="#"></a>
            <a class="uk-icon-button uk-icon-youtube" href="#"></a>
          </p>
        </div>
      </div>
    </div>
    <h5>Stacy Gold</h5>
  </div>
  
  <div class="uk-width-large-1-4" data-uk-scrollspy="{cls:'uk-animation-scale-down', delay:600}">
    <div class="uk-overlay">
      <img class="uk-container-center uk-border-circle" src="/images/Demo/elements/team2.jpg" alt="Our Team" />
      <div class="uk-overlay-area uk-border-circle">
        <div class="uk-overlay-area-content">
          <p>
            <a class="uk-icon-button uk-icon-linkedin" href="#"></a>
            <a class="uk-icon-button uk-icon-facebook" href="#"></a>
            <a class="uk-icon-button uk-icon-twitter" href="#"></a>
            <a class="uk-icon-button uk-icon-youtube" href="#"></a>
          </p>
        </div>
      </div>
    </div>
    <h5>Fizzy Bubbler</h5>
  </div>
  
  <div class="uk-width-large-1-4" data-uk-scrollspy="{cls:'uk-animation-scale-down', delay:900}">
    <div class="uk-overlay">
      <img class="uk-container-center uk-border-circle" src="/images/Demo/elements/team3.jpg" alt="Our Team" />
      <div class="uk-overlay-area uk-border-circle">
        <div class="uk-overlay-area-content">
          <p>
            <a class="uk-icon-button uk-icon-linkedin" href="#"></a>
            <a class="uk-icon-button uk-icon-facebook" href="#"></a>
            <a class="uk-icon-button uk-icon-twitter" href="#"></a>
            <a class="uk-icon-button uk-icon-youtube" href="#"></a>
          </p>
        </div>
      </div>
    </div>
    <h5>Amanda Stewart</h5>
  </div>
  
  <div class="uk-width-large-1-4" data-uk-scrollspy="{cls:'uk-animation-scale-down', delay:1200}">
    <div class="uk-overlay">
      <img class="uk-container-center uk-border-circle" src="/images/Demo/elements/team4.jpg" alt="Our Team" />
      <div class="uk-overlay-area uk-border-circle">
        <div class="uk-overlay-area-content">
          <p>
            <a class="uk-icon-button uk-icon-linkedin" href="#"></a>
            <a class="uk-icon-button uk-icon-facebook" href="#"></a>
            <a class="uk-icon-button uk-icon-twitter" href="#"></a>
            <a class="uk-icon-button uk-icon-youtube" href="#"></a>
          </p>
        </div>
      </div>
    </div>
    <h5>Jasiel Robinson</h5>
  </div>
  
</div>

10. FAQ

Module: RokSprocket > Lists Layout > Default theme
Content: Simple
Display Limit: ∞ articles
Preview Length: ∞ words
Previews Per Page: 5
Items Per Row: 3
Strip HTML Tags: Yes
Arrow Navigation: Show
Pagination: Show
Autoplay: Disable
Module Position: position5
Module Class Suffix: title1
Show Title: Show

11. Call To Action | Home in yellow background

Module: Custom HTML
Module Title: Call To Action | Home
Module Position: parallax2
Module Class Suffix: none
Show Title: Hide
<div data-uk-parallax="{bg: -300}" class="parallax2">
  
  <div class="container uk-text-center uk-text-white uk-padding-x2" data-uk-scrollspy="{cls:'uk-animation-scale-down', delay:400}">
    <p><i class="fl-xxl flaticon-headset12"></i></p>
    <br>
    <h5>If you want to share your project ideas, get to know us or just say "Hi",</h5>
    <h5>Click the beautiful <u>BIG BUTTON</u> below and our hotline will bling :)</h5>
    <br>
    <p><a class="uk-button uk-button-large" href="http://www.inspiretheme.com/">BIG BUTTON</a></p>
  </div>
  
</div>

12. Clients

Module: Custom HTML
Module Position: bottom1
Module Class Suffix: title1
Show Title: Show
<div class="light-border">
  
  <div class="uk-grid uk-text-center " data-uk-scrollspy="{cls:'uk-animation-scale-up', delay:300}">
    
    <div class="uk-width-large-1-3">
      <div class="uk-padding shadow1">
        <img class="uk-container-center" src="/images/Demo/elements/logo1.png" alt="Our Awesome Clients" />
      </div>
    </div>
    
    <div class="uk-width-large-1-3">
      <div class="uk-padding shadow3">
        <img class="uk-container-center" src="/images/Demo/elements/logo2.png" alt="Our Awesome Clients" />
      </div>
    </div>
    
    <div class="uk-width-large-1-3">
      <div class="uk-padding shadow1">
        <img class="uk-container-center" src="/images/Demo/elements/logo3.png" alt="Our Awesome Clients" />
      </div>
    </div>
    
  </div>
  
  <div class="uk-grid uk-text-center" data-uk-scrollspy="{cls:'uk-animation-scale-up', delay:600}">
    
    <div class="uk-width-large-1-3">
      <div class="uk-padding shadow3">
        <img class="uk-container-center" src="/images/Demo/elements/logo4.png" alt="Our Awesome Clients" />
      </div>
    </div>
    
    <div class="uk-width-large-1-3">
      <div class="uk-padding shadow1">
        <img class="uk-container-center" src="/images/Demo/elements/logo5.png" alt="Our Awesome Clients" />
      </div>
    </div>
    
    <div class="uk-width-large-1-3">
      <div class="uk-padding shadow3">
        <img class="uk-container-center" src="/images/Demo/elements/logo6.png" alt="Our Awesome Clients" />
      </div>
    </div>
    
  </div>
  
</div>

About Page

1. History

Module: Custom HTML
Module Position: top3
Module Class Suffix: title3
Show Title: Show
<div class="uk-grid">

  <div class="uk-width-large-1-4" data-uk-scrollspy="{cls:'uk-animation-fade', delay:300}">
    <h5><i class="flaticon-map103"></i> 1999</h5>
    <p>Elemento was founded in 1999 by Peter and John Dean.</p>
  </div>

  <div class="uk-width-large-1-4" data-uk-scrollspy="{cls:'uk-animation-fade', delay:600}">
    <h5><i class="flaticon-map103"></i> 2001</h5>
    <p>3 new people were employed - designer, developer and assistant.</p>
  </div>

  <div class="uk-width-large-1-4" data-uk-scrollspy="{cls:'uk-animation-fade', delay:900}">
    <h5><i class="flaticon-map103"></i> 2011</h5>
    <p>Elemento CMS was introduced on the market.</p>
  </div>

  <div class="uk-width-large-1-4" data-uk-scrollspy="{cls:'uk-animation-fade', delay:1200}">
    <h5><i class="flaticon-map103"></i> 2015</h5>
    <p>Elemento received 5 design awards, leading in every category.</p>
  </div>

</div>

<br><br><br>

<p class="uk-text-center" data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:1500}">
  <a href="#" class="uk-button uk-button-large">Read the whole history</a>
</p>

2. Our Team

Module: Custom HTML
Module Position: top7
Module Class Suffix: title3
Show Title: Show
<div class="uk-grid uk-text-center">
  
  <div class="uk-width-large-1-4" data-uk-scrollspy="{cls:'uk-animation-scale-down', delay:300}">
    <img class="uk-container-center zoom" src="/images/Demo/elements/team1.jpg" alt="Our Team" />
    <h5>Stacy Gold</h5>
    <mark>CEO</mark>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>
      <a class="uk-icon-button uk-icon-linkedin" href="#"></a>
      <a class="uk-icon-button uk-icon-facebook" href="#"></a>
      <a class="uk-icon-button uk-icon-twitter" href="#"></a>
      <a class="uk-icon-button uk-icon-youtube" href="#"></a>
    </p>
  </div>
  
  <div class="uk-width-large-1-4" data-uk-scrollspy="{cls:'uk-animation-scale-down', delay:600}">
    <img class="uk-container-center zoom" src="/images/Demo/elements/team2.jpg" alt="Our Team" />
    <h5>Fizzy Bubbler</h5>
    <ins>Tech Support</ins>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>
      <a class="uk-icon-button uk-icon-google" href="#"></a>
      <a class="uk-icon-button uk-icon-facebook" href="#"></a>
      <a class="uk-icon-button uk-icon-twitter" href="#"></a>
      <a class="uk-icon-button uk-icon-youtube" href="#"></a>
    </p>
  </div>
  
  <div class="uk-width-large-1-4" data-uk-scrollspy="{cls:'uk-animation-scale-down', delay:900}">
    <img class="uk-container-center zoom" src="/images/Demo/elements/team3.jpg" alt="Our Team" />
    <h5>Amanda Stewart</h5>
    <mark>Office Manager</mark>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>
      <a class="uk-icon-button uk-icon-linkedin" href="#"></a>
      <a class="uk-icon-button uk-icon-facebook" href="#"></a>
      <a class="uk-icon-button uk-icon-twitter" href="#"></a>
      <a class="uk-icon-button uk-icon-youtube" href="#"></a>
    </p>
  </div>
  
  <div class="uk-width-large-1-4" data-uk-scrollspy="{cls:'uk-animation-scale-down', delay:1200}">
    <img class="uk-container-center zoom" src="/images/Demo/elements/team4.jpg" alt="Our Team" />
    <h5>Jasiel Robinson</h5>
    <ins>Developer</ins>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>
      <a class="uk-icon-button uk-icon-linkedin" href="#"></a>
      <a class="uk-icon-button uk-icon-facebook" href="#"></a>
      <a class="uk-icon-button uk-icon-twitter" href="#"></a>
      <a class="uk-icon-button uk-icon-youtube" href="#"></a>
    </p>
  </div>
  
</div>

3. Skills

Module: Custom HTML
Module Position: top11
Module Class Suffix: title3
Show Title: Show
<div class="uk-grid">
  
  <div class="uk-width-large-1-2" data-uk-scrollspy="{cls:'uk-animation-slide-left', delay:400}">
    
    <h5>Design Skills (99%)</h5>
    <div class="shadow4">
      <div class="uk-progress uk-progress-small">
        <div style="width: 99%;" class="uk-progress-bar"></div>
      </div>
    </div>
    <br>
    <h5>Coding Ability (97%)</h5>
    <div class="shadow3">
      <div class="uk-progress uk-progress-small">
        <div style="width: 97%;" class="uk-progress-bar"></div>
      </div>
    </div>
    <br>
    <h5>Social Media Knowledge (89%)</h5>
    <div class="shadow2">
      <div class="uk-progress uk-progress-small">
        <div style="width: 89%;" class="uk-progress-bar"></div>
      </div>
    </div>
    <br>
    <h5>Coffee Making (35%)</h5>
    <div class="shadow1">
      <div class="uk-progress uk-progress-small">
        <div style="width: 35%;" class="uk-progress-bar"></div>
      </div>
    </div>
    
    <p>Here at Elemento Studio, we want to build long lasting friendships with our clients. We value every customer and we work on every project like our life depend on it.</p>
    <p><a href="http://www.inspiretheme.com/" class="uk-button uk-button-large">Join Our Club</a></p>
    
  </div>
  
  <div class="uk-width-large-1-2 uk-text-center margin-100" data-uk-scrollspy="{cls:'uk-animation-slide-right', delay:800}">
    <img class="uk-container-center" src="/images/Demo/elements/bang.png" alt="Creative Bang" />
  </div>
  
</div>

4. Our Services

The code is placed in an ARTICLE, called "About Us".

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

<div class="uk-grid uk-grid-divider" data-uk-scrollspy="{cls:'uk-animation-scale-up', delay:300}">
  
  <div class="uk-width-large-1-3">
    <h5><i class="flaticon-earth205"></i> Web Design</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
  </div>
  
  <div class="uk-width-large-1-3">
    <h5><i class="flaticon-web37"></i> Content Building</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
  </div>
  
  <div class="uk-width-large-1-3">
    <h5><i class="flaticon-chat75"></i> SEO | SEM | SMO</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
  </div>
  
</div>

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

<div class="uk-grid uk-grid-divider" data-uk-scrollspy="{cls:'uk-animation-scale-up', delay:600}">
  
  <div class="uk-width-large-1-3">
    <h5><i class="flaticon-cell11"></i> Mobile Apps</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
  </div>
  
  <div class="uk-width-large-1-3">
    <h5><i class="flaticon-share39"></i> Backlinking</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
  </div>
  
  <div class="uk-width-large-1-3">
    <h5><i class="flaticon-sms7"></i> Support</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
  </div>
  
</div>

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

<div class="uk-grid uk-grid-divider" data-uk-scrollspy="{cls:'uk-animation-scale-up', delay:900}">
  
  <div class="uk-width-large-1-3">
    <h5><i class="flaticon-underline6"></i> Logo Design</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
  </div>
  
  <div class="uk-width-large-1-3">
    <h5><i class="flaticon-photographic1"></i> Video Design</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
  </div>
  
  <div class="uk-width-large-1-3">
    <h5><i class="flaticon-poll"></i> Planing & Strategy</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
  </div>
  
</div>

5. Packages

Module: RokSprocket > Tables Layout > Product theme
Content: Simple
Preview Length: 20 words
Previews Per Page: 3
Items Per Row: 3
Strip HTML Tags: Yes
Arrow Navigation: Show
Pagination: Show
Animation: Fade Delayed
Autoplay: Disable
Module Position: position1
Module Class Suffix: title3
Show Title: Show

Example code from one of the items:

Title: <i style="font-size: 50px;" class="flaticon-apple70"></i><br><br>Individual
Description: for small businesses
Image: None
Class: None
Price: $ 599
Feature 1: Website Design
Feature 2: Content: Up to 20 pages
Feature 3: Free Hosting
Feature 4: None
Link: #
Link Text: Order Now

6. Testimonials

Module: Custom HTML
Module Position: position5
Module Class Suffix: title3
Show Title: Show
<div class="uk-grid">
  <div class="uk-width-medium-1-3" data-uk-scrollspy="{cls:'uk-animation-fade', delay:300}">
    <p class="blockquote-pc3 shadow3">The guys from Elemento delivered the site in time, with amazing details in every way! Strongly recommended!<br><strong>Stephen King</strong></p>
  </div>
  
  <div class="uk-width-medium-1-3" data-uk-scrollspy="{cls:'uk-animation-fade', delay:600}">
    <p class="blockquote-pc3 shadow2">For a couple hundred bucks I got super flexible product with beautiful features! Thanks Elemento team!<br><strong>Heather Beauvea</strong></p>
  </div>
  
  <div class="uk-width-medium-1-3" data-uk-scrollspy="{cls:'uk-animation-fade', delay:900}">
    <p class="blockquote-pc3 shadow1">The best company out there! They build for us one of the perfect mobile app!<br><strong>Satish Darnani</strong></p>
  </div>
</div>

6. Our Partners

Module: Custom HTML
Module Position: bottom1
Module Class Suffix: title3
Show Title: Show
<div class="light-border">
  
  <div class="uk-grid uk-grid-divider uk-text-center " data-uk-scrollspy="{cls:'uk-animation-scale-up', delay:300}">
    
    <div class="uk-width-large-1-4">
      <img class="uk-container-center" src="/images/Demo/elements/logo1.png" alt="Our Partners" />
    </div>
    
    <div class="uk-width-large-1-4">
      <img class="uk-container-center" src="/images/Demo/elements/logo2.png" alt="Our Partners" />
    </div>
    
    <div class="uk-width-large-1-4">
      <img class="uk-container-center" src="/images/Demo/elements/logo3.png" alt="Our Partners" />
    </div>
    
    <div class="uk-width-large-1-4">
      <img class="uk-container-center" src="/images/Demo/elements/logo4.png" alt="Our Partners" />
    </div>
    
  </div>
  
  <hr class="uk-grid-divider">
  
  <div class="uk-grid uk-grid-divider uk-text-center" data-uk-scrollspy="{cls:'uk-animation-scale-up', delay:600}">
    
    <div class="uk-width-large-1-4">
      <img class="uk-container-center" src="/images/Demo/elements/logo5.png" alt="Our Partners" />
    </div>
    
    <div class="uk-width-large-1-4">
      <img class="uk-container-center" src="/images/Demo/elements/logo6.png" alt="Our Partners" />
    </div>
    
    <div class="uk-width-large-1-4">
      <img class="uk-container-center" src="/images/Demo/elements/logo7.png" alt="Our Partners" />
    </div>
    
    <div class="uk-width-large-1-4">
      <img class="uk-container-center" src="/images/Demo/elements/logo8.png" alt="Our Partners" />
    </div>
    
  </div>
  
</div>

Our Work Page

1. Elemento CMS

Module: Custom HTML
Module Position: top7
Module Class Suffix: title4
Show Title: Show
<div class="uk-text-center" data-uk-scrollspy="{cls:'uk-animation-fade', delay:400}">
  <h5>Complete <ins>CMS</ins> solution!</h5>
  <p>To ease our customers, we have build an amazing CMS with amazing UI and endless features!<br>Now with Elemento CMS, you can customize your CMS depending to your needs.<br>All you need in 1 CMS - take Elemento for a test drive now!</p>
  <br>
  <p><a class="uk-button uk-button-primary uk-button-large" href="http://www.inspiretheme.com/">Try Demo!</a></p>
</div>

<br><br>

<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:800}">
  <img class="margin-101 uk-container-center" src="/images/Demo/elements/elemento-cms.png" alt="Elemento CMS" />
</div>

2. Free Plugins

Module: RokSprocket > Strips Layout > Parallel theme
Content: Simple
Display Limit: ∞ articles
Preview Length: ∞ words
Previews Per Page: 3
Items Per Row: 3
Strip HTML Tags: No
Arrow Navigation: Show
Pagination: Show
Article Details: Hide author and date
Article Details: Show only date
Animation: Fade Delayed
Autoplay: Disable

Example code from one of the items:

Title: Maps
Description: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed.
Image: images/Demo/elements/plug1.png (choose your own image from your folder)
Link: # (write your own link here)

3. Latest Projects

The code is placed in an ARTICLE, called "Our Work".

<div class="sp-module title4"><h3 class="sp-module-title">Latest Projects</h3></div>
[module-117]

[module-117] - This is the shortcode from RokSprocket module with Mosaic Layout. Do not select position, because when you want to use the shortcode of the RokSprocket module, you do not need to place the module in any position.

Module: RokSprocket > Mosaic Layout > Default theme
Content: Simple Provider
Display Limit: ∞ articles
Columns: 3
Preview Length: 20 words
Blocks per View: 6
Strip HTML Tags: Yes
Article Details: Hide author and date
Block Animation: Fade, Scale, Rotate
Ordering: Default, Title, Date, Random

Example code from one of the items:

Title: SketchME
Description: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Image: images/Demo/elements/portfolio1.jpg (choose your own image from your folder)
Link: # (write your own link here)
Tags: website

4. Featured Works

Module: Custom HTML
Module Title: Featured Works Full WIdth
Module Position: parallax2
Module Class Suffix: none
Show Title: Hide
<div class="sp-module title4"><h3 class="sp-module-title">Featured Works</h3></div>
<div data-uk-scrollspy="{cls:'uk-animation-scale-up', delay:400}">
  [module-118]
</div>

[module-118] - This is the shortcode from RokSprocket module with Mosaic Layout. Do not select position, because when you want to use the shortcode of the RokSprocket module, you do not need to place the module in any position.

Module: RokSprocket > Mosaic Layout > Gallery theme
Content: Simple Provider
Display Limit: ∞ articles
Columns: 5
Preview Length: 20 words
Blocks per View: 10
Strip HTML Tags: No
Article Details: Hide author and date
Block Animation: Fade, Scale, Rotate
Ordering: Default, Title, Date, Random

Example code from one of the items:

Title: Vesuvius
Description: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Image: images/Demo/elements/portfolio6.jpg (choose your own image from your folder)
Link: # (write your own link here)
Tags: logo

Contacts Page

1. Google Map with color

The Google Map is actually the "Google Maps" module, which is a 3rd party extension developed by BowThemes.

If you use only the template, not the quickstart package, you can download the map module from this link. You will also find an extended documentation for this module at the same link. To be able to download both the module and the documentation, you need to register in the developer's site - it is totally free.

In the Module you have to go to Custom Style Manager Tab and to play with the parameters. We have changed these and mostly played with na Map Colors.

You can (and should) install the Quickstart package and see the module options and settings in details.

Module: BT Google Maps
Module Title: Contacts Maps
Module Position: slide
Module Class Suffix: none
Show Title: Hide

2. Customer Support

Module: Custom HTML
Module Position: top11
Module Class Suffix: title3
Show Title: Show
<div class="uk-grid uk-text-center">
  
  <div class="uk-width-large-1-4" data-uk-scrollspy="{cls:'uk-animation-slide-left', delay:300}">
    <div class="uk-overlay">
      <img class="uk-container-center uk-border-circle" src="/images/Demo/elements/help.jpg" alt="Customer Support" />
      <div class="uk-overlay-area uk-border-circle">
        <div class="uk-overlay-area-content">
          <p>
            <a class="uk-icon-button uk-icon-linkedin" href="#"></a>
            <a class="uk-icon-button uk-icon-facebook" href="#"></a>
            <a class="uk-icon-button uk-icon-twitter" href="#"></a>
            <a class="uk-icon-button uk-icon-youtube" href="#"></a>
          </p>
        </div>
      </div>
    </div>
  </div>
  
  <div class="uk-width-large-1-4" data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:600}">
    <h5>Help Info</h5>
    <p>Find answers to your questions in our database or submit your requests.</p>
    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas.</p>
    <h5 class="text-zoom"><i class="uk-icon-phone"></i>  +555.123.123</h5>
  </div>
  
  <div class="uk-width-large-1-4" data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:600}">
    <h5>Live Support</h5>
    <p>Contact our support team and get fast support in just a few minutes.</p>
    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas.</p>
    <h5 class="text-zoom"><i class="uk-icon-phone"></i>  +555.123.4568</h5>
  </div>
  
  <div class="uk-width-large-1-4" data-uk-scrollspy="{cls:'uk-animation-slide-right', delay:300}">
    <div class="uk-overlay">
      <img class="uk-container-center uk-border-circle" src="/images/Demo/elements/support.jpg" alt="Customer Support" />
      <div class="uk-overlay-area uk-border-circle">
        <div class="uk-overlay-area-content">
          <p>
            <a class="uk-icon-button uk-icon-linkedin" href="#"></a>
            <a class="uk-icon-button uk-icon-facebook" href="#"></a>
            <a class="uk-icon-button uk-icon-twitter" href="#"></a>
            <a class="uk-icon-button uk-icon-youtube" href="#"></a>
          </p>
        </div>
      </div>
    </div>
  </div>
  
</div>

3. Contact Form

The menu item "Contacts" has Menu Item Type: Single Contact

Select Contact: Select your Contact, which you have to created first from Components -> Contacts -> Contacts

Extensions

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.

Become an insider | Subscribe to our Newsletter
Subscribe to our mailing list and stay up-to-date with all our awesome releases, latest updates and amazing discount offers!