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.
Drop Down Panel
Sample Drop Down Module
This is an example of a module published to the drop_down row. This row contains 6 modules. To enable the drop down simple publish any module to any of the drop_down_x positions.
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:
This is a custom html module that is published custom_6. It does require Ion Icons to be enabled.
The S5 Image and Cotent Fader is published custom_3 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. The text can use class "iacf_right" or "iacf_left"
The S5 Quick Contact is published custom_4 and shows below the Image and Content Fader. The pre-text field is required for this design, that can be set in the module's parameters. The pre-text on this demo reads "Request a Quote" with no special html markup needed.
<span class="iacf_title">Learn How To Grow Your Own Beautiful Garden</span>
Lorem ipsum dolor sit amet, consectetur adipiicing elit sed do eiusmod
tempor incid dunt ut lorem ipsum labore et dolore magna.
<br><br>
<a href="index.php/extensions/s5-image-and-content-fader" class="readon">Learn
More</a>
<a href="index.php/extensions/s5-image-and-content-fader" class="readon
readon_highlight2">Get Started Now</a>
</span>
20 Years of Quality:
This is a custom html module that is published to top_row1_1.
<div class="left_title">
<h3>20 Years of Quality Service in Landscaping</h3>
Quisque odio nisi, pharetra vitae nisl commodo, finibus tristique lacus. Nullam
dolor odio, tempus quis ante sed, iaculis sollicitudin sem. Duis et viverra
turpis. Cras fermentum laoreet nulla in semper. Tellus ultricies gravida.
Phasellus quis erat eu tortor malesuada tristique vitae volutpat nulla.
<div style="clear:both;height:0px;"></div>
</div>
OUr Services Top Boxes:
This is a custom html module that is published to top_row2_1. The background for this row is controlled in the template configuration under Main/Layout.
Lorem ipsum dolor sit amet, consectetur adipi icing elit sed do eiusmod tempor
incid dunt.
</div>
<a class="readon readon_highlight1_less1" href="index.php/features-mainmenu-47/template-specific-features">Get
Started Now</a>
</div>
</div>
<div class="service_item">
<a href="/demo/fitness_center/index.php/features-mainmenu-47/template-specific-features">
<div class="service_item_img_wrap">
<img src="images/service2.jpg" alt="">
</div>
</a>
<div class="service_item_text">
<div class="service_item_text_inner">
<h3>Snow Removal</h3>
Mauris convallis dictum urna, sit amet rhoncus lacus lacinia nec. Phasellus vel
ligula ipsum nisi.
</div>
<a class="readon" href="index.php/features-mainmenu-47/template-specific-features">Get
Started Now</a>
</div>
</div>
<div style="clear:both:height:0px;"></div>
</div>
<div class="service_row" data-sr="enter right, over 0.8s, move 300px, wait
0.3s">
<div class="service_item">
<a href="/demo/fitness_center/index.php/features-mainmenu-47/template-specific-features">
<div class="service_item_img_wrap">
<img src="images/service3.jpg" alt="">
</div>
</a>
<div class="service_item_text">
<div class="service_item_text_inner">
<h3>Patios & Pavers</h3>
Praesent pharetra neque ut nulla faucibus, a aliquet purus condimentum.
Curabitur at eros.
</div>
<a class="readon readon_highlight1_plus1" href="index.php/features-mainmenu-47/template-specific-features">Get
Started Now</a>
</div>
</div>
<div class="service_item">
<a href="/demo/fitness_center/index.php/features-mainmenu-47/template-specific-features">
<div class="service_item_img_wrap">
<img src="images/service4.jpg" alt="">
</div>
</a>
<div class="service_item_text">
<div class="service_item_text_inner">
<h3>Mowing Services</h3>
Praesent pharetra neque ut nulla faucibus, a aliquet purus condimentum. In ac
elit interdum.
</div>
<a class="readon readon_highlight1_plus2" href="index.php/features-mainmenu-47/template-specific-features">Get
Started Now</a>
</div>
</div>
<div style="clear:both:height:0px;"></div>
</div>
<div style="clear:both:height:0px;"></div>
</div>
Landscape Experts:
This is a custom html module that is published to top_row_1.
<div class="picture_text">
<div class="picture_text_left">
<h3>We are Your Landscape Experts</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris commodo luctus
ante, in vestibulum est auctor ut. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Aliquam vitae ante consectetur,
elementum justo nec, convallis tortor.
<br /><br /><br />
<div class="icon_text">
<img src="images/icon1.png" alt="" />
<h4>Professional Quality</h4>
Mauris purus lorem, mattis at tincidunt at, accumsan quis nulla. Pellentesque
vel lacus sit quis egestas amet.
</div>
<div class="icon_text">
<img src="images/icon2.png" alt="" />
<h4>Daily Maintenance</h4>
Mauris commodo luctus ante, in vestibulum est. Lorem ipsum dolor sit amet,
consec tetur quis egestas adi elit.
</div>
<div class="icon_text">
<img src="images/icon3.png" alt="" />
<h4>Fence Installations</h4>
Duis nec euismod libero. In tellus urna, iaculis ut tellus ut, ultricies
consectetur quis egestas finibus lorem nulla.
</div>
<div style="clear:both;height:0px;"></div>
</div>
<div class="picture_text_right" data-sr="move 16px scale up 20%, over 0.7s">
<img src="images/person.jpg" alt="" />
<div style="clear:both;height:0px;"></div>
</div>
<div style="clear:both;height:0px;"></div>
</div>
Article and Price Boxes:
This is a custom html module that is published to right_top, and an article set to featured. The background for this row is controlled in the template configuration under Main/Layout.
right_top module:
<div class="prices_wrap">
<div class="centered_title">
<h3>Pick the landscape service that’s right for you!</h3>
Lorem ipsum dolor sit amet, consectetur adipiicing elit sed do eiusmod tempor
incid dunt ut lorem ipsum labore et dolore magna aliqua Aliquam adipiscing
egestas.
<br /><br />
<a href="index.php/features-mainmenu-47/template-specific-features" class="readon
readon_highlight2">Get Started Now</a>
</div>
<a href="index.php/features-mainmenu-47/template-specific-features">
<img src="images/article.jpg" alt="">
<h3 class="default_font article_h3">Cultivating people with a love for
gardening</h3>
</a>
Lorem ipsum dolor sit amet, consectetur adipisc ing elit, sed do eiusmod tempor
incididun ut labore et dolore. Perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem ape riam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo.
<hr id="system-readmore" />
<br /><br />
Curabitur iaculis, tortor at ornare cursus, nisi tortor malesuada urna, ac
posuere leo augue pulvinar mi. Sed tristique pulvinar massa, malesuada interdum
nunc tincidunt quis. Aliquam bibendum lobortis magna eu faucibus. Integer et
tincidunt elit. Suspendisse vestibulum ipsum nec sapien accumsan, at lacinia
nisl finibus. Aenean in malesuada diam. Pellentesque volutpat diam enim, a
consectetur nisi iaculis id. Donec vitae porttitor lacus, quis porttitor ligula.
Nam sed purus mattis, ornare nunc sed, interdum massa. Maecenas id risus vitae
mauris tempus lobortis. Quisque suscipit placerat augue vitae tristique. Aenean
convallis commodo odio, eu facilisis lacus faucibus quis. Sed non sapien
sagittis, dignissim ante eget, pharetra leo.
<br /><br />
Ut mattis pharetra rhoncus. Suspendisse pharetra, mauris at scelerisque
lobortis, nibh risus commodo lorem, id fringilla erat metus at nulla. Fusce et
justo in tortor eleifend suscipit. Phasellus malesuada in ex tempor fringilla.
Donec fringilla metus eu leo tincidunt venenatis. Duis lacinia mattis lorem, non
elementum mi malesuada a. Vestibulum eleifend ultricies purus a gravida. Mauris
quis vehicula ex. Integer non nulla fringilla, placerat est eget, aliquam
ligula. Etiam consectetur lorem neque, ut dictum odio consequat eget. Ut eu odio
vel lacus porta aliquet.
<br /><br />
Curabitur pretium aliquet magna non rutrum. Ut a cursus odio. Phasellus vel
justo eget enim varius venenatis at sed metus. Vestibulum maximus dolor
fermentum, tristique purus eget, finibus elit. Mauris in sapien aliquam,
bibendum orci nec, consequat lectus. Nunc bibendum lobortis quam. Sed
sollicitudin egestas mauris. Fusce lobortis odio et orci interdum imperdiet.
FAQ Area:
This is a custom html module that is published to bottom_row1_1.
<div class="faqs_wrap">
<div class="centered_title">
<h3>Curb Appeal is the perfect choice for your small business</h3>
Lorem ipsum dolor sit amet, consectetur adipiicing elit sed do eiusmod tempor
incid dunt ut lorem ipsum labore et dolore magna aliqua Aliquam adipiscing
egestas leo Duis et erat aliquam.
</div>
<div class="faqs_wrap_detail_wrap">
<div class="faqs_wrap_detail_img_wrap" style="background: url('images/faq.jpg');"></div>
<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">
<h4 class="default_font">What You Need To Know About Hardscaping</h4>
<section class="ac-container">
<div><input id="ac-1" name="accordion-1" checked="checked" type="radio" />
<label for="ac-1">1. How long will a patio installation generally take?</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 brand pavers do you install and where are they made?</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 do I go about receiving a quote for hardscaping?</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>
</section>
</div>
</div>
This area uses the S5 Tab Show module, which is published to bottom_row2_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 customer is show below and does require Ion Icons to be enabled if you are using the star ratings. The customer images are defined in the module's backend under the Button Options area.
<div class="customer_quote">
“Lorem ipsum dolor sit amet, consectetur aled leium adipiscing elit. Donec et
eleifend libero dignissim sit ametlobo tis vestibulum lorem ipsum ligula et
malesuada fames ac ante ipsum primis in faucibus.”<br />
<span class="customer_quote_name"><strong>Michele Moyer</strong></span>
<span class="ion-android-star active_star"></span>
<span class="ion-android-star active_star"></span>
<span class="ion-android-star active_star"></span>
<span class="ion-android-star inactive_star"></span>
<span class="ion-android-star inactive_star"></span>
</div>
Our Landscape Team:
This is a custom html module that is published to custom_5. This area must be used with the html given below and is intended only for use with text on the left side on top of the highlight color background.
<div class="our_team_wrap">
<div class="our_team_left">
<h3>Our Landscape Team</h3>
Lorem ipsum dolor sit amet, consectetur adipiicing elit sed do eiusmod tempor
incid dunt ut lorem ipsum labore et dolore magna aliqua.
<br /><br />
Arem ipsum labore et dolore magna aliqua Aliquam adipiscing egestas leo Duis et
erat aliquam.
<br /><br />
<a class="readon" href="index.php/pages/contact-us">Contact Us Now</a>
</div>
<div class="our_team_right">
<div class="our_team_employee_wrap" data-sr="move 16px scale up 20%, over 0.7s">
<div class="our_team_employee">
<div class="our_team_employee_text">
<div class="our_team_employee_name">Sarah Kline</div>
<div class="our_team_employee_title">Head Garden Expert</div>
</div>
<img src="images/employee1.jpg" alt="" />
</div>
<div class="our_team_employee" data-sr="move 16px scale up 20%, over 0.7s, wait
0.3s">
<div class="our_team_employee_text">
<div class="our_team_employee_name">Richard Smith</div>
<div class="our_team_employee_title">Mowing Specialist</div>
</div>
<img src="images/employee2.jpg" alt="" />
</div>
<div class="our_team_employee" data-sr="move 16px scale up 20%, over 0.7s, wait
0.3s">
<div class="our_team_employee_text">
<div class="our_team_employee_name">Brandon Lee</div>
<div class="our_team_employee_title">Hardscaping Services</div>
</div>
<img src="images/employee3.jpg" alt="" />
</div>
<div style="clear:both;height:0px;"></div>
</div>
</div>
<div style="clear:both;height:0px;"></div>
</div>
Bottom Row3:
This area does not use custom html, but the background images are defined in the Main/Layout area of the template configuration. The top gras image is applied to the Area2 settings, and the repeating dirt background is applied to the Area1 settings. The template will by default come with these settings already in place, but does not come with the images as they are stock photography. Links are provided in the Curb Appeal downloads area to where you can purchase these images.
1-800-555-1212
