This is a sample module published to the sidebar_top position, using the -sidebar module class suffix. There is also a sidebar_bottom position below the menu.
This is a sample module published to the sidebar_bottom position, using the -sidebar module class suffix. There is also a sidebar_top position below the search.
This is a sample module to showcase the functionality of the S5 Flex Menu system. This menu system contains up to 40 module positions and you can publish any module to any of these positions under any menu item.
This plugin adds Disqus comments and links to any Joomla article or blog view, it can be demo'd at the bottom of this page. Disqus is a powerful and free comment system that will integrate into any website.
Features at a glance
Specify your Disqus shortname
Select a language
Specify which categories will use the plugin
Specify individual pages to use the plugin
Enable or disable the comments link on the category listing
Enable or disable the comments link on the full article
Enable or disable the comments link on the featured articles
The full page scroll option takes each row of Vertex and sets it to the height of your screen. With the arrow buttons of your keyboard or the vertical scrolling of your mouse the screen will jump to the next section. Each row that has modules published to it will show as the full height of your screen. To demo this check out the homepage of this demo. You can enable on the homepage only or have it show on all pages. We recommend that it shows only on the homepage.
You can place the below code on any DIV directly as a child to <div id="s5_body_padding"> and it will make it show up full screen.
class="s5_slidesection"
The below screenshot shows the admin area under the "layout" area of Vertex. You simply start adding names for the row names and then it will be enabled. Be sure to separate them by commas. You can enable the full page scroll to just show on the homepage only.
Fullscreen scroll navigation that shows on the right hand side of yoursite:
Occasionally we need to use custom HTML to obtain the layouts shown on our demos in specific modules. The code below is what was used on this template. It is best to enter this code directly into the HTML editor function of your editor. Some area may require that you enable the Ion Icons (Under General) and Scroll Reveal (Under Javascripts) features in the template configuration.
Photo Showcase:
The S5 Image and Content Fader is published bottom_row1_1. The custom html used for the slides is found below.
Title:
<h1 class="s5_pc_center">We help you achieve the <br><span class="highlight1">most excellent outcome</span> for your project</h1>
The S5 Tab Show is published custom_1. The custom html used for the slides is found below and is published to the module positions "s5_tab4, s5_tab5, etc. The S5 Typed Text needs to be enabled for the below HTML to work.
<div class="s5_typedstring s5_pc_center s5_typedstring_desktop">
<h1>We help you achieve the<br> <span class="s5_highlight1">best outcome</span></h1>
<h1>We help you achieve the<br> <span class="s5_highlight1">premier outcome</span></h1>
<h1>We help you achieve the<br> <span class="s5_highlight1">most excellent outcome</span> for your project</h1>
</div>
<h1 class="s5_typedstring_desktop s5_pc_center"><span id="typed" class="large_typedtext s5_pc_center" style="white-space:pre;"></span> </h1>
<h1 class="s5_typedstring_mobile s5_pc_center">We help you achieve the<br> <span class="s5_highlight1">most excellent outcome</span> for your project</h1>
We are a creative agency that is here for you and your project until your vision becomes a reality. Phasellus consectetur, sapien tempuam liber tempor cum soluta nobis <br /><br />
<a class="readon">View All Services</a>
</div>
top_row1_2 code:
<div class="servicesquare_wrap">
<div class="servicesquare two">
<div class="sq_innerpadding s5_highlight2">
<div class="sq_innerpadding2">
<span class="s5_sicon ion-ios-cloud-outline"></span>
<strong>Cloud Storage</strong>
<br>
<span class="s5_smalltext">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim. soluta nobis eleifend </span>
</div>
</div>
</div>
<div class="servicesquare two">
<div class="sq_innerpadding gray">
<div class="sq_innerpadding2">
<span class="s5_sicon ion-ios-gear-outline"></span>
<strong>App Interface Design</strong>
<br>
<span class="s5_smalltext">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim. soluta nobis eleifend </span>
</div>
</div>
</div>
<div style="clear:both;"></div>
<div class="servicesquare two">
<div class="sq_innerpadding gray">
<div class="sq_innerpadding2">
<span class="s5_sicon ion-ios-bolt-outline"></span>
<strong>Lightning Fast</strong>
<br>
<span class="s5_smalltext">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim. soluta nobis eleifend </span>
</div>
</div>
</div>
<div class="servicesquare two">
<div class="sq_innerpadding s5_highlight1">
<div class="sq_innerpadding2">
<span class="s5_sicon ion-ios-help-outline"></span>
<strong>24/7 Support</strong>
<br>
<span class="s5_smalltext">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim. soluta nobis eleifend </span>
</div>
</div>
</div>
</div>
<div style="clear:both;"></div>
Download our App:
These are custom HTML modules. The code for each is below:
Phasellus consectetur, sapien tempus mollis facilisis, orci ipsum commodo lectus, quis rhoncus enim libero vitae mi. maximus. Proin convallis enim ut velit convallis, eu euismod quam sagittis
<br><br>
<a class="readon highlight1"><i class="ion-social-apple"></i>App Store Download</a> <a class="readon"><i class="ion-social-android"></i>Google Play Download</a>
With our diverse team of professionals we can deliver 100% on any project. Each member has a specific skill that they provide to our team. Phasellus consectetur, sapien tempus mollis facilisis,
<br><br>
Lorci ipsum commodo lectus, quis rhoncus enim libero vitae mi. maximus. Proin convallis enim ut velit convallis, eu euismod quam sagittis
<br><br>
<div class="s5_userprofile">
<img src="images/profilepic.jpg" alt="signature" class="s5_uprofilepic" />
<span>
<strong>Carl Ancelica</strong><br/>
Founder/CEO
</span>
</div>
<img src="images/signature.jpg" alt="signature" style="float:right;" />
<div style="clear:both;"></div>
Stats and Testimonials:
The 4 stats areas are custom HTML published to the custom_3 module position. The code for this is below. The Testimonials module is the S5 Tab show using the first 3 positions "s5tab_1, 2, etc" and is published to the below_columns1 position.
<div class="tabshow_center">
<blockquote>
<p>
Phasellus consectetur, sapien tempus mollis facilisis, orci ipsum commodo lectus, quis rhoncus enim libero vitae mi. maximus. Proin convallis enim ut velit convallis, eu euismod quam sagittis rhoncus enim libero vitae mi. maximus. Proin convallis enim ut velit convallis, eu euismod quam sagittis
</p>
</blockquote>
<br>
<strong class="s5_highlight1">Mike Snotts</strong> /M Creative Agency
</div>
Image and Content Fader:
The S5 Image and Cotent Fader is published bottom_row1_1 and the slides use only the slide text; make sure the titles are turned off. The custom html used for the slides is found below.
Title:
Get the <span class="highlight1">best</span> when you
work with the best <span class="highlight1">creative agency</span>.
Text:
Web Design, App Design, Branding and More
<br><br>
<a class="readon blue">FREE Download v1.0</a>
<a class="readon s5mb" title="Intro" id="youtube" href="http://www.youtube.com/embed/V-wmpoIN2gs" rel="width:800,height:447"><i class="ion-ios-play"></i>Watch Video</a>
Pricing Packages:
This is a custom html module that is published to custom_4. It does require Scroll Reveal to be enabled. You can change the image of the left side directly in the code below.
Bottom Row 2_1:
<div class="s5_marginright">
<div class="s5_pricingpackages"></div>
<div class="s5_mod_h3_outer">
<h3 class="s5_mod_h3">
<i class="s5_mod_ion_icon ion-cube"></i>
<span class="s5_h3_first">Software</span><span class="s5_h3_last"> Pricing Packages</span>
</h3>
</div>
Phasellus consectetur, sapien tempus mollis facilisis, orci ipsum commodo lectus, quis rhoncus enim libero vitae mi. maximus. Proin convallis enim ut velit convallis, eu euismod quam sagittis
<br><br>
<a class="readon">Try Free Demo</a>
</div>
Bottom Row 2_1:
<div class="s5_pricetable_2">
<div class="s5_pricetable_column recommended">
<div class="s5_pricetable_column_padding">
<div class="s5_title">Premium</div>
<div class="s5_price_wrap">
<span class="dollarsign">$</span><span class="price">45</span><span class="month">/month</span>
</div>
<div class="s5_options">
<div class="s5_option">
Unlimited Space & Traffic
</div>
<div class="s5_option">
99.9% Server Uptime
</div>
<div class="s5_option">
24/7 Customer Care
</div>
<div class="s5_option">
30 Days Money Back
</div>
<div class="s5_option">
FREE Domain Name
</div>
<div class="s5_option">
Personal Concierge
</div>
</div>
The S5 Google map is published to the "custom_4" module position. The address text is a custom HTML module published to the "custom_5" module position. The HTML for this is below. The S5 Quick Contact module is published to the "custom_6" module position.
