Fenix is an one page portfolio blogger template with super features, which no other template has. Purely made for Service, company, product launch, app landing pages. Fenix is equipped with various of widgets which will help you to publish your blog more professionally. To make it easy for you we have published this detailed documentation, so that you can setup your blog correctly. You have made a good decision by choosing our template. You can check the live demo or download the template through the button below and also Please Read this documentation carefully in order to set up your blog and please note that there’s no support for free users.
Basic Setup
Header Background
Access your blog Theme > click Edit Html> and then find the following coding.
#header-wrapper {
text-align: center;
padding:0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_LKJP04OOS4r4sOOK1D-6Ksq9f_u8xPtZ_JReyI8Xz2-xp6M3y56Iv-AHPD3yVLEHsKUeIaHIA7Z7Vbdnv4bi0ZGLvrcllxevLAy-PkZ1Ch4A6s1xeFjIYoDaFg0S3qKuHKwrOT4o8rgA/s1600/back.jpg) no-repeat center bottom;
background-attachment: fixed;
background-size: cover;
margin-bottom: 10px;
height:100vh;
box-sizing:border-box;
position:relative;
width: 100%;
}
Change the black highlighted code with your own image link.
Note:- Don't change anything else, otherwise the background will not work properly.
Main Menu/DropDown/Multi DropDown
Access your blog Layout > click Edit link on Main Menu widget.Normal Link : FeaturesSub Link: _Sub Link 1.0 (before the link add "_") 1 underscore
Sub Link 2: __Sub Link 1.1 (before the link add "__") 2 underscore
Sub Link 2: __Sub Link 1.1 (before the link add "__") 2 underscore
Header Description
Access your blog Layout > click Add a Gadget > HTML/JavaScript on Logo Description Widget Section, and then add your description text into the content section.
Social Top/Social Footer
Access your blog Layout > click Edit link on Social Top widget.
Icons Available { facebook, twitter, gplus, rss, youtube, skype, stumbleupon, tumblr, vine, stack-overflow, linkedin, dribbble, soundcloud, behance, digg, instagram, pinterest, delicious, codepen }
Fixed Menu/ Logo
Access your blog Theme > click Edit Html> and then find the following coding.
<ul id='nav'>
<li class='current'><a href='#header-wrapper'>Home</a></li>
<li><a href='#section-2'>Services</a></li>
<li><a href='#section-3'>Works</a></li>
<li><a href='#main-wrapper'>Portfolio</a></li>
<li><a href='#section-5'>About</a></li>
<li><a href='#section-6'>Contact</a></li>
</ul>
Change the details with your own.
Note:- Don't change the href=' ' Values Otherwise the menu will not work.
- For the logo
Access your blog Theme > click Edit Html> and then find the following coding.
<span class='logo-title'>Fenix</span>Change the details with your own.
Second Background (Steps in Our Works)
Access your blog Theme > click Edit Html> and then find the following coding.
.sora-works-box {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilHMOb8OG7Hb_0K3gk6yVy1GDr49roMNjbSUOCre4tq88QJzlgBEqtxIG0yuOFoiGNOKytfHUZL1qzAPysmh1rOTazluO99rHYMPhBM01Xy_t3dxmMrzwRkuTNCDBfnfhjWDeHooWjfJd9/s1600/back2.jpg) no-repeat center bottom;
background-attachment: scroll;
background-size: cover;
overflow: hidden;
margin: 0 auto;
padding: 20px 0;
}
Change the red highlighted code with your own image link.
Note:- Don't change anything else, otherwise the background will not work properly.
We Specialize in (Section-1)
Access your blog Theme > click Edit Html> and then find the following coding.
<div class='sora-special-box' id='section-2'>
<div class='special-wrap row'>
<div class='special-title'>
<h4>We Specialize in</h4>
</div>
<div style='clear: both;'/>
<!-- First -->
<div class='special-tiles'>
<span class='special-icons'>
<i aria-hidden='true' class='fa fa-heart-o'/>
</span>
<h6 class='special-heading'>Wedding Photography</h6>
<p class='special-text'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. </p>
</div>
<!-- First One Ends -->
<!-- Second -->
<div class='special-tiles'>
<span class='special-icons'>
<i aria-hidden='true' class='fa fa-birthday-cake'/>
</span>
<h6 class='special-heading'>Birthday Photography</h6>
<p class='special-text'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. </p>
</div>
<!-- Second Ends -->
<!-- Third -->
<div class='special-tiles'>
<span class='special-icons'>
<i aria-hidden='true' class='fa fa-cutlery'/>
</span>
<h6 class='special-heading'>Food Photography</h6>
<p class='special-text'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. </p>
</div>
<!-- Third Ends -->
<!-- Fourth -->
<div class='special-tiles'>
<span class='special-icons'>
<i aria-hidden='true' class='fa fa-shopping-bag'/>
</span>
<h6 class='special-heading'>Fashion Photography</h6>
<p class='special-text'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. </p>
</div>
<!-- Fourth Ends -->
<!-- Fifth -->
<div class='special-tiles'>
<span class='special-icons'>
<i aria-hidden='true' class='fa fa-diamond'/>
</span>
<h6 class='special-heading'>Jewellery Photography</h6>
<p class='special-text'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. </p>
</div>
<!-- Fifth Ends -->
<!-- Sixth -->
<div class='special-tiles'>
<span class='special-icons'>
<i aria-hidden='true' class='fa fa-glass'/>
</span>
<h6 class='special-heading'>Drink Photography</h6>
<p class='special-text'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. </p>
</div>
<!-- Sixth Ends -->
</div></div>
Here are the things you need to change.
- <h4>We Specialize in</h4> - Main Title.
- <i aria-hidden='true' class='fa fa-heart-o'/> -Icon (fontawesome - http://fontawesome.io/cheatsheet/)
- <h6 class='special-heading'>Wedding Photography</h6> -Tiles title
- <p class='special-text'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. </p> -Description
Steps in Our Work (Section-2)
Access your blog Theme > click Edit Html> and then find the following coding.
<div class='sora-works-box' id='section-3'>
<div class='works-wrap row'>
<div class='works-title'>
<h4>Steps in Our Works</h4>
<span>Our process on creating awesome projects.</span>
</div>
<div style='clear: both;'/>
<!-- First -->
<div class='works-tiles'>
<span class='works-icons'>
<li data-percent='25'><span class='text'><i aria-hidden='true' class='fa fa-lightbulb-o'/></span><span class='bar-circle-right' style='transform: rotate(90deg);'/><span class='bar-circle-left'/><span class='bar-circle-cover'/></li>
</span>
<h6 class='works-heading'>1. Concept</h6>
<p class='works-text'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>
<!-- First One Ends -->
<!-- Second -->
<div class='works-tiles'>
<span class='works-icons'>
<li data-percent='50'><span class='text'><i aria-hidden='true' class='fa fa-clipboard'/></span><span class='bar-circle-right' style='transform: rotate(180deg);'/><span class='bar-circle-left' style='clip: rect(0px 150px 150px 75px); background: rgb(176, 218, 185);'/><span class='bar-circle-cover'/></li>
</span>
<h6 class='works-heading'>2. PREPARE</h6>
<p class='works-text'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>
<!-- Second Ends -->
<!-- Third -->
<div class='works-tiles'>
<span class='works-icons'>
<li data-percent='75'><span class='text'><i aria-hidden='true' class='fa fa-paint-brush'/></span><span class='bar-circle-right' style='transform: rotate(270deg);'/><span class='bar-circle-left' style='clip: rect(0px 150px 150px 75px); background: rgb(176, 218, 185);'/><span class='bar-circle-cover'/></li>
</span>
<h6 class='works-heading'>3. RETOUCH</h6>
<p class='works-text'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>
<!-- Third Ends -->
<!-- Fourth -->
<div class='works-tiles'>
<span class='works-icons'>
<li data-percent='100'><span class='text'><i aria-hidden='true' class='fa fa-gift'/></span><span class='bar-circle-right' style='transform: rotate(360deg);'/><span class='bar-circle-left' style='clip: rect(0px 150px 150px 75px); background: rgb(176, 218, 185);'/><span class='bar-circle-cover'/></li>
</span>
<h6 class='works-heading'>4. FINALIZE</h6>
<p class='works-text'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>
<!-- Fourth Ends -->
</div></div>
Here are the things you need to change.
- <h4>Steps in Our Works</h4> - Main Title.
- <span>Our process on creating awesome projects.</span> - Title Description
- <i aria-hidden='true' class='fa fa-lightbulb-o'/> -Icon (fontawesome - http://fontawesome.io/cheatsheet/)
- <h6 class='works-heading'>1. Concept</h6> -Tiles title
- <p class='special-text'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. </p> -Description
Smart, Creative & Awesome. (Section-3):
This is the title for recent posts you will publish.
Access your blog Theme > click Edit Html> and then find the following coding.
Access your blog Theme > click Edit Html> and then find the following coding.
<div class='Portfolio-title'>
<h4>Smart, Creative & Awesome.</h4>
<span>A creative agency that believes in the power of creative ideas and great design.</span>
</div>
Change the details with your desired one.
Meet The Team (Section-4):
Access your blog Theme > click Edit Html> and then find the following coding.
<div class='sora-about-box' id='section-5'>
<div class='about-wrap row'>
<div class='about-title'>
<h4>Meet The Team</h4>
<span>Our process on creating awesome projects.</span>
</div>
<div style='clear: both;'/>
<!-- First -->
<div class='about-tiles'>
<span class='about-image'>
<img alt='Me' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUDfQ-qqPT-2dT1GNrXuAfNnbksS9OuNLGVg_ar8kRejJPZrGwpA5yDj2VvGYbjvl_TTaq0C4ggkJM4G0whqWESwqyIbl5uEOkojUjL06QieoUPM8ENA2OAQnIhJoAKOng0JLFRs8kLS4m/s640/Templatesyard-free-blogger-templates+%25287%2529.jpg'/>
</span>
<h6 class='about-heading'>Isabella Cage</h6>
<span>Designer</span>
<p class='about-text'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. </p>
</div>
<!-- First One Ends -->
<!-- Second -->
<div class='about-tiles'>
<span class='about-image'>
<img alt='Me' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigledrWJq543jafjYL6uP9ytnmEajy-XKZu5gRasFLMJEzR3zRzahAMCrRfmEgq2YQAUFZ85_l2vTrrCawiANaEijYWdhJqiIAzAr9KHF9hLANIhoVPhyphenhyphenb_jRU5aibiGqfI5kZFFW5dRY/s1600/looks006-690x455-1442922083.jpg'/>
</span>
<h6 class='about-heading'>Ashley Potter</h6>
<span>Editor</span>
<p class='about-text'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. </p>
</div>
<!-- Second Ends -->
<!-- Third -->
<div class='about-tiles'>
<span class='about-image'>
<img alt='Me' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTYb5Cz5p4dGXGb6U5x-S8XMYYuEiEnE40gRh7i7zu5HXaLwLArTj8tZKBcnkJob4bjWNqxiJmAoVpe5Yf46TEIiJ_90EPbUpr8Yn4apT9eGUOEoHqnN1lNNWwnp8zXi9PzAYNtY0sTb27/s640/Templatesyard-free-blogger-templates+%25286%2529.jpg'/>
</span>
<h6 class='about-heading'>Irine Stryker</h6>
<span>Photographer</span>
<p class='about-text'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. </p>
</div>
<!-- Third Ends -->
</div></div>
Here are the things you need to change.
- <h4>Meet the Team</h4> - Main Title.
- <span>Our process on creating awesome projects.</span> - Title Description
- <img alt='Me' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUDfQ-qqPT-2dT1GNrXuAfNnbksS9OuNLGVg_ar8kRejJPZrGwpA5yDj2VvGYbjvl_TTaq0C4ggkJM4G0whqWESwqyIbl5uEOkojUjL06QieoUPM8ENA2OAQnIhJoAKOng0JLFRs8kLS4m/s640/Templatesyard-free-blogger-templates+%25287%2529.jpg'/> - Image
- <h6 class='about-heading'>Isabella Cage</h6> -Name
- <span>Designer</span> - Designation
- <p class='about-text'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. </p> -Description
Get In Touch (Section-5):
There are few things which you can change in this section.
Access your blog Theme > click Edit Html> and then find the following coding.
- Headings and description.
Access your blog Theme > click Edit Html> and then find the following coding.
<div class='contact-title'>
<h4>Get in Touch</h4>
<span>Feel free to drop us a line to contact us</span>
</div>
Change the details with your desired one.
- Address, Email, Phone
Access your blog Theme > click Edit Html> and then find the following coding.
<div class='contact_list_wrapper'>
<ul class='contact-list-info'>
<li><i class='fa fa-map-marker'/>
<p>Moonshine St. 14/05 Light City</p>
</li>
<li><i class='fa fa-envelope-o'/>
<p><a class='nocolor' href='mailto:first.last@email.com'>first.last@email.com</a></p>
</li>
<li><i class='fa fa-phone'/>
<p>00 (123) 456 78 90</p>
</li>
</ul>
</div>
Change the details with your desired one.
- Map
Access your blog Theme > click Edit Html> and then find the following coding.
<script>
function initMap() {
var uluru = {lat: 51.5074, lng: 0.1278};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
Change the lat: 51.5074 with your latitude & lng: 0.1278 with your longitude.
Contact Form
To make the contact form work you have to do nothing, it works automatically hurrah!!
To make the contact form work you have to do nothing, it works automatically hurrah!!
Facebook Page Plugin:
<center><div class="fb-page" data-href="https://www.facebook.com/soratemplates/" data-width="360" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"></div></center>
or you can follow this tutorial if above method won't work
How to Add Responsive Facebook Like Box Widget In Blogger
Template Customization
Access your blog Template > click Customize.Colors
Installation And Custom Services
We provide plenty of templates for free but if you want something unique for your blog then let us create a unique design for your blog, Just tell us your needs and we will convert your dream design into reality. We also Provide Blogger Template Installation Service. Our Installation service gives you a simple, quick and secure way of getting your template setup without hassle.