HostGator Web Hosting

Elegant Themes Tutorial – Customizing the Nimble Theme Home Page: Logos, Colors, Featured Image Slider, Blurbs, News, Updates and More

Nimble is one of the many great themes offered by the popular developer Elegant Themes.  What sets the Nimble theme apart from many of the other premium themes is its “scrolling-magazine” style layout.  The scrolling-magazine style layout has become increasing popular with marketers looking to effectively reach new audiences.

The fact that users can gather almost all the information they need about your product or service without using any navigation other than scrolling makes for a simple user experience and is inline with the way people are becoming accustomed to using the web.  Effective use of this web design style can be found on landing pages for Google’s Nexus devices, as well as Apple’s line of products (we hear they know something about marketing).  In this Upload WP tutorial series we will show you how to set up and customize the Nimble theme step-by-step from top to bottom so lets get started…

Nimble Theme Tutorial

Customizing the Nimble Theme

In the first two installments of our Nimble theme tutorial series we will walk you through the site, showing you how to change each element of the homepage from top to bottom.

First Things First

Being a premium theme, Nimble offers a wealth of easily accessible customization options.  Before jumping in however, we encourage you to visit the “epanel” after installing and activating the Nimble Theme.

To access the Elegant Themes epanel go to Appearance > Nimble Theme Options

Click around and explore the many options (this is a good idea to do with any theme when you first install it.)

When you’re done, return to General Settings.  From there you can change the Color scheme as well as amount of posts displayed and a few other options.  We’re going to ignore these for now and continue with the customization.

Uploading Custom Logos and Setting the Color Scheme

The Nimble theme makes uploading your custom logo very easy.

To upload your custom logo to the Nimble theme go to General Settings > Logo (It’s the first option) > Upload Image > Select your image and hit upload > Scroll to the bottom and Save changes > Your logo is now live on the site

You’ll also want to add a favicon (the little image next to the name of you site in the tab) in the same way (Tip: favicons should be 16x6px and saved as .png or .jpg).

Under the favicon options box you can set a color scheme to match the tone of your logo.  They offer the standards by default and Nimble offers built in support for child style sheets as well.  If you are an advanced user visit the “Colorization Tab” to get started.

Setting Up the Nimble Theme Featured Slider:

By default the top section of the Nimble theme is a large image slider.  If you’re making a business style site then this is a great place to feature your top products and/or services.

To start, create a category of posts you wish to appear in the slider (This is so only the posts you want show up there, not all of them, as would happen by default).

To create your Nimble theme featured image slider category in the WordPress admin go to Posts > Categories and add a new category > Name it what ever you like, but we recommend “Featured” so it’s easy to remember if your taxonomy gets advanced.

Now, return to the epanel (Appearance > Nimble Theme Options) and select the “Featured Slider” tab from General Settings.  Find the section titled “Featured Posts Category” and select “Featured” from the drop down.  Any posts you assign to the featured category will now appear in the slider at the top of the page.  Make sure you assign an image as “Featured Image” in your post to display it on the slider.  You may have to re-size your image to make it look good in the slider (The images kind of peek up from the bottom).

Setting Up the Nimble theme Blurb Section:

By default, the Nimble theme offers a blurb section under the featured image slider on the home page.  To customize this section, you need to first create three new Pages in your WordPress admin.  On each page find the “Custom Fields” section and add a field named “Icon” with the value being the URL of the image you created (you can find this by accessing the image through the media library in your WordPress Admin after uploading it to your site through the media uplaoder).

Once your pages are complete return to the Elegant Themes epanel and click the “Homepage” tab under General Settings > Content Areas 1-3 represent the blurbs > Select each page from the drop drown > Scroll to the bottom and save your changes > The pages you created now populate the blurb section.

Under the Content Area sections you will find “Quote Text Line #1 and #2 > Change the text here to change the quote under the blurbs (This is a great spot for a customer testimonial!).

Important Note on the Nimble Blurb section:

The little circles above each blurb are meant for icons and what you set to this section will not fill the frame.  Because of this, it is recommended you use a 50 x 50px (.png) image centered in the frame with a transparent background.  Use an image editing tool such as Photoshop or Gimp to create the icons.

News and Updates Section:Nimble theme News and Updates section

The news and updates section of the Nimble theme automatically displays your most recent blog posts.  If you set a featured image for your post, it will appear in a neat little circle above the title.

You can change the name and description of the section under the Home Page tab > General Settings in your epanel.

If you want all your posts EXCEPT your featured posts (which already appear at the top of your page) go to the Featured Slider tab under General Settings in your epanel and disable the “Duplicate Featured Articles” button.  Or, un-check “Featured” at the bottom of the Home Page tab.  To disable this section entirely, click the “Display From the Blog Section” button at the top under Home Page under General Settings in your epanel.

Work and Feedback Section:

You can customize the title and description under the Home page Tab of General Settings in your epanel.  If you add a URL to the “Recent Work section URL” box in the same location, Nimble will generate a button in this section that takes you to the assigned destination.

Plans and Pricing Section:Nimble Plans and Pricing section on homepage

By now, you should know where to change the title and description, but in case you missed it, visit your epanel under the Homepage tab under General Settings.

On the same tab, find the “Plans and Pricing Page” section, and choose a page from the drop down menu.  The page you select will populate this section.

You can also add a professional pricing table to this section using Nimble themes custom short code.

There you have it, the basics of customizing the homepage of the Nimble theme.  Next time we’ll dive a little deeper and show you some of the advanced options that Nimble has to offer.  If you have any questions that have not been covered in this tutorial please feel free to ask by leaving a Comment below.

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!

HostGator Web Hosting

95 COMMENTS

  1. Thanks for this tutorial on the Nimble theme. I’m setting up a business style site with Nimble and will be using your tutorials as a guide. Thanks again and keep up the good work!

  2. Can u do a tutorial on customizing colors for nimble. The 5 colors aren’t appropriate and I want a yellow background or off white.

    • Hi Axel – The dimensions for the Nimble theme featured image slider slides should be 960px × 295px. Please let us know if you have any additional questions regarding the Nimble theme. Thanks

      Adam

      • thx you very much for answearing, in fact I wanted to know it was possible to change the size of the images or if it was possible to use for instance easyrotator for the slider or any other slider pluggin.

        thank you,

        Axel

  3. Thanks for the great tutorials, really helpful. However, with the “blurb” section when I go to add the “icon” in the edit page there is no icon option in the custom field list. Only “Featured” “thumnbnail” etc..options. Any recommendations? Thanks.

  4. I have a fresh wordpress install 3.5 (I also tried 3.5.1). I installed and activated Nimble. However, there are two problems. First, the slider doesn’t work. There is no, “Hello World” post. It is just blank. Second, when I hover my cursor over a page name on the top of the page, the link does not become highlighted. Any suggestions?

    • Hi Terrin,

      It’s strange that you don’t have the “Hello World” post after a fresh installation. If you make a few test posts to populate the page does the slider then work? If not, I would start by trashing your installation (backup and content and databases) and installing it again (with a fresh download). Sometimes the WordPress core files get messed up.

      As far as the link highlighting goes, it appears that’s not a feature of Nimble theme. To change that you need to add some CSS to your stylesheet to make the link change it’s appearance when highlighted.

      • Thanks for the comment. It was really weird. I did reinstall everything (several times), but it still didn’t work. I, however, found some code in the header regarding the feature slider that said something about, “display: none.” I know very little about programming, but I changed it to, “display: yes.” This resulted in the slider working, but the pictures getting over laid on top of one another. So I changed it back, and then it all the sudden worked properly. Very strange.

        As far as the other issue goes, if you go to the Elegant Themes website, the demo for Nimble shows the header links when selected change to a box. For example, if you select the “Home” button “Home” becomes framed by a box. Mine remain static.

        • Sometimes stuff breaks (or works) for seemingly no reason. It’s really annoying. Nice work getting the slider to work. Honestly, one of the best ways to get to know code is messing around with it like you did. (Just remember to always take backups).

          I see what you mean about the active menue item, and I must admit, I’m stumped. I installed the theme again and it does not display that way on mine either. The code that generates that effect is present, but it doesn’t pick up. Going into the epanel > colorization menu there’s an option for active menue item color. Changing this had no effect either. I’ll keep working on it. Please share your success if you figure it out in the mean time.

          • Please report back if you figure it out. I actually messed around in the CSS file (not the header file) to get the slider to work, but I merely changed the display setting to yes, and then back to none. Not sure why that worked. In the CSS file there is some information pertaining to the header links, but I can’t figure out why the buttons don’t highlight. Also on the Nimble theme demonstration, the picture in the feature is animated. I can’t figure that out either.

          • I just tried a fresh installation on a fresh domain, and all of the problems you are describing are being reproduced. This makes me think it’s a problem with the new version of the theme. I’ll keep messing around with it, but this is highly peculiar, and not behaving the way it did when I wrote the tutorial (obviously).

          • Carl’s website slider (in his link above) seems to be having the same problem as mine – not loading anything like the demo – just a barely-there flash of an image.
            Any ideas why this is happening – or how to fix it?

          • I am also trying, i did fresh install to see maybe i am wrong, but its theme bug, it should load primary menu. Some has its old version , please share, so i can compare with new version.

            Very much appreciated if you find solution, i am also looking for it yesterday, how to call menu and let it be responsive.

  5. i was going through your setting up nimble template and I thought your tutorial was done very well..but then suddenly after inputting a logo the text i had previously put in the posts changed to ipsim gibbirish – in my posts i see the articles still there – the headlines and sub-headline – but when i view my site..what i had put in posts no longer appears..does this have something to do with adding the logo????

  6. im really confused…when i installed the nimble according to the elegant themes tutorial it had the ‘hello’ in the slider, then it asked me to go to posts and play around with changing the text which i did…the slider had the text i wanted..then i saw your tutorial and went to try adding a logo…suddenly my slider text was showing some gibberish i didnt put there..i discovered this gibberish is in the template posts and it is categorized under ‘blog’ – i put my text there..and now the front slider works again but its all mixed up because its categorized under ‘blog’ and according to your tutorial it should be under ‘featured’ but ‘blog’ is the only thing that makes the slide work?????..help

    • Hey Josh,

      I’m a little confused, but will try to help. You can set the slider to display what ever category you want, we just used “featured” as an example.

      Did uploading the main logo cause the issues? (Like in the upper left hand corner?) or are you trying to add images to the slider? (For the latter, be sure the image is a proper size and set as featured image.)

      It’s difficult to tell what’s happening with your site. Sometimes a fresh install works wonders too.

      • hi…have another question…
        I think I saw you mention this before but I’m not sure where I saw it..anyway..I’m writing text and i want to add a ‘learn more’ button so that it looks neater and if someone wants to expand the text and read the whole article they can..or move on..I tried inputting the ‘add ET learn more block’ but that wasn’t what I was looking for…i want it to look more seamless..hope you can help

  7. Hey,

    That is a great tutorial but I am having a little problem. This is my first website and the Nimble theme seems good so far but when I am trying to add the icon to the little content blurbs it is not centered.
    My icon is a simple text icon but it is larger that 50 x 50 pixels because otherwise it is too small writing and does not look good. But when I do this it is not centered.

    Can you please explain to me in detail on how to fix this as I am pretty new to all of this. Thanks

    • Hey Luca,

      Thanks for the positive feedback on our tutorials and for your question. My suggestion would be to use an image editing software such as Photoshop to Warp the Text. The “Warp Text” option would allow you to shape the text so that it fits nicely in the 50×50 pixel blurb area.

      If you don’t have Photoshop, then I would suggest using Gimp. Gimp is an open source tool (meaning its free) that has most of the same functionality as Photoshop. If you do a Google search for “Gimp” you’ll find it. Install that image editing tool and then play around with the “Warp Text” option.

  8. Can anybody give me a hint on how to figure out what the main color blue Nimble uses in the Header? I want my image that pops up to match the color.

    • Hi Terrin,

      Thanks for your question. The exact Blue used in the blue Nimble theme header is… #44a4e0

      Please let us know if you have any additional WordPress and/or Nimble theme questions. Thanks.

      • I tried that color code, but it appears a few shades lighter when the image pops up and is noticeable. I am trying to get it so it looks like just a phone number is popping up against the same color background.

  9. Another question. If I have a post featured as News with a Blurb, what size image do I use for the blurb. I ask because when you open the post the image used for the blurb is also blown up on top of the post and is much bigger. For instance, I used a 150 by 150 image, which looked good for the blurb, but not good for the post.

    • Hi Mohit,

      If you re-download your themes files, and add only the home.php file back to your sites directory, it should go back to normal (assuming you haven’t made any drastic changes.

      Always remember to use child themes and take frequent back ups to prevent issues like this :). I know it’s a hassle, but definitely worth it.

      • Can you tell me one more thing ?

        My publish button is not coming on either page or a post. I tried to deactivate all my plugins but this dosen’t resolve my problem, I even also deleted all catches, cookies & browsing data.

        Any suggestions how to resolve it ??

        • Is your WordPress installation up to date? That’s a very odd problem. My only suggestion would be to update WordPress. (Even if it’s up-to-date the lack of a publish button suggests something went wrong in the core files, updating/reinstalling should fix it, but try it on multiple browsers first.

          You may have update manually. See this article for information on how to do that. http://codex.wordpress.org/Updating_WordPress

          -Adam

        • Sorry for the delay Chris,

          home.php is by default in the wp-content folder. I would suggest reading the following to articles before altering your themes files, in order to do it safely.


          But in this case, with such a simple change, you can probably just use the WordPress editor.

          WordPress dashboard > Appearance > Editor > home.php

          Just be sure to make a backup before hand.

          • Hi Adam,

            The button has been a success! Can you tell me what bit of the code to change if i want to link this button to a survey for my website?

            Thanks

            Chris

        • I posted this but I it went to the wrong thread for some reason, just wanted to be sure you saw it.

          Great to hear! On the same line try replacing: $pricing_page_url with the url of the survey. Back up first 🙂 .

          (regarding changing the button to an external link)

  10. Hi Adam, Can you tell me if there’s a piece of code to be able to put swf files onto the site. My flash element has got video in it and it doesn’t seem to be working.

    • Chris,

      I don’t have a ton of experience with flash. Forgive me if you’ve already tried this, but I would recommend searching for a plugin to handle your .swf files. I did a search for “WordPress Plugin Flash Integration,” and there seemed to be some valid options. Admittedly, this will probably take some trial and error on your part.

      -Adam

  11. Hey Adam

    Is there a way of changing the “view plans & pricing” button so it links to an external url such as Amazon?

    Would massively appreciate it if you could help with this.

    Thanks

    Bobby

  12. Hey Adam

    I’ve done it. I seen you posted how to do it above however I was changing the wrong code 😕

    Thanks.

    Bobby

  13. Hi! I really like this theme, but would love to see some websites using it, just to see all the possibilities. Any chance you know of any websites using it?

    • I would comb the comment threads and take a look at some of the other users sites. I can’t point to any specific examples, but I’m sure there’s some great ones out there!

  14. Hi, sorry to bother you but I’m on a dead end.
    I’m using Nimble from elegnat themes, and did a few customization, take a look at http://www.consulenzafamiliare.com , suggestions are greatly appreciated.
    I’m stuck with the buttons, I want to style “Read more..” and “Go to..” but I can’t find the way, I asked the forum but the customization is too deep and they don’t support, that’s why I’m here.

    What I want to do is:
    1 – Remove the zoom from “Read more” button to all the pages.
    2 – Style all the buttons on the same way, maybe a light grey or #F0E7B4
    3 – remove shadow and borders

    Really glad if you could help.

  15. Hi- I browsed your tutorial and was hoping to find out how you set up the projects/ recent work section. Right now when I click on view projects on the home page it shows nothing when I clearly added 3 projects. Do you know how to fix this?

    • Hi Jessica,

      Thanks for your question. I just looked at your Projects page and it’s showing 3 projects… Invitation Fascination, SCOA, and DJ Willie Soundz.

      So I’m assuming you’ve solved the issue? Let me know.

      Thanks,

      Adam
      p.s. you’ve done a great job with customizing the Nimble theme – I really like your site

  16. Hey Adam,

    Thanks for the tutorial. Very helpful. I was wondering if you know a way to get only certain links from the slider open in new tabs. I have 2 pages on the slider that link to external sites and 2 that link to internal pages. I went into the php and changed it so that all of the links on the slider open in new tabs, but like I said, I only want 2 of the links to do that.

    Thanks a lot,

    Andrew

    • Hi Andrew, can you share with me how you altered the .php to do that? I've been looking into this and with the way the slider generates, I'm not sure how to achieve that.

      • I opened the the editor, went to "featured.php" and then changed this line:

        <h2><a href="<?php echo esc_url( $link ); ?>"><?php echo $title; ?></a>

        to this:

        <h2><a href="<?php echo esc_url( $link ); ?>" target="_blank"><?php echo $title; ?></a>

        • Yeah that's how I approached it too. I looked into plugin options as well, but there doesn't seem to be anything. It appears adding that feature would require rewriting the featured slider, which unfortunately is outside the scope of this site. Please come back and share if you find a fix!

  17. Hi,
    Would be grateful if you could answer this simple newbie problem i have. In a new post i would like to have an image that is rectangular rather than square. Nimble show this in their demo but i can't seem to achieve it.

    Many thanks indeed.

    Rich.

    • Hi Richard,

      Thanks for your question. Are you referring to the main image that displays at the top of each blog post with the Nimble theme? Please provide a more specific example on your site so we can better understand the image you're referring to and do our best to help.

      Thanks,

      Adam

      • Thanks Adam,

        I have set the theme to have the blog page (Blog with right sidebar) as the home page.
        On their demo page, below, they show two square style images for the first two blog items then two landscape style images for the third and fourths.

        This is what i am after but when uploaded an image i can't seem to get it to show in a landscape type image for a blog.

        it may be a simple thing but i am new to this.

        Thanks

        Rich
        http://themeforest.net/item/nimble-multipurpose-retina-ready-wordpress-theme/full_screen_preview/3009347

        • It looks like the landscape ones are set to "photo format." When creating the post, on the right and side, probably half way down (I'm not working from an installation of Nimble right now, just guessing.) There should be a drop down to select your post format. Be sure photo is selected. Then be sure your image is uploaded to the proper dimensions and set it as the featured image (found in the bottom right of the post creation page.)

          Let me know if this works!

          -Adam

          • Spot on Adam,

            I tried it and played with the image size and it worked. Thanks for the great site,
            Rich

  18. Hi,
    i looked at your YouTube video on how to change the homepage but under 'appearances' i don't have the option 'nimble theme options' as you do. All i have it 'theme'. Therefore i can't see the epanel.

    Theme looks great on the demo site but i am struggling to see how i can get content on the homepage. Also on the homepage there is only one option for a homepage in the template dropdown. How do i add some main body content to my home page. All i can get is the sidebar and slideshow but no content.

    Any help would be appreciated.

    • Hey Richard,

      That's a pretty major problem you have there! I would recommend reinstalling the theme, clearing your cache and seeing if it works. Your going to need the epanel to set up the home page.

      -Adam

      • Hi Adam,

        Thanks for this. Just before i reinstall everything again i have a problem with other items. E.g. When i delete a featured image on the video section and put another image in its place and click publish i can see it in the right hand side of the admin section but it does not update live. Also in a post i turned on 'excerpts' just to test it out but when i went back in to turn them off they still appear on the live post with no way of getting the normal text back.

        Do you think this is related and what may have caused it to corrupt. i am not keen on starting again only to find it corrupts again or is this a know weakness of Nimble.

        Thanks for your answers, they are very helpful

        • Sorry for the delay Richard.

          Those problems sound like a cacheing issue. After making your change, before viewing it, clear your cache (tri bar > history > clear history in chrome) then view it.

          See if that works. Also, when reinstalling the theme, you wont lose any of your work (save for theme customizations, but you should be using a child theme anyways), so don't think of it as starting again.

          -Adam

  19. Is it possible to have a fixed header with NImble, where the logo section stays put and the feature and everything else scrolls?

  20. Hi,

    Firstly thank you so much for this great step by step tutorial, particularly the part about the importance of a favicon.

    I have one issue, wondering if you can help, I'd like to add a custom area on the homepage of this theme – 2 different pictures that link to two different pages on my site. This needs to go underneath the featured slider. I have it formatted on a new page on WordPress but have no idea how I can insert it into the homepage.

    Your help will be greatly appreciated.

    • Hi Mo – Thanks for you're question. I'm going to forward this to Adam B because he knows the Nimble theme much better than I do. In the meantime, if anyone knows Nimble well and can help it would be greatly appreciated.

  21. One thing that is seriously driving me nuts – I can't find a list of optimal image sizes for Nimble (or for their other themes). They already apparently don't consider retina screens, so my images look blurry (vectors, not photos) – I need to use optimal image size to ensure that they aren't resized and further compromised.

    I found the slider (960×295) and blurb (50×50) listed above. Can you please tell me the optimal size for blog and regular page pictures (if there is one)?

    It would be super helpful if you could tell me where to find the info so that I can find it for their other themes as well. Thanks!

  22. Hello! Thanks so much for the detailed informative tutorials on the Nimble theme. As somewhat of a newbie to wordpress, I am very grateful!

    I am trying to figure out how to add a facebook icon to the top of my homepage (above the menu), and I imagine that it involves inserting code in Editor. Any pointers or tips?

    MANY THANKS!
    Brighid

  23. How do you do a portfolio page with the et page template setting?
    I can not select my project category in "Select gallery categories" because all the categories show up are of posts, not project, please help. Thank you

    • Hi Wilson,

      Thanks for your question. Let me play it back to you to make sure I'm following your question correctly… So you're looking to create a Portfolio page with the Nimble theme? Please clarify and we'll do our best to help guide you. Thanks

    • Hi Spenser,

      I'll test it out today and update this comment if I figure out how to remove the 3 circles from the Nimble theme blurb section. If anyone else out there knows how to remove the blurb section circles on the Nimble theme please share the solution with us. Thanks

  24. Hi, I am trying to add the "view more blog posts" button to the blog section, but cannot for the life of myself understand how it disappeared or how to add it back.

    Do you know how?

  25. I am using Nimble theme and I am having a problem with the contact form, I don’t know where the information filled in the form goes! what I am I doing wrong? Please and thank you.

  26. Thanks for these very helpful tutorials! One problem I had: the sound volume varies quite a bit on the videos. For instance, I could barely hear the one on the Featured Image Slider. So far the others are fine but I’m still near the beginning.

LEAVE A REPLY