HOT!Solved!! Recent Post, Featured Post, Slider, Random Post, Related Post Not WorkingClick Here

How To Setup Fenix Portfolio Blogger Template

Fenix Portfolio Blogger Template

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

  1. Template Installation
  2. Logo Setup
  3. Template Setting
  4. Shortcodes & Markups
  5. Create Sitemap

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://2.bp.blogspot.com/-0lbeIzTG3Nc/WT7DAREUYxI/AAAAAAAAC54/4sv9zQWVr0E_Lh50GWoVK2gWMBYwAYIfwCLcB/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 : Features
Sub Link: _Sub Link 1.0 (before the link add "_") 1 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://2.bp.blogspot.com/--DDeFwWC714/WT-c56xzDYI/AAAAAAAAC6k/Sr2Hxn9Z1P4ou2KLkSAoWFDdUvmdpXv5gCLcB/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&#39;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&#39;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&#39;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&#39;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&#39;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&#39;s. </p>
</div>
<!-- Sixth Ends -->
  </div></div>
Here are the things you need to change.

  1. <h4>We Specialize in</h4> - Main Title.
  2. <i aria-hidden='true' class='fa fa-heart-o'/> -Icon (fontawesome - http://fontawesome.io/cheatsheet/)
  3. <h6 class='special-heading'>Wedding Photography</h6> -Tiles title
  4. <p class='special-text'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;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.

  1. <h4>Steps in Our Works</h4> - Main Title.
  2. <span>Our process on creating awesome projects.</span> - Title Description
  3. <i aria-hidden='true' class='fa fa-lightbulb-o'/> -Icon (fontawesome - http://fontawesome.io/cheatsheet/)
  4. <h6 class='works-heading'>1. Concept</h6> -Tiles title
  5. <p class='special-text'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;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.

<div class='Portfolio-title'>
<h4>Smart, Creative &amp; 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://4.bp.blogspot.com/-6hMiWR8gQuM/WLKSLj1dAUI/AAAAAAAACnY/JhG3exLJVTIryazU3shrnwYUTGK05t-6ACLcB/s640/Templatesyard-free-blogger-templates%2B%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&#39;s. </p>
</div>
<!-- First One Ends -->

<!-- Second -->
<div class='about-tiles'>
<span class='about-image'>
<img alt='Me' src='https://2.bp.blogspot.com/-u5orqsKiMYM/V6xh6r77tsI/AAAAAAAAArM/X7L7eSMG_EwotXqLdZgAKtZEGyPjFIRVQCLcB/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&#39;s. </p>
</div>
<!-- Second Ends -->

<!-- Third -->
<div class='about-tiles'>
<span class='about-image'>
<img alt='Me' src='https://3.bp.blogspot.com/-w1LEUB-7MtU/WLKRXZEg8UI/AAAAAAAACnE/7SEtR7VtEMQ7I8uK4ZLSIBmaJwiGhfG9QCLcB/s640/Templatesyard-free-blogger-templates%2B%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&#39;s. </p>
</div>
<!-- Third Ends -->

  </div></div>
Here are the things you need to change.
  1. <h4>Meet the Team</h4> - Main Title.
  2. <span>Our process on creating awesome projects.</span> - Title Description
  3.  <img alt='Me' src='https://4.bp.blogspot.com/-6hMiWR8gQuM/WLKSLj1dAUI/AAAAAAAACnY/JhG3exLJVTIryazU3shrnwYUTGK05t-6ACLcB/s640/Templatesyard-free-blogger-templates%2B%25287%2529.jpg'/> - Image
  4. <h6 class='about-heading'>Isabella Cage</h6> -Name
  5. <span>Designer</span> - Designation
  6. <p class='about-text'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s. </p> -Description

Get In Touch (Section-5):

There are few things which you can change in this section.

  • 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(&#39;map&#39;), {
          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!!  

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.

How To Setup Fenix Portfolio Blogger Template How To Setup Fenix Portfolio Blogger Template Reviewed by Sora Blogging Tips on June 14, 2017 Rating: 5

7 comments:

  1. Template Installation
    Logo Setup
    Template Setting
    Shortcodes & Markups
    Create Sitemap

    >> thank you very much!

    ReplyDelete
  2. Replies
    1. Follow this section of in above tutorial "Contact Form"

      Delete
    2. Please download the template again, we solved that issue.

      Thanks
      Team Sora

      Delete
  3. Hi, i have te same problem with the Contact Form, its not running automaticaly.

    ReplyDelete
    Replies
    1. Please download the template again, we solved that issue.

      Thanks
      Team Sora

      Delete

Powered by Blogger.