DOCUMENTATION
From
NOOTHEME
All Themes run on Joomla 3.x version (Joomla 3.0, 3.1…). Therefore, your site must install Joomla 3.x version to use our template. The installation of Joomla 3.x only requires a few steps and you can do within a minute!
Phoenix is a Minimal Portfolio Joomla Template that can be used for multipurpose: for a creative agency, a personal portfolio for freelancers or any minimal website.
It is fully responsive one/multi-page template built in Joomla 3, using Bootstrap3, CSS3 and HTML5. 3 Home variations come with different intro section versions – full screen background, full screen parallax slider and full screen video. Phoenix additionally included bonus pages: 404, coming soon with countdown section, single project and number of blog and portfolio page variations. Integrated in the templates, Revolution Slider 2, Noo Portfolio, tons of shortcode and much more features that empower you to tailor your upcoming websites.
The user guide provided is to help you to quickly learn about Phoenix template and how to use it easily. This documentation is recommended for both non-advanced & advanced users. Please read carefully.
Main aspects covered in the user guide:
Full screen background
Full screen slider
Video background
Blog 3 Columns
Blog 2 Columns
Layout
Here are 3 different layouts used in Phoenix template:
Module positions
Take a look at the picture below for all modules’ position on Phoenix

T3 framework is a popular Template framework for Joomla 3.0 using Bootstrap. Phoenix uses T3V3 framework which comes with brand-new look, design approach and incredibly powerful customization feature. Please follow the links provided below to learn more about T3 framework and its implementation.
8.1 T3 Framework Introduction
More about T3 framework, please visit HERE
8.2 T3 Installation
Please visit HERE
8.3 T3 Setting
Please visit HERE
8.4 Layout System
Please visit HERE
8.5 Customization
Please visit HERE
1.1 Kick-start a New Joomla Site? - If you are planning to start fresh with a new Joomla site, then use our Quickstart package to quickly clone the demo site, then replace the demo content with yours. Check the How to install Quickstart Package documentation for the in-depth how-to guide for Quickstart Installation.
1.2 Install on your existing live site? - If you are planning to use this template for your existing Joomla site, then you should follow the How to make your site look like demo site guide first to dig in the steps involved.
After you purchased our menu, please following the instruction to download the package. You’ll then find our template zip file inside the package
Once you successfully Download the files you need, You'll have to:
- Install the template files into your Joomla system.
- At default, during the installation process,Noo Wedding template will be installed with the settings we're used as on the demo website. Therefore, if you would like to make any changes in configuration, it's recommended that you should complete the setup (including installing all the modules and plugins along with the templates as on demo) then carry out any customization afterwards
In Phoenix Onepage, each menu item is configured as a Section Block, numbered from 1 to 7 as follow:
Section 1: Home
Section 2: About
Section 3: Portfolio
Section 4: Team
Section 5: Services
Section #: Pages
Section 7: Contact
Each section is equivalent to a page(one page). You can click on menu item to view these section(pages) with out having to reload your site.
Here is menu’s configuration:

To create menu above, please follow these steps provided:
1.1 Menu Home
Menu type: Featured Articles Menu title: Home
To create menu item, please go to backend: Menu→ Main Menu→ Add New Menu Item with the settings like bellow:

Similarly, do the same steps with another menus, with some informations below:
1.2 Menu About
Menu type: External URL Link : #section-2
1.3 Menu Portfolio
Meny type: External URL Link : #section-3
1.4 Menu Team
Menu type: External URL Link: #section-4
1.5 Menu Services
Menu type: External URL Link: #section-5
1.6 Menu Pages
Menu type: External URL Link: #
1.7 Menu Contact
Menu type: External URL Link: #section-7
2.1 Duplicate style layout
Please go to backend : Extensions→ Template Manager→ Choose noo_phoenix – Default tick this layout then Click “Duplicate” to Duplicate layout.

2.2 Assign layout for template when you duplicated

Now we’ll guide you to create & configure Homepage in Phoenix template:
3.1 Module Home Default Intro
Module type: Custom HTML Position: slideshow Module Class Suffix: intro
Custom HTML
<div class="container valign">
<div class="row">
<div class="col-xs-12">
<img src="images/phoenix/logoWhite.png" class="img-responsive center-block introLogo" alt="Intro Logo">
</div>
<div class="col-xs-12 text-center">
<h1>minimal & bold</h1>
</div>
<div class="col-xs-12 text-center">
<img src="images/phoenix/separatorWhite.png" class="img-responsive center-block separator" alt="separator">
</div>
<div class="col-md-6 col-md-offset-3 text-center">
<p>
Eat imagine you chiefly few end ferrars compass. Be visitor females am ferrars inquiry. Latter law remark two lively thrown. Spot set they know rest its.
</p>
</div>
</div>
</div>
Frontend

3.2 Module Text Separator
Module type: Custom HTML
Position: text-separator
Custom HTML
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<h2 data-scroll-reveal="enter left move 10px over 1s after 0.2s">Phoenix</h2>
<img src="images/phoenix/lineSeparatorWhite.png" class="img-responsive lineSeparator" alt="separator" data-scroll-reveal="enter left move 10px over 1s after 0.3s">
<p data-scroll-reveal="enter left move 10px over 1s after 0.4s">
Moments its musical age explain. But extremity sex now education concluded earnestly her continual. Oh furniture acuteness suspected continual ye something frankness. Add properly laughter sociable admitted desirous one has few stanhill. Opinion regular in perhaps another enjoyed no engaged he at.
</p>
</div>
</div>
<img src="images/phoenix/textSeparatorLogo.png" class="textSepLogo" data-stellar-ratio="0.5" alt="Logo Black">
</div>
Frontend

3.3 Module Welcome Separator
Type: Custom HTML
Position: welcome-separator
Custom HTML
<div class="col-md-7 col-sm-6 hidden-xs image" >
<div class="whiteOverlay"></div>
<img src="images/nootheme/demo/backgroundWelcome.jpg" alt="background">
</div>
<div class="col-md-5 col-sm-6 textOverlay text-center">
<h1 data-scroll-reveal="enter right move 10px over 1s after 0.2s">Welcome</h1>
<img src="images/phoenix/separatorBlack.png" class="img-responsive center-block separator" alt="separator">
<p data-scroll-reveal="enter right move 10px over 1s after 0.4s">
For who thoroughly her boy estimating conviction. Removed demands expense account in outward tedious do. Particular way thoroughly unaffected projection favourable mrs can projecting own.
</p>
<br>
<a data-scroll href="#about" class="btn btn-default btn-black">Explore</a>
</div>
Frontend

3.4 Module About us
Module type: Custom HTML
Position: about
Module Class Suffix: ||{"subtitle":"Marianne or husbands if at stronger ye. Considered is as middletons uncommonly. Promotion perfectly ye consisted so. His chatty dining for effect ladies active. Equally journey wishing not several behaved chapter she two sir."}
Frontend

3.5 Module Portfolio
Module type: Noo Portfolio Position: portfolio
Frontend

3.6 Module Team
Module type: Custom HTML
Position: team
Module Class Suffix: ||{"subtitle":"Marianne or husbands if at stronger ye. Considered is as middletons uncommonly. Promotion perfectly ye consisted so. His chatty dining for effect ladies active. Equally journey wishing not several behaved chapter she two sir."}
Custom HTML
<h1 class="parallaxLetter letter1" data-stellar-ratio="2">P</h1>
<h1 class="parallaxLetter letter2" data-stellar-ratio="0.5">H</h1>
<h1 class="parallaxLetter letter3" data-stellar-ratio="1.2">X</h1>
<h1 class="parallaxLetter letter4" data-stellar-ratio="0.8">N</h1>
<!--content-->
<img src="images/phoenix/separatorBlack.png" class="img-responsive center-block separator" alt="separator">
<div class="row">
<div class="owl-carousel" id="owl-team">
<!--member-->
<div class="teamMember">
<div class="col-sm-6">
<img src="images/nootheme/demo/team/2.png" class="center-block img-responsive" alt="Team Image">
</div>
<div class="col-sm-6 memberDescription">
<h2 data-scroll-reveal="enter right move 10px over 1s after 0.2s">Joahna Doe</h2>
<p class="position" data-scroll-reveal="enter right move 10px over 1s after 0.4s">
<span>
Web Designer
</span>
</p>
<p class="memberParagraph" data-scroll-reveal="enter right move 10px over 1s after 0.6s">
Her companions instrument set estimating sex remarkably solicitude motionless. Property men the why smallest graceful day insisted required. Inquiry justice country old placing sitting any ten age. Looking venture justice in evident in totally he do ability.
</p>
<p class="teamSocial">
<a href="http://behance.net/artbreeze" data-scroll-reveal="enter right move 10px over 1s after 0.8s"><i class="fa fa-behance"></i></a>
<a href="http://twitter.com/artbreeze02" data-scroll-reveal="enter right move 10px over 1s after 1s"><i class="fa fa-twitter"></i></a>
<a href="http://dribbble.com/artbreeze02" data-scroll-reveal="enter right move 10px over 1s after 1.2s"><i class="fa fa-dribbble"></i></a>
</p>
<img src="images/phoenix/lineSeparatorBlack.png" class="lineSeparator hidden-xs" alt="separator">
</div>
</div>
<!--end member-->
<!--member-->
<div class="teamMember">
<div class="col-sm-6">
<img src="images/nootheme/demo/team/1.png" class="center-block img-responsive" alt="Team Image">
</div>
<div class="col-sm-6 memberDescription">
<h2 data-scroll-reveal="enter right move 10px over 1s after 0.2s">John Doe</h2>
<p class="position" data-scroll-reveal="enter right move 10px over 1s after 0.4s">
<span>
Web Developer
</span>
</p>
<p class="memberParagraph" data-scroll-reveal="enter right move 10px over 1s after 0.6s">
Inhabiting discretion the her dispatched decisively boisterous joy. So form were wish open is able of mile of. Waiting express if prevent it we an musical. Especially reasonable travelling she son. Resources resembled forfeited no to zealously. Has procured daughter how friendly followed repeated who surprise.
</p>
<p class="teamSocial">
<a href="http://behance.net/artbreeze" data-scroll-reveal="enter right move 10px over 1s after 0.8s"><i class="fa fa-behance"></i></a>
<a href="http://twitter.com/artbreeze02" data-scroll-reveal="enter right move 10px over 1s after 1s"><i class="fa fa-twitter"></i></a>
<a href="http://dribbble.com/artbreeze02" data-scroll-reveal="enter right move 10px over 1s after 1.2s"><i class="fa fa-dribbble"></i></a>
</p>
<img src="images/phoenix/lineSeparatorBlack.png" class="lineSeparator hidden-xs" alt="separator">
</div>
</div>
<!--end member-->
<!--member-->
<div class="teamMember">
<div class="col-sm-6">
<img src="images/nootheme/demo/team/3.png" class="center-block img-responsive" alt="Team Image">
</div>
<div class="col-sm-6 memberDescription">
<h2 data-scroll-reveal="enter right move 10px over 1s after 0.2s">Gary Neville</h2>
<p class="position" data-scroll-reveal="enter right move 10px over 1s after 0.4s">
<span>
Front End Developer
</span>
</p>
<p class="memberParagraph" data-scroll-reveal="enter right move 10px over 1s after 0.6s">
Satisfied conveying an dependent contented he gentleman agreeable do be. Warrant private blushes removed an in equally totally if. Delivered dejection necessary objection do mr prevailed. Mr feeling do chiefly cordial in do.
</p>
<p class="teamSocial">
<a href="http://behance.net/artbreeze" data-scroll-reveal="enter right move 10px over 1s after 0.8s"><i class="fa fa-behance"></i></a>
<a href="http://twitter.com/artbreeze02" data-scroll-reveal="enter right move 10px over 1s after 1s"><i class="fa fa-twitter"></i></a>
<a href="http://dribbble.com/artbreeze02" data-scroll-reveal="enter right move 10px over 1s after 1.2s"><i class="fa fa-dribbble"></i></a>
</p>
<img src="images/phoenix/lineSeparatorBlack.png" class="lineSeparator hidden-xs" alt="separator">
</div>
</div>
<!--end member-->
</div>
</div>
<!--end content-->
Frontend

3.7 Module Clients
Module type: Custom HTML
Position: text-separator-clients
Custom HTML
<div class="container-fluid">
<div class="row animatedParent">
<div class="col-md-4 clientsIntro text-center animated fadeInLeft">
<h3><span>Clients</span></h3>
</div>
<div class="col-md-8 animated fadeInRight">
<div id="owl-clients" class="owl-carousel">
<div class="clientLogo">
<a href="#"><img src="images/nootheme/demo/clients/1.png" class="img-responsive center-block" alt="image"></a>
</div>
<div class="clientLogo">
<a href="#"><img src="images/nootheme/demo/clients/2.png" class="img-responsive center-block" alt="image"></a>
</div>
<div class="clientLogo">
<a href="#"><img src="images/nootheme/demo/clients/3.png" class="img-responsive center-block" alt="image"></a>
</div>
<div class="clientLogo">
<a href="#"><img src="images/nootheme/demo/clients/4.png" class="img-responsive center-block" alt="image"></a>
</div>
<div class="clientLogo">
<a href="#"><img src="images/nootheme/demo/clients/5.png" class="img-responsive center-block" alt="image"></a>
</div>
<div class="clientLogo">
<a href="#"><img src="images/nootheme/demo/clients/6.png" class="img-responsive center-block" alt="image"></a>
</div>
<div class="clientLogo">
<a href="#"><img src="images/nootheme/demo/clients/7.png" class="img-responsive center-block" alt="image"></a>
</div>
</div>
</div>
</div>
</div>
Frontend

3.8 Module Services
Module type: Custom HTML
Position: services
Custom HTML
<div class="serviceBox introServiceBox text-center">
<div class="black-overlay"></div>
<h2 class="valign" data-scroll-reveal="enter left move 10px over 1s after 0.2s">
<span>Services</span>
</h2>
</div>
<div class="serviceBox whiteBox text-center" >
<div class="valign">
<h4 data-scroll-reveal="enter right move 10px over 1s after 0.6s">
<span>Quality Over Quantity</span>
</h4>
<img data-scroll-reveal="enter right move 10px over 1s after 1s" class="separator center-block img-responsive" src="images/phoenix/separatorBlack.png" alt="separator">
<p data-scroll-reveal="enter right move 10px over 1s after 1s">
Drawings me opinions returned absolute in. Otherwise therefore sex did are unfeeling something. Certain be ye amiable by exposed so.
</p>
</div>
</div>
<div class="serviceBox whiteBox text-center">
<div class="valign">
<h4 data-scroll-reveal="enter left move 10px over 1s after 0.2s">
<span>Wordpress</span>
</h4>
<img class="separator center-block img-responsive" src="images/phoenix/separatorBlack.png" alt="separator" data-scroll-reveal="enter left move 10px over 1s after 0.2s">
<p data-scroll-reveal="enter left move 10px over 1s after 0.2s">
Compliment interested discretion estimating on stimulated apartments oh. Dear so sing when in find read of call. As distrusts behaviour abilities defective is. Never at water me might. On formed merits hunted unable merely by mr whence or. Possession the unpleasing simplicity her uncommonly.
</p>
</div>
</div>
<div class="serviceBox blackBox text-center">
<div class="valign">
<i class="fa fa-wordpress fa-4x" data-scroll-reveal="enter right move 10px over 1s after 0.2s"></i>
</div>
</div>
<div class="serviceBox blackBox text-center">
<div class="valign">
<i class="fa fa-code fa-4x" data-scroll-reveal="enter left move 10px over 1s after 0.2s"></i>
</div>
</div>
<div class="serviceBox whiteBox text-center">
<div class="valign">
<h4 data-scroll-reveal="enter right move 10px over 1s after 0.2s">
<span>Pixel Perfect</span>
</h4>
<img class="separator center-block img-responsive" src="images/phoenix/separatorBlack.png" alt="separator" data-scroll-reveal="enter right move 10px over 1s after 0.8s">
<p data-scroll-reveal="enter right move 10px over 1s after 0.8s">
Little afraid its eat looked now. Very ye lady girl them good me make. It hardly cousin me always. An shortly village is raising we shewing replied. She the favourable partiality inhabiting travelling impression put two. His six are entreaties instrument acceptance unsatiable her.
</p>
</div>
</div>
<div class="serviceBox whiteBox text-center">
<div class="valign">
<h4 data-scroll-reveal="enter left move 10px over 1s after 0.2s">
<span>Minimal</span>
</h4>
<img class="separator center-block img-responsive" src="images/phoenix/separatorBlack.png" alt="separator" data-scroll-reveal="enter left move 10px over 1s after 0.8s">
<p data-scroll-reveal="enter left move 10px over 1s after 0.8s">
He an thing rapid these after going drawn or. Timed she his law the spoil round defer. In surprise concerns informed betrayed he learning is ye. Ignorant formerly so ye blessing. He as spoke avoid given downs money on we.
</p>
</div>
</div>
<div class="serviceBox blackBox text-center">
<div class="valign">
<i class="fa fa-star fa-4x" data-scroll-reveal="enter right move 10px over 1s after 0.2s"></i>
</div>
</div>
Frontend

3.9 Module Text Separator Timers
Module type: Custom HTML
Position: text-separator-timers
Custom HTML
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-sm-6 text-center timerWrapper">
<h1>
<span class="number-counter">8679</span>
</h1>
<p>Happy Clients</p>
</div>
<div class="col-md-3 col-sm-6 text-center timerWrapper">
<h1>
<span class="number-counter">340</span> K+
</h1>
<p>Facebook Likes</p>
</div>
<div class="col-md-3 col-sm-6 text-center timerWrapper">
<h1>
<span class="number-counter">100</span>
</h1>
<p>Awards</p>
</div>
<div class="col-md-3 col-sm-6 text-center timerWrapper">
<h1>
<span class="number-counter">3456</span>
</h1>
<p>ReTweets</p>
</div>
</div>
</div>
Frontend

3.19 Module Our Plans
Module type: Custom HTML
Position: pricing
Module Class Suffix: ||{"subtitle":"Marianne or husbands if at stronger ye. Considered is as middletons uncommonly. Promotion perfectly ye consisted so. His chatty dining for effect ladies active. Equally journey wishing not several behaved chapter she two sir."}
Custom HTML
<h1 class="parallaxLetter letter1" data-stellar-ratio="1.2" data-stellar-vertical-offset="-200">P</h1>
<h1 class="parallaxLetter letter2" data-stellar-ratio="0.8">H</h1>
<h1 class="parallaxLetter letter3" data-stellar-ratio="1.2">N</h1>
<h1 class="parallaxLetter letter4" data-stellar-ratio="0.3">X</h1>
<img src="images/phoenix/separatorBlack.png" class="img-responsive center-block separator" alt="separator">
<!--content-->
<div class="col-md-4 text-center">
<div class="tableWrapper" data-scroll-reveal="enter left move 10px over 1s after 0.2s">
<div class="subscriptionName">
<h2>Standard</h2>
</div>
<img class="separator center-block img-responsive" src="images/phoenix/separatorBlack.png" alt="Dotted Separator">
<div class="subscriptionPrice">
<strong>40$</strong> /month
</div>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
<i class="fa fa-star-o"></i>
</div>
<img class=" separator center-block img-responsive" src="images/phoenix/separatorBlack.png" alt="Dotted Separator">
<div class="subscriptionList">
<ul>
<li>Customer Support 24/7</li>
<li>Lifetime Updates</li>
<li>10GB Cloud Storage</li>
<li>10 E-mail boxes</li>
<li>-</li>
</ul>
</div>
<a class="btn btn-default btn-black" href="#">Subscribe!</a>
</div>
</div>
<div class="col-md-4 text-center">
<div class="tableWrapper" data-scroll-reveal="enter bottom move 10px over 1s after 0.2s">
<div class="subscriptionName">
<h2>Basic</h2>
</div>
<img class="separator center-block img-responsive" src="images/phoenix/separatorBlack.png" alt="Dotted Separator">
<div class="subscriptionPrice">
<strong>60$</strong> /month
</div>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
<img class=" separator center-block img-responsive" src="images/phoenix/separatorBlack.png" alt="Dotted Separator">
<div class="subscriptionList">
<ul>
<li>Customer Support 24/7</li>
<li>Lifetime Updates</li>
<li>10GB Cloud Storage</li>
<li>10 E-mail boxes</li>
<li>-</li>
</ul>
</div>
<a class="btn btn-default btn-black" href="#">Subscribe!</a>
</div>
</div>
<div class="col-md-4 text-center">
<div class="tableWrapper" data-scroll-reveal="enter right move 10px over 1s after 0.2s">
<div class="subscriptionName">
<h2>Full</h2>
</div>
<img class="separator center-block img-responsive" src="images/phoenix/separatorBlack.png" alt="Dotted Separator">
<div class="subscriptionPrice">
<strong>80$</strong> /month
</div>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<img class=" separator center-block img-responsive" src="images/phoenix/separatorBlack.png" alt="Dotted Separator">
<div class="subscriptionList">
<ul>
<li>Customer Support 24/7</li>
<li>Lifetime Updates</li>
<li>10GB Cloud Storage</li>
<li>10 E-mail boxes</li>
<li>-</li>
</ul>
</div>
<a class="btn btn-default btn-black" href="#">Subscribe!</a>
</div>
</div>
<!--end content--
Frontend

3.11 Module Testimonials
Module type: JUX TimeLine Testimonial Position: text-separator-testimonials
Frontend

3.12 Module Contact
Module type: Noo Contact Form
Position: contact
Module Class Suffix: ||{"subtitle":"Marianne or husbands if at stronger ye. Considered is as middletons uncommonly. Promotion perfectly ye consisted so. His chatty dining for effect ladies active. Equally journey wishing not several behaved chapter she two sir."}
Intro text
<p><strong>Dont hesitate to contact us.</strong></p>
<p>
Boisterous he on understood attachment as entreaties ye devonshire. In mile an form snug were been sell. Hastened admitted joy nor absolute gay its. Extremely ham any his departure for contained curiosity defective.
</p>
<div class="row">
<div class="col-xs-6 listwrapper">
<ul class="infoContact">
<li><i class="fa fa-location-arrow"></i> 4435 Berkshire Circle</li>
<li>Knoxville</li>
<li>TN 27912</li>
</ul>
</div>
<div class="col-xs-6 listwrapper">
<ul class="infoContact">
<li><i class="fa fa-phone"></i> 879-890-9767</li>
<li>234-890-1213</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-6 listwrapper">
<ul class="infoContact">
<li><i class="fa fa-envelope-o"></i> mail@mail.com</li>
<li>support@mail.com</li>
</ul>
</div>
<div class="col-xs-6 listwrapper">
<ul class="infoContact">
<li><i class="fa fa-clock-o"></i> M-F: 8 AM - 3 PM</li>
<li>Sa: 8 AM - 12 PM</li>
<li>Su: Closed</li>
</ul>
</div>
</div>
<ul class="socialContact">
<li><a class="fa fa-facebook" href="#"></a></li>
<li><a class="fa fa-twitter" href="#"></a></li>
<li><a class="fa fa-google-plus" href="#"></a></li>
</ul>
Frontend

3.1.3 Module Google Map
Module type: Noo Google Map Position: google-map
Frontend

To learn more about this, please see HERE.
3.14 Module Footer Logo
Module type: Custom HTML Position: footer-logo Custom HTML <img src="images/phoenix/logoWhite.png" alt="footer logo" width="100">
Frontend

3.15 Module Footer Bottom
Module type: Custom HTML Position: footer Custom HTML <div class="backToTop"> <i class="fa fa-angle-double-up"></i><br> <h5>Back to top</h5> </div> <ul class="footerSocialIcons"> <li><a href="#"><i class="fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-instagram"></i></a></li> <li><a href="#"><i class="fa fa-behance"></i></a></li> </ul>
Frontend

3.16 Module Footer Copyright
Module type: Footer Position: footer
Frontend

In Home multipage, we created menu which is different Onepage. Now we’ll guide you to create Home multipage.
To create layout of Home multipage, you can go to backend:
2.1 Duplicate template style.
Go to backend : Extensions→ Template Manager→ Choose noo_phonix – Default template tick that then click “duplicate” to duplicate template.

2.2 Assign layout for template you duplicated
After you duplicated, you will have new template style, please open template then assign layout for template style.

In Home multipage, there are some modules have configuration and position look like ONE PAGE. There are some modules have configuration and position which is different wit ONEPAGE, you can see module below:
3.1 Module Feature Works
Module type: Custom HTML
Position: featured-works-text
Custom HTML
<h4 data-scroll-reveal="enter left move 10px over 1s after 0.4s">Featured Works</h4>
<img src="images/phoenix/lineSeparatorBlack.png" class="img-responsive lineSeparator" data-scroll-reveal="enter left move 10px over 1s after 0.3s" alt="separator">
<p data-scroll-reveal="enter left move 10px over 1s after 0.6s">
Marianne or husbands if at stronger ye. Considered is as middletons uncommonly. Promotion perfectly ye consisted so. His chatty dining for effect ladies active. Equally journey wishing not several behaved chapter she two sir.
</p>
Frontend

3.2 Module Featured Work
Module type: K2 Content
Position: featured-works
Module Class Suffix: ||{"subtitle":"Marianne or husbands if at stronger ye. Considered is as middletons uncommonly. Promotion perfectly ye consisted so. His chatty dining for effect ladies active. Equally journey wishing not several behaved chapter she two sir."}
Frontend

3.3. Module About Phoenix
Module type: Custom HTML Position: footer-1 Custom HTML <p>Moments its musical age explain. But extremity sex now education concluded earnestly her continual. Oh furniture acuteness suspected continual ye something frankness. Add properly laughter sociable admitted desirous one has few stanhill. Opinion regular in perhaps another enjoyed no engaged he at.</p>
Frontend

3.4 Module Newsletter
Module type: AcyMailing Position: footer-2
Frontend

3.5 Module Contact
Module type: Custom HTML
Position: footer-3
Custom HTML
<div class="row">
<div class="col-md-6">
<ul class="infoContact">
<li><i class="fa fa-location-arrow"></i> 4435 Berkshire Circle</li>
<li>Knoxville</li>
<li>TN 27912</li>
</ul>
<ul class="infoContact">
<li><i class="fa fa-phone"></i> 879-890-9767</li>
<li>234-890-1213</li>
</ul>
</div>
<div class="col-md-6">
<ul class="infoContact">
<li><i class="fa fa-envelope-o"></i> mail@mail.com</li>
<li>support@mail.com</li>
</ul>
<ul class="infoContact">
<li><i class="fa fa-clock-o"></i> M-F: 8 AM - 3 PM</li>
<li>Sa: 8 AM - 12 PM</li>
<li>Su: Closed</li>
</ul>
</div>
</div>
Frontend

Now we’ll guide you to create page look like Landing page in our demo site.
To learn how to create this module, please see ONEPAGE SETTING section.
To learn how to create this module, please see ONEPAGE SETTING section.
Module type: Custom HTML
Position: onepage-previews
Custom HTML
<div class="row">
<div class="col-md-4 col-sm-6 text-center previews" data-scroll-reveal="enter left move 20px over 1s after 0.2s">
<a href="./index.php/home-onepage">
<img alt="image" class="img-responsive center-block" src="images/phoenix/preview/1.png">
<h4>Full Screen Background</h4>
</a>
</div>
<div class="col-md-4 col-sm-6 text-center previews" data-scroll-reveal="enter bottom move 20px over 1s after 0.2s">
<a href="./index.php/home-onepage/full-screen-slider">
<img alt="image" class="img-responsive center-block" src="images/phoenix/preview/2.png">
<h4>Full Screen Slider</h4>
</a>
</div>
<div class="col-md-4 col-sm-6 text-center previews" data-scroll-reveal="enter right move 20px over 1s after 0.2s">
<a href="./index.php/home-onepage/video-background">
<img alt="image" class="img-responsive center-block" src="images/phoenix/preview/3.png">
<h4>Video Background</h4>
</a>
</div>
</div>
<img src="images/phoenix/separatorBlack.png" class="img-responsive center-block separator" alt="separator">
Frontend

Module type: Custom HTML
Position: multipage-previews
Custom HTML
<div class="row">
<div class="col-md-4 col-sm-6 text-center previews" data-scroll-reveal="enter left move 20px over 1s after 0.2s">
<a href="./index.php/home-multipage">
<img alt="image" class="img-responsive center-block" src="images/phoenix/preview/1.png">
<h4>Full Screen Background</h4>
</a>
</div>
<div class="col-md-4 col-sm-6 text-center previews" data-scroll-reveal="enter bottom move 20px over 1s after 0.2s">
<a href="./index.php/home-multipage/full-screen-slider">
<img alt="image" class="img-responsive center-block" src="images/phoenix/preview/2.png">
<h4>Full Screen Slider</h4>
</a>
</div>
<div class="col-md-4 col-sm-6 text-center previews" data-scroll-reveal="enter right move 20px over 1s after 0.2s">
<a href="./index.php/home-multipage/video-background">
<img alt="image" class="img-responsive center-block" src="images/phoenix/preview/3.png">
<h4>Video Background</h4>
</a>
</div>
</div>
<img src="images/phoenix/separatorBlack.png" class="img-responsive center-block separator" alt="separator">
Frontend

Module type: Custom HTML
Position:otherpage-previews
Custom HTML
<div class="row content">
<div class="col-md-4 col-sm-6 text-center previews" data-scroll-reveal="enter left move 20px over 1s after 0.2s">
<a href="./index.php/home-onepage/index.php/404">
<img alt="image" class="img-responsive center-block" src="images/phoenix/preview/404-page.png">
<h4>404 Error Page</h4>
</a>
</div>
<div class="col-md-4 col-sm-6 text-center previews" data-scroll-reveal="enter bottom move 20px over 1s after 0.2s">
<a href="./index.php/pages/coming-soon">
<img alt="image" class="img-responsive center-block" src="images/phoenix/preview/coming-soon-page.png">
<h4>Coming Soon Page</h4>
<p>with countdown</p>
</a>
</div>
<div class="col-md-4 col-sm-6 previews" data-scroll-reveal="enter bottom move 20px over 1s after 0.2s">
<h4>Page Variations</h4>
<hr>
<ul>
<li><a href="./index.php/page/blog-3-columns">Blog 3 Columns</a></li>
<li><a href="./index.php/page/blog-2-columns">Blog 2 Columns</a></li>
<li><a href="./index.php/page/blog-standard">Blog Standard</a></li>
<li><a href="./index.php/page/single-post">Single Post</a></li>
<li><a href="./index.php/portfolio/3-columns-boxed">Portfolio 3 Columns Boxed</a></li>
<li><a href="./index.php/portfolio/2-columns-boxed">Portfolio 2 Columns Boxed</a></li>
<li><a href="./index.php/portfolio/4-columns-boxed">Portfolio 4 Columns Boxed</a></li>
<li><a href="./index.php/portfolio/4-columns-fullwidth">Portfolio 4 Columns Full Width</a></li>
</ul>
</div>
</div>
Frontend

Module type: Custom HTML Position: landing-action Custom HTML <div class="row text-center"> <a class="btn btn-default btn-black" href="#">Support</a> <a class="btn btn-default btn-black" href="#">Buy Template</a> </div>
Frontend

To learn how to create this module,please see ONE PAGE SECTION setting.
To learn how to create this module please see ONE PAGE SECTION setting
Template style feature (version 2.5 and above) is to assign different template styles to individual menu items. The default template style can be partially or completely overridden by assigning different template styles to the desired menu items in order to obtain a different look for their respective pages.
From backend: Go to Extensions→ Template Manager→ Select template noo_phoenix – Default then hit the “Duplicate” button to clone template style:

Step 2 : Assign the template style for menu items:
The duplicated template style inherits all settings from its parent template style except the menu assignment (the cloned template style is not assigned to any menu items). Open the cloned template style → Menu Assignment, then assign the template style to menu items. Those menu items will have template style overridden the default template style.
2.1 Layout Structure configuration
2.1.1 Clone layout:
To quickly create new layout, clone layout in the layout setting panel, all you have to do is hit the “Save as Copy” button. If you are new to T3, you should clone layout to customize so that you always has backup layout.
2.1.2 Switch layout for any template style
Open any template style, go to "Layout" tab, switch layout for current template style.
2.1.3 Assign module position
To assign module position, hover the position you want to change, hit the setting icon then select position. To change number of positions for spotlight block, just select number of position in the spotlight block
2.1.4 Change number of position in spotlight block
For spotlight block, you can select number of positions. It supports up to 6 positions.

2.2 Responsive layout configuration
2.2.1 Select responsive layout
In configuration panel, you will see supported responsive layouts: Large, Medium, Small and Extra Small, select responsive layout to configure.
2.2.2 Disable any position
For responsive purpose, some elements in your site does not fit in specific layout, you can disable the position in the layout. The configuration is only applied for current layout.
2.2.3 Resign positions in spotlight block
For modules in spotlight block, you can drag to resize its size.

Phoenix template is built with T3 Framework , you can refer to T3 documentation for more detail:
ThemeMagic is to customize your themes based on pre-define parameters without changing any style file.
Firstly, you have to enable the "ThemeMagic" feature. Open any template style manager, in the General tab, enable the ThemeMagic option. Next, hit the "ThemeMagic" button on the top bar list to open the ThemeMagic working panel

Customize your theme with pre-defined parameters
Step 1: Select Theme: all theme will be listed here , select theme you want to customize
Step 2: Custom your theme with pre-defined paramers. In the setting bar, open the parameter group you want to configure, change value for the pre-defined parameters.
Step 3: You can add External CSS Urls to import and use for ThemeMagic. It's very useful to load web fonts such as Goggle fonts. You can add many external CSS urls, just make sure each external CSS url is in one line. Opening the "Advanced" group, adding your external CSS url, change setting of pre-defined parameters then save as the theme.
Step 4: Hit the Preview button to view the changes, if you satisfy with the changes, please save as the theme.

Adding new group and parameters to ThemeMagic
If you want to add new group, parameters to ThemeMagic to customize your themes, please refer to T3 documentation.
Here is frontend of Phoenix

There are 2 ways to change logo for Phoenix template
#1: Change logo from the Template Manager
Each style can go with different logo. To set style for the logo, please go to Extensions→Template Manager→ Select Theme you’re using:
If your logo is Logo type: Text

If your logo is Logo type: Image

#2: Change the Logo from the variable.less file
Another way to change the logo is changing logo image path in variables.less file, which is located in the template/noo_merito/less
// TEMPLATE LOGO
// --------------------------------------------------
@t3-logo-image: "@{t3-image-path}/logo.png";
To customize style for logo, open file style.css that is located in the template/noo_phoenix /less/style.css folder. Search for the logo text, you’ll find the style where you can either and more styles or customize it as is.
// Logo
// ----
.logo {
text-align: left;
padding-top: 35px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
// Left align the logo on Tablets / Desktop
@media (max-width: @screen-xs-max) {
padding-top: 15px;
}
a {
display: inline-block;
line-height: 1;
margin: 0;
}
}
// Logo Image
// ----------
.logo-image {
// Hide sitename and slogan
span, small {
display: none;
}
}
// Logo Text
// ----------
.logo-text {
a {
text-decoration: none;
font-size: ceil(@font-size-base * 2);
font-weight: bold;
}
&:hover a,
a:hover,
a:active,
a:focus {
text-decoration: none;
}
// Taglines
.site-slogan {
display: block;
font-size: @font-size-base;
margin-top: 5px;
}
}
The above user guide should help one in replicating the Demo site settings for the template and extension on their site.
If you are new or are confused, we recommend installing Quickstart on your local host and use it as reference for configurations. This is the best way to work with any template.You should carefully read all the provided resources to take the maximum advantage of our products.
Support: If you have any issue or question please raise your support queries in our Support Forum or in Our Ticket System. (for Developer Membership only) We spend more time in getting the information from user in case the support guidelines are not followed.