Sample Sidebar Module

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.

Sample Sidebar Module

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.
1-800-555-1212

Search our Site

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.



Custom_1:
<div class="top_icon">
<i class="ion-ios-telephone"></i>1-800-555-1212
</div>
<div class="top_icon">
<i class="ion-ios-email"></i><a href="/hexa_corp/">contact@email.com</a>
</div>

Custom_2:
<div class="social_icons">
<a href="" target="_blank" class="social_icon ion-social-facebook"></a>
<a href="" target="_blank" class="social_icon ion-social-twitter"></a>
<a href="" target="_blank" class="social_icon ion-social-googleplus"></a>
<a href="" target="_blank" class="social_icon ion-social-pinterest"></a>
<a href="" target="_blank" class="social_icon ion-social-linkedin"></a>
</div>

Video and Text:

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.



Video:
<div class="video_wrap" style="max-height:980px;min-height:550px;background: url('images/video_preload.jpg');">
<video muted autoplay="autoplay" loop="loop" src="images/video.mp4"></video>
<div class="video_overlay"></div>
</div>

Video Text:
<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>

<div class="learn_about_us_icon_group_item" style="visibility: visible; ">
<div class="learn_about_us_icon_group_icon">
<i class="ion-cloud"></i>
</div>
<div style="overflow:hidden">
<span class="learn_about_us_icon_group_title">Cloud Solutions</span>
Lorem ipsum dolor sit amet, velit.
</div>
</div>

<div class="learn_about_us_icon_group_item" style="visibility: visible; ">
<div class="learn_about_us_icon_group_icon">
<i class="ion-android-chat"></i>
</div>
<div style="overflow:hidden">
<span class="learn_about_us_icon_group_title">Customer Support</span>
Morbi quis egestas lorem etus.
</div>
</div>

<div class="learn_about_us_icon_group_item" style="visibility: visible; ">
<div class="learn_about_us_icon_group_icon">
<i class="ion-clock"></i>
</div>
<div style="overflow:hidden">
<span class="learn_about_us_icon_group_title">Professional Service</span>
Praesent vel convallis, aliquam.
</div>
</div>

<div class="learn_about_us_icon_group_item" style="visibility: visible; ">
<div class="learn_about_us_icon_group_icon">
<i class="ion-ios-cog"></i>
</div>
<div style="overflow:hidden">
<span class="learn_about_us_icon_group_title">Custom Services</span>
Cras efficitur congue lacinia nunc.
</div>
</div>

</div>
</div>

<div style="clear:both;height:0px;"></div>
</div>

Meet Our Professional Team:

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.



<div class="team_wrap">

<div class="team_item" style="visibility: visible; ">
<div class="team_item_inner">
<span class="team_image">
<a href="/hexa_corp/index.php/features-mainmenu-47/template-specific-features">
<img src="/hexa_corp/images/team1.jpg" alt="">
</a>
</span>
<div class="team_details" style="min-height: 181px;">
<span class="team_name">Jason Smith</span>
<span class="team_title">CEO &amp; Founder</span>
<span class="team_text">Lorem ipsum dolor sit amet, consectur adipiscing elit. Vestibulum malesuada eu velit</span>
</div>
</div>
</div>

<div class="team_item" style="visibility: visible; ">
<div class="team_item_inner">
<span class="team_image">
<a href="/hexa_corp/index.php/features-mainmenu-47/template-specific-features">
<img src="/hexa_corp/images/team2.jpg" alt="">
</a>
</span>
<div class="team_details" style="min-height: 181px;">
<span class="team_name">Kathy Saunder</span>
<span class="team_title">Operations Director</span>
<span class="team_text">Vestibulum malesuada eu velit. Lorem ipsum dolor sit amet, consectur adipiscing elit.</span>
</div>
</div>
</div>

<div class="team_item" style="visibility: visible; ">
<div class="team_item_inner">
<span class="team_image">
<a href="/hexa_corp/index.php/features-mainmenu-47/template-specific-features">
<img src="/hexa_corp/images/team3.jpg" alt="">
</a>
</span>
<div class="team_details" style="min-height: 181px;">
<span class="team_name">Matthew Peroni</span>
<span class="team_title">Customer Service</span>
<span class="team_text">Lorem ipsum dolor sit amet, consectur adipiscing elit. Vestibulum malesuada eu velit</span>
</div>
</div>
</div>

<div class="team_item" style="visibility: visible; ">
<div class="team_item_inner">
<span class="team_image">
<a href="/hexa_corp/index.php/features-mainmenu-47/template-specific-features">
<img src="/hexa_corp/images/team4.jpg" alt="">
</a>
</span>
<div class="team_details" style="min-height: 181px;">
<span class="team_name">Stacey Fries</span>
<span class="team_title">Communications Manager</span>
<span class="team_text">Vestibulum malesuada eu velit. Lorem ipsum dolor sit amet, consectur adipiscing elit.</span>
</div>
</div>
</div>

<div class="clear:both;height:0px;"></div>
</div>

Newsletter:

This area uses the S5 Mailchimp module, which published to the custom_7 position. The code given below is entered int othe pre-text field in the module's backend. For setup instructions of this extension please visit: https://www.shape5.com/documentation/Joomla/Extensions/S5-MailChimp-Signup



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



<div class="stats_row">
<div class="stats_light stats_item" style="visibility: visible; ">
<span class="ion-ios-speedometer-outline stats_icon"></span>
<span class="stats_text">Successful Starts</span>
<span class="stats_number">523</span>
</div>
<div class="stats_dark stats_item" style="visibility: visible; ">
<span class="ion-ios-person-outline stats_icon"></span>
<span class="stats_text">Clients Helped</span>
<span class="stats_number">213</span>
</div>
<div class="stats_light stats_item" style="visibility: visible; ">
<span class="ion-ios-folder-outline stats_icon"></span>
<span class="stats_text">Projects Completed</span>
<span class="stats_number">587</span>
</div>
<div class="stats_dark stats_item" style="visibility: visible; ">
<span class="ion-ios-alarm-outline stats_icon"></span>
<span class="stats_text">Hours of Work</span>
<span class="stats_number">4715</span>
</div>
<div style="clear:both;height:0px;"></div>
</div>

S5 Masonry:

This module does not use custom code, but is listed here for reference. It is published to bottom_row2_1.

For setup instructions of this extension please visit https://www.shape5.com/documentation/Joomla/Extensions/S5-Masonry




S5 Map and Bottom Information:

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.

Contact Us Today
HexaCorp Business Center 10 Meyer Avenue
Bigtown, WA 12731
USA 1-800-555-1212