Template Update: Andia version 2 with Bootstrap 3 and new features

Published on: Nov 24 2014 by Anli

Andia Template Update: Bootstrap 3 and New Features

After almost two years since its release and more than 65000 downloads, today I’m glad to present you version 2 of the Andia Bootstrap template. The most important update of this version is of course the use of the latest Bootstrap v3.3.1.

Other updates include: the use of the latest versions of all jQuery plugins, the addition of a dropdown menu, the addition of a new home page with a new slider, the update of Font Awesome icons, the removal of Twitter feed (read below) and the addition of a working subscription form in its place, the fixing of the portfolio and the addition of videos as portfolio items, an overall improvement of the code using today’s best practices (let me know if you think something is wrong in the code), etc.

Below you can find a detailed changelog, some screenshots and the live preview and download links. Let me know what you think and if you have any questions (I’m planning to create some how-to articles to answer your questions). Enjoy!


Preview and download

Live preview here

Download Andia version 2 from the template’s page.

ChangeLog

Bootstrap 3.3.1 and latest jQuery plugins

In Andia v2 I’ve used the latest version of the Bootstrap framework, v3.3.1, as well as the latest versions of all jQuery plugins (let me know if I’ve forgotten to update any of them). Also I’ve added new plugins and replaced some of them with others like, for example, in the portfolio page.

Dropdown menu

In this version Andia supports dropdown menus so you can easily create subpages and add them under the main pages in the menu.

New home page with new slider

Now, with Andia v2, you can choose from 2 types of home pages, with different image sliders. Also I’m planning to release new pages in future versions.

Andia v2 - New home page with new slider

Updated Font Awesome icons

I’ve updated the Font Awesome icons and I’ve used them also for the social icons in the footer and in the “about page”, removing the old image sprites social icons to make the pages lighter. Also, these icons look good in Retina devices like iPhones and iPads.

Removed Twitter feed and added email subscription form

After having problems with the Twitter feed that stopped working because of the change of the Twitter API, I’ve decided to remove it from the template and not support it anymore.

Yes, I know, there are different plugins that work with the new API and I’ve used them in some of my premium themes. But I’ve also had trouble with the sites of some users of these themes and I’ve lost hours trying to fix their Twitter feeds.

So, if you want to use Twitter feeds in this template, I think Twitter provides ready-to-use widgets that you can implement easily.

Instead, I’ve added a working AJAX subscription form with validation that you can use to collect emails from your clients. You receive the new subscribers in your email.

Andia v2 - Email Subscription Form

Fixed portfolio and video portfolio items

As some users have reported, the old portfolio page had some issues when viewed on mobile devices. In version 2 of Andia I’ve fixed the portfolio (let me know if you find any bug) and also added the possibility to use videos (YouTube and Vimeo) as portfolio items.

Now you can have mixed portfolio items: images and videos.

Andia version 2 - Portfolio

CSS3 Animations

This version of Andia comes with some nice CSS3 animations: the template elements fade in from the top/bottom/left when they come into view as the user scrolls the page.

Improved code and minor layout changes

Andia version 2 comes with a better code using some of today’s best practices in modern web development and some minor layout changes as you’ll see.

Filed under: Template Updates

28 Comments So Far

  1. newbie says:

    how do you set up multiple level menus in this layout?

    • Anli says:

      I think Bootstrap 3 (used in this template) doesn’t support multi level dropdown menus. There are some solutions / plugins on the net, though. Just Google them.
      I’ll see if I can add this feature in the next versions.

  2. Tina Clarke says:

    I used the version 1 template and I am having trouble working out the in page menu (on portfolio) so I can keep the formatting and link it to another page that I didn’t want in the main menu. I used the href, however that didn’t work. I can normally do all this but responsive designs I am finding very hard to work with, hence the reason I am using your Andia template (thank you very much – it took many many hours of testing to find a template that actually worked responsively properly – and that was free so I could experiment). My solution will be to write some css to mimic the current page menu and hope it does not break the responsive aspect. Many thanks once again.

  3. Frank Valleo III says:

    Hello Anli,

    Nice template! It appears to be missing contact.php for the contact page. The previous version used sendmail.php and it seem to be a little different.

    Thanks again!

  4. Gillian says:

    Still having issues with the portfolio page in version 2. The images disappear on iphone. Defeats the purpose of being a portfolio page. Any fix for this yet?

    • Anli says:

      What version of iPhone?

    • Nhung says:

      I have a same problem. All images in portfolio page are disapear when I view on my mobile device with default browser, both android and IOS. But Chrome browser android, everthing is normal, perfect. Can I have any idea for this problem? Thks so much!

      • Anli says:

        I have to fix this in the next version. For now try this:

        Add this code in the scripts.js file:

        $(“.portfolio-box img”).attr(“style”, “width: auto !important; height: auto !important;”);

        Inside the jQuery(window).load(function() {

        (write the code, don’t copy/paste it.)

  5. Hi Anli,

    How can I edit the success message after sending the contact form? Can’t find it into “sendmail.php” code.

    Thank you!

  6. Iain R says:

    On the portfolio page, how do I EITHER:

    Make the images for each item redirect to another page when clicked, OR remove the ‘lightbox’ effect from the image so it doesn’t appear as a ‘link’…

    Thanks!

  7. Gillian says:

    For now I fixed the issue with the images (not displaying) on iphone 6 by disabling retina-1.1.0.min.js

  8. Linda Lee says:

    How to reset the map on the Contact Page

  9. Alex_M says:

    Hello. is it possible to change the font to Cyrillic?

  10. Gema says:

    Thanks for this amazing template!. !I customized this template for my web and I made a great site with “Andia”

  11. Leo Choi says:

    Please help me,
    the contact form can not work well!
    It can send the email and do the validation!
    Please help me to fix this!

  12. Marsh says:

    My drop down menu keeps appearing behind my slider images on the ipad 2 – I have added a few drop down items. Why is that? Thanks.

  13. tom72 says:

    Hello,

    Nice template but I have a problem. Some images in portfolio page are disapear when I use Microsoft Edge browser (Windows 10). In Chrome browser for Windows, everything is OK. This problem occurs when I use a filter mode. Please help me to fix this bug!

  14. Konstantin says:

    Hello, I want to ask you about portfolio page in last version of Andia template.
    I want that preview pictures downloading from small files….for example ./site/small/01.jpg
    and after clicking on pictures and open slishow there are show big file of this picture. exp: ./site/big/01.jpg
    How can I do it with portfolio containers in 2 version. Please help me what i need to do?

Leave a Reply