1. About Joomla version used in Phoenix

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!

2. About Phoenix

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.

3.  About Phoenix Template User Guide

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:

4. Features

 Full screen background

Full screen slider

 Video background

Blog 3 Columns

Blog 2 Columns

5.   NooTheme Extensions Supported

6.3rd  Party Extension Supported

7. Layout & Module Positions

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

8.  T3 Framework

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. Plan your site Developer

 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.

 2. Download Template and Extensions

After you purchased our menu, please following the instruction to download the package. You’ll then find our template  zip file inside the package

3. Install Template and Extensions

 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

View how to install extension guide

 

1. Create menu of Onepage.

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. Create layout for One page

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

 

3. Module of Onepage

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 &amp; 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

Backend Setting

Background Setting

Module Class Suffix

Video Tutorial

 

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

Backend Setting

Video Tutorial

 

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

Backend Setting

Video Tutorial

 

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

Backend Setting

Module Class Suffix

Video Tutorial

 

3.5 Module Portfolio

Module type: Noo Portfolio
Position: portfolio

Frontend

Backend Setting

Display Options

Video Tutotial

 

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

Backend Setting

Module Class Suffix

Video Tutorial

 

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

Backend Setting

Video Tutorial

 

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

Backend Setting

Video Tutorial

 

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

Backend Setting

Video Tutorial

 

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

Backend Setting

Module Class Suffix

Video Tutorial

 

3.11 Module Testimonials

Module type: JUX TimeLine Testimonial
Position: text-separator-testimonials

Frontend

Backend Setting

Type Options

Video Tutorial

 

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

Backend Setting

Module Class Suffix

Video Tutorial

 

3.1.3  Module Google Map

Module type: Noo Google Map
Position: google-map

Frontend

Backend Setting

Video Tutorial

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

Backend Setting

Video Tutorial

 

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

Backend Setting

Video Tutorial

 

3.16 Module Footer Copyright

Module type: Footer
Position: footer

Frontend

Backend Setting

Video Tutorial

 

 

1. Create menu of Home multipage

In Home multipage, we created menu which is different Onepage. Now we’ll guide you to create Home multipage.

2. Create layout of 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.

 

3. Create module for Home multipage

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

Backend Setting

 

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

Backend Setting

 

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

Backend Setting

 

3.4 Module Newsletter

Module type: AcyMailing
Position: footer-2

Frontend

Backend Setting

 

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

Backend Setting

 

 

 

Now we’ll guide you to create page look like Landing page in our demo site.

1. Module Home Default Intro

To learn how to create this module, please see ONEPAGE SETTING section.

2. Module Text Separator.

To learn how to create this module, please see ONEPAGE SETTING  section.

3. Module One Page

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

Backend Setting

 

4. Module Multi-Page

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

Backend Setting

 

5. Module Other Pages

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

Backend Setting

 

6. Module Landing Action

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

Backend Setting

 

7. Module Footer Logo

To learn how to create this module,please see ONE PAGE SECTION  setting.

 

8. Module Footer

To learn how to create this module please see ONE PAGE SECTION setting

 

 

1. Creating new Template style

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:

 

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

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.

 

3. Layout customization

Phoenix template is built with T3 Framework , you can refer to T3 documentation for more detail:

 

4. Theme  magic configuration

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

 

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.

Detail Documentaion

Video tutorial





 

 

1. Megamenu configuration and customization

1.1 When disable Megamenu

When Megamenu is disabled, the template will use Joomla drop down menu.

To disable Megamenu, open Template style manager, in the “Navigation”tab, disable “Megamenu” option

 

1.2 When enable Megamenu

Megamenu allows you to display your main menu in different ways and flexibly. You can display menu items in columns, add icon and style for menu item, load module for a module menu item..

1.2.1 Enable megamenu

Open the template style that you want to enable Megamenu, go to Navigation tab then enable the Megamenu option.

 

In the configuration panel of Megamenu, select menu item/submenu/column or row to configure.

For more detail of how to work with Megamenu, please check out the references below:

 

 

Here is frontend of Phoenix

 

1. Change the Logo image

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";

 

2. Logo Styling

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.