Textboxen mit Schlagschatten in WordPress erstellen

Mit dem Plugin Drop Shadow Boxes kannst du schnell und einfach Textboxen mit Schlagschatten in WordPress Beiträge und Seiten einfügen. Die Boxen mit Schattierung lassen sich wahlweise mit einem Shortcode-Generator, einem Gutenberg-Block oder als Widget erstellen.

Durch den Einsatz einer Box mit Schlagschatten kannst du wichtige Inhalte auf deiner Website hervorheben und auffälliger gestalten, sodass Besucher darauf besser aufmerksam werden.

Textboxen mit Schlagschatten in WordPress
Beispiel einer Box mit Schlagschatten

Drop Shadow Boxes

Drop Shadow Boxes ist kostenlos auf WordPress.org verfügbar. Regelmäßige Updates, über 10.000+ Installationen und eine 5-Sterne Bewertung sprechen für die hohe Qualität des Plugins.

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

By Steven Henty

(78)
Last Updated: 5 Monaten ago
6.000+ Active Installs
Compatible up to: 6.4.4

Die Schattierungen werden mit der CSS-Eigenschaft box-shadow hinzugefügt. In sehr alten Browsern – sprich Internet Explorer 8 und kleiner – wird deshalb kein Schlagschatten angezeigt, nur der Inhalt. Im Jahr 2018 kann IE 8 aber getrost vernachlässigt werden.

Textboxen mit Schlagschatten in WordPress erstellen

Drop Shadow Boxes benötigt keinerlei Konfiguration und hat deshalb auch keine Optionen. Die Textboxen können direkt im WordPress Editor mit Shortcode oder Gutenberg Block eingefügt werden. Alternativ kann eine Box auch als Widget in der Sidebar hinzugefügt werden.

Für den klassischen Editor wird der Shortcode [dropshadowbox] bereitgestellt:

[dropshadowbox]Box Inhalt[/dropshadowbox]

Mit zahlreichen Parametern können Schattierungseffekte, Position des Schlagschattens, runde Ecken, Breite und Höhe der Textbox sowie Farben festgelegt werden.

Zur einfachen Konfiguration der Shortcode-Parameter bietet das Plugin einen Generator an, welcher mit einem Klick auf den Button Box hinzufügen geöffnet werden kann.

WordPress Textbox mit Schatten hinzufügen

Im Shortcode-Generator können die Optionen für die Drop-Shadow-Box festgelegt werden, ohne dass man die einzelnen Paramater wissen oder nachschauen muss. Mit einem Klick auf Vorschau erneuern kann die gewünschte Anzeige der Textbox überprüft werden.

Drop Shadow Box Shortcode Generator

Mit dem Einfügen der Textbox wird der Shortcode mit allen gewählten Argumenten generiert:

[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]

Ein Nachteil des Shortcodes ist, dass der Generator nur beim Einfügen von neuen Boxen zur Verfügung steht, bestehende Textboxen damit aber nicht bearbeitet werden können. Auch eine Vorschau von existierenden Boxen im Editor ist nicht möglich.

Textboxen als Block im Gutenberg Editor erstellen

Überaus positiv hervorzuheben ist, dass der Plugin-Autor bereits jetzt – vor dem Release von WordPress 5.0 – einen eigenen Block für den neuen Gutenberg Editor erstellt hat, mit dem die Textboxen mit Schlagschatten in WordPress Beiträge und Seiten direkt eingefügt werden können.

Im Gegensatz zu den altbackenen Shortcodes und dem umständlichen Hantieren mit Shortcode-Argumenten kann das Plugin mit den neuen Blocks die Stärken des neuen Gutenberg Editor voll ausspielen. Für das Plugin Drop Shadow Box ist die Usability mit Gutenberg auf alle Fälle um Lichtjahre besser als die alten Shortcodes im klassischen Editor.

Dieses animierte GIF von der Plugin-Beschreibung auf WordPress.org zeigt den Block in Action:

Gutenberg Block für Drop Shadow Box
Gutenberg Block für Drop Shadow Box, Bildquelle: WordPress.org

Der Block für die Drop Shadow Box ist als Nested Block implementiert. Der eigentliche Inhalt der Textboxen kann daher aus einem oder mehreren Child-Blocks bestehen. Neben einem einfachen Textblock können so auch Bilder, Überschriften oder jeder andere Block in die Box mit dem Schlagschatten eingefügt werden.

Gutenberg Block für Textbox mit Schlagschatten

Prinzipiell ist es auch möglich, im klassischen Editor die Boxen mit anderen Inhalten als nur Text auszustatten. Wirklich handlich ist ein Bild inmitten eines Shortcodes aber nicht.

Textbox mit Schatten als Widget hinzufügen

Als letzte Möglichkeit abseits des Editors können die Textboxen mit Schlagschatten auch als Widget in einen beliebigen Widget-Bereich hinzufügt werden.

Drop Shadow Box Widget

Fazit

Drop Shadow Boxes ist ein simples Plugin, welches einfach zu bedienen ist und seinen angedachten Zweck mit Bravour erfüllt. Als eines der ersten Plugins zeigt es die Möglichkeiten von Custom Blocks im neuen Gutenberg Editor und deren Vorteile gegenüber Shortcodes.