Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

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.

001

Lets Get Started

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

002

 

2. Update the settings as follows

003

004

005

 

 

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.

006

 

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.


The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

©2012-2018 Geno Quiroz | Teach Learn Build Love | Divi Expert ServicesJohn 3:16

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest