The S5 Quick Contact module is demo's at the bottom of this page in the blue area. This module is a simple way for your visitors to get in contact with you. Sometimes full contact pages are just too much. If you're looking for an easy way to stay in contact with your visitors this module is for you. This module has fully configurable language settings, sends emails to a specified admin account, captcha spam protection and much more! And of course it's free!

1. Specify text of error message and field names
2. Validates email address
   
3. Include intro text if desired
4. Set one admin email to receive all emails
5. Uses the built-in Joomla email functions
6. Optional captcha spam protection
   

Our Scroll Reveal feature is powered by the script found here: https://github.com/julianlloyd/scrollReveal.js. The script allows you to add "data-scroll-reveal" to HTML elements for on page scroll animations. We recommend adding to DIVs over SPAN etc as DIVs can move vs SPAN tags just fading in. Once you add the code to a DIV refresh a page or scroll down and it will animate in. It will only do this once until you refresh the page again. The great feature about the script is you can use plain English to describe how you'd like to animate your HTML element.

Example of this in action (refresh this page if you didn't see it already):

Code used for the above:

Usage:

For a lengthier explanation on this visit the following page: https://github.com/julianlloyd/scrollReveal.js

The S5 Live Search module is demo'd towards the top of this page and can be used on any Joomla template, but the specific styling shown here is for this template only.

Allow your users to search quickly and without loading or refreshing pages with our amazing ajax search module! Simply publish the module to the 'search' position.

The Map it with Google module is displayed on this page. Simply enter your address and the module uses the Google API to display a map with a marker to the address. A user simply clicks the marker and they are prompted with a popup box to get directions. Clicking "Get Directions" will take you to google maps with your business address already entered so all they have to do is enter their address to get directions. You can also specify the size of the map and whether or not to enable or disable certain controls.

The floating menu feature is a great way for your users to easily navigate your website! The floating menu will show at the top of your browser once the screen reaches a certain point. You can determine the exact point at which this occurs via the template specific area of Vertex. NOTE: This is a Vertex addition and is not guaranteed to work with all Vertex Templates. Some custom CSS may need to be adjusted per template. This feature is not supported by IE7/8.

Features at a glance:

• Set a background image to the menu, gradient or solid color
• Set to snap or smooth scroll in
• Determine at which point as you scroll down your page that the menu drops in
• and many more features, just check out the screenshot below

Admin area of the floating menu:

Parallax backgrounds as well as other background options are built directly into the Vertex Framework. Parallax causes the background image of an element to scroll at a different speed than your browser. For an example of this view the homepage of the Velocity template here and watch the background of the top_row1 area as you scroll down the page. This feature is found under "Backgrounds" tab in Vetex, where you can control the background for many areas of your website.

Features:

• Set the scroll speed of the images
• Set background repeat style
• Set background image size, 100%, cover, contain, etc
• Set custom backgrounds for all s5 rows in the framework.
• Enable or disable parallax on a per row basis

Admin Area Of The Backgrounds Tab:

Drop Caps

L orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Mauris tristique lobortis orci ac lacinia. Mauris tristique lobortis orci ac lacinia.

L orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Mauris tristique lobortis orci ac lacinia. Mauris tristique lobortis orci ac lacinia.

Porem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Mauris tristique lobortis orci ac lacinia. Mauris tristique lobortis orci ac lacinia.

Porem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Mauris tristique lobortis orci ac lacinia. Mauris tristique lobortis orci ac lacinia.

Social Icons

Ion Icons must be enabled to use these icons.

Notifications

Images

This is an image with the "boxed" class applied:



This is an image with the "boxed_black" class applied:



This is an image with the "padded" class applied:



This is an image with the "full_width" class applied. This can also be done automatically in the template configuration. Be sure to review our Vertex Guide here for other full width image options.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Ion Icons

Click here for more icon examples

Dates

Overlay

Photos credits by Daniele Zedda, JohnONolan, Daniele Zedda, Daniele Zedda, AllansBrain, rolands.lakis

Video Play Overlay

Image Hover Zoom

Misc

<a> With readon class applied:

readon

<span> With uppercase class applied:

uppercase

<span> With lowercase class applied:

lowercase

This is a sample blockquote. Use <blockquote><p>Your content goes here!</p></blockquote> to create a blockquote.

1. This is an Ordered List
2. Congue Quisque augue elit dolor nibh.
3. Condimentum elte quis.
4. Opsum dolor sit amet consectetuer.

• This is an Unordered List
• Congue Quisque augue elit dolor nibh.
• Condimentum elte quis.
• Opsum dolor sit amet consectetuer.

• This is an Unordered List with class ul_arrow
• Congue Quisque augue elit dolor nibh.
• Condimentum elte quis.
• Opsum dolor sit amet consectetuer.

• This is an Unordered List with class ul_star
• Congue Quisque augue elit dolor nibh.
• Condimentum elte quis.
• Opsum dolor sit amet consectetuer.

• This is an Unordered List with class ul_bullet
• Congue Quisque augue elit dolor nibh.
• Condimentum elte quis.
• Opsum dolor sit amet consectetuer.

The following list will support plain text such as numbers of ion icons, class="ul_circle_content":

• 01Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut mattis quam. Suspendisse tempor mollis porta. Quisque consequat justo risus, et venenatis erat consectetur sit amet. Curabitur varius tortor metus, non convallis felis fermentum sed. Nam varius justo nulla, et ultricies augue venenatis ut. Proin tempor aliquam dapibus. Pellentesque euismod vehicula est, a euismod lacus feugiat sit amet.
• 02Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut mattis quam. Suspendisse tempor mollis porta. Quisque consequat justo risus, et venenatis erat consectetur sit amet. Curabitur varius tortor metus, non convallis felis fermentum sed. Nam varius justo nulla, et ultricies augue venenatis ut. Proin tempor aliquam dapibus. Pellentesque euismod vehicula est, a euismod lacus feugiat sit amet.
• 03Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut mattis quam. Suspendisse tempor mollis porta. Quisque consequat justo risus, et venenatis erat consectetur sit amet. Curabitur varius tortor metus, non convallis felis fermentum sed. Nam varius justo nulla, et ultricies augue venenatis ut. Proin tempor aliquam dapibus. Pellentesque euismod vehicula est, a euismod lacus feugiat sit amet.
• Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut mattis quam. Suspendisse tempor mollis porta. Quisque consequat justo risus, et venenatis erat consectetur sit amet. Curabitur varius tortor metus, non convallis felis fermentum sed. Nam varius justo nulla, et ultricies augue venenatis ut. Proin tempor aliquam dapibus. Pellentesque euismod vehicula est, a euismod lacus feugiat sit amet.

The following list will support lists up to number 9, add the following class to the UL wrapping the below LI elements, class="ul_numbers":

• This is a sample styled number list <li class="li_number1">Your content goes here!</li>
• This is a sample styled number list <li class="li_number2">Your content goes here!</li>
• This is a sample styled number list <li class="li_number3">Your content goes here!</li>
• This is a sample styled number list <li class="li_number4">Your content goes here!</li>

Price Table

Responsive YouTube and Vimeo Videos

Make any Youtube, Vimeo, etc video you embed to your site work with responsive by wrapping with a DIV with a class of "s5_video_container". The below Youtube Video will shrink when the area its contained in gets too small for it:

Demo 1:


Demo 2:
Demo 2 Image Tool Tip

Demo 3:
Demo 3 Image Tool Tip

This template comes loaded with options that you can use to customize your site exactly how you want it. Here's how to get to these custom settings:

• 01In the backend of Joomla go menu item Extensions/Template Manager.
• 02Click on the title of the template.
• 03This will bring you to the template manager screen where you can edit the template's parameters.
• 04Click save when you are done

This template is built on the very powerful S5 Vertex Framework, which comes packed with amazing features! Learn More About Vertex...

Every template built on Vertex also comes with its own unique template specific options applicable to that particular template such as highlight colors, social icons, and much more. These features are in addition to the standard functions of Vertex, and are still controlled through the very user friendly interface of Vertex. This page will document the features specific to this template.

Template Specific Configuration Interface of Vertex

Below is a screenshot that shows all the template specific features available in the user friendly Vertex admin:

Video or Image Background

Incline comes with an option for either a video or image background when the custom_1 position is used. There are thousands of short video clips available at sites like siteground.com that can match most websites. If you cannot a video that you like, or simply don't want one, you can use an image as the background instead as well as just a solid color. This image is also used for tablets and mobile devices, where the video is automatically turned off due to restrictions on those kinds of devices. In addition you can also turn on or off an overlay effect that covers the video or image as shown on this demo.

LIVE EXAMPLE - See a demo with no video background
LIVE EXAMPLE - See a demo with a video background

Header Background Image and Color

Whenever the custom_1 position is used it will use the video or image settings above for the top of the site. Whenever custom_1 is not used a separate image and color set is used for the header area. You may use the same image as above for the custom_1 area, or select a new one entirely. In addition you can also turn on or off an overlay effect that covers the image as shown on this demo.

Custom Highlight Color

Stylize your site with any color you want. Set your own custom color scheme with the built in highlight color. This controls menu items, titles, buttons, hover over effects, backgrounds, and much more. You can set this color to any color that you want. Below is an example so you can see how this works.

Custom Row Background Colors

In addition to the custom highlihgt color above, you can easily control the background color or image of any row in this template with the power of Vertex. In addition to the default Vertex rows this template also includes several custom rows in which you can control the background colors as well. This is all done very easily through a color picker in the backend of Vertex.

Custom Highlight Font

Choose a custom highlight font powered by Google fonts. You can set a custom font for the titles, buttons, and much more. This is used in conjunction with the default site font which is controlled under the Layout tab of Vertex, and controls many other elements as well.

Uppercase Letters

Choose to enable or disable uppercase letters on most menu items, buttons, titles and more.

Enable or Disable The First Menu Item

In the settings you can turn on or off the first menu item. It is a common trend to turn off the Home menu item and simply let users click the logo to return to the homepage if needed.