Resources     Blog  

  1. Home
  2. WordPress Tutorials
  3. How to Use Drop Shadow Boxes in WordPress

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.

drop shadow box examples

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.

mouse over the "Plugins" link and click the "Add New" link

In the «Search plugins…» box, enter «Drop Shadow Boxes.»

search for the WordPress Drop Shadow Boxes plugin

Once you have located the plugin, click the «Install Now» button.

click to install the WordPress Drop Shadow Boxes plugin

Click the «Activate» button.

click to activate the WordPress Drop Shadow Boxes plugin

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.

click add block icon

Find the «Drop Shadow Box» block in the «Common Blocks» section and click it.

click the "Drop Shadow Box" block

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

options

A preview is shown when you make a change.

preview of changes

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

changes live on site

How to Highlight Content Using the Older «Classic» WordPress Editor

Open a page or post in the editor.

Click the «Add Box» button.

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.

enter text

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 "Refresh Preview" button

Click the «Insert Box» button to save your configuration and text.

click the "Insert Box" button

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

changes live on site

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.

Gutenberg block after uninstalling the plugin

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.

classic editor after uninstalling the plugin

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.

Author: Michael Phillips

Michael Phillips is a web hosting industry veteran, helping people make the most of their web presence since 1995.

Was this article helpful?

Related Articles

Leave a Comment

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.