If you add an image to a WordPress post, by default the border of the picture is just plain. Nothing border or shadow to show. Sometimes it looks ugly and also I don’t know why I look messy without a border.
In addition, when we add a shadow to the picture, it will more prominent and focus. So in my opinion adding 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 plugins even out there many free plugins you can use.
When you use the plugin in your WordPress, actually it will make your WordPress slow in loading, more use CPU processors on your hosting, use more bandwidth, and more.
So here, I will tell you how you can make or add a shadow on the image on your WordPress without using any plugin. And the interesting point here is you not need to update it forever. I mean here if you use a plugin created by someone and it is no longer updated by them, it will put your WordPress in a 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 is 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.
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.
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.
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!
If you like this article, then please FOLLOW our Linkedin, Twitter, YouTube, Pinterest, and Facebook. Do not forget to check our services page to upgrade your WordPress. If you find this post has an issue with copyright, outdated, or in error, please contact us to fix it.
Leave a Reply