Ready to add a little pizazz to your sidebar? In this tutorial we are going to show you how to add thumbnail images to your Recent Posts Links on your Divi Sidebar using the Recent Posts Widget with Thumbnails plugin.

After publishing my tutorial and free layout pack for a magazine style blog, many asked for more tutorials on making the sidebar a little fancier. I also published a tutorial on Enhancing your Divi Sidebar Search and Widget Headers.

But now we are going to step it up a notch and create a Recent Posts list that resembles my own Magazine Blog: MontereyBayFun.com

You can check out the before and after demo here.

First you will need to download the Recent Posts Widget with Thumbnails and install it on your website.

Lets Get Started

1. Go to Appearance > Widgets and drag and drop the Recent Posts With Thumbnails widget into the Sidebar area.

2. Update the settings as follows

The Magic of CSS

Now lets start to dazzle things up a bit with some CSS.

If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>ePanel>Custom CSS (which is located at the bottom of the ePanel)

/*------------------------------------------------*/ /*-------------[CUSTOM RECENT POSTS]--------------*/ /*---------------[BY GENO QUIROZ]-----------------*/ /*------------------------------------------------*/ .rpwwt-widget h4 { color: #fff; background: #000; padding: 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)!important;} .rpwwt-widget ul { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)!important;} .rpwwt-widget ul li { padding: 0px 8px 0px;} span.rpwwt-post-title { font-size: 13px; font-weight: 700; line-height: 1px;} .et_pb_widget_area .rpwwt-widget ul { line-height: 14px!important; padding: 10px 0 16px!important;} .rpwwt-post-date { font-size: 11px;}

And that’s it. Now you will have gone from ordinary to extraordinary.

And here are a few snippets you can find on my Divi Snippets page just in case you wanted to make that sidebar a little wider and remove that dividing line.

/* remove left padding in sidebar area */ .et_pb_widget_area_right, .et_right_sidebar #sidebar {padding-left: 0px;} /* removes divider on post pages*/ .container::before {display:none;} /* removes divider in sidebar modules */ .et_pb_widget_area_left {border-right: 0px solid rgba(0, 0, 0, 0);padding-right: 0px;} .et_pb_widget_area_right {border-left: 0px solid rgba(0,0,0,0); padding-right: 0px;}

And now you have one more way to make your Divi website stand out above the rest!

Have fun!!!

Well that’s all for now. I hope you find this article useful.

Related