Divi Tutorial: Wie benutzt man das Social Media Modul?

von Blair Jersyer | Divi

Mit dem Social Media-Modul von Divi können Sie Links erstellen, die auf Symbolen basieren, die auf Ihre sozialen Online-Profile wie Facebook, Twitter und Google+ verweisen. Diese Symbole werden in Divis eigenem Stil mithilfe der stilvollen Symbole in das Thema integriert, sodass sie der Verwendung von Plugins von Drittanbietern vorzuziehen sind. Sie können in jedem Modul Links zu mehreren sozialen Profilen hinzufügen und das Modul an einer beliebigen Stelle auf der Seite hinzufügen.

So fügen Sie Ihrer Seite ein Social Media-Modul hinzu

Bevor Sie Ihrer Seite ein Social-Media-Modul hinzufügen können, müssen Sie zuerst zu Divi Builder wechseln. Einmal die Divi-Thema auf Ihrer Website installiert ist, werden Sie eine Schaltfläche bemerken Verwenden Sie Divi Builder über dem Post-Editor, wenn Sie eine neue Seite erstellen. Klicken Sie auf diese Schaltfläche, um Divi Builder zu aktivieren und auf alle Divi Builder-Module zuzugreifen. Klicken Sie dann auf die Schaltfläche Verwenden Sie Visual Builder um den Generator im visuellen Modus zu starten. Sie können auch auf die Schaltfläche klicken Verwenden Sie Visual Builder Wenn Sie Ihre Website im Vordergrund durchsuchen, wenn Sie mit Ihrem WordPress-Dashboard verbunden sind.

Divi Builder

Nachdem Sie Visual Builder eingegeben haben, können Sie auf das graue Pluszeichen klicken, um Ihrer Seite ein neues Modul hinzuzufügen. Neue Module können nur innerhalb von Zeilen hinzugefügt werden. Wenn Sie eine neue Seite starten, denken Sie daran, Ihrer Seite zuerst eine Zeile hinzuzufügen.

Folgen Sie uns auf social networks.png

Suchen Sie das Social Media-Modul in der Liste der Module und klicken Sie darauf, um es Ihrer Seite hinzuzufügen. Die Liste der Mods ist durchsuchbar. Sie können also auch das Wort "Follow us on social media" eingeben und dann auf "enter" klicken, um den Social Media-Mod zu finden und automatisch hinzuzufügen! Sobald das Modul hinzugefügt wurde, werden Sie von der Moduloptionsliste begrüßt. Diese Optionen sind in drei Hauptgruppen unterteilt: Inhalt , Technologie et fortgeschritten .

Beispiel für einen Anwendungsfall: Hinzufügen entsprechender Social Media-Symbole zu einer Kontaktseite

Die Kontaktseite einer Website ist der perfekte Ort, um Ihre sozialen Online-Profile zu präsentieren. Dies bietet Benutzern mehr Möglichkeiten, in Verbindung zu bleiben und fördern Ihr Blog oder Ihr Unternehmen. In diesem Beispiel zeige ich Ihnen, wie Sie Symbole für soziale Medien hinzufügen, damit sie zum aktuellen Design einer Kontaktseite passen.

Fügen Sie Tracking-Schaltflächen auf einer Kontaktseite divi wordpress.jpg hinzu

Fügen Sie mit dem Visual Builder einen neuen regulären Abschnitt mit einer Zeilenbreite von einer Spalte hinzu. Fügen Sie ein Social Media-Modul in Ihre Spalte ein.

Klicken Sie auf der Registerkarte Inhalt der Moduleinstellungen auf die Schaltfläche "Neues Element hinzufügen", um Ihrem Modul ein neues soziales Netzwerk hinzuzufügen. Aktualisieren Sie unter bestimmten Einstellungen für soziale Netzwerke Folgendes:

Inhaltsoptionen

Soziales Netzwerk:
Facebook-Konto-URL: [Geben Sie die URL Ihres Facebook-Kontos ein]

Design-Optionen

Symbolfarbe: # d94b6a (verschiedene Farben)

füge eine passende Farbe hinzu.jpg

Duplizieren Sie dann dieses soziale Netzwerk, um vier weitere Netzwerke hinzuzufügen (Twitter, Google+, LinkedIn und Instagram). Seit Sie das Netzwerk dupliziert haben, wurde die Farbe des benutzerdefinierten Symbols übertragen. Sie müssen also nur jede Netzwerk-URL und jedes Konto aktualisieren.

Duplizieren Sie soziale Netzwerke divi.jpg

Jetzt haben Sie Social-Media-Symbole, die dem Design der Kontaktseite entsprechen.

soziales Netzwerk display.png

Social Media-Inhaltsoptionen

Auf der Registerkarte Inhalt finden Sie den gesamten Inhalt des Moduls, z. B. Text, Bilder und Symbole. All das steuert was erscheint in Ihrem Modul immer auf dieser Registerkarte.

content for divi folge uns auf social networks module.png

Fügen Sie ein neues Objekt hinzu

Hier fügen Sie Ihrem Modul neue Netzwerke hinzu. Wenn Sie auf "Neues Element hinzufügen" klicken, wird ein ganz neues Fenster mit Optionen für Ihr neues Netzwerk geöffnet (unter den Registerkarten "Inhalt", "Design" und "Erweitert"). Im Folgenden finden Sie individuelle Einstellungen für das Social Media-Netzwerk.

Nach dem Hinzufügen Ihres ersten Netzwerks wird eine graue Leiste mit Ihrem Netzwerktitel als Beschriftung angezeigt. Die graue Leiste enthält außerdem drei Schaltflächen, mit denen Sie das Netzwerk bearbeiten, duplizieren oder löschen können.

Verknüpfungsformular

Hier können Sie die Form Ihrer Social-Networking-Symbole entweder als abgerundetes Rechteck oder als Kreis auswählen.

URL öffnet sich

Öffnen Sie Ihre Netzwerk-URL in einem neuen Tab oder im selben Fenster.

Folge dem Knopf

Hier können Sie auswählen, ob die nächste Schaltfläche neben dem Symbol eingefügt werden soll oder nicht.

Administratorkennzeichnung

Dadurch wird die Modulbezeichnung im Konstruktor zur einfachen Identifizierung geändert. Wenn Sie die WireFrame-Ansicht in Visual Builder verwenden, werden diese Beschriftungen im Modulblock der Divi Builder-Oberfläche angezeigt.

Designoptionen für soziale Medien

Auf der Registerkarte Design finden Sie alle Stiloptionen für das Modul, z. B. Schriftarten, Farben, Größe und Abstand. Auf dieser Registerkarte können Sie das Erscheinungsbild Ihres Moduls ändern. Jedes Divi-Modul verfügt über eine lange Liste von Designeinstellungen, mit denen Sie das Aussehen ändern können.

Ändere das Aussehen divi.png

Für dieses Modul bestehen die Entwurfsoptionen aus einem einzelnen Element - Textfarbe.

Textfarbe

Hier können Sie wählen, ob Ihr Text hell oder dunkel sein soll. Wenn Sie auf einem dunklen Hintergrund arbeiten, sollte Ihr Text hell sein. Wenn Ihr Hintergrund hell ist, sollte Ihr Text dunkel sein.

Erweiterte Social Media-Optionen

Auf der Registerkarte "Erweitert" finden Sie Optionen, die erfahrene Webdesigner möglicherweise als nützlich erachten, z. B. benutzerdefinierte CSS- und HTML-Attribute. Hier können Sie benutzerdefiniertes CSS auf jedes der vielen Elemente des Moduls anwenden. Sie können dem Modul auch benutzerdefinierte CSS-Klassen und -IDs zuweisen, mit denen Sie das Modul in der style.css-Datei Ihres untergeordneten Themas anpassen können.

erweiterte einstellungen divi.png

CSS-ID

Geben Sie eine optionale CSS-ID ein, die für dieses Modul verwendet werden soll. Eine ID kann verwendet werden, um einen benutzerdefinierten CSS-Stil zu erstellen oder um auf bestimmte Abschnitte Ihrer Seite zu verlinken.

CSS-Klasse

Geben Sie die optionalen CSS-Klassen ein, die für dieses Modul verwendet werden sollen. Eine CSS-Klasse kann zum Erstellen eines benutzerdefinierten CSS-Stils verwendet werden. Sie können mehrere Klassen hinzufügen, die durch ein Leerzeichen getrennt sind. Diese Klassen können in Ihrem untergeordneten Divi-Thema oder im benutzerdefinierten CSS-Stylesheet verwendet werden, das Sie Ihrer Seite oder Ihrer Website mithilfe von hinzufügen Themenoptionen Divi oder Parameter der Seite Divi Builder.

Benutzerdefiniertes CSS

Benutzerdefiniertes CSS kann auch auf das Modul und alle Interna des Moduls angewendet werden. Im Abschnitt Benutzerdefiniertes CSS finden Sie ein Textfeld, in dem Sie jedem Element benutzerdefinierte CSS-Stylesheets direkt hinzufügen können. CSS-Einträge in diesen Einstellungen sind bereits in Stil-Tags eingeschlossen. Geben Sie einfach die durch Semikolons getrennten CSS-Regeln ein.

Sichtbarkeit

Mit dieser Option können Sie die Geräte steuern, auf denen Ihr Modul angezeigt wird. Sie können Ihr Modul auf Tablets, Smartphones oder Desktops einzeln deaktivieren. Dies ist nützlich, wenn Sie verschiedene Mods auf verschiedenen Geräten verwenden möchten oder wenn Sie das mobile Design vereinfachen möchten, indem Sie bestimmte Elemente von der Seite entfernen.

Individuelle Optionen für Social Media-Inhalte

optin content divi.png

Soziales Netzwerk

Hier können Sie das soziale Netzwerk auswählen, das Sie anzeigen möchten.

Konto-URL

Hier geben Sie die URL für diesen Link in einem sozialen Netzwerk ein. Wenn Sie Facebook als Netzwerk ausgewählt haben, geben Sie hier Ihre URL für die Facebook-Seite ein.

Individuelle Social Media Gestaltungsmöglichkeiten

individuelle Stiloption.png

Symbolfarbe

Divi bietet Standardfarben für jedes standardmäßig definierte soziale Netzwerk. Hier können Sie diese Symbolfarbe ganz einfach nach Belieben ändern.

Erweiterte Social Media-Optionen

Vorauswahlmodul folgen Sie uns divi.png

Benutzerdefiniertes CSS

Benutzerdefiniertes CSS kann auch auf das Modul und alle Interna des Moduls angewendet werden. Im Abschnitt Benutzerdefiniertes CSS finden Sie ein Textfeld, in dem Sie jedem Element benutzerdefinierte CSS-Stylesheets direkt hinzufügen können. CSS-Einträge in diesen Einstellungen sind bereits in Stil-Tags eingeschlossen. Geben Sie einfach die durch Semikolons getrennten CSS-Regeln ein.

[vc_row center_row = "yes"] [vc_column width = "1/2"] [vcex_button target = "blank" layout = "erweitert" align = "center" font_family = "Raleway" font_weight = "700" style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] DIVI-THEMA HERUNTERLADEN [/ vcex_button] [/ width_column] [»vc_col] vc_column] 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "expanded" align = "center "font_family =" Raleway "font_weight =" 700 "style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] DOWNLOAD TEMPLATES DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Andere Divi Tutorials

Veröffentlichen Sie den Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Pin It auf Pinterest