Getting to Know Nimble: Showcase Your Photos with the Highlight Bar

May 20, 2015

Getting to Know Nimble: Tips & Tricks to Make Our New Design Lab Work for You

Welcome to Getting to Know Nimble, a special series full of tips and tricks to make our new Design Lab work for you. In this series, we'll take a look at everything the Nimble Design Lab has to offer, what it can do, and how you can utilize its features to make your blog stand out. Check out the rest of the posts in this series here!

We start the series with one of our favorite new features exclusive to Nimble - the Highlight Bar. We often receive requests from Typepad bloggers asking how they can make the front page of their blog look a bit more like a magazine, where the front page posts put your photos front and center, and there is an excerpt of each post with a link to read more.

You can set this up manually as you compose each new post, but why go to all that work? Instead, start by heading on over to Settings > Posts and scroll down to the bottom. Here you'll see a section called Auto-Generated Excerpts. Put a check in the box labeled "Display excerpts instead of full posts on index and archive pages". A new check-box will appear when you do this, which says "Show featured image with excerpt". Make sure that this is checked as well.

Auto-Generated Excerpts

Now go on to Design > Style. You'll immediately see that the Live Preview has updated to show an example featured image with excerpt below and that there is a band across the image with the post title and post date. This is the Highlight Bar. If you like how it looks, you don't need to make any further changes, just start posting to your blog and adding photos to your posts and Typepad will do the rest.

Maybe you'd like to make the Highlight Bar a different color, or move it to a different position on the image, however. To do this, click on "Posts" in the menu to the right of the live preview.

Posts menu

This will open a section where you can modify the style of your posts. At the bottom of this section is the configuration area for the Highlight Bar.

Highlight Bar section

Click on the colored rectangle to open a small window where you can chose a new background color for the Highlight Bar.

Color picker

Keep in mind that the highlight bar will be slightly transparent so that the image can be seen through it. The text color for the post title and post date can be set above, along with the font and the size. You can also choose whether the Highlight Bar should appear across the middle of the post (this is the default) or across the top or bottom.

As you make each change, the Live Preview will update to show you how it will look. (Isn't the Live Preview the coolest feature ever? We're still geeking out over it ourselves!) Once you're satisfied with how you've styled the Highlight Bar, click "Save Changes" below the Live Preview to save your style. You can then check it out on the published blog by clicking "View Blog" in the top right corner of the page.

Highlight Bar

If you're on the Pro Unlimited plan or above, and if you're comfortable with coding CSS, you can customize the Highlight Bar further using the Custom CSS feature, such as by adding a border around the Highlight Bar or the featured image. To add a thick, solid, black border around the Highlight Bar, for instance, use the following code:

.overlay-text { border: 5px solid #000000; }

Our Knowledge Base article on CSS borders has more information on the different border styles you can use, if you'd like to learn more.

Want to see how the Highlight Bar looks on a real blog? Check out Swoonish:

Swoonish

Are you using the Highlight Bar on your Nimble blog? What tips and tricks do you recommend for bloggers who would like to add it? Tell us in the comments below!

Typepad on Pinterest: Pink Paper Peppermints

May 15, 2015

Did you know Typepad is on Pinterest? It's true! We love pinning and repinning great content from Typepad blogs in every genre, and we're always looking for great, inspirational content. Are you on Pinterest? Drop your link in the comments, and don't forget to follow Typepad right here! If you're not on Pinterest yet, check it out - it's a great way to promote your blog and connect with others!

Want some inspiration? Check out our featured pinner, Pink Paper Peppermints

How does a Crafty Blogger get kicked out of their 8th grade Home Economics class? Let Melissa tell you how marching to the beat of your own creative drum is not such a bad thing. Pink Paper Peppermints has plenty of tutorials, downloads, and awesome freebies to enjoy.


Screen Shot 2015-05-12 at 3.44.15 PM

FOLLOW: Blog | Pinterest

Want to promote your pinterest account on your Typepad blog? Just go to Blogs > Content and add the Pinterest Widget to your Sidebar via the center menu. While you're there, make your blog posts "pinable" by adding the Pin It button to your post footers.

Want even more? Learn how to promote your blog on Pinterest and follow Typepad at www.pinterest.com/typepad.

Welcome

Need help?

Follow us!

Typepad on FacebookTypepad on TwitterTypepad on Google+Typepad on PinterestSubscribe to Everything Typepad

Like us!

Typepad Newsletter

Still having trouble? Contact Support.