A very important Element for good Web Design Web Design is Typography. This Template delivers you sophisticated typography, various stylings and awesome functions for nice styling of your content.
- Get an awesome styling to give your customers the best clarity
- A lot of different elements for you, most of them are easy to include using our shortcode system
- All elements are styled with CSS so no loading of images or other elements
Demo
This is an H1 Header
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 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.
This is an H2 Header
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 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.
This is an H3 Header
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 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.
This is an H4 Header
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 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.
This is an H5 Header
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 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.
This is an Special Headline
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 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.
How to use
{h1-special | Headline here}
Blockquotes
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 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.
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 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.Isaac Asimov
How to use
{blockquote}Your Content goes here{/blockquote}
{blockquote}Your Content goes here{/blockquote-name | Name here}
You can use this Shortcodes everywhere in your content, click here to find out more.
Testimonial
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 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.Isaac Asimov - HTML5 Expert
How to use
{testimonial}Your Content goes here{testimonial-name | Name or Link here}
You can use this Shortcodes everywhere in your content, click here to find out more.
Icons
Beside the usual image icons we integrate Font Awesome v.4 with over 350 icons. In a single collection, Font Awesome is a pictographic language of web-related actions. Easily style icon color, size, shadow, and anything that's possible with CSS. You can read more about it here.
Progress Bars
How to use
{progress | Your Text here | Percent Value}
{progress | Animated Progress Bar | 60}
Labels
Dermau ipsum dolor sit amet, consectetur label elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut sumus 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. Dermau ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
Dermau ipsum dolor sit amet, consectetur label-success elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut sumus 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. Dermau ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
Dermau ipsum dolor sit amet, consectetur label-templatecolor elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut sumus 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. Dermau ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
Dermau ipsum dolor sit amet, consectetur label-warning elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut sumus 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. Dermau ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
Dermau ipsum dolor sit amet, consectetur label-important elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut sumus 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. Dermau ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
Dermau ipsum dolor sit amet, consectetur label-info elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut sumus 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. Dermau ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
Dermau ipsum dolor sit amet, consectetur label-inverse elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut sumus 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. Dermau ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
How to use
{label | label, label-success, label-templatecolor, label-warning, label-important, label-info, label-inverse | Your Text goes here}
{label | label-success | Awesome} = Awesome
You can use this Shortcodes everywhere in your content, click here to find out more.
This is an Horizontal Rule
This is an Horizontal Rule width a individual distance
{liner | Enter margin pixels here (top, right, bottom, left)}
{liner | 21px 0 22px 0}
Or use {line} to create a simple Line
This is an space for you if needed - attention: of course it's not visible
{spacer | Enter the height of the whitespace in pixels}
{spacer | 120px}
This awesome Template comes with nice styled included tooltips for your own use. Many features, options and styles combined with an easy to use shortcode system for the developer make this tooltip to a new experience in content styling for the sophisticated user of joomla. See the full feature list, the demo and the usage above.
- Works perfect on mobile devices, first tap to open, second to link
- Also you can control where the Tooltip appears, choose from left or right, top, bottom or auto
- Tooltip View is made with CSS3 only so no images are to load
Demo
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus scelerisque ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Yeah, this can be nullam id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor.
Tooltip Top | Tooltip Bottom | Tooltip Left | Tooltip Right | Tooltip Auto
Tooltip as a Button Tooltip as a Button Tooltip as a Button
How to use
You can use this Shortcodes everywhere in your content, click here to find out more.
{tooltip | your Link | Place here Content of the Tooltip | Position (left, right, top, bottom, auto) | Word for Tooltip}
{tooltip | # | I'm a Tooltip | top | Tooltip} = Tooltip
Attention: you always must write the position like top or bottom in lowercases, maybe TOP will produce an error and the tooltip won't work!
We have integrated a awesome Page Preloader, this is a simple Module which can be assigned to specific pages or to your whole site. For example, simply activate it on pages where you have heavy Images to load to get a nice preloading of this Site only.
- Choose a Individual Background Color for the Preloader
- Use simple animated Gifs, 5 are already included for light and dark Backgrounds
- Setup the Time the Preloader should fade out
Demo
You have already seen it as you have opened this site. Click the below Button to reload this Page.
How to use
This function is made with an simple joomla module which is included in the download package of this theme.
Also some styles of mobile friendly Tabs are included in this Joomla Template. Simply organize your content in a nice and comfortable way, this module is like many others also included in the download package.
- Two styles to choose from, all well designed and of course fully responsive to work on all devices
- Place your content using your favorite Wysiwig editor easily directly in the module
- Choose for every tab module which tab should be open at the first visit of your page
Demo - Left Tabs
Simple Joomla Tab Module, concepted and developed for easy handling of your Content Tabs
Demo - Centered Tabs
Simple Joomla Tab Module, concepted and developed for easy handling of your Content Tabs
How to use
This function is made with an simple joomla module which is included in the download package of this theme.
We integrated some really awesome shortcodes in this Template, you can use them nearly everywhere in your template using a short syntax, use them in module titles, use them in content, use them in other modules and so much more places.
- Easy to use without knowledge of coding, works with every Editor
- Awesome styling and functions for your content, you will love it
- Spice up your Content using the WS-Shortcode system
Demo
You can see a Demo on nearly every page of this Template, scroll to the bottom of the respective page to see the shortcode syntax.
How to use
The shortcodes are very easy to use, simply click the typography button and click on the element of your choice, edit the settings, save and ready. Yes it's true! But attention: if you are using frontend editing please deactivate the button (not the shortsystem, only the button)

One of the most innovative features of this Joomla Template is the possibility to include Modal Windows on every place where you want. Modals are made for show a Joomla Module in nice Lightbox. See the big feature list above.
- Including is so easy and comfortable using our integrated shortcode system
- It's possible to display up to 10 reveals on every page and link them internal
- Reveal is no iframe it's inline content, so search engines will thank you
- Of course the reveal modal is fully responsive and fits to all devices
- Display nearly every Joomla Module in this reveal, for example a Login Module
Demo
Modal as a Link click link
Fusce dapibus, tellus ac cursus commodo, open Content condimentum nibh, ut fermentum massa justo sit amet risus. Fusce dapibus, tellus ac cursus commodo, open Content Module condimentum nibh, ut fermentum massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. open Menu Module donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue.
Modal as a Image click image
How to use
You can use this Shortcodes everywhere in your content, click here to find out more.
{button-data | btn-large btn-info | #name-of-the-Moduleposition | Text for the Button | data-toggle="modal"}
{link-data | name-of-the-Moduleposition | #name-of-the-Moduleposition | Text for the Link | data-toggle="modal"}
{image-data | name-of-the-Moduleposition | #name-of-the-Moduleposition | /path-to-image.jpg | data-toggle="modal"}
Follow this instruction step-by-step to create your Modal:
- Add a new module (for example the custom html module)
- Place your text/content/shortcode/image inside the textfield
- Give a module position like modal1
- Made menu assignment to the page where to display
- Save the module
- Go to the page/module/area where to display and use one of the upper shortcodes
Attention: It's really easy to use this reveal modal but some things keep in mind:
- Use one of the possible module positions modal1 - modal10
- Use Menu Assignment to display only on pages where you want to open the modal cause it loads otherwise on every page
- Don't use the Modal for display Maps, many Images or Videos, for this Case we have the Lightbox included
Videos are a nice way to publish your message all over the world. If you want to include your Videos from YouTube, Vimeo or an other Video Hoster you can include this in an easy way using our shortcode system.
- You only must to type in the ID of the Video from YouTube or Vimeo, that's all
- The output video is responsive so it always fits to the device where you want to watch
- No complicated including of an iframe in a Wysiwig editor using extensions
Vimeo
How to use Vimeo Videos
{vimeo | 24195442}
Example: http://vimeo.com/24195442 means your ID is 24195442
YouTube
How to use YouTube Videos
{youtube | Yq_6kEyIAcM}
Example: http://www.youtube.com/watch?v=Yq_6kEyIAcM means your ID is Yq_6kEyIAcM
YouTube Widescreen
How to use YouTube Widescreen Videos
{youtube-wide | N966cATFWjI}
Example: http://www.youtube.com/watch?v=N966cATFWjI means your ID is N966cATFWjI
Responsive iFrames
How to use responsive iFrames (works also with Flash Content)
{iframe}Your iFrame embedding Code here{/iframe}
Attention: for including regular iFrames or Flash it's recommend to turn your WYSIWIG Editor, like TinyMCE, to off!
We included an easy to use Grid System in this template for you using our Shortcode System so it's very easy for you to use Columns everywhere in Content or in modules.
- Works in every Wysiwig Editor using our shortcodes, so no loses of div or span classes
- Hundreds of variations are possible, made columns where ever you want and how often you like
- Columns works everywhere cause they are based on percentages values
Demo
2
2
2
2
2
2
3
3
3
3
4
4
4
6
6
12
3 Columns Layout
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
2 Columns Layout
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
4 Columns Layout
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
How to use
You can use this Shortcodes everywhere in your content, click here to find out more.
{row}
{col4}Your Content goes here.{/col}
{col4}Your Content goes here.{/col}
{col4}Your Content goes here.{/col}
{/row}
{row}
{col6}Your Content goes here.{/col}
{col6}Your Content goes here.{/col}
{/row}
{row}
{col2}Your Content goes here.{/col}
{col2}Your Content goes here.{/col}
{col2}Your Content goes here.{/col}
{col2}Your Content goes here.{/col}
{col2}Your Content goes here.{/col}
{col2}Your Content goes here.{/col}
{/row}
Attention: made columns like you want, but remember that the end value of your columns always should be fit to twelve!
Also we integrated some nice pricing tables for your business plans into this template. Of course, they working very well with responsive webdesign so no matter about sizes or alignments of the tables. This is a Light Version of the GO Pricing Tables from Granthweb.
- Use a maximum of five pricing tables per row, fully responsive
- Use as many as you wish, also several times on one page
- Well styled with CSS3 so problems with table constucts on your website
- Nice effect when hover the pricing table or highlight one item
Pricing Table 1 ( 5 columns, Style 1, Enlarge Effect )
Pricing Table 2 ( 3 columns, Style 2, Enlarge Effect deactivated )
Pricing Table 3 ( 4 columns, Style 1, Enlarge Effect, Space Level 3, no default Highlight )
How to use
These Pricing Tables are made with a nice and simple Joomla Module with a lot of options, so no worries about usage! You can insert the in Content using the following Syntax:
{loadposition name-of-the-pseudo-modulposition}