Wie man einfach einen Box-Schatten in WordPress hinzufügt (4 Wege)

Ein Box-Schatten ist eine der einfachsten Möglichkeiten, Elementen auf Ihrer WordPress-Website Tiefe und Hervorhebung zu verleihen. Wir können diesen Effekt mit nur wenigen Zeilen CSS erstellen.

Dennoch, auch wenn es einfach ist, haben einige WPBeginner-Leser um Ratschläge gebeten, wie man es effektiv implementiert, besonders wenn sie sich mit dem Programmieren nicht wohlfühlen.

In diesem Artikel zeigen wir Ihnen Schritt für Schritt mehrere Möglichkeiten, wie Sie ganz einfach Box-Schatten in WordPress hinzufügen. 

Warum Box-Schatten in WordPress hinzufügen?

Ein Box-Schatten, manchmal auch als Schlagschatten bezeichnet, ist ein visueller Effekt, der den Eindruck erweckt, dass etwas auf dem Bildschirm einen Schatten wirft.

Wir neigen dazu, Objekten, die uns näher erscheinen, mehr Aufmerksamkeit zu schenken. Vor diesem Hintergrund fügen viele Website-Besitzer Schatteneffekte zu ihren wichtigsten Inhalten hinzu, um sie so aussehen zu lassen, als würden sie über der Seite schweben.

Wenn Sie beispielsweise einen großen Schatten zu einem Call-to-Action-Button hinzufügen, sieht dieser für den Betrachter physisch näher aus, was seine Aufmerksamkeit erregt.

Mit diesen Worten wollen wir uns ansehen, wie Sie Schatten für Ihre WordPress-Blogs oder Websites hinzufügen können. Verwenden Sie einfach die Schnelllinks unten, um direkt zu der Methode zu springen, die Sie verwenden möchten.

• Methode 1. Schatteneffekt mit Code hinzufügen (mehr Kontrolle)
• Methode 2. Schatten mit einem kostenlosen Plugin hinzufügen
• Methode 3. Schatten für Boxen mit einem Page Builder hinzufügen (Einfach)
• Methode 4. Schatten für Boxen mit CSS Hero hinzufügen (Fortgeschritten)
• Erfahren Sie mehr Wege, um Ihrem WordPress-Site einzigartige Designs hinzuzufügen

Methode 1. Box-Schatten mit Code hinzufügen (mehr Kontrolle)

Wenn Sie jedem WordPress-Block einen Schatteneffekt hinzufügen, kann Ihre Website unübersichtlich und verwirrend wirken. Vor diesem Hintergrund sollten Sie nur den wichtigsten Elementen der Seite einen Box-Schatten hinzufügen.

Sie sollten die Box-Schatten auch auf Ihrer gesamten Website konsistent halten. Der beste Weg, dies zu tun, ist die Definition des Stils in CSS mit WPCode.

WPCode ist das beste Code-Snippet-Plugin, das von über 1 Million WordPress-Websites genutzt wird. Es erleichtert das Hinzufügen von benutzerdefiniertem Code in WordPress, ohne die functions.php-Datei bearbeiten zu müssen.

Mit WPCode können selbst Anfänger den Code ihrer Website bearbeiten, ohne Fehler und Tippfehler zu riskieren, die zu vielen häufigen WordPress-Fehlern führen können.

Installieren und aktivieren Sie zuerst das kostenlose WPCode-Plugin. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Thema Installation eines WordPress-Plugins.

Nach der Aktivierung gehen Sie zu Code Snippets » Snippet hinzufügen.

Hier sehen Sie alle fertigen WPCode-Snippets, die Sie zu Ihrer Website hinzufügen können. Dazu gehört ein Snippet, mit dem Sie Kommentare vollständig deaktivieren, Dateitypen hochladen, die WordPress normalerweise nicht unterstützt, Anhangsseiten deaktivieren und vieles mehr.

Fahren Sie einfach mit der Maus über „Benutzerdefinierten Code hinzufügen (Neuer Ausschnitt)“ und klicken Sie dann auf „+ Benutzerdefinierten Ausschnitt hinzufügen“, wenn er erscheint.

Als Nächstes müssen Sie den Code-Typ aus der Liste der Optionen auswählen, die auf dem Bildschirm erscheinen.

Für dieses Tutorial müssen Sie benutzerdefiniertes CSS zu WordPress hinzufügen, wählen Sie also 'CSS-Snippet' als Code-Typ.

Nun werden Sie zur Seite Benutzerdefiniertes Snippet erstellen weitergeleitet.

Geben Sie zunächst einen Titel für den benutzerdefinierten Code-Schnipsel ein. Dies kann alles sein, was Ihnen hilft, den Schnipsel im WordPress-Dashboard zu identifizieren.

Kopieren und fügen Sie dann im Feld 'Code Preview' den folgenden Codeausschnitt ein:

.shadow-effect {
box-shadow: 5px 5px 0px 2px #a9a1a1;
}

Im obigen Ausschnitt müssen Sie möglicherweise die px-Werte ersetzen, je nachdem, welche Art von Schatten Sie erstellen möchten.

Um Ihnen zu helfen, hier ist, was die verschiedenen px-Werte bedeuten, von links nach rechts:

• Horizontaler Versatz. Wenn Sie einen positiven Wert festlegen, wird der Schatten nach links verschoben. Wenn Sie einen negativen Wert wie -5px eingeben, wird der Schatten nach rechts verschoben. Wenn Sie keinen horizontalen Versatz hinzufügen möchten, können Sie stattdessen 0px verwenden.
• Vertikaler Versatz. Wenn Sie einen positiven Wert verwenden, wird der Schatten nach unten verschoben. Wenn Sie einen negativen Wert eingeben, wird der Schatten nach oben verschoben. Wenn Sie den Schatten nicht vertikal versetzen möchten, geben Sie einfach 0px ein.
• Weichzeichnungsradius. Dies verwischt den Schatten, sodass er keine harten Kanten hat. Je höher der Wert, desto stärker der Weichzeichnungseffekt. Wenn Sie scharfe Kanten bevorzugen, geben Sie 0px ein.
• Ausdehnungsradius. Je höher der Wert, desto größer die Ausdehnung des Schattens. Dieser Wert ist optional, überspringen Sie ihn also, wenn Sie keine Ausdehnung anzeigen möchten.
• Farbe. Obwohl Grau die häufigste Farbe für Schatten ist, können Sie jede beliebige Farbe verwenden, indem Sie einen Hex-Code eingeben. Wenn Sie sich nicht sicher sind, welchen Code Sie verwenden sollen, können Sie verschiedene Farben mit einer Ressource wie HTML Color Codes erkunden.

Wenn Sie mit dem Snippet zufrieden sind, scrollen Sie zum Abschnitt „Einfügen“. WPCode kann Ihren Code an verschiedene Stellen einfügen, z. B. nach jedem Beitrag, nur im Frontend oder nur im Admin-Bereich.

Um den benutzerdefinierten CSS-Code auf Ihrer gesamten WordPress-Website zu verwenden, klicken Sie auf „Auto Insert“, falls es nicht bereits ausgewählt ist. Öffnen Sie dann das Dropdown-Menü „Location“ und wählen Sie „Site Wide Header“.

Danach sind Sie bereit, zum oberen Bildschirmrand zu scrollen und auf den Schalter 'Inaktiv' zu klicken, damit er zu 'Aktiv' wechselt.

Klicken Sie abschließend auf „Snippet speichern“, um das CSS-Snippet live zu schalten.

Jetzt können Sie die benutzerdefinierte CSS-Klasse zu jedem Block hinzufügen.

Wählen Sie im Block-Editor von WordPress einfach den Block aus, dem Sie einen Box-Schatten hinzufügen möchten. Klicken Sie dann im rechten Menü, um den Abschnitt „Erweitert“ zu erweitern.

Hier sehen Sie Felder, in denen Sie verschiedene Klassen hinzufügen können.

Geben Sie unter „Zusätzliche CSS-Klassen“ shadow-effect ein.

Wenn Sie bereit sind, den Box-Schatten zu veröffentlichen, klicken Sie einfach auf die Schaltfläche 'Veröffentlichen' oder 'Aktualisieren'.

Wenn Sie nun Ihre Website besuchen, sehen Sie den Box-Schatten live.

Neben dem Hinzufügen eines Schatteneffekts können Sie WPCode auch verwenden, um die Textfarbe zu ändern oder sogar den Stil von Blockquotes Ihres WordPress-Themes anzupassen mit CSS.

Methode 2. Eine Schattenbox mit einem kostenlosen Plugin hinzufügen

Wenn Sie sich mit dem Schreiben von Code nicht wohlfühlen, erstellen Sie Schatten möglicherweise lieber mit Drop Shadow Box. Dieses kostenlose Plugin ermöglicht es Ihnen, Box-Schatten zu jedem Block hinzuzufügen, indem Sie den integrierten WordPress-Seiten- und Beitrageneditor verwenden.

Zuerst müssen Sie das Plugin installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie bitte unseren Leitfaden zur Installation eines WordPress-Plugins.

Es gibt keine Einstellungen zu konfigurieren, sodass Sie dieses Plugin sofort verwenden können.

Um einen Schlagschatten hinzuzufügen, klicken Sie einfach auf das „+“-Symbol und beginnen Sie mit der Eingabe von „Drop Shadow Box“. Wenn der richtige Block erscheint, klicken Sie darauf, um ihn zur Seite oder zum Beitrag hinzuzufügen.

Dies fügt den Schatten als leeren Kasten hinzu, sodass der nächste Schritt darin besteht, Inhalt hinzuzufügen.

Klicken Sie dazu auf das '+' im Drop Shadow Box-Block.

Fügen Sie dann einfach den gewünschten Block hinzu und konfigurieren Sie ihn wie gewohnt.

Zum Beispiel haben wir im folgenden Bild einen Bildblock hinzugefügt und ein Bild aus der WordPress-Mediathek ausgewählt.

Wenn Sie fertig sind, klicken Sie, um den Drop Shadow Box-Block auszuwählen. Im rechten Menü sehen Sie alle Einstellungen, die Sie zum Stylen dieses Blocks verwenden können.

WordPress legt die Breite des Schattens automatisch fest, aber Sie können dies ändern, indem Sie das Dropdown-Menü 'Breite' öffnen und dann entweder 'Pixel' oder '%' auswählen.

Sie können es dann mit den erscheinenden Einstellungen in der Größe ändern.

Das Drop Box Shadow Plugin bietet einige verschiedene Effekte wie abgerundete Kanten und einen auffälligen 'Perspektive'-Effekt.

Um die verschiedenen Effekte in der Vorschau anzuzeigen, öffnen Sie einfach das Dropdown-Menü „Effekt“ und wählen Sie aus der Liste aus. Die Vorschau wird automatisch aktualisiert, sodass Sie verschiedene Stile ausprobieren können, um zu sehen, was Ihnen am besten gefällt.

Sie können auch ändern, ob das Plugin den Schatten innerhalb der Box, außerhalb der Box oder beides anzeigt, indem Sie die Schalter 'Inside Shadow' und 'Outside Shadow' verwenden.

Danach können Sie die Farbe der Box und des Rahmens mit den Einstellungen unter der Überschrift „Farben“ ändern.

Beachten Sie einfach, dass sich „Hintergrund“ auf die Innenseite der Schattenbox bezieht, während „Rahmen“ außerhalb des Blocks erscheint.

Wenn Sie eine weichere, abgerundete Schattenbox erstellen möchten, können Sie den Schalter 'Rounded corners' aktivieren. Schließlich können Sie die Ausrichtung und den Abstand anpassen, ähnlich wie Sie andere Blöcke in WordPress anpassen.

Um weitere Box-Schatten zu erstellen, folgen Sie einfach demselben oben beschriebenen Prozess.

Wenn Sie mit dem Aussehen der Seite zufrieden sind, klicken Sie einfach auf „Aktualisieren“ oder „Veröffentlichen“, um alle Ihre neuen Box-Schatten live zu schalten.

Methode 3. Fügen Sie einen Schatteneffekt mit einem Page Builder hinzu (einfach)

Wenn Sie Schatten zu Landing Pages, benutzerdefinierten Startseiten oder beliebigen Teilen Ihres WordPress-Themes hinzufügen möchten, empfehlen wir die Verwendung eines Page-Builder-Plugins.

SeedProd ist der beste Drag-and-Drop-Seitenersteller für WordPress. Er ermöglicht es Ihnen, benutzerdefinierte Landingpages zu gestalten und sogar ein benutzerdefiniertes WordPress-Theme zu erstellen, ohne eine einzige Zeile Code schreiben zu müssen.

Es ermöglicht Ihnen auch, mit seinem erweiterten Drag-and-Drop-Editor Schatten auf jeden Block anzuwenden.

Zuerst müssen Sie das SeedProd-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung, wie Sie ein WordPress-Plugin installieren.

Nach der Aktivierung gehen Sie in Ihrem WordPress-Dashboard zu SeedProd » Landing Pages.

SeedProd bietet mehr als 300 professionell gestaltete Vorlagen, die in Kategorien gruppiert sind. Oben sehen Sie Kategorien, mit denen Sie schöne "Coming Soon"-Seiten erstellen, den Wartungsmodus aktivieren, eine benutzerdefinierte Anmeldeseite für WordPress erstellen und vieles mehr.

Alle Vorlagen von SeedProd sind einfach anzupassen, sodass Sie jedes gewünschte Design verwenden können.

Wenn Sie eine Vorlage gefunden haben, die Sie verwenden möchten, bewegen Sie einfach die Maus darüber und klicken Sie auf das Häkchen-Symbol.

Sie können jetzt einen Namen für Ihre Landingpage in das Feld „Seitenname“ eingeben. SeedProd erstellt automatisch eine „Seiten-URL“ anhand des Seitennamens.

Es ist ratsam, relevante Schlüsselwörter in Ihre URL aufzunehmen, wo immer möglich, da dies Suchmaschinen hilft zu verstehen, worum es auf der Seite geht. Dies wird oft Ihre WordPress SEO verbessern.

Um die automatisch generierte URL der Seite zu ändern, geben Sie einfach in das Feld 'Seiten-URL' ein.

Wenn Sie mit den eingegebenen Informationen zufrieden sind, klicken Sie auf „Speichern und Seite bearbeiten“. Dadurch wird die SeedProd-Seiten-Builder-Oberfläche geladen.

Dieser einfache Drag-and-Drop-Builder zeigt rechts eine Live-Vorschau Ihres Seitendesigns. Links befindet sich ein Menü, das alle verschiedenen Blöcke und Abschnitte anzeigt, die Sie der Seite hinzufügen können.

Wenn Sie einen Block gefunden haben, den Sie hinzufügen möchten, ziehen Sie ihn einfach per Drag & Drop auf Ihre Vorlage.

Um einen Block anzupassen, klicken Sie auf den Block im SeedProd-Editor, um ihn auszuwählen. Das linke Menü zeigt nun alle Einstellungen an, mit denen Sie den Block anpassen können.

Wenn Sie beispielsweise auf einen Überschriftenblock klicken, können Sie Ihren eigenen Text eingeben oder die Textfarbe und Schriftgröße ändern.

Beim Erstellen der Seite können Sie Blöcke per Drag & Drop in Ihrem Layout verschieben. Detailliertere Anweisungen finden Sie in unserem Leitfaden zum Erstellen einer Landingpage mit WordPress unter Erstellen einer Landingpage mit WordPress.

Um einen Box-Schatten zu erstellen, klicken Sie, um einen beliebigen Block im SeedProd-Seiten-Editor auszuwählen. Die Einstellungen im Menü auf der linken Seite können je nach Block variieren, aber Sie müssen normalerweise auf eine Registerkarte „Erweitert“ klicken.

Suchen Sie hier im Abschnitt 'Stile' nach einem Dropdown-Menü 'Schatten'. Öffnen Sie einfach dieses Dropdown-Menü und wählen Sie einen Schattenstil wie Hairline, Medium oder 2X Large.

Die Vorschau wird automatisch aktualisiert, sodass Sie verschiedene Stile ausprobieren können, um zu sehen, was auf Ihrem Seitendesign am besten aussieht.

Wenn Sie keine der vorgefertigten Stile verwenden möchten, klicken Sie auf 'Benutzerdefiniert'.

Dies fügt einige neue Einstellungen hinzu, mit denen Sie die Farbe, den Weichzeichner, die Streuung und die Position des benutzerdefinierten Schattens ändern können.

Wenn das erledigt ist, können Sie mit der Arbeit an der Seite fortfahren, indem Sie weitere Blöcke und Box-Schatten hinzufügen.

Wenn Sie mit dem Aussehen der Seite zufrieden sind, klicken Sie auf die Schaltfläche „Speichern“ und dann auf „Veröffentlichen“, um sie live zu schalten.

Methode 4. Box-Schatten mit CSS Hero hinzufügen (Fortgeschritten)

Wenn Sie nicht gerne mit Code arbeiten, aber dennoch erweiterte Schatteneffekte erstellen möchten, können Sie CSS Hero ausprobieren. Dieses Premium-Plugin ermöglicht es Ihnen, jeden Teil Ihres WordPress-Themes fein abzustimmen, ohne eine einzige Zeile Code schreiben zu müssen.

CSS Hero ermöglicht es Ihnen, für jeden Block einen einzigartigen Schatten zu erstellen, daher ist es auch eine großartige Wahl, wenn Sie viele verschiedene Schatteneffekte erstellen möchten. Mehr über das Plugin erfahren Sie in unserem CSS Hero-Test.

Zuerst müssen Sie das CSS Hero-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins.

Nach der Aktivierung sehen Sie oben auf dem Bildschirm eine Schaltfläche „Zum Produkt aktivieren“. Klicken Sie auf diese Schaltfläche.

Dies führt Sie zur CSS Hero-Website, wo Sie sich in Ihr Konto einloggen und einen Lizenzschlüssel erhalten können. Befolgen Sie einfach die Anweisungen auf dem Bildschirm, und Sie werden mit wenigen Klicks zu Ihrer Website zurückgeleitet.

Klicken Sie als Nächstes auf den Text „CSS Hero“ in der WordPress-Admin-Symbolleiste.

Dies öffnet den CSS Hero-Editor.

Standardmäßig verfügt der CSS Hero-Editor über eine WYSIWYG-Vorschau Ihrer Website und ein linkes Bedienfeld, in dem Sie jedes Element Ihres Webdesigns bearbeiten können.

Wenn Sie feststellen, dass Sie sich nicht auf der Seite befinden, auf der Sie den Box-Schatten hinzufügen möchten, können Sie vom Modus 'Bearbeiten' zum Modus 'Navigieren' wechseln.

Dies ermöglicht Ihnen die Interaktion mit Navigationsmenüs, Links und anderen Inhalten wie gewohnt.

Sie können nun zu der Seite oder dem Beitrag navigieren, auf der/dem Sie den Schatten hinzufügen möchten.

Sobald Sie diese Seite erreichen, wechseln Sie wieder in den 'Bearbeiten'-Modus.

Klicken Sie anschließend auf den Absatz, das Bild, den Button oder einen anderen Inhalt, dem Sie einen Box-Schatten hinzufügen möchten.

Klicken Sie im linken Bereich auf 'Extra'.

Sie können jetzt auf „Schatten erstellen“ klicken.

Dies zeigt alle Einstellungen an, die Sie zum Erstellen eines Box-Schatten verwenden können.

Zunächst können Sie mit den Einstellungen „Schattenposition“ ändern, ob der Schatten innerhalb oder außerhalb des Blocks erscheint.

Hier haben wir „Außen“ ausgewählt, damit der Schatten außerhalb des Bildes selbst erscheint.

Nachdem Sie diese Entscheidung getroffen haben, können Sie die Ausrichtung des Schattens mit dem kleinen Punkt im Feld „Ausrichtung“ feinabstimmen.

Ziehen Sie den Punkt einfach an eine neue Position, um ihn in der Live-Vorschau zu bewegen.

Wenn Sie mit der Position des Schattens zufrieden sind, können Sie dessen Farbe, Unschärfe und Ausdehnung ändern.

CSS Hero zeigt diese Änderungen sofort an, sodass Sie verschiedene Einstellungen ausprobieren können, um zu sehen, was am besten aussieht.

Um anderen Blöcken einen Box-Schatten hinzuzufügen, folgen Sie einfach demselben Prozess wie oben beschrieben.

Wenn Sie mit dem Aussehen der Seite zufrieden sind, klicken Sie auf 'Speichern', um die Änderungen live zu schalten.

Erfahren Sie mehr Wege, um Ihrem WordPress-Site einzigartige Designs hinzuzufügen

Die oben genannten Methoden bieten eine großartige Grundlage für das Hinzufügen von Box-Schatten in WordPress. Aber was ist, wenn Sie noch einzigartigere und kreativere Effekte erzielen möchten?

In den folgenden Artikeln finden Sie hilfreiche Anleitungen zum Hinzufügen verschiedener Designelemente zu Ihrer Website:

• So fügen Sie Hover-Effekte für Bilder in WordPress hinzu – Dieser Leitfaden untersucht verschiedene Hover-Effekte, die Sie für Ihre Bilder erstellen können, um Ihre Website für Besucher ansprechender und interaktiver zu gestalten.
• So fügen Sie ganz einfach CSS-Animationen in WordPress hinzu – Animationen können zusammen mit Box-Schatten eine dynamische und visuell ansprechende Benutzererfahrung schaffen, die Aufmerksamkeit Ihrer Besucher erregen und sie fesseln.
• So fügen Sie jedem WordPress-Theme einen Parallax-Effekt hinzu – Durch die Einbindung von Parallax-Effekten können Sie die Tiefenillusion verbessern und eine immersivere Website erstellen.
• So erstellen Sie einen benutzerdefinierten Formtrennzeichen in WordPress – Dieser Artikel zeigt Ihnen, wie Sie einzigartige Formen erstellen, um Abschnitte Ihres Inhalts visuell zu trennen.
• Wie man einfach einen responsiven WordPress-Slider erstellt – Diese Anleitung zeigt Ihnen, wie Sie Slider erstellen, um Ihre Inhalte auf attraktive und platzsparende Weise zu präsentieren.
• So fügen Sie einen animierten Hintergrund in WordPress hinzu – Das Hinzufügen von animierten Hintergründen kann ein einzigartiges und visuell interessantes Benutzererlebnis schaffen.

Wir hoffen, dieses Tutorial hat Ihnen geholfen zu lernen, wie Sie einen Box-Schatten in WordPress hinzufügen. Möglicherweise möchten Sie auch lernen, wie Sie ungenutztes CSS in WordPress entfernen und wie Sie die CSS-Bereitstellung in WordPress optimieren.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.