Möchten Sie Ihre Social-Media-Symbole mit Divi festhalten?
Mit den integrierten „Sticky“-Optionen von Divi können Sie ganz einfach ein Sticky-Modul „Social Media Follow“ entwerfen, das diese Social-Media-Symbole vorne und in der Mitte hält, während der Benutzer die Seite nach unten scrollt.
Darüber hinaus können wir durch Hinzufügen eines benutzerdefinierten Stils zum Modul im Sticky-Zustand einzigartige Designübergänge erstellen, wenn wir beim Scrollen in den Sticky-Zustand wechseln.
Wenn Sie also nach vollständiger Kontrolle über das Design Ihrer Social-Media-Schaltflächen suchen, ist dieses Tutorial genau das Richtige für Sie!
Übersicht
Hier ist ein kurzer Überblick über das Ergebnis, das wir in diesem Tutorial erhalten werden.
Erstellen Sie eine neue Seite mit "Divi Builder"
Gehen Sie im WordPress-Dashboard zu „Seiten > Neu hinzufügen“
Geben Sie ihm einen für Sie sinnvollen Titel und klicken Sie dann darauf „Verwenden Sie DiviBuilder“
Für dieses Tutorial verwenden wir ein vordefiniertes Layout. Klicken Sie dazu auf „Layouts durchsuchen“
Suchen Sie das Layout und wählen Sie es aus "Modedesigner"
Layout wählen "Landung" klicken Sie dann auf „Dieses Layout verwenden“
Gestaltung des „Social Media Follow“-Moduls in Divi
Erstellung der Sektion
Fügen Sie dem Layout einen neuen regulären Abschnitt hinzu.
Verschieben Sie dann den neuen Abschnitt an den Anfang der Seite (oder wo immer Sie Ihre Social-Media-Follow-Links hinzufügen möchten).
Öffnen Sie die Bereichseinstellungen und passen Sie die Hintergrundfarbe wie folgt an das Layout an:
- Hintergrundfarbe: #fff9f2
Unter der Registerkarte Design, erweitern Sie die Option Abstand und ändern Sie die folgenden Parameter:
- Polsterung (oben und unten): 10px
Erstellung der Linie
Fügen Sie innerhalb des Abschnitts einer Spalte eine Zeile hinzu.
Öffnen Sie die Linieneinstellungen, ziehen Sie die Option Abstand herunter und ändern Sie die Einstellungen wie folgt:
- Benutzerdefinierte Bundstegbreite verwenden: JA
- Rinnenbreite: 1
- Breite: 100 %
- Maximale Breite: 100 %
Fahren Sie fort, indem Sie die Option nach unten scrollen Abstand
- Polsterung (oben und unten): 0px
Erstellung des Sticky-Moduls „Social Media Follow“.
Sobald der Abschnitt und die Linie vorhanden sind, fügen Sie ein neues Modul hinzu „Soziale MedienFolgen“ an der Linie.
Moduleinstellungen aktualisieren
Öffnen Sie die Einstellungen des Moduls „Social Media Follow“.
Als erstes müssen wir dem Modul eine Sticky-Position hinzufügen.
Unter der Registerkarte Fortgeschrittener, ziehen Sie die Option herunter Bildlaufeffekte und aktualisieren Sie Folgendes:
- Sticky-Position: Oben bleiben
Sobald sich die Position im Sticky-Zustand befindet, können Sie den Stil des Moduls im Sticky-Zustand anvisieren (ähnlich wie Sie es für den Hover-Zustand tun können). Bewegen Sie dazu den Mauszeiger über eine Option und klicken Sie auf das Stecknadelsymbol.
Unter der Registerkarte Design, aktualisieren Sie Folgendes:
- Ausrichtungsmodul: Mitte
- Symbolfarbe: #000000 (Desktop), #ffffff (Hover), #ffffff (Sticky)
- Breite: 100 %
- Maximale Breite: 100 %
- Polsterung: 20 Pixel (oben), 12 Pixel (unten), 10 Pixel (links und rechts)
Einstellungen für soziale Medien
Sobald die Moduleinstellungen fertig sind, können wir uns nun dem Styling der einzelnen Social-Media-Icons zuwenden.
Dazu passen wir zunächst ein Symbol für ein soziales Netzwerk an. Dann duplizieren wir das soziale Netzwerk, um die anderen zu erstellen.
Unter der Registerkarte sollten bereits zwei soziale Netzwerke vorhanden sein Inhalt standardmäßig. Löschen Sie eines und klicken Sie, um das verbleibende zu bearbeiten.
Wählen Sie in den Einstellungen des sozialen Netzwerks ein soziales Netzwerk aus und aktualisieren Sie die Hintergrundfarben für Desktop-, Hover- und Sticky-Zustände.
- Soziales Netzwerk : TikTok (oder was auch immer du willst)
- Hintergrund: transparent (Desktop), #fe2c55 (Hover), #000000 (Sticky)
TRICK: Die Hintergrundfarbe ändert sich automatisch entsprechend der Social-Media-Marke. Sie können diese Farbe kopieren und als Hintergrundfarbe für den Hover-Zustand für das Symbol hinzufügen. Dadurch wird die Standardhintergrundfarbe des sozialen Netzwerks angezeigt, wenn Sie mit der Maus über das Symbol fahren.
Sie können jetzt zwischen Registerkarten wechseln, um die Hintergrundfarbe für alle drei Zustände (Desktop, Hover und Sticky) anzuzeigen.
Als Nächstes geben wir dem Symbol eine schöne ovale Form und einen Rahmen, damit es besser zum Layout passt. Unter der Registerkarte Design, aktualisieren Sie Folgendes:
- Abgerundete Ecken: 50 %
- Randbreite: 1px
- Randfarbe: #000000 (Desktop), Transparent (Hover)
Derzeit hat das Symbol eine Kreisform. Um eine ovalere Form zu erhalten, ändern wir die Abstandseinstellungen wie folgt:
- Rand (links und rechts): 15px (Desktop), 0px (Sticky), 0px (Telefon)
- Padding (links und rechts): 16px (Desktop), 14px (Tablet), 0px (Telefon)
Doppeltes soziales Netzwerk
Nachdem wir das Design des ersten sozialen Netzwerks abgeschlossen haben, können wir das Symbol duplizieren, um weitere zu erstellen.
Öffnen Sie dazu die Moduleinstellungen Medien SocialFollow und klicken Sie auf das Duplikat-Symbol. Lassen Sie uns für dieses Beispiel 4 weitere erstellen.
Jetzt müssen wir nur noch jedes der neuen sozialen Netzwerke aktualisieren. Da dies die Hintergrundfarbe ändert, müssen Sie auch die Hintergrundfarbe für jeden aktualisieren.
Öffnen Sie dazu die Einstellungen des zweiten sozialen Netzwerks und aktualisieren Sie Folgendes:
- Soziales Netzwerk: Facebook
- Hintergrund: transparent (Desktop), #3b5998 (Hover)
Fahren Sie mit dem gleichen Vorgang fort, um die restlichen sozialen Netzwerke zu aktualisieren.
Endergebnis
Sehen wir uns nun das Ergebnis an, das auf verschiedenen Bildschirmgrößen erzielt wurde.
Laden Sie DIVI jetzt herunter!!!
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
Social-Media-Buttons sind fast immer ein Schlüsselmerkmal auf a Website. Sie sind eine der wichtigsten Möglichkeiten, um Social-Media-Kanäle mit a zu verbinden Website. Deshalb das Modul „Soziale Medien folgen“ von Divi enthält alle Netzwerksymbole und Designoptionen, die Sie benötigen, um die perfekte Lösung für Ihre Website zu erstellen.
Wir hoffen, dass dieses Tutorial Ihnen bei Ihren nächsten Divi-Projekten nützlich sein wird. Wenn Sie mehr über Divi erfahren möchten, zögern Sie nicht, unseren Katalog zu besuchen Divi-Tutorials. Sie können sich auch beraten So erstellen Sie die Blog-Seite mit dem Divi-Blog-Modul
Wenn Sie Fragen oder Anregungen haben, können Sie im Kommentarbereich unten einen Kommentar hinterlassen.
Sie können sich aber auch beraten unsere Ressourcen, Wenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber inzwischen, Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
