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

Veröffentlicht: 2017-06-27

Im heutigen Divi-Tutorial zeigen wir Ihnen, wie Sie soziale Symbole zum Hauptmenü Ihrer Divi-Website hinzufügen. Wenn Sie diesem Tutorial Schritt für Schritt folgen, können Sie jeder Website, die Sie erstellen, soziale Symbole hinzufügen – sei es für sich selbst oder einen Kunden.

Wir haben bereits die Möglichkeit, mit dem Divi Theme Customizer Social Icons direkt in die Kopf- und Fußzeile einer Website einzufügen. Aber wenn das nicht das ist, was Sie suchen, kann Ihnen dieses Tutorial helfen, denn in vielen Fällen; Die Leute ziehen es vor, die sozialen Symbole in ihrem Hauptmenü anstelle der Kopf- oder Fußzeile ihrer Website zu haben.

Wir zeigen Ihnen genau, wie Sie sie hinzufügen, anpassen und in einem neuen Tab öffnen. Dies sind alle Dinge, die Sie wirklich wissen müssen, damit die sozialen Symbole in Ihrem Hauptmenü einen Mehrwert für Ihre gesamte Website darstellen können.

Warum soziale Symbole zum Hauptmenü hinzufügen?

Websites und Social-Media-Kanäle ergänzen sich in vielen Fällen. Nicht alle Inhalte, die auf einer Website geteilt werden, erscheinen auf den Social-Media-Kanälen und umgekehrt. Aus diesem Grund ist es keine Seltenheit, Ihre Website auf Ihren Social Media-Kanälen und Ihre Social Media-Kanäle auf Ihrer Website zu bewerben. sehr ermutigt.

Sie möchten, dass die Menschen mit Ihrem Unternehmen oder Ihrer Marke so interagieren, wie sie es am besten kennen. Ihre Website ist für sie meist ' Neuland '. Die Barriere, Sie direkt über Ihre Website zu kontaktieren, kann daher größer sein als bei Social-Media-Kanälen. Die meisten Besucher Ihrer Facebook- oder Twitter-Seite sind bereits in die Plattformen integriert und das angenehme Gefühl kann ihr Verhalten positiv beeinflussen.

Aus diesem Grund ist es insgesamt sehr zu empfehlen, Socials-Icons auf Ihrer Website zu platzieren. Aber warum sollten Sie sie explizit in Ihrem Hauptmenü freigeben? Wir haben zwei der Hauptgründe aufgelistet.

Leicht zu finden/Menü folgt dem Besucher während seines Besuchs

Wenn Sie Ihrer Website soziale Symbole hinzufügen, möchten Sie, dass diese so sichtbar wie möglich sind. Die Leute sollten sich nicht anstrengen müssen, um die sozialen Symbole auf Ihrer Website zu finden. Hier kann das Einfügen der sozialen Symbole im Hauptmenü den Unterschied ausmachen. Das Hauptmenü begleitet eine Person während ihres gesamten Aufenthalts auf Ihrer Website. Sie müssen nicht nach den Symbolen suchen, die Symbole kommen zu Ihnen. Das einzige, was die Person tun muss, ist zu klicken und sie wird dorthin gelangen.

Das Hauptmenü begleitet eine Person während ihres gesamten Aufenthalts auf Ihrer Website. Sie müssen nicht nach den Symbolen suchen, die Symbole kommen zu Ihnen. Ein Besucher muss sie nur anklicken und schon kommt er dorthin.

Auslösende Aktion

Wie bereits erwähnt; Social-Media-Kanäle und die Websites ergänzen sich. Sie arbeiten zusammen und haben in der Regel die gleichen Ziele, wie potenzielle Leads zu informieren und sie für die angebotenen Dienstleistungen oder Produkte zu gewinnen. Je öfter sie mit ihnen konfrontiert werden, desto wahrscheinlicher wird ihre Neugier geweckt

Um die Verbindung zwischen Website und Social-Media-Kanälen zu unterstützen, ist es gut, die Besucher so oft wie möglich mit den Social Icons zu konfrontieren. Je mehr sie mit ihnen konfrontiert werden, desto wahrscheinlicher wird ihre Neugierde geweckt und desto wahrscheinlicher werden sie schließlich darauf klicken.

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

Abonnieren Sie unseren Youtube-Kanal

Installieren Sie Font Awesome

Zunächst müssen wir Font Awesome auf unserer WordPress-Website installieren. Wir werden dies tun, indem wir etwas CSS-Code zu den Theme-Optionen von Divi hinzufügen.

Öffnen Sie Ihre WordPress-Website, gehen Sie zu Divi > Theme-Optionen > Integration und fügen Sie den folgenden Code in den Abschnitt <head> ein: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />

Font Awesome sollte jetzt zu den Schriftarten hinzugefügt werden, die auf Ihrer Website verwendet werden. Sie können diese Symbole jetzt zu Ihrem Hauptmenü hinzufügen, indem Sie dem nächsten Teil unseres Beitrags Schritt für Schritt folgen.

Beginnen Sie mit der Erstellung des Hauptmenüs

Höchstwahrscheinlich haben Sie bereits Ihr eigenes benutzerdefiniertes Hauptmenü erstellt, in dem Sie alle Seiten aufgelistet haben, die im Hauptmenü Ihrer Website angezeigt werden sollen. Wenn Sie dies noch nicht getan haben, gehen Sie in der Darstellung auf die Seite "Menüs" und erstellen Sie ein neues Menü.

Benennen Sie als Nächstes das Menü, fügen Sie die Seiten hinzu, die in Ihrem Hauptmenü angezeigt werden sollen, und wählen Sie unten die Option "Hauptmenü".

Soziale Symbole hinzufügen

Als nächstes möchten wir die sozialen Symbole hinzufügen. Beim Erstellen des Hauptmenüs können Sie auswählen, wo Ihre sozialen Symbole angezeigt werden sollen. In den meisten Fällen kommen sie direkt nach den Seiten, aber Sie können sie auch an die erste Stelle setzen. Für alle wichtigen und beliebtesten Websites gibt es Social-Media-Symbole. von Facebook zu Twitter, Instagram, LinkedIn und mehr.

Öffnen Sie zunächst den folgenden Link auf der Font Awesome-Website. Wir benötigen diese Website für den nächsten Teil dieses Beitrags, in dem wir die Symbole manuell hinzufügen.

Symbole manuell hinzufügen

Die gleiche Arbeitsweise gilt für jedes soziale Symbol, das Sie Ihrem Hauptmenü hinzufügen. Als Beispiel zeigen wir Ihnen, wie Sie das Instagram-Symbol hinzufügen. Für alle anderen Symbole, die Sie ebenfalls hinzufügen möchten; wissen, dass es die gleiche Arbeitsweise ist (nur das Symbol, der HTML-Code und die URL unterscheiden sich entsprechend).

Öffnen Sie die Option "Benutzerdefinierte Links" und es werden zwei Felder angezeigt: URL und Navigationsbezeichnung. Offensichtlich geben Sie im URL-Feld die URL ein, die einen Besucher zu einem der Social-Media-Kanäle führt. In diesem Beispiel möchten wir, dass das Symbol zu Instagram führt, also geben Sie einfach Ihre Instagram-URL ein.

Rufen Sie als Nächstes die Font Awesome-Website in Ihrem Browser auf und suchen Sie über die Suchleiste nach dem Instagram-Symbol. Ebenso können Sie nach dem Facebook-, LinkedIn- und jedem anderen Symbol suchen.

Nachdem Sie auf das Instagram-Symbol geklickt haben, sehen Sie, dass die Website folgenden HTML-Code bereitstellt: 

<i class="fa fa-instagram" aria-hidden="true"></i>

Dies ist der genaue Code, den wir im Feld Navigationsbezeichnung verwenden müssen. Vervollständigen Sie also den benutzerdefinierten Link, indem Sie den Code kopieren und in das Feld einfügen.

Wiederholen Sie den gleichen Vorgang für jedes der sozialen Symbole, die in Ihrem Hauptmenü angezeigt werden sollen, und sehen Sie sich an, wie es im Frontend Ihrer Website aussieht.

Aussehen der sozialen Symbole ändern

Kollektive Änderungen am Hauptmenü (einschließlich sozialer Symbole)

Mit dem Theme Customizer können Sie alle Änderungen an der Darstellung, die Sie an Ihrem Hauptmenü vornehmen möchten, an einem Ort vornehmen.

Die Änderungen, die Sie mit den Divi-Optionen am Hauptmenü vornehmen können, gelten auch für die sozialen Symbole. Wenn Sie beispielsweise Ihrem Hauptmenü eine bestimmte Farbe zuweisen, haben die sozialen Symbole dieselbe Farbe. Das liegt daran, dass wir eine Schriftart anstelle eines Bildes verwenden, damit dies funktioniert.

Sie können all diese Änderungen, die Sie an der Darstellung im Theme Customizer vornehmen möchten, vornehmen, indem Sie zu Kopfzeile & Navigation > Primäre Menüleiste gehen. Die von Ihnen vorgenommenen Änderungen werden in Echtzeit angewendet und geben Ihnen einen guten Überblick darüber, wie Ihr Hauptmenü aussehen soll.

Soziale Symbole in neuem Tab öffnen

Dieser Teil des Beitrags ist etwas, was Sie mit den sozialen Symbolen tun können. Sie möchten Ihre Besucher wahrscheinlich nicht von der Website wegschicken, obwohl sie zu Ihren Social-Media-Kanälen gehen. Sie möchten beide Interaktionen so lange wie möglich am Leben erhalten, indem Sie die Social-Media-Links jedes Mal in einem neuen Tab öffnen, wenn jemand darauf klickt.

Wir können die Option "In neuem Tab öffnen" problemlos für alle Social-Media-Symbole aktivieren, indem wir zu dem zuvor erstellten Menü zurückkehren. Wir müssen alle Anpassungen manuell an jedem der Symbole vornehmen. In diesem Beispiel nehmen wir die Änderungen am Instagram-Symbol vor.

Fahren Sie fort und löschen Sie die URL, die Sie im URL-Feld angegeben haben, und fügen Sie stattdessen den folgenden Code in die Navigations-URL ein: 

<a href="http://www.instagram.com" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>

Machen Sie dasselbe für jedes der Symbole, wenn Sie möchten, dass sie in einem neuen Tab geöffnet werden. Jedes Mal, wenn ein Besucher darauf klickt, werden sie in einem neuen Tab geöffnet, der es Ihnen ermöglicht, Ihre Besucher so lange wie möglich bei sich zu halten.

Abschließende Gedanken

Dieses Tutorial wird Ihnen sicherlich helfen, soziale Icons in Ihre eigene Divi-Website zu integrieren, wie Sie es möchten. Sie können sie anpassen und an den Rest Ihres Hauptmenüs anpassen. Wenn Sie Fragen oder Anregungen haben; Stellen Sie sicher, dass Sie einen Kommentar im Kommentarbereich unten hinterlassen. Wir bleiben in Kontakt und versuchen alle Fragen oder Anregungen zu beantworten.

Abonnieren Sie unbedingt unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie keine große Ankündigung, keinen nützlichen Tipp oder ein Divi-Werbegeschenk verpassen!

Ausgewähltes Bild über Oceans / shutterstock.com