So erstellen Sie mit Divi . einzigartige Social Media Follow Button Hover-Effekte
Veröffentlicht: 2019-01-31Das Social Media Follow-Modul von Divi ermöglicht es Ihnen, diese wichtigen Links überall auf Ihrer Website einfach zu gestalten und zu Ihren sozialen Netzwerken hinzuzufügen. Und wenn Sie sich mit einigen der leistungsstarken integrierten Hover-Effekte von Divi die Hände schmutzig machen möchten, können Sie auch einige kreative Hover-Effekte für Ihre Social-Media-Follow-Buttons entwerfen.
In diesem Tutorial zeige ich Ihnen einige einzigartige Social Media Follow Button Hover-Effekte, die Sie vielleicht überraschen werden.
Hör zu!
Vorgeschmack
Hier ist ein kleiner Vorgeschmack auf die Hover-Effekte, die wir erstellen werden.
Teil 1: Verschieben von Box-Schatten, um Ihre Social-Media-Follow-Buttons hervorzuheben
Grenzen zu Punkten
Von Punkten zu Grenzen
Hüpfende Schatten 1
Hüpfende Schatten 2
Beginnen Sie mit der Erstellung von Teil 1 Hover-Effekten
Teil 2: Ändern von Farbe, Größe und Form beim Hover
Größe und Farbe ändern
Ändern von Größe, Farbe und Form
Beginnen Sie mit der Erstellung von Teil 2 Hover-Effekten
Teil 3: Filtereffekte
Beginnen Sie mit dem Bau von Teil 3 Hover-Effekt
Teil 4: Große Symbole mit Bildschirmüberblendung und Filtereffekten
Beginnen Sie mit dem Bau von Teil 4 Hover-Effekt
Einstieg
Abonnieren Sie unseren Youtube-Kanal
Um die Dinge für dieses Tutorial ins Rollen zu bringen, brauchen Sie nur das Divi-Theme, das installiert und aktiv ist. Erstellen Sie dann eine neue Seite und geben Sie Ihrer Seite einen Titel. Klicken Sie dann auf , um den Divi Builder zu verwenden, und wählen Sie die Option zum Verwenden eines vorgefertigten Layouts. Wählen Sie im Popup-Modal "Aus Bibliothek laden" das App Developer Layout Pack aus. Klicken Sie dann, um das Layout der App-Entwickler-Startseite zu verwenden, um das Design unserer Social-Media-Folgen-Schaltflächen zu beschleunigen.
Veröffentlichen Sie Ihre Seite und klicken Sie auf die Schaltfläche zum Erstellen auf dem Frontend.
Löschen Sie nun alle Abschnitte der Seite mit Ausnahme des Abschnitts mit den Schaltflächen zum Folgen der sozialen Medien am unteren Rand der Seite.
Dies dient als Startvorlage zum Erstellen unserer Hover-Effekte.
Speichern wir den Abschnitt in der Divi-Bibliothek, damit wir bei Bedarf eine neue Version dieser Social-Media-Follow-Button-Designs hinzufügen können.
Sie können den Abschnitt auch mehrmals auf Ihrer Seite duplizieren. Auf diese Weise können Sie verschiedene Hover-Effekte erstellen, beginnend mit dem vorgefertigten Abschnitt.
Jetzt können Sie mit der Erstellung der Hover-Effekte beginnen.
Lass uns anfangen.
#1 Verschieben von Box-Schatten, um Ihre Social-Media-Follow-Buttons hervorzuheben
Grenzen zu Punkten
Für diesen Hover-Effekt fügen wir einen Boxschatten um die Schaltfläche hinzu, der verkleinert und beim Hover über der Schaltfläche schwebt. Öffnen Sie dazu das Social Media Follow-Modul und klicken Sie auf , um die Einstellungen des sozialen Netzwerks Facebook zu öffnen.
Kopieren Sie dann die Hintergrundfarbe, die für das Symbol verwendet wird, in Ihre Zwischenablage (#3b5998). Diese Farbe wird für den Boxschatten verwendet.
Öffnen Sie nun die Registerkarte Design und aktualisieren Sie Folgendes:
Box Shadow: siehe Screenshot
Vertikale Position des Boxschattens: 0px (Standard), -46px (Hover)
Stärke der Box-Schattenunschärfe: 0px
Stärke der Box-Schattenausbreitung: 5px (Standard), -16px (Hover)
Für die Schattenfarbe fügen Sie die Hintergrundfarbe (#3b5998) ein und verringern die Deckkraft um 50%. Dadurch erhalten Sie eine hellere Version der Hintergrundfarbe der Schaltfläche.
Schattenfarbe: rgba(59,89,152,0.5)
Klicken Sie nun mit der rechten Maustaste auf die Stilkategorie Boxschatten und wählen Sie Boxschattenstile kopieren.
Speichern Sie die Einstellungen für das soziale Netzwerk von Facebook und klicken Sie dann mit der rechten Maustaste auf jedes der sozialen Netzwerke und wählen Sie für jedes einzelne Elementstile einfügen. Dadurch werden die gleichen Box-Schattenstile auf die restlichen Schaltflächen angewendet.
Sie müssen jedoch immer noch die Farbe des Boxschattens aktualisieren, die für jeden spezifisch ist. Wiederholen Sie dazu den gleichen Vorgang wie für das soziale Netzwerk Facebook. Öffnen Sie die spezifischen Einstellungen des sozialen Netzwerks, kopieren Sie die verwendete Hintergrundfarbe, fügen Sie sie als neue Boxschattenfarbe ein und verringern Sie dann die Deckkraft um 50%.
Hier sind die Boxschattenfarben für jedes der verbleibenden sozialen Netzwerke:
Twitter Box Schattenfarbe: rgba(0,172,237,0.5)
Instagram Box Schattenfarbe: rgba(234,44,89,0.5)
Dribbelbox-Schattenfarbe: rgba(234,76,141,0.5)
Youtube Box Schattenfarbe: rgba(168,36,0,0.5)
Sobald die Schattenfarben der Box aktualisiert sind, sehen Sie sich das Endergebnis an.
Von Punkten zu Grenzen
Sie können den Hover-Effekt ganz einfach umkehren, indem Sie die Standard- und Hover-Werte für die vertikale Position des Boxschattens und die Ausbreitungsstärke austauschen.
Duplizieren Sie den Abschnitt (wenn Sie das Design „Grenzen zu Punkten“ beibehalten möchten) und öffnen Sie dann die Einstellungen des Social Media Follow-Moduls. Öffnen Sie dann die Einstellungen für das soziale Netzwerk Facebook und aktualisieren Sie Folgendes:
Vertikale Position des Boxschattens: -46px (Standard), 0px (Hover)
Stärke der Box-Schattenausbreitung: -16px (Standard), 5px (Hover)
Sie müssen diese neuen Einstellungen für den Boxschatten für jedes der verbleibenden sozialen Netzwerke aktualisieren. Sie können dies manuell tun oder mit einem Rechtsklick die vertikale Position und Streustärke des Boxschattens kopieren und dann in jedes der Netzwerke einfügen.
Sobald Sie fertig sind, sieht Ihr endgültiges Design so aus.
Hüpfender Schatten-Effekt
Für die nächste Version dieses Design- und Hover-Effekts werden wir den Boxschatten (Punkt) jeder der Schaltflächen standardmäßig an derselben Stelle starten lassen. Dadurch entsteht eine Art Hüpfeffekt.
Um zu beginnen, können Sie das zuvor erstellte Design „Punkte zu Rändern“ duplizieren. Öffnen Sie die Einstellungen des Social Media Follow-Moduls und öffnen Sie dann die Einstellungen für das soziale Netzwerk von Facebook. Aktualisieren Sie die folgenden Boxschattenstile:
Horizontale Position des Boxschattens: 140px (Standard), 0px (Hover)
Vertikale Position des Boxschattens: -70px (Standard), 0px (Hover)
Aktualisieren Sie für das soziale Netzwerk Twitter Folgendes:
Horizontale Position des Boxschattens: 70px (Standard), 0px (Hover)
Vertikale Position des Boxschattens: -70px (Standard), 0px (Hover)
Aktualisieren Sie für das soziale Netzwerk Instagram Folgendes:
Horizontale Position des Boxschattens: 70px (Standard), 0px (Hover)
Vertikale Position des Boxschattens: -70px (Standard), 0px (Hover)
Aktualisieren Sie für das soziale Netzwerk Dribble Folgendes:
Horizontale Position des Boxschattens: -70px (Standard), 0px (Hover)
Vertikale Position des Boxschattens: -70px (Standard), 0px (Hover)
Aktualisieren Sie für das soziale Netzwerk Youtube Folgendes:
Horizontale Position des Boxschattens: -140px (Standard), 0px (Hover)
Vertikale Position des Boxschattens: -70px (Standard), 0px (Hover)
Sehen Sie sich das Endergebnis an.
Wenn der Punkt anfangs nicht angezeigt werden soll, können Sie die Standardfarbe des Box-Schattens auf transparent setzen und dann beim Bewegen des Mauszeigers eine Box-Schattenfarbe hinzufügen. Dies würde Ihnen ein Design geben, das wie folgt aussieht:
#2 Ändern von Farbe, Größe und Form beim Hover
Für diese nächste Reihe von Hover-Effekten zeige ich Ihnen, wie Sie die Farbe, Größe und/oder Form der Social-Media-Buttons beim Hovern einfach ändern können. Stellen Sie zunächst sicher, dass Sie eine neue Version des Abschnitts der Social-Media-Folgen-Schaltfläche aus dem Layout der App-Entwickler-Startseite verwenden. Wenn Sie es in Ihrer Divi-Bibliothek gespeichert haben, ist jetzt ein guter Zeitpunkt, es Ihrer Seite hinzuzufügen.
Farbe ändern
Das Ändern der Farbe einer Social-Media-Schaltfläche beim Hover ist ziemlich einfach. Beginnen wir für dieses Beispiel standardmäßig mit einer dunkelgrauen Hintergrundfarbe, die in die Farbe des sozialen Netzwerks umgewandelt wird.
Öffnen Sie dazu das Modul Social Media Follow und dann die Facebook-Netzwerkeinstellungen. Aktualisieren Sie Folgendes:
Hintergrundfarbe: #333333 (Standard), #3b5998 (Hover)
Fahren Sie dann mit diesem Vorgang fort, um die verbleibenden vier Hintergrundfarben des sozialen Netzwerks wie folgt zu aktualisieren:
Twitter-Hintergrundfarbe: #333333 (Standard), #00aced (Hover)
Instagram-Hintergrundfarbe: #333333 (Standard), #ea2c59 (Hover)
Dribbling-Hintergrundfarbe: #333333 (Standard), #ea4c8d (Hover)
Youtube-Hintergrundfarbe: #333333 (Standard), a82400 (Hover)
Hier ist das Ergebnis.
Größe ändern
Um die Größe der Schaltfläche zu ändern, können wir beim Hover einen Boxschatten hinzufügen. Dadurch kann die Schaltfläche größer werden, ohne dass der Schaltfläche tatsächlich Platz hinzugefügt wird, der die benachbarten Schaltflächen beim Schweben wegdrücken würde.
Öffnen Sie dazu die Facebook-Netzwerkeinstellungen und fügen Sie die folgenden Boxschattenstile hinzu:
Box Shadow: siehe Screenshot
Vertikale Position des Boxschattens: 0px
Stärke der Box-Schattenunschärfe: 0px
Stärke der Box-Schattenausbreitung: 0px (Standard), 10px (Hover)
Schattenfarbe: #3b5998 (dies sollte die gleiche Farbe wie die Hintergrundfarbe des Hover-Buttons sein)
Um das Hinzufügen des gleichen Box-Schatten-Designs zu den restlichen Schaltflächen des sozialen Netzwerks zu beschleunigen, klicken Sie mit der rechten Maustaste auf die Box-Schatten-Kategorie des Facebook-Netzwerks und klicken Sie auf "Box-Schattenstile speichern".
Speichern Sie die Einstellungen und klicken Sie dann mit der rechten Maustaste auf jedes der sozialen Netzwerke und wählen Sie "Elementstile einfügen".
Jetzt müssen Sie nur noch die Schattenfarbe der Box mit der richtigen Farbe des sozialen Netzwerks aktualisieren, die der Hintergrundfarbe des Schwebens entspricht.
Um dies zu tun, aktualisieren Sie Folgendes:
Twitter Box Schattenfarbe: #00aced
Instagram Box Schattenfarbe: #ea2c59
Dribbelbox Schattenfarbe: #ea4c8d
Youtube Box Schattenfarbe: #a82400
Hier ist das Endergebnis.
Ändern der Form
Um die Form der Schaltfläche beim Schweben zu ändern, müssen Sie nur die Option "Abgerundete Ecken" anpassen. Dieses Social-Media-Follow-Modul hat derzeit die abgerundeten Ecken auf 40px eingestellt, wodurch die Schaltflächen kreisförmig werden. Wenn wir es in ein Quadrat ändern möchten, müssen Sie nur die abgerundeten Ecken beim Hover auf 0px einstellen.
Öffnen Sie dazu die Facebook-Netzwerkeinstellungen und aktualisieren Sie Folgendes:
Abgerundete Ecken (Hover): 4px an allen vier Ecken
Kopieren Sie dann die Rahmenstile und fügen Sie sie in jedes verbleibende Netzwerk ein.
Hier ist das endgültige Design.
#3 Filtereffekte
Für diesen nächsten Hover-Effekt zeige ich Ihnen, wie Sie einige Filtereffekte verwenden, um die Farben der Social-Media-Buttons beim Hover zu ändern. Stellen Sie zunächst sicher, dass Sie eine neue Version des Abschnitts der Social-Media-Folgen-Schaltfläche aus dem Layout der App-Entwickler-Startseite verwenden. Wenn Sie es in Ihrer Divi-Bibliothek gespeichert haben, ist jetzt ein guter Zeitpunkt, es Ihrer Seite hinzuzufügen.
Sättigungs- und Invert-Filter-Effekte beim Schweben
Die Verwendung der Sättigungs- und Invertierungsfiltereffekte ist eine einfache und leistungsstarke Möglichkeit, den Stil Ihrer Social-Media-Buttons beim Schweben zu ändern. In diesem Beispiel zeige ich Ihnen, wie Sie Sättigung und Invertierung kombinieren, um graue Schaltflächen mit schwarzen Symbolen zu erstellen, die beim Bewegen wieder in ihre ursprüngliche Farbe übergehen.
Öffnen Sie dazu die Einstellungen des Social Media Follow-Moduls und öffnen Sie dann jede der einzelnen Social-Network-Einstellungen und aktualisieren Sie die folgenden Filteroptionen:
Sättigung: 0% (Standard), 100% (Hover)
Invertieren: 100 % (Standard), 0 % (Hover)
Sehen Sie sich das Ergebnis an.
#4 Große farbige Symbole mit Bildschirmüberblendung und Filtereffekten
Für dieses endgültige Design der Social-Media-Buttons werden wir komplett von vorne beginnen. Erstellen Sie also einen neuen Abschnitt mit einer einspaltigen Zeile und fügen Sie der Zeile ein Social Media Follow-Modul hinzu.
Öffnen Sie dann die Social Media Follow-Einstellungen und löschen Sie das standardmäßige soziale Twitter-Netzwerk, sodass nur das Element des sozialen Netzwerks Facebook übrig bleibt.
Aktualisieren Sie dann die Social Media Follow-Einstellungen wie folgt:
Hintergrundfarbe: #ffffff
Artikelausrichtung: Mitte
Mischmodus: Bildschirm
Öffnen Sie als Nächstes die Elementeinstellungen für das soziale Netzwerk von Facebook und aktualisieren Sie Folgendes:
Hintergrundfarbe: #000000
Benutzerdefinierter Rand: 10 Pixel links, 10 Pixel rechts
Benutzerdefiniertes Padding: 10 Pixel oben, 10 Pixel unten, 10 Pixel links, 10 Pixel rechts
Sättigung: 0% (Standard), 100% (Hover)
Invertieren: 100 % (Standard), 0 % (Hover)
Einstellungen speichern.
Dann duplizieren Sie das Facebook-Social-Network-Element 4 Mal, sodass Sie insgesamt 5 Social-Network-Buttons haben.
Öffnen Sie nun jedes der duplizierten Elemente des sozialen Netzwerks und aktualisieren Sie das soziale Netzwerk und die Hintergrundfarbe auf #000000.
Einstellungen speichern.
Da wir nun den Bildschirmmischmodus aktiviert haben, können wir der Zeilenspalte, die unser Social Media Follow-Modul enthält, eine Hintergrundfarbe hinzufügen. Welche Hintergrundfarbe wir auch verwenden, bestimmt die Farbe unserer Social-Media-Symbole und die Hintergrundfarbe des Schwebens.
Öffnen Sie dazu die Zeileneinstellungen und aktualisieren Sie Folgendes:
Spalte 1 Hintergrundfarbe: #0c71c3
Beachten Sie, wie sich die Symbolfarben in diese Hintergrundfarbe geändert haben.
Sehen Sie sich nun das bisherige Ergebnis an.
Um die Icons/Schaltflächen zu vergrößern, können wir ein Snippet von Custom CSS verwenden. Dazu müssen wir zuerst dem Social Media Follow-Modul eine CSS-ID hinzufügen und dann etwas CSS zu unseren Seiteneinstellungen hinzufügen.
Öffnen Sie das Social Media Follow-Modul und fügen Sie die folgende CSS-ID unter der Registerkarte "Erweitert" hinzu.
CSS-ID: große Symbole
Öffnen Sie als Nächstes Ihre Seiteneinstellungen und fügen Sie das folgende benutzerdefinierte CSS hinzu.
@media (min-width: 980px){
#large-icons.et_pb_social_media_follow li a.icon::before {
font-size: 50px;
line-height: 100px;
width: 100px;
height: 100px;
}
}
Dieser Code erhöht die Größe der Icons auf 50px und die Höhe und Breite der Schaltflächen auf 100px. Die Medienabfrage stellt sicher, dass dieser Stil nur auf den Desktop angewendet wird.
Sehen Sie sich das Endergebnis an.
Abschließende Gedanken
Ich hoffe, dass diese Social Media Follow-Button-Hover-Effekte Ihnen einige frische neue Ideen geben, wie Sie Ihre Besucher mit einigen einzigartigen Designs einfangen können. Die meisten dieser Beispiele sind einfach zu erstellen, insbesondere wenn Sie sich mit der Funktionsweise von Hover-Effekten in Divi vertraut machen. Meistern Sie bis zum nächsten Mal Ihre Divi-Fähigkeiten und kreieren Sie etwas Schönes für Ihr nächstes Projekt.
Ich freue mich von Ihnen in den Kommentaren zu hören.
Danke schön!