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…
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.
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.
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.