So fügen Sie einen Box-Schatten in WordPress hinzu: 4 einfache Wege 

Wenn eine Seite flach wirkt, fehlen normalerweise die Schatten. Das Hinzufügen eines Box-Schattens zu Ihren Feature-Karten oder CTA-Schaltflächen ist eine der schnellsten Designkorrekturen, die Sie in WordPress vornehmen können.

In diesem Leitfaden teile ich 4 einfache Möglichkeiten, einen Box-Schatten in WordPress hinzuzufügen, damit Sie die wichtigsten Inhalte hervorheben können.

Warum sollten Sie einen Box-Schatten in WordPress hinzufügen?

Ein Box-Schatten erzeugt eine subtile Tiefenillusion, indem er den Schatten nachahmt, den ein Objekt werfen würde, wodurch es leicht vom Hintergrund abgehoben erscheint. Dieser CSS-Schatteneffekt kann die Wahrnehmung Ihrer Inhalte durch die Besucher dramatisch verändern.

Unser Gehirn wird von Natur aus von Kontrast und Trennung angezogen, Prinzipien, die in der Gestaltpsychologie verwurzelt sind. Das Hinzufügen eines Box-Schattens schafft eine visuelle Trennung zwischen Elementen und lenkt die Augen Ihrer Besucher sofort auf die wichtigsten Bereiche Ihrer Website.

Das bedeutet, dass Box-Schatten tatsächlich dazu beitragen können, dass Ihre Website besser funktioniert:

• Konversionen steigern: Heben Sie Aufrufe zum Handeln wie Schaltflächen oder Formulare hervor, um Klicks und Konversionen zu fördern.
• Bilder hervorheben: Lassen Sie Bilder vom Hintergrund abheben, um Aufmerksamkeit zu erregen und ihre Wirkung zu verstärken.
• Benutzererfahrung verbessern: Schaffen Sie ein optisch ansprechenderes und organisierteres Layout, wodurch Ihre Website einfacher und angenehmer zu navigieren ist.

Unten finden Sie 4 einfache Möglichkeiten, diese Effekte zu Ihrer WordPress-Website hinzuzufügen.

Methode 1: Box-Schatten in WordPress mit SeedProd hinzufügen (am einfachsten)

Jetzt, da Sie die Wirkung von Box-Schatten verstehen, erstellen wir einen. Diese Methode ist perfekt für visuelle Lerner und alle, die eine codefreie Lösung wünschen. Ich werde SeedProd verwenden, um mit nur wenigen Klicks einen stilvollen Box-Schatten hinzuzufügen.

SeedProd ist der beste WordPress-Website-Builder mit über 1 Million Nutzern. Mit seinem Drag-and-Drop-Visual-Builder können Sie hochkonvertierende Landingpages und Websites erstellen und jeden Zentimeter Ihres Designs anpassen, ohne Code schreiben zu müssen.

Sie können auch Schattierungen zu jedem Designelement hinzufügen, indem Sie darauf zeigen und klicken.

Installieren und aktivieren Sie zunächst SeedProd auf Ihrer WordPress-Website. Weitere Details finden Sie in unserer Anleitung zur Installation von SeedProd.

Hinweis: Die kostenlose Version von SeedProd bietet alles, was Sie benötigen, um Schatten in WordPress hinzuzufügen. Ich werde jedoch die Premium-Version für diese Anleitung verwenden, da sie erweiterte Vorlagen enthält.

Nachdem Sie das Plugin aktiviert haben, navigieren Sie in Ihrem WordPress-Dashboard zu SeedProd » Landing Pages . Klicken Sie dann auf die Schaltfläche Neue Landing Page hinzufügen .

Wählen Sie hier ein vorgefertigtes, vollständig anpassbares Design für Ihre Seite. Die Vorlagen von SeedProd erleichtern das Finden eines Looks, der zu Ihrer Marke passt, und Sie können jedes Detail anpassen, um es zu Ihrem eigenen zu machen.

Klicken Sie auf die Filter oben, um zu suchen, fahren Sie dann mit der Maus über eine Vorlage und klicken Sie auf das Häkchensymbol, um sie auszuwählen.

Geben Sie nun einen Namen für Ihre Seite ein, und SeedProd legt automatisch die URL fest. Es ist ratsam, Schlüsselwörter, die für die Seite relevant sind, in die URL aufzunehmen, da dies Ihre WordPress-Suchmaschinenoptimierung verbessern kann.

Wenn Sie die generierte URL nicht beibehalten möchten, klicken Sie in das Feld „Seiten-URL“ und geben Sie Ihre eigene ein.

Sie können nun auf die Schaltfläche Speichern und mit der Bearbeitung der Seite beginnen klicken, um Ihr Design im Seiten-Builder-Interface zu starten.

SeedProds Drag-and-Drop-Builder zeigt eine Live-Vorschau Ihres Designs auf der rechten Seite. Auf der linken Seite befindet sich ein Panel mit Blöcken, die Sie auf die Seite ziehen können.

Wenn Sie einen Block finden, den Sie hinzufügen möchten, klicken, ziehen und legen Sie ihn auf die Live-Vorschau. Anschließend können Sie den Block auswählen, um sein Aussehen und seine Einstellungen anzupassen.

Wenn Sie beispielsweise auf den Block „Überschrift“ klicken, können Sie Ihren eigenen Text eingeben und die Schriftgröße, Farbe und Ausrichtung ändern.

Sie können Blöcke auch durch Ziehen und Ablegen auf der Seite verschieben. Detaillierte Anweisungen finden Sie in unserer Anleitung zur Erstellung einer Landing Page in WordPress.

Wenn Sie einem Block einen Schatten hinzufügen möchten, müssen Sie im Tab „Erweitert“ der Einstellungen dieses Blocks auf „Erweitert“ klicken.

In diesem Beispiel möchte ich jedem Feature-Box einen Schatten hinzufügen. Daher klicke ich auf die Spalteneinstellungen und wähle den Tab „Erweitert“.

Klicken Sie anschließend auf das Dropdown-Menü „Schatten“ und wählen Sie eine Option wie „Haarlinie“, „Klein“, „Mittel“, „Groß“, „X-Groß“ usw.

Nachdem Sie einen Schatten ausgewählt haben, wird die Vorschau automatisch aktualisiert. Sie können mit verschiedenen Stilen experimentieren, bis Sie einen finden, der funktioniert.

Wenn die vorgefertigten Stile nicht für Sie funktionieren, wählen Sie die Option „Benutzerdefiniert“. Diese Option öffnet neue Anpassungen, um Unschärfe, Streuung, Farbe, Schattenposition und mehr zu ändern.

Am Ende habe ich die Option „2X Groß“ gewählt und den Vorgang für jeden Block im Raster wiederholt.

Nachdem Sie den Schatten hinzugefügt haben, können Sie mit der Anpassung Ihrer Seite fortfahren, indem Sie weitere Blöcke und Schatten hinzufügen.

Wenn Sie mit dem Aussehen zufrieden sind, klicken Sie oben rechts auf Speichern und wählen Sie Veröffentlichen, um Ihre Seite live zu schalten.

Hier ist ein Beispiel dafür, wie meine endgültige Seite aussieht, komplett mit den neuen Schatteneffekten:

Um einem WordPress-Button einen Schatteneffekt hinzuzufügen, wählen Sie Ihren Button-Block in SeedProd aus, öffnen Sie den Tab „Erweitert“ und wenden Sie die gleichen Schatteneinstellungen an, die oben gezeigt werden.

Methode 2: Box-Schatten in WordPress mit CSS-Code hinzufügen (mehr Kontrolle)

Das Hinzufügen eines Schatteneffekts zu jedem Element auf Ihrer Website kann dazu führen, dass sie überladen wirkt. Verwenden Sie sie stattdessen am besten, um wichtige Inhalte hervorzuheben und Ihr Design konsistent zu halten.

Der einfachste Weg, dies zu tun, ist die Einstellung Ihres Schattenstils mit CSS, und ich werde WPCode verwenden, um es super einfach zu machen.

WPCode ist ein beliebtes Code-Snippet-Plugin, mit dem Sie benutzerdefinierten Code zu Ihrer WordPress-Site hinzufügen können, ohne Ihre Theme-Dateien direkt zu bearbeiten. Dies hält die Dinge organisiert und hilft Ihnen, versehentliche Fehler zu vermeiden.

Das erste, was Sie tun müssen, ist, das kostenlose WPCode-Plugin zu installieren und zu aktivieren. Eine vollständige Anleitung finden Sie in diesem Leitfaden zur Installation eines WordPress-Plugins.

Nach der Aktivierung des Plugins gehen Sie in Ihrem WordPress-Admin zu Code-Snippets » +Snippets hinzufügen .

Auf dieser Seite sehen Sie vorgefertigte benutzerdefinierte Code-Snippets, die Sie Ihrer Website hinzufügen können. Um Ihr eigenes hinzuzufügen, bewegen Sie den Mauszeiger über die Option „Eigene Code-Snippets hinzufügen“ und klicken Sie auf Benutzerdefiniertes Snippet hinzufügen.

Nachdem die Seite geladen ist, geben Sie einen Namen für Ihr Snippet ein, damit Sie es identifizieren können. Wählen Sie dann im Dropdown-Menü „Code-Typ“ die Option „CSS-Snippet“ aus.

Fügen Sie nun den folgenden Code-Snippet in den Code-Editor ein:

.custom-box-shadow {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

Sie können die px-Werte im Snippet ersetzen, um den gewünschten Schatten anzupassen.

Lassen Sie uns diese Zahlen aufschlüsseln, damit Sie genau wissen, was passiert:

• .custom-box-shadow: Dies ist der Name der CSS-Klasse, die wir erstellen. Wir werden diese verwenden, um den Schatteneffekt auf bestimmte Elemente anzuwenden.
• Box-shadow: Dies teilt dem Browser mit, dass wir gleich eine CSS-Eigenschaft für Schatteneffekte definieren werden.
• 5px 5px: Diese ersten beiden Werte sind der horizontale und vertikale Versatz des Schattens. Der erste Wert verschiebt ihn nach rechts, der zweite nach unten. Spielen Sie mit diesen Werten, um die Position des Schattens anzupassen.
• 10px: Dies ist der Weichzeichnungsradius. Höhere Zahlen erzeugen einen weicheren, verschwommeneren Schatten. Niedrigere Zahlen halten ihn scharf.
• 0px (Streuradius): Dies ist der Streuradius. Ein positiver Wert erweitert den Schatten nach außen; 0px hält ihn eng. Fügen Sie ihn zwischen dem Weichzeichnungs-Wert und der rgba-Farbe ein, wenn Sie ihn verwenden möchten.
• rgba(0, 0, 0, 0.2): Dies legt die Farbe des Schattens fest. Wir verwenden hier ein halbtransparentes Schwarz. Die letzte Zahl (Alpha) steuert die Transparenz: 0 ist vollständig transparent und 1 ist vollständig opak.

Sie können auch „inset“ als ersten Wert hinzufügen, um einen Schatten innerhalb des Elements anstelle von außerhalb zu erzeugen.

Wenn Ihr Schatteneffekt nicht angezeigt wird, überprüfen Sie diese drei Dinge:

• Der CSS-Selektor zielt möglicherweise nicht auf das richtige Element. Verwenden Sie die Browser-Entwicklertools, um zu bestätigen, auf welches Element die Klasse angewendet wird.
• Eine andere Stylesheet überschreibt möglicherweise Ihren Schatten. Fügen Sie !important als letzte Möglichkeit hinzu, wenn Sie den Konflikt nicht lösen können.
• Ein übergeordneter Container mit overflow:hidden schneidet den Schatten ab. Entfernen Sie diese Eigenschaft oder passen Sie den Container an.

Wenn Sie mit dem Snippet zufrieden sind, scrollen Sie nach unten zum Abschnitt „Einfügen“, um festzulegen, wo WPCode es hinzufügen soll. Um es auf Ihrer gesamten Website zu verwenden, wählen Sie die Option „Automatisch einfügen“ und legen Sie den Speicherort als Header der gesamten Website.

Scrollen Sie nun zurück zum Seitenanfang und schalten Sie den Schalter „Inaktiv“ auf die Position „Aktiv“. Klicken Sie dann auf die Schaltfläche Snippet speichern.

Der nächste Schritt ist das Hinzufügen der benutzerdefinierten CSS-Klasse zu jedem WordPress-Block. Wählen Sie dazu einen beliebigen Block im WordPress-Blockeditor aus und klicken Sie im linken Menü auf „Erweitert“.

Geben Sie im Feld „Zusätzliche CSS-Klassen“ den Text „custom-box-shadow“ ein.

Wenn Sie mit dem Beitrag zufrieden sind, können Sie auf „Aktualisieren“ oder „Veröffentlichen“ klicken. Sie können den Beitrag dann besuchen und Ihren Box-Schatten in Aktion sehen.

Methode 3: Box-Schatten mit einem kostenlosen Plugin hinzufügen (schnelle Alternative)

Wenn Sie sich mit Code-Snippets nicht wohlfühlen, erstellen Sie Schatten möglicherweise lieber mit Drop Shadow Boxes. Dieses kostenlose WordPress-Plugin ermöglicht es Ihnen, Box-Schatten zu jedem Block mit dem integrierten WordPress-Blockeditor hinzuzufügen.

Installieren und aktivieren Sie zunächst das Plugin auf Ihrer Website. Da es keine konfigurierbaren Einstellungen gibt, können Sie das Plugin sofort verwenden.

Erstellen oder bearbeiten Sie als Nächstes einen WordPress-Beitrag oder eine Seite. Klicken Sie im Editor auf das Pluszeichen (+), um einen neuen Block hinzuzufügen, und suchen Sie nach „Drop Shadow“.

Wenn er erscheint, klicken Sie darauf, um ihn zu Ihrer Seite hinzuzufügen. Sie sehen einen Schatten auf einem leeren Block, also fügen wir etwas Inhalt hinzu.

Klicken Sie im Drop-Shadow-Block auf das Pluszeichen, fügen Sie einen Block hinzu und richten Sie ihn wie gewohnt ein. Ich habe zum Beispiel einen Bildblock hinzugefügt und ein Bild aus der WordPress-Mediathek ausgewählt.

Klicken Sie als Nächstes auf den Block, um die Box-Schatten-Einstellungen in der linken Seitenleiste anzuzeigen.

Die Schattenbreite wird automatisch von WordPress festgelegt, aber Sie können sie ändern, indem Sie im Dropdown-Feld „Breite“ „Pixel“ oder „%“ auswählen. Dann können Sie den Schieberegler verwenden, um sie anzupassen.

Sie werden auch andere Effekte wie gekrümmte Kanten und einen „Perspektiven“-Effekt bemerken. Um sie in der Vorschau anzuzeigen, öffnen Sie das Dropdown-Menü „Effekt“ und wählen Sie einen aus der Liste aus.

Andere Optionen, mit denen Sie experimentieren können, sind Innen- und Außenschatten, Rahmenfarben, Rahmenpixel und abgerundete Ecken.

Wenn Sie mit dem Box-Schatten zufrieden sind, wiederholen Sie diese Schritte für andere Blöcke oder klicken Sie auf „Aktualisieren“ oder „Veröffentlichen“, um Ihre Änderungen live zu schalten.

So sehen meine Box-Schatten mit dieser Methode aus:

Methode 4: Box-Schatten mit CSS Hero hinzufügen (fortgeschritten)

Wenn Sie sich nicht mit Code auskennen, aber dennoch erweiterte Box-Schatten erstellen möchten, dann ist CSS Hero eine großartige Option.

Dieses Premium-Plugin ermöglicht es Ihnen, jeden Teil Ihres WordPress-Themes zu optimieren, ohne eine einzige Zeile Code schreiben zu müssen. Sie können auch einzigartige Schatten für jeden Block erstellen, was es ideal für das Experimentieren mit verschiedenen Schatteneffekten auf Ihrer gesamten Website macht.

Installieren und aktivieren Sie zunächst das CSS Hero-Plugin. Befolgen Sie dann die Anweisungen zur Produktaktivierung, um Ihr CSS Hero-Konto mit Ihrer WordPress-Website zu verknüpfen.

Klicken Sie nun in der Admin-Symbolleiste auf die Option „Mit CSS Hero anpassen“, um den CSS Hero-Editor zu öffnen.

Standardmäßig zeigt der CSS Hero-Editor eine Live-Vorschau Ihrer Website und ein Panel, in dem Sie jedes Element Ihres Webdesigns bearbeiten können.

Wenn Sie sich nicht auf der Seite befinden, auf der Sie den Box-Schatten hinzufügen möchten, verwenden Sie die Symbole am oberen Bildschirmrand, um von „Auswählen“ in den Modus „Navigieren“ zu wechseln.

Nun können Sie zu der Seite navigieren, die Sie möchten, und zurück in den Auswahlmodus wechseln.

Klicken Sie als Nächstes auf ein beliebiges Element in der Vorschau, dem Sie einen Box-Schatten hinzufügen möchten, z. B. ein Bild, eine Schaltfläche, einen Absatz oder andere Inhalte.

Wenn Sie dies getan haben, klicken Sie im linken Bereich auf „Extra“.

Standardmäßig zeigt die Box-Schatten-Option „Keine“ an. Klicken Sie daher auf die Schaltfläche Schatten erstellen .

Ändern Sie zunächst, wo der Schatten erscheint. In den Einstellungen für die Schattenposition können Sie „Innen“ oder „Außen“ wählen.

Arbeiten Sie als Nächstes am Winkel des Schattens im Bereich Ausrichtung. Ziehen Sie einfach den Kreis, bis der Winkel des Box-Schattens an der gewünschten Position ist.

Ändern Sie schließlich die Schattenfarbe mit dem Pipettenwerkzeug und verwenden Sie die Schieberegler, um den Schattenweichzeichner und die Schattenstreuung zu steuern.

Verwenden Sie den gleichen Ansatz, um anderen Bereichen Ihrer Website einen Box-Schatten hinzuzufügen. Wenn Sie dann mit dem Aussehen zufrieden sind, klicken Sie auf die Schaltfläche Speichern & Veröffentlichen .

Besuchen Sie nun Ihre Änderungen, um zu sehen, wie sie live auf Ihrer Website aussehen.

Häufig gestellte Fragen

Was ist ein Box-Schatten in WordPress?

Ein Box-Schatten in WordPress ist ein CSS-Schattenscheffekt, der auf ein Element – wie ein Bild, eine Schaltfläche oder einen Inhaltsblock – angewendet wird, um ihm Tiefe zu verleihen. Er lässt das Element leicht vom Seitenhintergrund abgehoben erscheinen. Sie können einen mit einem visuellen Seitenersteller, einem CSS-Snippet oder einem speziellen Plugin hinzufügen, ohne Theme-Dateien bearbeiten zu müssen.

Wie füge ich in WordPress einen Box-Schatten ohne Plugin hinzu?

Um in WordPress einen Box-Schatten ohne Plugin hinzuzufügen, schreiben Sie ein benutzerdefiniertes CSS-Snippet. Fügen Sie eine Box-Shadow-Regel über Darstellung > Anpassen > Zusätzliches CSS hinzu oder verwenden Sie WPCode, um das Snippet zu verwalten. Wenden Sie dann den CSS-Klassennamen über die erweiterten Einstellungen im Block-Editor auf jeden Block an.

Was ist der Unterschied zwischen einem Box-Schatten und einem Drop-Schatten?

Ein Box-Schatten folgt der rechteckigen Begrenzungsbox eines Elements und erzeugt immer einen rechteckigen Schatten, unabhängig von der Form des Elements. Ein Drop-Schatten verwendet die CSS-Filter-Eigenschaft und folgt der tatsächlichen Kontur des Elements, einschließlich transparenter Bereiche. Für die meisten Anwendungsfälle in WordPress – Karten, Schaltflächen, Bilder – funktioniert ein Box-Schatten gut. Verwenden Sie einen Drop-Schatten, wenn der Schatten einer unregelmäßigen oder ausgeschnittenen Form folgen muss.

Kann ich Bildern in WordPress einen Box-Schatten hinzufügen?

Ja. Wählen Sie mit SeedProd einen Bildblock aus, öffnen Sie den Tab "Erweitert" und wählen Sie eine Voreinstellung aus dem Dropdown-Menü "Schatten". Wenden Sie mit CSS eine box-shadow-Regel an, die auf das img-Element oder eine benutzerdefinierte CSS-Klasse abzielt. Das Plugin Drop Shadow Boxes umschließt Bildblöcke auch mit einem Schatten, indem es den nativen WordPress-Editor verwendet.

Weitere Möglichkeiten, Ihre WordPress-Website anzupassen

Die Methoden, die ich in diesem Leitfaden behandelt habe, sind ideal, um Box-Schatten-Effekte in WordPress hinzuzufügen. Wenn Sie jedoch kreativere Effekte hinzufügen möchten, finden Sie die folgenden Anleitungen hilfreich:

• Ränder in WordPress ändern — Passen Sie den Abstand um Ihre Inhalte an, um ein poliertes, professionelles Aussehen zu erzielen.
• Text auf ein Bild in WordPress einfügen — Erstellen Sie auffällige Grafiken und Handlungsaufforderungen direkt auf Ihren Bildern.
• Animierte Particle.js-Hintergründe in WordPress erstellen — Verleihen Sie Ihrem Design einen dynamischen Touch mit auffälligen animierten Hintergründen.
• Eine Seite in WordPress im Vollbildmodus gestalten — Brechen Sie mit Seitenleisten und erstellen Sie immersive Vollbild-Seitenlayouts.
• Hintergrundbild in WordPress abdunkeln — Machen Sie Ihren Text besser lesbar und erzeugen Sie Tiefenwirkung mit einem abgedunkelten Hintergrundbild.
• Textanimationen in WordPress erstellen — Fesseln Sie die Aufmerksamkeit Ihrer Besucher mit auffälligen animierten Texteffekten.
• Fancy Section Dividers für WordPress erstellen — Trennen Sie Ihre Inhalte visuell mit stilvollen Form-Trennern.

Ich hoffe, dieser Leitfaden hat Ihnen geholfen zu lernen, wie Sie einen Box-Schatten in WordPress hinzufügen. Jetzt können Sie das Design Ihrer Website sofort verbessern und Ihre wichtigsten Inhalte hervorheben.

Sind Sie bereit, Ihre WordPress-Kenntnisse zu erweitern? Beginnen Sie mit SeedProd und erstellen Sie hochkonvertierende Landing Pages und Websites ohne Programmierung.

Danke fürs Lesen! Wir würden uns freuen, Ihre Gedanken zu hören. Treten Sie also gerne der Unterhaltung auf YouTube, X und Facebook bei, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.