Create text boxes with drop shadows in WordPress

With the Drop Shadow Boxes plugin, you can quickly and easily insert text boxes with drop shadows into WordPress posts and pages. The boxes with shading can be created with a shortcode generator, a Gutenberg block or as a widget.

By using a box with a drop shadow, you can highlight important content on your website and make it more conspicuous so that visitors are more aware of it.

Text boxes with drop shadows in WordPress
Example of a box with a drop shadow

Drop shadow boxes

Drop Shadow Boxes is available for free on WordPress.org. Regular updates, over 10,000+ installations and a 5-star rating speak for the high quality of the plugin.

Highlight important content on your posts and pages inside a box with a drop shadow.

By: Steven Henty

( 74 )
Last updated: 2 years ago
8,000+ active installations
Compatible up to: 5.2.9

The shading is added using the CSS box-shadow property. In very old browsers - i.e. Internet Explorer 8 and smaller - no drop shadow is displayed, only the content. In 2018, however, IE 8 can confidently be neglected.

Create text boxes with drop shadows in WordPress

Drop Shadow Boxes does not require any configuration and therefore has no options. The text boxes can be inserted directly in the WordPress editor with a shortcode or a Gutenberg block. Alternatively, a box can also be added as a widget in the sidebar.

The shortcode [dropshadowbox] is provided for the classic editor:

 [dropshadowbox]Box Inhalt[/dropshadowbox]

Numerous parameters can be used to define shading effects, the position of the drop shadow, round corners, the width and height of the text box and colors.

For easy configuration of the shortcode parameters, the plugin offers a generator that can be opened by clicking the Add Box button.

Add WordPress text box with shadow

In the shortcode generator, the options for the drop shadow box can be set without having to know or look up the individual parameters. The desired display of the text box can be checked by clicking on Refresh preview .

Drop Shadow Box Shortcode Generator

When the text box is inserted, the shortcode is generated with all selected arguments:

 [dropshadowbox align="none" effect="horizontal-curve-bottom" width="50%" height="" background_color="#ffffff" border_width="1" border_color="#dddddd" inside_shadow="false" outside_shadow="false" ]Inhalt meiner Textbox mit Schlagschatten[/dropshadowbox]

A disadvantage of the shortcode is that the generator is only available when inserting new boxes, but cannot be used to edit existing text boxes. A preview of existing boxes in the editor is also not possible.

Create text boxes as a block in the Gutenberg Editor

It is extremely positive to emphasize that the plugin author created his own block for the new Gutenberg Editor before the release of WordPress 5.0, with which the text boxes with drop shadows can be inserted directly into WordPress posts and pages.

In contrast to the old-fashioned shortcodes and the cumbersome handling of shortcode arguments, the plugin with the new blocks can fully exploit the strengths of the new Gutenberg Editor. For the Drop Shadow Box plugin, the usability with Gutenberg is definitely light years better than the old shortcodes in the classic editor.

This animated GIF from the plugin description on WordPress.org shows the block in action:

Gutenberg Block for Drop Shadow Box
Gutenberg Block for Drop Shadow Box, Image source: WordPress.org

The block for the drop shadow box is implemented as a nested block . The actual content of the text boxes can therefore consist of one or more child blocks. In addition to a simple text block, images, headings or any other block can be inserted into the box with the drop shadow.

Gutenberg block for text box with drop shadow

In principle, it is also possible in the classic editor to equip the boxes with other content than just text. However, a picture in the middle of a shortcode is not really handy.

Add text box with shadow as widget

As a last option apart from the editor, the text boxes with drop shadows can also be added as widgets in any widget area.

Drop Shadow Box Widget

Conclusion

Drop Shadow Boxes is a simple plugin that is easy to use and fulfills its intended purpose with flying colors. As one of the first plugins, it shows the possibilities of custom blocks in the new Gutenberg Editor and their advantages over shortcodes.