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 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.
Social Icons and Top Info:
This area consists of the custom_1 and custom_2 module position. The phone number and email addresss on the left are in a custom html module published to custom_1. The social icons are also a custom html module published to custom_2. The font resizer, and login options are controlled in the template configuration. And the search icon will appear if a module is published to the "search" position. Ion Icons must be enabled in the template configuration for the icons to show.
This area consists custom_3 and custom_4. The video is published to custom_3 and custom_4 contains the text, which will always show on top of custom_3. Both modules are custom html modules. In the video code, you may adjust your max and min heights, as well as the file name for the background image and video file. You may publish any module to custom_3 that you would like, such as our S5 Image and Content Fader module as well.
<div class="video_text">
<div class="video_text_large">Business Done Right</div>
<div class="video_text_sub">Nullam elementum ante sit amet fringilla facilisis.
Donec tincidunt veht.
Proin tincidunt interdum risus, id imperdiet urna. Sed pulvinar vitae enim
hendrerit conse
Pellentesque pharetra eu tellus sed aliquam.</div>
<a href="index.php/features-mainmenu-47/template-specific-features" class="readon
readon_highlight2">Read More</a>
<a href="index.php/features-mainmenu-47/template-specific-features" class="readon
readon_highlight_dark">Features</a>
<div style="clear:both;height:0px;"></div>
</div>
Start Your Business Off Right:
This is a custom html module that is published to the custom_5 position.
<div class="large_text">
Start your business off right with our support. Contact us today.
<a href="/hexa_corp/index.php/features-mainmenu-47/template-specific-features"
class="readon readon_white">Read More</a>
</div>
About Our Company:
This is a custom html module that is published to the top_row1_1 position. It uses the class suffix "large_title". Scroll Reveal must be enabled for the slide in transition to appear.
Quisque non nibh sed metus commodo convallis. Duis a tellus ut neque laoreet
fermentum. Sed ante sapien, aliquam dignissim ex eu, dapibus pellentesque velit.
Fusce vestibulum porta turpis eu aliquet.
<br><br>
Nullam elementum ante sit amet fringilla facilisis. Donec tincidunt vehicula
tincidunt. Proin tincidunt interdum risus, id imperdiet urna. Sed pulvinar vitae
enim hendrerit consequat. Pellentesque pharetra eu tellus sed aliquam. Nunc
mollis nibh et odio posuere, id semper eros pulvinar.
<br>
<div style="clear:both;height:0px;"></div>
<img src="/hexa_corp/images/signature.png" alt="" class="signature_image">
Top Boxes:
This area uses the S5 Tab Show module, which is published to top_row1_1. For setup instructions for S5 Tab Show please visit: http://www.shape5.com/documentation/Joomla/Extensions/S5-Tab-Show. The custom html used for each slide is shown below and does require Ion Icons to be enabled. Scroll Reveal must be enabled for the slide in transition to appear.
<div class="icon_image_box_wrap">
<div class="icon_image_box_outer icon_image_box_light" data-sr="move 16px scale
up 20%, over 0.7s">
<div class="icon_image_box">
<img alt="" src="images/top1.jpg" />
<div class="icon_outer_wrap">
<div class="icon_hover">
<a class="ion-link icon_element" href="index.php/features-mainmenu-47/template-specific-features"></a>
</div>
<div class="icon_non_hover">
<span class="ion-cloud icon_element"></span>
</div>
</div>
<h3>Cloud Solutions</h3>
<span class="icon_image_box_text">Eiusmod tempor incid dunt ut labore et dolore
magna aliqua Lorem ipsum dolor sit amet, consectetur adipi icing elit sed
do.</span>
</div>
</div>
<div class="icon_image_box_outer icon_image_box_medium" data-sr="move 16px scale
up 20%, over 0.7s, wait 0.2s">
<div class="icon_image_box">
<img alt="" src="images/top2.jpg" />
<div class="icon_outer_wrap">
<div class="icon_hover">
<a class="ion-link icon_element" href="index.php/features-mainmenu-47/template-specific-features"></a>
</div>
<div class="icon_non_hover">
<span class="ion-clock icon_element"></span>
</div>
</div>
<h3>Quick Results</h3>
<span class="icon_image_box_text">Lorem ipsum dolor sit amet, consectetur adipi
icing elit sed do eiusmod tempor incid dunt ut labore et lorem dolore mag.</span>
</div>
</div>
<div class="icon_image_box_outer icon_image_box_dark" data-sr="move 16px scale
up 20%, over 0.7s, wait 0.4s">
<div class="icon_image_box">
<img alt="" src="images/top3.jpg" />
<div class="icon_outer_wrap">
<div class="icon_hover">
<a class="ion-link icon_element" href="index.php/features-mainmenu-47/template-specific-features"></a>
</div>
<div class="icon_non_hover">
<span class="ion-ios-cog icon_element"></span>
</div>
</div>
<h3>Professional Work</h3>
<span class="icon_image_box_text">Aliquam ut mollis mi, id congue augue. Morbi
diam ipsum, dictum vel erat et, interdum bibendum ipsum. In a laci lorem.</span>
</div>
</div>
<div style="clear:both;height:0px;"></div>
</div>
Customer Testimonials:
This area uses the S5 Tab Show module, which is published to top_row2_2. For setup instructions for S5 Tab Show please visit: http://www.shape5.com/documentation/Joomla/Extensions/S5-Tab-Show. The custom html used for each slide is shown below. The large picture of a woman is a custom html module published to top_row2_1, that module also uses the following hide class to hide the module at 1100px screen width: class=hide_1100. Scroll Reveal must be enabled for the slide in transition to appear.
Picture:
<div class="testimonials_img_wrap">
<img data-sr="move 16px scale up 20%, over 0.7s" class="testimonials_img"
src="images/testimonials.png" alt="" />
<div style="clear:both;height:0px;"></div>
</div>
Tab Show Testimonial Content:
<div class="testimonial_wrap">
<img class="testimonial_image" src="images/testimonial1.jpg" alt="" />
<span class="testimonial_name">Brandon Daniels</span>
<span class="testimonial_title">Kline and Precept Lmtd.</span>
<span class="testimonial_text">Donec elementum ligula et metus fermentum
molestie. Aenean vehicula ullamcorper libero sed efficitur. Sed in ornare
mauris, a tempus.</span>
<div style="clear:both;height:0px;"></div>
</div>
Content and Accordion:
This area contains the default article area, and a custom html module accordion published to the right_inset position. Scroll Reveal must be enabled for the slide in transition to appear.
<div class="faqs_wrap_detail_text_wrap" data-sr="move 16px scale up 20%, over
0.7s">
<div class="faqs_wrap_detail_text_wrap_inner">
<section class="ac-container">
<div><input id="ac-1" name="accordion-1" checked="checked" type="radio" />
<label for="ac-1">1. How can I contact a consultant to review my
business?</label>
<article class="ac-small">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis gravida
justo, a rhoncus sem volutpat in. Pellentesque lacinia lacinia ligula, eget
tempor elit sagittis non. Vestibulum pellentesque lorem nec diam interdum
pellentesque.</p>
</article>
</div>
<div><input id="ac-2" name="accordion-1" type="radio" /> <label for="ac-2">2.
What will a consultant tell me about my business practices?</label>
<article class="ac-small">
<p>Etiam tempus facilisis ultrices. Nam adipiscing nunc nec est dapibus, eget
eleifend velit mattis. Curabitur facilisis a rhoncus sem volutpat in condimentum
augue at viverra. Ut ut tortor feugiat, dignissim nulla non, venenatis leo.</p>
</article>
</div>
<div><input id="ac-3" name="accordion-1" type="radio" /> <label for="ac-3">3.
How often would you suggest having corporate meetings?</label>
<article class="ac-small">
<p>Morbi nunc nunc, elementum quis tortor et, feugiat pharetra eros. Mauris
mattis purus at lobortis auctor. Nullam eros velit, laoreet vel libero posuere,
a rhoncus sem volutpat in eleifend ornare libero. Cras iaculis interdum dui.</p>
</article>
</div>
<div><input id="ac-4" name="accordion-1" type="radio" /> <label for="ac-4">4. Do
I have to be local to the Seattle area to use all of your services?</label>
<article class="ac-small">
<p>Etiam tempus facilisis ultrices. Nam adipiscing nunc nec est dapibus, eget
eleifend velit mattis. Curabitur facilisis a rhoncus sem volutpat in condimentum
augue at viverra. Ut ut tortor feugiat, dignissim nulla non, venenatis leo.</p>
</article>
</div>
</section>
</div>
</div>
Learn More About Us:
This area is a custom html module that is published to custom_6. The images and text can be adjusted in the code below. The image on the left side will disappear on smaller screens. Ion Icons must be enabled in the template configuration for the icons to appear. Scroll Reveal must be enabled for the slide in transition to appear.
<div class="learn_about_us_wrap">
<div class="learn_about_us_img_wrap" style="background: url(/hexa_corp/images/learn_left.jpg);"></div>
<div class="learn_about_us_text_wrap" style="background: url(/hexa_corp/images/learn_right.jpg);">
<div class="learn_about_us_text_wrap_inner">
<div class="large_split_title">
<h3>Learn More About Us</h3>
<span>Let us help you make you make your business a success</span>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut pellentesque
velit, a dictum tortor. Donec euismod posuere diam, at imperdiet felis rhoncus
at. Donec vitae ante odio. Nullam vel solliin mi. Proin ante magna, interdum
lacinia interdum in, tristique pulvinar purus.
<br><br><br>
This area is a custom html module that is published to bottom_row1_1. The images and text can be adjusted in the code below. Scroll Reveal must be enabled for the slide in transition to appear.
<span class="large_text">Stay in touch with us through our newsletter.</span>
Stats Row:
This is a custom html module that is published to the custom_8 position. Ion Icons must be enabled in the template configuration for the icons to appear. Scroll Reveal must be enabled for the slide in transition to appear.
This area consists of two modules. S5 Map is published to custom_9. All instructions for the S5 Map It module are found in it's backend. The bottom information is a custom html module published to bottom_row3_1. Whenever the bottom row 3 is published in conjunction with custom_9, it will overlap custom_9. If custom_9 is not present this overlap will not occur.
<div class="our_location">
<div class="location_text">Mauris dictum, diam vel gravida fringilla, tellus
velit vulputate augue, non cursus erat est ac ipsum pellentesque porta massa
maximus mauris auctor maximus.
<br>
<br>
<a class="readon readon_highlight2" href="/hexa_corp/index.php/pages/contact-us">Contact
Us Today</a>
</div>
<div class="location_column_wrap">
<span class="location_title">HexaCorp Business Center</span>
<span class="location_address">
10 Meyer Avenue<br>
Bigtown, WA 12731<br>
USA
<span class="location_phone">1-800-555-1212</span>
</span>
</div>
<div style="clear:both;height:0px;"></div>
</div>
Our Location
Mauris dictum, diam vel gravida fringilla, tellus velit vulputate augue, non cursus erat est ac ipsum pellentesque porta massa maximus mauris auctor maximus.
