Take Your Nimble Theme Homepage To The Next Level

The Nimble Theme allows you to feature three content blurbs on the homepage along with an icon to represent each. We have created a 40-count image pack based on our Elegant Icons with perfectly-sized symbols to align and fit inside the Nimble icon circle. Also included are PSD, AI, and EPS templates for creating your own. Below is a preview of the icons and a complete tutorial explaining how to set these up along with some css tricks and modifications.

Download The Icons

Blurb Set Up

To set these up, create three pages that you would like to use for the blurbs. Go to the Appearances > Nimble Theme Options and click the General Settings > Homepage tab. Under the “Content Area 1/2/3 Page” drop-down menus, choose the pages you would like to use. Within the pages you can use a “more” tag to truncate the post preview. The content of each page will then show up within each “blurb” on the homepage.

Define Blurb Content in ePanel

Adding a Blurb Icon

You can also designate an icon image for each blurb to appear above the text within the grey circle. To define this icon image for your blurb, create a new custom field with the Name “Icon” and a Value of the URL to the icon image that you would like to use. To create a new custom field, locate the “Custom Fields” section below your text editor when editing a page.

Add an Icon with a Custom Field (Name is case sensitive)

That’s it!

Advanced Options

For a more custom approach, you can place the following code into your ePanel Custom CSS Box or a Child Theme. This will remove the default gray circle, and you can upload any icon or image and it will be placed at the original image size up to 274px wide or 200px tall. For consistency, you will want to make sure all three images are the same height.

.et_page_icon {
	position: initial;
	margin: 0 auto 30px;
	display: block;
	max-width: 100%;
	max-height: 200px;
}

.service {
	background:none;
	padding: 0 0 20px 0;
}

Centered Content

If you want to center the blurb content, versus the default left-alignment, use the code below instead.

.et_page_icon {
	position: initial;
	margin: 0 auto 30px;
	display: block;
	max-width: 100%;
	max-height: 200px;
}

.service {
	background: none;
	padding: 0 0 20px 0;
	text-align: center;
}

a.learn-more {
	float: none;
}

Retina Display SVG Images

The WordPress Media Library does not support the uploading of SVG images, but if you are hosting an SVG on your site and have its URL, you can define that as the ‘Icon’ custom field value. SVG files are fully scalable image assets so they will appear perfectly crisp on high resolution displays. Our Elegant Icon pack includes 360 fully editable SVG files to get you started.

Other Icon Packs

If you use the custom approach, you can use icons from any of our other icon packs. Click on any of the icon previews below to download the full pack.

If you liked this theme tip, take a stroll around the blog for more of our free resources and please let us know what our next theme tip should be!