Möchten Sie Ihre Website-Elemente hervorheben und die Aufmerksamkeit Ihrer Besucher auf sich ziehen? Das Hinzufügen eines einfachen Box-Schattens kann Ihr Design sofort verbessern und Bilder, Schaltflächen oder Inhaltsabschnitte hervorstechen lassen.
In diesem Leitfaden zeige ich Ihnen 4 einfache Möglichkeiten, wie Sie in WordPress einen Box-Schatten hinzufügen können, damit Sie die wichtigsten Inhalte hervorheben können.
Warum sollten Sie einen Box Shadow in WordPress hinzufügen?
Ein Schlagschatten erzeugt eine subtile Illusion von Tiefe, indem er den Schatten nachahmt, den ein Objekt werfen würde, so dass es leicht vom Hintergrund abgehoben erscheint. Dieser einfache Effekt kann die Art und Weise, wie Besucher Ihre Inhalte wahrnehmen, drastisch verändern.
Unser Gehirn wird von Natur aus von Kontrast und Trennung angezogen, Prinzipien, die in der Gestaltpsychologie verwurzelt sind. Das Hinzufügen eines Kastenschattens schafft eine visuelle Trennung zwischen Elementen und lenkt die Augen Ihrer Besucher sofort auf die wichtigsten Bereiche Ihrer Website.
Das bedeutet, dass Box-Shadows die Leistung Ihrer Website tatsächlich verbessern können:
- Steigern Sie die Konversionen: Heben Sie Aufrufe zum Handeln wie Schaltflächen oder Formulare hervor, um Klicks und Konversionen zu fördern.
- Heben Sie Bilder hervor: Heben Sie Bilder vom Hintergrund ab, um die Aufmerksamkeit auf sie zu lenken und ihre Wirkung zu verstärken.
- Verbessern Sie die Benutzerfreundlichkeit: Erstellen Sie ein optisch ansprechendes und übersichtliches Layout, das die Navigation auf Ihrer Website einfacher und angenehmer macht.
Im Folgenden finden Sie 4 einfache Möglichkeiten, diese Effekte zu Ihrer WordPress-Website hinzuzufügen.
- Methode 1: Hinzufügen eines Box-Schattens in WordPress mit einem Page Builder (am einfachsten)
- Methode 2: Hinzufügen eines Box-Schattens in WordPress mit CSS-Code (mehr Kontrolle)
- Methode 3: Hinzufügen eines Kastenschattens mit einem kostenlosen Plugin (schnelle Alternative)
- Methode 4: Hinzufügen eines Box-Schattens mit CSS Hero (Fortgeschrittene)
Methode 1: Hinzufügen eines Box-Schattens in WordPress mit einem Page Builder (am einfachsten)
Nun, da Sie die Macht der Box-Schatten verstehen, lassen Sie uns einen erstellen. Diese Methode ist perfekt für visuelle Lernende und alle, die eine codefreie Lösung wünschen. Ich werde SeedProd verwenden, um mit wenigen Klicks einen eleganten Box-Schatten hinzuzufügen.
SeedProd ist der beste WordPress-Website-Builder mit über 1 Million Nutzern. Mit dem Drag-and-Drop Page Builder können Sie hochkonvertierende Landing Pages und Websites erstellen und jeden Zentimeter Ihres Designs anpassen, ohne Code zu schreiben.
Sie können auch durch Zeigen und Klicken einen Rahmenschatten zu jedem Gestaltungselement hinzufügen.
Um zu beginnen, installieren und aktivieren Sie SeedProd auf Ihrer WordPress-Website. Weitere Details finden Sie in unserer Anleitung zur Installation von SeedProd.
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.
Hier können Sie ein vorgefertigtes, vollständig anpassbares Design für Ihre Seite auswählen. Die Vorlagen von SeedProd machen es Ihnen leicht, einen Look zu finden, der zu Ihrer Marke passt, und Sie können jedes Detail anpassen, um es zu Ihrem eigenen zu machen.
Klicken Sie zum Durchsuchen auf die Filter oben, bewegen Sie dann den Mauszeiger über eine Vorlage und klicken Sie auf das Häkchensymbol, um sie auszuwählen.
Nun können Sie einen Namen für Ihre Seite eingeben, und SeedProd legt automatisch die URL fest. Es ist eine gute Idee, für die Seite relevante Schlüsselwörter in die URL aufzunehmen, da dies Ihre WordPress-Suchmaschinenoptimierung verbessern kann.
Wenn Sie die generierte URL nicht übernehmen 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 Ihren Entwurf in der Seitenerstellungsoberfläche zu starten.
Der Drag-and-Drop-Builder von SeedProd zeigt auf der rechten Seite eine Live-Vorschau Ihres Designs an. Auf der linken Seite befindet sich ein Panel mit Blöcken, die Sie auf die Seite ziehen können.
Wenn Sie einen Block gefunden haben, den Sie hinzufügen möchten, klicken Sie darauf, ziehen Sie ihn auf die Live-Vorschau und legen Sie ihn dort ab. Dann können Sie den Block auswählen, um sein Aussehen und seine Einstellungen anzupassen.
Wenn Sie z. B. auf den Block Überschrift klicken, können Sie Ihren eigenen Text eingeben und die Schriftgröße, Farbe und Ausrichtung ändern.
Sie können auch Blöcke auf der Seite verschieben, indem Sie sie ziehen und ablegen. Detaillierte Anweisungen finden Sie in unserem Leitfaden zum Erstellen einer Landing Page in WordPress.
Wenn Sie einem Block einen Rahmenschatten hinzufügen möchten, müssen Sie in den Einstellungen des Blocks auf die Registerkarte Erweitert klicken.
In diesem Beispiel möchte ich jedem Merkmalsfeld einen Rahmenschatten hinzufügen. Also klicke ich auf die Spalteneinstellungen und wähle die Registerkarte "Erweitert".
Klicken Sie dann auf das Dropdown-Menü "Schatten" und wählen Sie eine Option aus, z. B. Haaransatz, Klein, Mittel, Groß, X Groß usw.
Wenn Sie einen Schatten auswählen, wird die Vorschau automatisch aktualisiert. Sie können mit verschiedenen Stilen experimentieren, bis Sie einen finden, der Ihnen gefällt.
Wenn Sie mit den vorgefertigten Stilen nicht zurechtkommen, wählen Sie die Option "Benutzerdefiniert". Diese Option öffnet neue Anpassungen, mit denen Sie den Weichzeichner, die Ausbreitung, die Farbe, die Position des Schattens und mehr ändern können.
Am Ende wählte ich die Option 2X Large und wiederholte den Vorgang für jeden Block im Raster.
Nach dem Hinzufügen des Kastenschattens können Sie Ihre Seite weiter anpassen, 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 zu aktivieren.
Hier ist ein Beispiel dafür, wie meine endgültige Seite aussieht, komplett mit den neuen Kastenschatten:
Methode 2: Hinzufügen eines Box-Schattens in WordPress mit CSS-Code (mehr Kontrolle)
Wenn Sie jedes Element auf Ihrer Website mit einem Rahmenschatten versehen, kann die Website unübersichtlich wirken. Stattdessen ist es am besten, sie zu verwenden, um wichtige Inhalte hervorzuheben und Ihr Design konsistent zu halten.
Der einfachste Weg, dies zu tun, ist durch die Einstellung Ihrer Box Schatten Stil mit CSS, und ich werde WPCode verwenden, um es super einfach.
WPCode ist ein beliebtes Code-Snippet-Plugin, mit dem Sie benutzerdefinierten Code zu Ihrer WordPress-Website hinzufügen können, ohne Ihre Theme-Dateien direkt zu bearbeiten. Dies sorgt für Ordnung und hilft Ihnen, versehentliche Fehler zu vermeiden.
Als Erstes müssen Sie das kostenlose WPCode-Plugin installieren und aktivieren. Eine vollständige Anleitung finden Sie in diesem Leitfaden zur Installation eines WordPress-Plugins.
Nachdem Sie das Plugin aktiviert haben, gehen Sie in Ihrem WordPress-Admin zu Code Snippets " +Add Snippets.
Auf dieser Seite sehen Sie vorgefertigte benutzerdefinierte Codeschnipsel, die Sie zu Ihrer Website hinzufügen können. Wenn Sie Ihren eigenen Code hinzufügen möchten, bewegen Sie den Mauszeiger über die Option "Benutzerdefinierten Code hinzufügen" und klicken Sie auf " Benutzerdefinierten Snippet hinzufügen".
Nachdem die Seite geladen wurde, geben Sie einen Namen für Ihr Snippet ein, damit Sie es leichter identifizieren können. Wählen Sie dann im Dropdown-Menü "Codetyp" die Option "CSS-Snippet".
Fügen Sie nun den folgenden Codeschnipsel 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 in dem Schnipsel ersetzen, um den gewünschten Schatten zu erzeugen.
Lassen Sie uns diese Zahlen aufschlüsseln, damit Sie genau wissen, was passiert ist:
- .custom-box-shadow: Dies ist der Name der CSS-Klasse, die wir erstellen. Wir verwenden sie, um den Box-Schatten auf bestimmte Elemente anzuwenden.
- Box-shadow: Dies teilt dem Browser mit, dass wir einen Box-Shadow 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 herum, um die Position des Schattens anzupassen.
- 10px: Dies ist der Unschärferadius. Höhere Zahlen erzeugen einen weicheren, unschärferen Schatten. Niedrigere Zahlen halten ihn scharf.
- rgba(0, 0, 0, 0.2): Hiermit wird die Farbe des Schattens festgelegt. Wir verwenden hier ein halbtransparentes Schwarz. Die letzte Zahl (Alpha) steuert die Transparenz - 0 ist völlig transparent, und 1 ist völlig undurchsichtig.
Wenn Sie mit dem Snippet zufrieden sind, scrollen Sie nach unten zum Abschnitt "Einfügen", um festzulegen, wo WPCode es einfügen soll. Um es auf Ihrer gesamten Website zu verwenden, wählen Sie die Option "Automatisch einfügen" und legen Sie den Ort als " Site Wide Header" fest.
Scrollen Sie nun zurück zum Anfang der Seite und schalten Sie den Schalter "Inaktiv" auf "Aktiv" um. Klicken Sie dann auf die Schaltfläche " Snippet speichern" .
Der nächste Schritt besteht darin, die benutzerdefinierte CSS-Klasse zu einem beliebigen WordPress-Block hinzuzufügen. Wählen Sie dazu einen beliebigen Block im WordPress-Blockeditor aus und klicken Sie im linken Menü auf "Erweitert".
Geben Sie in das Feld "Zusätzliche CSS-Klassen" "custom-box-shadow" ein.
Wenn Sie mit dem Beitrag zufrieden sind, können Sie auf "Aktualisieren" oder "Veröffentlichen" klicken. Sie können dann den Beitrag besuchen und Ihren Boxschatten in Aktion sehen.
Methode 3: Hinzufügen eines Kastenschattens mit einem kostenlosen Plugin (schnelle Alternative)
Wenn Sie nicht gerne mit Codeschnipseln arbeiten, sollten Sie lieber Schatten mit Drop Shadow Boxes erstellen. Mit diesem kostenlosen WordPress-Plugin können Sie mit dem eingebauten WordPress-Block-Editor Box-Schatten zu jedem Block hinzufü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 "Schlagschatten".
Wenn er erscheint, klicken Sie ihn an, um ihn Ihrer Seite hinzuzufügen. Sie werden einen Schlagschatten auf einem leeren Block sehen, also fügen wir etwas Inhalt hinzu.
Klicken Sie innerhalb des Schlagschattenblocks auf das Plus-Symbol, 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 anschließend auf den Block, um die Einstellungen für den Boxschatten in der linken Seitenleiste anzuzeigen.
Die Breite des Schattens wird von WordPress automatisch eingestellt, aber Sie können sie ändern, indem Sie "Pixel" oder "%" aus dem Dropdown-Feld "Breite" wählen. Dann können Sie den Schieberegler verwenden, um sie anzupassen.
Sie werden auch Otter-Effekte wie geschwungene Kanten und einen "Perspektiv"-Effekt bemerken. Um eine Vorschau anzuzeigen, öffnen Sie das Dropdown-Menü "Effekt" und wählen Sie einen aus der Liste.
Weitere Optionen, mit denen Sie experimentieren können, sind Innen- und Außenschatten, Rahmenfarben, Rahmenpixel und abgerundete Ecken.
Wenn Sie mit dem Kastenschatten zufrieden sind, wiederholen Sie diese Schritte für andere Blöcke, oder klicken Sie auf "Aktualisieren" oder "Veröffentlichen", um Ihre Änderungen zu aktivieren.
So sehen meine Schlagschatten nach dieser Methode aus:
Methode 4: Hinzufügen eines Box-Schattens mit CSS Hero (Fortgeschrittene)
Wenn Sie nicht gerne mit Code arbeiten, aber dennoch fortgeschrittene Box-Shadows erstellen möchten, dann ist CSS Hero eine gute Option.
Mit diesem Premium-Plugin können Sie jeden Teil Ihres WordPress-Themes feinabstimmen, ohne eine einzige Zeile Code zu schreiben. Sie können auch einzigartige Schatten für jeden Block erstellen, was es ideal macht, um mit verschiedenen Schatteneffekten auf Ihrer Website zu experimentieren.
Um zu beginnen, installieren und aktivieren Sie das CSS Hero-Plugin. Folgen Sie dann den Anweisungen zur Produktaktivierung, um Ihr CSS Hero-Konto mit Ihrer WordPress-Website zu verknüpfen.
Klicken Sie nun auf die Option "Anpassen mit CSS Hero" in Ihrer Admin-Symbolleiste, 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 Boxschatten hinzufügen möchten, verwenden Sie die Symbole am oberen Bildschirmrand, um vom Modus "Auswählen" zum Modus "Navigieren" zu wechseln.
Jetzt können Sie die gewünschte Seite aufrufen und wieder in den Auswahlmodus wechseln.
Klicken Sie anschließend auf ein beliebiges Element in der Vorschau, dem Sie einen Rahmenschatten hinzufügen möchten, z. B. ein Bild, eine Schaltfläche, einen Absatz oder einen anderen Inhalt.
Klicken Sie anschließend im linken Bereich auf "Extra".
Standardmäßig ist die Option für den Rahmenschatten "Keiner", klicken Sie also auf die Schaltfläche Schatten erzeugen.
Ändern Sie zunächst, wo der Schatten erscheint. In den Einstellungen für die Schattenposition können Sie "Innen" oder "Außen" wählen.
Als nächstes bearbeiten Sie den Winkel des Schattens im Bereich Ausrichtung. Ziehen Sie einfach den Kreis, bis der Winkel des Schattens in der gewünschten Position ist.
Ändern Sie schließlich die Farbe des Schattens mit dem Pipettenwerkzeug und verwenden Sie die Schieberegler, um die Unschärfe und die Ausbreitung des Schattens zu steuern.
Auf die gleiche Weise können Sie auch anderen Bereichen Ihrer Website einen Rahmenschatten hinzufügen. Wenn Sie mit dem Ergebnis zufrieden sind, klicken Sie auf die Schaltfläche Speichern und veröffentlichen.
Besuchen Sie nun Ihre Änderungen, um zu sehen, wie sie live auf Ihrer Website aussehen.
Weitere Möglichkeiten zur Anpassung Ihrer WordPress-Website
Die Methoden, die ich in diesem Leitfaden beschrieben habe, sind ideal für das Hinzufügen von Box Shadow-Effekten in WordPress. Wenn Sie jedoch weitere kreative Effekte hinzufügen möchten, werden Sie die folgenden Anleitungen hilfreich finden:
- Ändern der Ränder in WordPress - Passen Sie die Abstände um Ihren Inhalt herum an, um ein ausgefeiltes, professionelles Aussehen zu erzielen.
- Text zu einem Bild in WordPress hinzufügen - Erstellen Sie auffällige Grafiken und Aufrufe zum Handeln direkt auf Ihren Bildern.
- Wie man animierte Particle.js-Hintergründe in WordPress erstellt - Fügen Sie einen Hauch von dynamischem Flair mit auffälligen animierten Hintergründen hinzu.
- Wie man eine Seite in voller Breite in WordPress erstellt - Befreien Sie sich von Seitenleisten und erstellen Sie beeindruckende Seitenlayouts in voller Breite.
- Wie man ein Hintergrundbild in WordPress abdunkelt - Erleichtern Sie die Lesbarkeit Ihres Textes und schaffen Sie ein Gefühl von Tiefe mit einem abgedunkelten Hintergrundbild.
- Wie man Textanimationen in WordPress erstellt - Erregen Sie die Aufmerksamkeit Ihrer Besucher mit auffälligen animierten Texteffekten.
- Wie man schicke Sektionstrenner für WordPress erstellt - Trennen Sie Ihren Inhalt mit stilvollen Formtrennern visuell.
Ich hoffe, diese Anleitung hat Ihnen geholfen, zu lernen, wie Sie einen Box Shadow in WordPress hinzufügen können. Jetzt können Sie das Design Ihrer Website im Handumdrehen verbessern und Ihre wichtigsten Inhalte hervorheben.
Sind Sie bereit, Ihre WordPress-Kenntnisse zu vertiefen? Starten Sie mit SeedProd und erstellen Sie atemberaubende Landingpages und Websites mit hoher Konversionsrate ohne Programmierkenntnisse.
Vielen Dank fürs Lesen! Wir würden uns freuen, Ihre Meinung zu hören. Bitte beteiligen Sie sich an der Konversation auf YouTube, X und Facebook, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.
