How to Use Drop Shadow Boxes in WordPress

Did you know that there’s an easy way to use drop shadow boxes in WordPress? They’re a great way to draw attention to a piece of text, and while you could add them to sections of text manually, using CSS, that would be cumbersome and time-consuming.

I’m going to show you how to do it today using the Drop Shadow Boxes plugin. It’s simple and easy to implement, and the results are really cool.

Let’s get started.

Installing the Drop Shadow Boxes Plugin

Log in to your WordPress admin panel.

In the left column navigation, mouse over the “Plugins” link and click the “Add New” link.

In the “Search plugins…” box, enter “Drop Shadow Boxes.”

Once you have located the plugin, click the “Install Now” button.

Click the “Activate” button.

Configuring Drop Shadow Boxes

There are no settings or configuration necessary for this plugin. All the magic happens in the editor.

Adding Drop Shadow Boxes Using the WordPress Gutenberg Editor

Open a page or post in the WordPress editor.

The text inside the drop shadow box is going to be a separate block, so click the add block icon.

Find the “Drop Shadow Box” block in the “Common Blocks” section and click it.

The options for the content boxes are in the “Blocks” section on the right side of the editor.

A preview is shown when you make a change.

Update the page or post to see your drop shadow boxed text.

How to Highlight Content Using the Older “Classic” WordPress Editor

Open a page or post in the editor.

Click the “Add Box” button.

The box options will be in an overlay.

You enter the text that will be inside the box here in the overlay screen.

There is a preview of the effect, as in the block version, but it isn’t automatic. Click the “Refresh Preview” button to see the changes.

Click the “Insert Box” button to save your configuration and text.

Update the page or post to see your drop shadow boxed text.

What Happens if You Uninstall the Plugin

When you uninstall the plugin, pages and posts that you used it on will be affected.

If you used the Gutenberg block editor to add shadow boxes, the highlighted text will still be inside a box, but the styling will be gone.

If you used the classic WordPress editor to add shadow boxes, you’re going to be left with a bit of a mess to clean up.

As you will see, the plugin will leave behind a lot of shortcode information in every post or page you use it on.

When you find yourself cleaning up the code left behind after uninstalling this, or any other plugin, using a find and replace tool can make the job a lot easier.

Box It Up

Now that you see how easy it is to use drop shadow boxes on your WordPress website, I hope you can find an interesting way to make use of the effect. It’s one of those things that can easily be overdone, though, so use a little restraint.

Someone named Art Webb once said, “If you make everything bold, nothing is bold,” and that applies to most visual styling of text. Then again, Art may have been speaking in metaphors and talking about everything in life. And was Art Webb even a real person? That name is a bit “on the head” for a web design guru.

Well, whatever Art meant (and whoever he or she was), resist the temptation to put everything in a box! On your website and in your life. 😉

Have you ever manually applied CSS styling to the text in your posts or pages? Do you know of any similar simple plugins that do specific text styling? Let me know in the comments.