So fügen Sie soziale Symbole zum Hauptmenü von Divi hinzu

Es ist praktisch unmöglich, eine erfolgreiche Website zu betreiben, ohne eine dedizierte Social-Media-Präsenz zu haben. Egal, ob Sie Instagram, Twitter, TikTok, Facebook oder eine Kombination aus diesen und anderen auswählen, die Leute möchten direkt mit Ihnen und Ihrer Marke interagieren. Stellen Sie sicher, dass Sie soziale Symbole im Hauptmenü von Divi haben, um den Verkehr von Ihrer Website zu dem Netzwerk Ihrer Wahl zu leiten. Es ist schnell und einfach, und wir werden Sie durch jeden Schritt führen.

Lass uns anfangen!

Vorschau

Desktop

Handy, Mobiltelefon

Verwenden Sie den Divi Theme Builder, um ein Global Header Freebie hochzuladen

Für diesen Artikel verwenden wir das Tennis Club-Layout-Paket und das Kopf-/Fußzeilen-Freebie. Sie können das Layoutpaket aus Ihrem Divi-Builder und das Kopf-/Fußzeilenpaket aus unserem Blog herunterladen. Wenn Sie es herunterladen, liegen die Dateien als ZIP- Archiv vor. Stellen Sie sicher, dass Sie sie extrahieren, damit Sie eine .json- Datei zum Hochladen in Divi haben.

Gehen Sie nun in Ihr WordPress-Dashboard und suchen Sie den Divi Theme Builder unter Divi – Theme Builder . Klicken Sie auf das Auf- und Ab-Pfeil-Symbol in der oberen rechten Ecke der Seite. Dadurch wird das Portabilitäts- Modal geöffnet, wählen Sie die Registerkarte Importieren , suchen Sie die .json- Datei für die heruntergeladene Kopf-/Fußzeile und klicken Sie auf Divi Theme Builder-Vorlagen importieren .

Sie möchten dann in den Header-Bereich Ihrer Site gehen. Da es sich um soziale Symbole handelt, werden wir sie in den globalen Header einfügen, da wir davon ausgehen, dass sie auf allen Seiten Ihrer Website angezeigt werden sollten (sofern nicht anders angegeben).

Sie sollten jetzt im Builder sein. Wenn Sie die obigen Anweisungen befolgt haben, sollte der von Ihnen hochgeladene neue Header bereits vorhanden sein.

Sie werden vielleicht feststellen, dass es hier bereits soziale Symbole gibt. Diese sozialen Symbole befinden sich jedoch nicht im Divi- Hauptmenü , auf das wir heute jedoch hinarbeiten. Kommen wir also ins Unkraut, oder?

Social Icons zur primären Menüleiste hinzufügen

Als erstes ändern wir die Zeilen-/Spaltenstruktur. Wir möchten die Zeile in Abschnitt #2 finden (die untere mit den Links Home/Contact ).

Wir wählen die zweispaltige Struktur für dieses Tutorial aus, aber es ist das, was für Ihre Website am besten funktioniert. Sobald Sie das ausgewählt haben, gehen Sie in die Zeileneinstellungen und navigieren Sie zur Registerkarte Design . Suchen Sie das Größenmenü und schalten Sie Benutzerdefinierte Bundstegbreite verwenden ein. Setzen Sie den Wert für Bundstegbreite auf 1. Sie können die Zahl eingeben oder den Schieberegler verwenden.

Klicken Sie auf das grüne Häkchen, um Ihre Einstellungen zu speichern. Gehen Sie dann zurück in die Zeileneinstellungen. Wählen Sie diesmal das Einstellungszahnrad für die obere/erste/linke Spalte aus.

Navigieren Sie als Nächstes zur Registerkarte Erweitert . Suchen Sie den Bereich Custom CSS und klicken Sie in das Feld Main Element . In diesem Feld möchten Sie das folgende CSS hinzufügen.

width:80%;

oder

width:80%!important;

Möglicherweise müssen Sie das Tag !important hinzufügen, um dieses Element zu formatieren. Das ist okay. Es sollte keine Leistungsprobleme oder Spaghetti-Code verursachen, da es sich um ein einzelnes Element handelt.

Dann gehen Sie in die Ansprechbarkeit Einstellungen und verwenden den gleichen Code die Breite für die Spalte wieder auf 100% für mobile Geräte zu ändern.

Als nächstes wiederholen Sie diesen Schritt für die zweite Spalte. Setzen Sie nur dieses Mal den Standardwert auf 20 % und haben Sie immer noch den mobilen Wert auf 100 % .

Speichern Sie anschließend Ihre Änderungen und machen Sie sich bereit, Ihre Social-Media-Symbole hinzuzufügen und zu gestalten.

Social Media Follow-Modul hinzufügen

Klicken Sie auf das schwarze + Symbol in Spalte 2 , um ein neues Modul hinzuzufügen, und scrollen Sie, bis Sie Social Media Follow finden . Fügen Sie es ein.

Unabhängig von der Kopfzeile, die Sie verwenden, werden die Standardsymbole für soziale Medien höchstwahrscheinlich nicht zu Ihrem Stil passen. Sie werden auch nicht richtig positioniert. Der nächste Schritt besteht darin, sie richtig zu stylen und zu platzieren. Gehen Sie in den Einstellungen des Social Media Follow- Moduls zu Design und dann zu Ausrichtung . Wählen Sie aus, wo das Modul platziert werden soll.

Wir wählen rechtsbündig für den Desktop aus und gehen dann in die Reaktionsoptionen und zentrieren es.

Als nächstes scrollen Sie nach unten in das Symbolmenü . Wählen Sie die Farbe des gewünschten Symbols. Das ist das f für Facebook, der Vogel für Twitter, die Kamera für Instagram. Dies ist zum Beispiel nicht der blaue Hintergrund.

Als nächstes steht der Abstand an. Wirklich die Hauptsache, die angepasst werden muss, ist der obere Rand. Wir wenden einen oberen Rand von 1,5 vw an, damit er mit dem Menütext zentriert ist. Wenn Sie es mehr oder weniger für das Handy haben möchten, können Sie das auch anpassen.

Klicken Sie nun auf die Registerkarte Inhalt und gehen Sie zu dem einzelnen Symbol des sozialen Netzwerks, das Sie anpassen möchten. Sie werden diese Schritte für jedes Symbol wiederholen, das Sie für Ihre Site auswählen.

Scrollen Sie nach unten zu Hintergrund und wählen Sie die gewünschte Farbe aus, die dem Design Ihrer Website entspricht. Denken Sie auch hier daran, dass dies nur den Hintergrund dieses bestimmten Symbols ändert.

Möglicherweise möchten Sie auch die Farbe dieses bestimmten Symbols ändern. Sie können dies unter den Registerkarten Design und Symbol tun, genau wie im gesamten Modul selbst. Diese Einstellung überschreibt die allgemeine Einstellung, sodass Sie sich keine Sorgen machen müssen, andere zu stören, wenn Sie einmalige Farben wünschen.

Scrollen Sie dann nach unten zum Eintrag Border unter der Registerkarte Design und darin finden Sie die Border Width . Setzen Sie diesen Wert auf 3px und dann eine Randfarbe wählen , die aus der Divi Primary Menü zeichnet sich durch den Hintergrund.

An dieser Stelle kehren Sie zur Registerkarte Inhalt zurück und wiederholen diese Schritte für jedes Symbol des sozialen Netzwerks, das Sie anzeigen möchten. Wenn Sie möchten, dass alle Symbole in diesem Modul dasselbe Design aufweisen, können Sie einfach mit der rechten Maustaste auf das von Ihnen entworfene Symbol klicken und Elementstile kopieren auswählen.

Klicken Sie anschließend mit der rechten Maustaste auf die anderen Netzwerke, die Sie formatieren möchten, und wählen Sie Elementstile einfügen .

Und das ist es! Klicken Sie auf die Schaltfläche Speichern in der unteren rechten Ecke des Bildschirms, um das Gesamtlayout zu speichern. Dann, Sie sind sicher in der X aus dem Bearbeitungsbildschirm in der oberen rechten Ecke.

Stellen Sie sicher, dass auf der Seite Divi Theme Builder oben links Alle gespeicherten Änderungen angezeigt werden . Wenn nicht, klicken Sie auf Änderungen speichern . Sobald dies erledigt ist, wird Ihre Site live mit den Social-Media-Symbolen in Ihrem Divi-Hauptmenü angezeigt!

Endgültige Ergebnisse

Und so sollten Ihre Endergebnisse aussehen.

Desktop

Handy, Mobiltelefon

Einpacken

Mit Divi ist es ein Kinderspiel, sicherzustellen, dass Ihr Publikum Ihre wichtigsten sozialen Netzwerke immer finden kann. In nur wenigen Schritten können Sie eines unserer kostenlosen Kopf-/Fußzeilenpakete anpassen, um Ihre Social-Media-Symbole in das Hauptmenü (oder wo immer Sie sie möchten) aufzunehmen. Viel Glück!

Was halten Sie von Social-Media-Symbolen im Hauptmenü? Wo platzierst du sie am liebsten?