Module and Position
Home (Default Page of Free Edition)
(All another layouts document are contained in Pro Version)
6.
Menu item type: Single Article
Article Name: About Us
HTML source code:
<div id="accordion2" class="accordion avatar-accordion-1" style="margin-top: 30px;">
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapseOne" data-toggle="collapse" data-parent="#accordion2">Who we are </a></div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
<p style="line-height: 1.3em;">Who we are Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo tristique odio, quis fringilla ligula aliquet ut. Maecenas sed justo varius velit imperdiet bibendum. Integer commodo tristique odio, quis fringilla ligula aliquet ut. Maecenas sed justo varius velit imperdiet bibendum.</p>
</div></div></div>
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapseTwo" data-toggle="collapse" data-parent="#accordion2">What we do </a></div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
<p style="line-height: 1.3em;">What we do Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo tristique odio, quis fringilla ligula aliquet ut. Maecenas sed justo varius velit imperdiet bibendum. Integer commodo tristique odio, quis fringilla ligula aliquet ut. Maecenas sed justo varius velit imperdiet bibendum.</p>
</div></div></div>
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapseThree" data-toggle="collapse" data-parent="#accordion2">Why we do it </a></div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
<p style="line-height: 1.3em;">Why we do it Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo tristique odio, quis fringilla ligula aliquet ut. Maecenas sed justo varius velit imperdiet bibendum. Integer commodo tristique odio, quis fringilla ligula aliquet ut. Maecenas sed justo varius velit imperdiet bibendum.</p>
</div></div></div></div>
1.
Module Type: Custom HTML
Module Name: Logo
Module Class Suffix: no-padding-marging avatar-template-logo
Position: Top-left
HTML source code:
<p><a href="Your Link Site "><span style="color: #000;">Your</span> Site Name</a></p>
2.
Module Type: Menu
Module Name: Main Menu
Module class suffix: _menu no-padding-marging
Menu class suffix: avatar-main-menu
Alternative layout: Responsive
Position: Top-right
3.
Module Type: Avatar Articles Nivo
Module Name: Banner Tool Home
Module Class Suffix: avatar-caption no-padding-marging avatar-banner-full
Module Postion: Tool
Go to Content Manager.
Creat New Category.
Create articles in category just created.
In a newly created articles, Select intro image and written content slide.
Then go to the Banner Tool Home Manager.
Select the category for slidershow.
4.
Module Type: Custom HTML
Module Name: Slogan
Module class suffix: avatar-slogan no-padding-marging avatar-shadow-1 avatar-slogan-margin-negative
Position: Content-top
HTML source code:
<p style="float: right; margin: 20px 20px;"><a class="btn" href="#" target="_blank"><strong style="font-size: 13px; line-height: 24px;">PURCHASE NOW</strong></a></p>
<p><strong style="line-height: 24px; font-size: 16px; color: black;">Mauris scelerisque ante neque, sit amet auctor lorem. </strong></p>
<p><span style="line-height: 24px; font-size: 13px;">Vivamus a magna sit amet magna imperdiet convallis. Proin metus mi, condimentum ut rhoncus ac, adipiscing vel dui. </span><span style="font-size: 13px; line-height: 24px;">Vivamus a magna sit amet magna imperdiet convallis. Proin metus mi, condimentum ut rhoncus ac, adipiscing vel dui.</span><span style="font-size: 13px; line-height: 24px;"><br /></span></p>
5.
Module Type: Custom HTML
Module Name: About Us
Module class suffix: no-padding-margin-side avatar-module-7
Position: Left-top
HTML source code:
<p><img src="your image Link" alt="" style="margin-top: 30px; display: block; margin-left: auto; margin-right: auto;" /></p>
7.
Module type: Lastest News
Module name: LASTEST NEWS
Module class suffix: avatar-module-7
Position: Right-top
8.
Module Type: Custom HTML
Module Name: DESIGNED FOR EVERYONE, EVERYWHERE
Module class suffix: avatar-module-7 avatar-heading-center no-padding-marging
Position: Content-bottom
HTML source code:
<p style="text-align: center;"><strong>Need reasons to love Avatar Nine</strong></p>
9, 10, 11, 12
Module Type: Custom HTML
Module Name: FAST & LIGHTWEIGHT, RESPONSIVE DESIGN, EASY CUSTOMIZATION, BOOTSTRAP
Module class suffix:
Position: User-15, User-16, User-17, User-18
HTML source code:
<p style="text-align: center;"><span class="feature-icon"><img src="Your Feature Image icon Link" width="80" height="80" style="display: block; margin-left: auto; margin-right: auto;" /></span></p>
<h3 style="text-align: center;"><strong>YOUR FEATURE NAMES</strong></h3>
<p style="text-align: center;"><em><span style="line-height: 1.3em;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam molestie rutrum est eget ornare. Donec tellus purus</span></em><a href="#" style="line-height: 1.3em;"><br /></a></p>
Note: Your Feature Image icon Link should be square and transparent background for best effects
13.
Module Type: Menu
Module Name: Footer Menu
Module class suffix: no-padding-margin-side
Menu class suffix: avatar-footer-nav
Alternative layout: Responsive
Position: Footer-Left
14.
Module Type: Custom HTML
Module Name: Address
Module Class Suffix: avatar-module-border-top avatar-footer-address no-padding-marging
Position: Footer -left
HTML source code:
<ul style="display: table;">
<li class="avatar-address"><span style="line-height: 1.3em;">Address: Your Address</span></li>
<li class="avatar-phone"><span style="line-height: 1.3em;">Phone: Your Phone Number</span></li>
<li class="avatar-email"><span style="line-height: 1.3em;">Email: Your email</span></li>
</ul>
15.
Module Type: Custom HTML
Module Name: STAY CONNECTED
Module Class Suffix: no-padding-margin-side social-heading
Position: Footer -right
HTML source code:
<div class="avatar-footer-social avatar-module-border-top">
<a class="facebook" href="Your Facebook Link"> </a>
<a class="twitter" href="Your Twitter Link"> </a>
<a class="feed" href="Your Feed Link"> </a>
<a class="youtube" href="Your Youtube Link"> </a>
<a class="vimeo" href="Your Vimeo Link"> </a>
<a class="linkedin" href="Your Linkedin Link"> </a>
</div>
16.
Module Type: Custom HTML
Module Name: copyright
Module Class Suffix: avatar-copyright
Position: Footer
HTML source code:
<p><a href="www.joomavatar.com">Copyright © 2013 Avatar Nine. All Rights Reserved.</a></p>