So entwerfen Sie eine Pop-Out-Social-Media-Follow-Buttons-Leiste zu Ihrer Seitenvorlage in Divi

Social Media Follow-Buttons sind nach wie vor eine beliebte Ergänzung auf jeder Website. Unternehmen und Einzelpersonen verwenden diese Links, um Benutzer auf ihre Social-Media-Seiten umzuleiten, in der Hoffnung, dass Besucher ihnen folgen oder ihren Kanal abonnieren. Normalerweise sehen Sie diese Schaltflächen in einer Kontaktseite, Seitenleiste oder in der Fußzeile einer Website.

In diesem Tutorial zeigen wir Ihnen, wie Sie in Divi eine Pop-Out-Leiste für Social-Media-Follow-Buttons für eine Seitenvorlage entwerfen. Dadurch erhalten diese Social-Media-Follow-Buttons eine größere Sichtbarkeit auf Ihrer Website, ohne abzulenken. Außerdem erstellen Sie mit Divis Theme Builder ganz einfach eine Seitenvorlage, die diese Schaltflächen für alle (oder alle) Seiten Ihrer Site enthält.

Lass uns einsteigen und loslegen!

Vorgeschmack

Hier ist ein kurzer Blick auf die Social Media Follow-Buttons, die in diesem Tutorial erstellt werden.

Laden Sie die Pop-Out Social Media Follow Buttons Bar-Seitenvorlage KOSTENLOS herunter

Um die Social Media Follow Buttons Bar-Seitenvorlage aus diesem Tutorial in die Hände zu bekommen, müssen Sie sie zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits in der Liste sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Um das Layout in Ihre Seite zu importieren, extrahieren Sie einfach die ZIP-Datei und fügen Sie eine der JSON-Dateien mit der Option „Theme Builder Portability“ zum Divi Theme Builder hinzu.

Kommen wir zum Tutorial, sollen wir?

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie das Divi-Theme installieren und aktivieren. Stellen Sie sicher, dass Sie die neueste Version von Divi haben.

Außerdem benötigen Sie zu Testzwecken mindestens eine mit dem Divi Builder erstellte Seite, um dieser Seite die neue Vorlage zuzuweisen, um das Ergebnis anzuzeigen.

Danach sind Sie bereit zu gehen.

Erstellen einer Pop-Out-Leiste für Social Media Follow Buttons für eine Seitenvorlage in Divi

Erstellen einer neuen Vorlage

Navigieren Sie im WordPress-Dashboard zu Divi > Theme Builder. Klicken Sie dann auf das Feld „Neue Vorlage hinzufügen“, um eine neue Vorlage zu erstellen.

Weisen Sie die Vorlage den Seiten zu, auf denen die Werbeleiste angezeigt werden soll.

Klicken Sie in der neuen Vorlage auf den Bereich "Benutzerdefinierten Körper hinzufügen" und wählen Sie dann "Benutzerdefinierten Körper erstellen".

Wählen Sie dann die Option „Von Grund auf neu erstellen“.

Erstellen der Social Media Follow Buttons Bar

Neue Zeile erstellen

Für den Anfang fügen wir der Vorlage eine einspaltige Zeile hinzu.

Modul Social Media Follow Buttons hinzufügen

Fügen Sie in der einspaltigen Zeile ein Social Media Follow-Modul hinzu.

Soziale Netzwerke hinzufügen

Fügen Sie unter den Social Media Follow-Einstellungen alle sozialen Netzwerke hinzu, die angezeigt werden sollen. Um ein neues Netzwerk hinzuzufügen, klicken Sie auf das graue Plus-Symbol Neues soziales Netzwerk hinzufügen und wählen Sie das Netzwerk aus der Liste aus.

Sie müssen auch die Link-URL für die Social-Media-Seite hinzufügen, zu der Sie die Besucher umleiten möchten. Klicken Sie dazu im Social-Media-Netzwerk auf das Einstellungssymbol und aktualisieren Sie die Kontolink-URL.

Schaltflächenmodul hinzufügen

Nachdem Sie das Social Media Follow-Modul-Netzwerke abgeschlossen haben, sind wir bereit, ein Button-Modul hinzuzufügen. Über diese Schaltfläche fährt der Benutzer, um die Popout-Leiste anzuzeigen. Fahren Sie fort und fügen Sie das Schaltflächenmodul hinzu und ziehen Sie es über das Social Media Follow-Modul.

Schaltflächeninhalt

Als nächstes aktualisieren Sie den Inhalt der Schaltfläche wie folgt:

• Schaltflächentext: Folgen
• Schaltflächen-Link-URL: #

Schaltflächenstile und -positionierung

Aktualisieren Sie dann die Einstellungen für das Schaltflächendesign wie folgt:

• Schaltflächentextgröße: 16px
• Schaltflächentextfarbe:
• Breite des Tastenrahmens: 0px
• Tastenabstand der Buchstaben: 1px
• Button-Schriftart: Montserrat
• Tastenschriftstärke: Fett
• Schaltflächensymbol: Pfeil nach rechts (siehe Screenshot)
• Marge: 100% übrig
• Polsterung: 100px unten

Fügen Sie dann das folgende benutzerdefinierte CSS zum Hauptelement hinzu:

position: absolute;

Zeileneinstellungen

Sobald die Schaltfläche gestaltet und einsatzbereit ist, aktualisieren Sie die Zeileneinstellungen wie folgt:

• Hintergrundfarbe: #ffffff
• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 64px
• Füllung: 24px oben, 16px unten, 16px links

Reihenkastenschatten

• Box Shadow: siehe Screenshot
• Stärke der Box-Schattenunschärfe: 0px
• Stärke der Box-Schattenunschärfe: 30px
• Schattenfarbe (Desktop): transparent
• Schattenfarbe (Hover): rgba(0,0,0,0.2)

Zeilenpositionierung

Fügen Sie dann das folgende benutzerdefinierte CSS zur Zeile Main Element hinzu:

position: fixed;
top: calc(33.33vh - 55px);
left: 0;

Dadurch wird die Zeile an einer festen Position ein Drittel des Weges nach unten vom oberen Rand des Browsers positioniert.

Pop-Out beim Hover-Effekt mit benutzerdefinierten Rändern

Fügen Sie nun die folgenden Randwerte hinzu, um die Pop-Out-Funktion beim Hover hinzuzufügen.

• Rand (Desktop): -64px übrig
• Rand (Hover): 0px links

Das kümmert sich um die Social-Media-Follow-Buttons-Leiste. Aber wir müssen die Vorlage noch fertigstellen, indem wir das erforderliche Post-Content-Modul erstellen.

Hinzufügen des Post-Content-Moduls zur Vorlage

An diesem Punkt ist die Social Media Follow Buttons Leiste einsatzbereit. Da es sich jedoch um eine Vorlage handelt, müssen wir sicherstellen, dass das Beitragsinhaltsmodul hinzugefügt wird, um den Inhalt der Seite(n) anzuzeigen, die diese Vorlage verwenden.

Neue Zeile mit Post-Content-Modul hinzufügen

Fügen Sie unter der Zeile mit der Leiste für die Schaltflächen zum Folgen von sozialen Medien eine neue einspaltige Zeile hinzu.

Fügen Sie dann das Post-Content-Modul zur Zeile hinzu.

Derzeit ist das Post-Content-Modul auf die Standardbreite der übergeordneten Zeile beschränkt. Wir müssen die Breite und die Auffüllung der Zeile ändern, damit sie die volle Breite des Browsers ohne Lücken umfasst. Dies ist wichtig, da das Post-Content-Modul den Bereich bestimmt, den Sie zum Erstellen einer Seite mit dem Divi Builder benötigen.

Aktualisieren Sie Folgendes:

• Breite: 100%
• Maximale Breite: 100%
• Padding: 0px oben, 0px unten

Aktualisieren Sie nun die Abschnittseinstellungen wie folgt:

• Padding: 0px oben, 0px unten

Das macht es ungefähr. Stellen Sie nun sicher und speichern Sie das Layout, bevor Sie den Editor verlassen. Speichern Sie dann die Änderungen auch für den Theme Builder.

Endergebnis

Um die endgültigen Ergebnisse anzuzeigen, besuchen Sie die Seite, der die Vorlage zugewiesen ist. So sieht die Pop-Out-Leiste für Social Media Follow-Buttons aus.

Abschließende Gedanken

Diese Social-Media-Follow-Buttons-Leiste wird definitiv dazu beitragen, diese wichtigen sozialen Netzwerke in den Vordergrund zu rücken. Die Pop-Out-Funktion stellt sicher, dass die Symbole die Benutzer nicht ablenken. Und Sie können die Leiste mit dem Theme Builder zu jeder Seitenvorlage hinzufügen. Ich hoffe, dies wird eine großartige Ergänzung für Ihr nächstes Projekt sein!

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!