If you add an image to WordPress post, by default the border of the picture just plain. Nothing border or shadow to show. Sometimes it looks ugly and also I don’t know why I look messy without border.

In addition, when we add shadow on the picture, it will more prominent and focuses. So in my opinion add shadow to the picture is important to do to get more attention from our readers.

So how?

Here I do not recommend you to use plugin even out there many free plugin you can use.

When you use plugin in your WordPress, actually it will make your WordPress slow in loading, more use cpu processor on your hosting, use more bandwidth, and more.

So here, I will tell you how you can make or add shadow on the image on your WordPress without using any plugin. And what the interesting point here is you no need to update it forever. I mean here if you use plugin created by someone and it no longer updates by them, it will put your WordPress in problem.

How To Add Shadow To Image In WordPress Post?

In this tutorial, I use Extra Theme from Elegant Theme. It same as Divi Theme users. But, if you are not Extra of Divi user, you still can follow my tutorial below but it just a little bit different.

Step 1 Just copy and paste the code below on custom css for extra theme.

To find custom css for extra theme, you can go to;

Dashboard >>> Extra >>> Theme Option

and paste the code here.

It would look like this.

shadow image

Then click save setting.

Step 2 For example, upload your image to the post and click on the image. Look at the right on your screen, click on block section and under the block section click on advance tab. Refer the picture below.

shadow image

Step 3 After you click on the tab advance, it will show you two empty columns. HTML anchor and Additional CSS class(es). On the additional CSS class(es), put the code;

minutes-guide-image-shadow

It is actually based on your CSS code like as step 1 above. Please try to take your time to learn it. Easily you will understand why you should put the code “minutes-guide-image-shadow” on the additional CSS class coloum.

shadow image

After that, you just click update to save what you have changed.

That all.

And now, you should see a picture have a shadow at the border.

I hope this tutorial help you a lot.

Thanks for stopping by here!

 48 total views,  1 views today

If you like this article, then please FOLLOW to our Google+ and Facebook. Do not forget to check our services page for empowering your WordPress. If you find this post outdated or error, please contact us to fix it.