HOT!Join Our Community For Exclusive Blogging IdeasClick 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

42 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
    2. I have the same problem, Contactform not working. Downloaded the template on 27-06-2017, so after it was fixed. What can I do? I fill in everything in the contactform, but when I click on send, noting happends.

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

      Thanks
      Team Sora

      Delete
  4. Hi! I'm having an issue with the labels. On a post, I'll click the label, and it'll send me back to the home page. Under the portfolio section, only the posts with the labels will be there, but the fact that clicking the label I want on the post sends me back to the top of the home page is the problem. Is there any way to either have it send me to that section of the main page, or a separate page with just the labeled posts?

    Also, any time I use bullet points on a post, while viewing the page I see both a bullet point and a > symbol, but that doesn't appear when creating the post. Is there a fix for that, too?

    Thanks!

    ReplyDelete
    Replies
    1. The url of every label is generated by bloggers default code, so we can't change the url of label's.

      For the bullet just create the list under bullet option it will automatically make it appear for more information follow this tutorial.

      http://www.sorabloggingtips.com/p/shortcodes-and-page-markups.html

      Delete
  5. Hi, Greeting from Nai,
    it doesn't work photo view, when I click photos in post.
    Please ,,

    Thank you.
    Best Regards,
    Nai

    ReplyDelete
    Replies
    1. Enable the lightbox option from blog settings.

      Delete
  6. I absolutely love this template! I have a few questions.
    1) How can I limit the number of blog articles that display in the blog section (at the moment 7 articles are displayed)
    2) Is there a way of adding a 'shop now' button to the header image under the social media icons?
    I haven't paid for this template yet, but if I could figure out the above 2 problems I would be so happy to. Love love love this template.

    ReplyDelete
    Replies
    1. 1. To control the post Go to >> Settings >> Post, comments and sharing option >> show at most >> change it to any number.

      (Note:- The question you have asked, has been covered in BAsic Setup section. We have published everything to setup this template, just read it carefully.)

      2. There is a widget above social media buttons for description you can add button code in it, but if you want us to do it, you have to pay.)

      Delete
  7. Hi, when i press send button, the contact form doesn't work? i was clicked all time but nothing happened...

    ReplyDelete
    Replies
    1. please update your template, we have fixed the issue in latest version.

      Delete
  8. Can I change the first image for other? Thanks

    ReplyDelete
  9. This comment has been removed by a blog administrator.

    ReplyDelete
  10. Hello Sora Team, nice template!

    I have a problem, when I want to change the background image it gave this error "Invalid variable declaration in page skin: Variable is used but not defined. Input: primary.color"

    ReplyDelete
    Replies
    1. Which Background image you want to change with Customizer ?
      You can only change color scheme of this template through customizer, to change anything else you have to edit the HTML.

      Delete
  11. ACABO DE COMPRA ESSE MODELO!
    COMO FAÇO PARA MUDAR OS ICONES "" We Specialize in "" ?
    QUERO TAMBEM POR UM LINK PARA DIRECIONAR PARA OUTRA PAGINA

    ReplyDelete
    Replies
    1. You can replace icons by replacing the code of it, select your desired icon from fontawesome website.

      Delete
  12. Hi, I paid for this template, but the contact form is not working, despite other posts saying this is fixed, it is not. Please advise.

    ReplyDelete
    Replies
    1. We have updated the template, download it again.

      Delete
  13. Hello, I got my Map coordinates right but they're not working: 7.251960, 5.199146

    Please help!

    I bought the theme.

    ReplyDelete
    Replies
    1. Hello Admin, mistake was mine, I should've zoomed in more. Thanks for your response.

      Delete
  14. contact form still not working, despite other posts saying this is fixed, it is not. Please advise.

    ReplyDelete
  15. bom dia eu gostaria de saber se no fundo onde fica o nome FENIX posso colocar alguma imagem em flash ou gif

    ReplyDelete
  16. Hi! How can I put an image instead of the Text on the (span class='logo-title'></span) ??

    ReplyDelete
    Replies
    1. Replace it with image html and you also have to define heigh and width.

      Delete
  17. Hi again! I removed the map of the Contact section. How can I center the Contact Form on my page? Thanks

    ReplyDelete
  18. Hi. Contact form still work in free version? If I buy the Premium version, what else I can have? Thanks.

    ReplyDelete

Powered by Blogger.