So verwenden Sie Box-Schatten als Swipe-Hintergründe bei Hover

Veröffentlicht: 2019-01-30

Jede Woche stellen wir Ihnen neue und kostenlose Divi-Layoutpakete zur Verfügung, die Sie für Ihr nächstes Projekt verwenden können. Für eines der Layout-Pakete teilen wir auch einen Anwendungsfall, der Ihnen hilft, Ihre Website auf die nächste Stufe zu heben.

Diese Woche zeigen wir Ihnen im Rahmen unserer laufenden Divi-Designinitiative, wie Sie Boxschatten als Wischhintergründe beim Schweben verwenden. Wir werden drei verschiedene Beispiele behandeln, die auf der Homepage des Personal Stylist Layout Packs umwerfend aussehen, aber die Möglichkeiten, die Sie haben, sind wirklich endlos. Wir werden jeden der Wischhintergründe Schritt für Schritt neu erstellen, indem wir nur die integrierten Optionen von Divi verwenden.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial und seine verschiedenen Beispiele eintauchen, werfen wir einen Blick auf das Ergebnis.

Beispiel 1

Wische Hintergründe

Beispiel #2

Wische Hintergründe

Beispiel #3

Wische Hintergründe

Laden Sie die Homepage des persönlichen Stylisten-Layout-Pakets auf eine neue Seite hoch

Beginnen Sie damit, Ihrer Website eine neue Seite hinzuzufügen und das Homepage-Layout von Personal Stylist hochzuladen. Obwohl wir dieses Layout verwenden werden, um alle drei oben gezeigten Beispiele auszuführen, können Sie diesen Ansatz für jede Art von Layout oder Website verwenden, an der Sie arbeiten.

Wische Hintergründe

Beispiel 1 neu erstellen

Wische Hintergründe

Schattenfarbe der Schaltflächenbox

Fangen wir an, das erste Beispiel neu zu erstellen! Dieses Beispiel hilft Ihnen, den Heldenabschnitt hervorzuheben. Das erste, was Sie tun müssen, ist das Schaltflächenmodul, das Sie in der ersten Spalte finden, zu öffnen und die Schattenfarbe des Felds zu ändern. Wir tun dies, um sicherzustellen, dass die Farbe gut zu dem rosafarbenen Kastenschatten passt, den wir beim Schweben hinzufügen.

Wische Hintergründe

Abschnittseinstellungen

Standardhintergrundfarbe

Fahren Sie fort, indem Sie die Abschnittseinstellungen öffnen. Stellen Sie sicher, dass die Standardhintergrundfarbe gleich bleibt.

Hintergrundfarbe: #2a2a2a

Wische Hintergründe

Hintergrundfarbe schweben

Ändern Sie den Hintergrund-Hover.

Hintergrundfarbe: #ffffff

Wische Hintergründe

Standard-Box-Schatten

Fahren Sie fort, indem Sie dem Abschnitt einen Standard-Box-Schatten hinzufügen.

Horizontale Position des Kastenschattens: 0px
Vertikale Position des Boxschattens: 0px
Schattenfarbe: rgba(255,137,159,0,82)
Position des Boxschattens: Innerer Schatten

Wische Hintergründe

Hoverbox-Schatten

Ändern Sie die horizontale Position des Boxschattens. Fügen Sie einen beliebigen Wert Ihrer Wahl hinzu.

Horizontale Position des Boxschattens: 800px

Wische Hintergründe

Wenn der Wischeffekt von oben nach unten angezeigt werden soll, können Sie stattdessen die vertikale Position des Boxschattens ändern.

Vertikale Position des Boxschattens: 650px

Wische Hintergründe

Übergänge

Verringern Sie zu guter Letzt die Übergangsdauer auf der Registerkarte „Erweitert“, um einen schnellen Übergang zwischen der Hintergrundfarbe und dem Hintergrund des Box-Schatten-Wischens zu erzielen.

Übergangsdauer: 200ms
Übergangsgeschwindigkeitskurve: Einfach

Wische Hintergründe

Beispiel 2 neu erstellen

Wische Hintergründe

Erstes Textmodul ändern

Hover-Texteinstellungen

Auf zum nächsten Beispiel! Öffnen Sie das Textmodul, das Sie in der ersten Spalte finden, und ändern Sie die Textfarbe beim Hover.

Textfarbe: Hell

Wische Hintergründe

Grenze schweben

Fahren Sie fort, indem Sie die Rahmenfarbe beim Bewegen des Mauszeigers auf der Registerkarte „Design“ ändern.

Rahmenfarbe: rgba(255,137,159,0,82)

Wische Hintergründe