Springe zum Hauptinhalt

Divi Tutorial: Wie benutzt man das Social Media Modul?

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 600.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Mit dem Divi Social Media-Modul können Sie symbolbasierte Links zu Ihren sozialen Online-Profilen wie Facebook, Twitter und Google+ erstellen. Diese Symbole werden im Stil von Divi Own mit ihren eleganten Symbolen in das Thema integriert, wodurch sie der Verwendung von Plugins von Drittanbietern vorgezogen werden. 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 zunächst in Divi Builder springen. Sobald das Divi-Design auf Ihrer Website installiert ist, werden Sie eine Schaltfläche bemerken Verwenden Sie Divi Builder jedes Mal, wenn Sie eine neue Seite erstellen, über dem Publisher. 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 aufgerufen haben, können Sie auf das graue Plus-Symbol klicken, um Ihrer Seite ein neues Modul hinzuzufügen. Neue Module können nur innerhalb der Zeilen hinzugefügt werden. Wenn Sie eine neue Seite beginnen, vergessen Sie nicht, 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 Module ist durchsuchbar, dh Sie können auch das Wort "Follow us on social networks" eingeben und dann auf "enter" klicken, um das Social Media-Modul automatisch zu finden und hinzuzufügen! Sobald das Modul hinzugefügt wurde, werden Sie von der Liste der Optionen des Moduls begrüßt. Diese Optionen sind in drei Hauptgruppen unterteilt: Inhalt , Konzeption et fortgeschritten .

Anwendungsbeispiel: Hinzufügen entsprechender Social Media-Symbole zu einer Kontaktseite

Die Kontaktseite einer Website ist der perfekte Ort, um Ihre sozialen Profile online zu präsentieren. Dies bietet Benutzern mehr Möglichkeiten, in Verbindung zu bleiben und für Ihr Blog oder Geschäft zu werben. In diesem Beispiel zeige ich Ihnen, wie Sie Social Media-Symbole hinzufügen, die dem aktuellen Design einer Kontaktseite entsprechen.

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 Zeile einer Spalte in voller Breite 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 den spezifischen Einstellungen für soziale Netzwerke die folgenden Elemente:

Inhaltsoptionen

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

Design-Optionen

Symbolfarbe: # d94b6a (farblich abgestimmt)

füge eine passende Farbe hinzu.jpg

Dann duplizieren Sie dieses soziale Netzwerk, um vier weitere Netzwerke hinzuzufügen (Twitter, Google+, LinkedIn und Instagram). Da Sie das Netzwerk dupliziert haben, wurde die Farbe des benutzerdefinierten Symbols übertragen. Aktualisieren Sie einfach jede Netzwerk-URL und jedes Konto.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

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

In der Registerkarte Inhalt finden Sie alle Inhaltselemente des Moduls, wie z. B. Text, Bilder und Symbole. All das kontrolliert 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 völlig neues Optionsfenster für Ihr neues Netzwerk geöffnet (unter den Registerkarten "Inhalt", "Design" und "Erweitert"). Im Folgenden finden Sie die individuellen Einstellungen des Social Media-Netzwerks.

Nach dem Hinzufügen Ihres ersten Netzwerks wird eine graue Leiste mit dem Titel Ihres Netzwerks als Bezeichnung 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 wird geöffnet

Wählen Sie aus, ob Sie Ihre Netzwerk-URL in einem neuen Tab oder im selben Fenster öffnen möchten.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Folge dem Knopf

Hier können Sie auswählen, ob die nächste Schaltfläche neben dem Symbol angezeigt werden soll.

Administratorkennzeichnung

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

Designoptionen für soziale Medien

Auf der Registerkarte Design finden Sie alle Stiloptionen des Moduls, z. B. Schriftarten, Farben, Größen und Abstände. Auf dieser Registerkarte können Sie das Erscheinungsbild Ihres Moduls ändern. Jedes Divi-Modul verfügt über eine lange Liste von Entwurfsparametern, mit denen Sie das Erscheinungsbild ändern können.

Ändere das Aussehen divi.png

Bei diesem Modul bestehen die Entwurfsoptionen aus einem einzigen Element - der 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 klar sein. Wenn Ihr Hintergrund klar ist, muss Ihr Text dunkel sein.

Erweiterte Social Media-Optionen

Auf der Registerkarte Erweitert finden Sie Optionen, die für erfahrene Webdesigner hilfreich sein könnten, z. B. benutzerdefinierte CSS- und HTML-Attribute. Hier können Sie benutzerdefiniertes CSS auf eines der vielen Elemente des Moduls anwenden. Sie können dem Modul auch benutzerdefinierte Klassen und CSS-IDs zuweisen, mit denen Sie das Modul in der Datei style.css 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 zum Erstellen eines benutzerdefinierten CSS-Stils oder zum Erstellen von Links zu bestimmten Abschnitten Ihrer Seite verwendet werden.

CSS-Klasse

Geben Sie die optionalen CSS-Klassen ein, die für dieses Modul verwendet werden sollen. Mit einer CSS-Klasse kann ein benutzerdefinierter CSS-Stil erstellt werden. Sie können mehrere Klassen hinzufügen, die durch ein Leerzeichen getrennt sind. Diese Klassen können in Ihrem untergeordneten Divi-Design oder in dem benutzerdefinierten CSS-Stylesheet verwendet werden, das Sie Ihrer Seite oder Website mithilfe von hinzufügen Themenoptionen Divi oder Parameter der Seite Divi Builder.

Benutzerdefiniertes CSS

Benutzerdefiniertes CSS kann auch auf das Modul und eines der internen Elemente des Moduls angewendet werden. Im Abschnitt Benutzerdefiniertes CSS finden Sie ein Textfeld, in dem Sie jedem Element direkt benutzerdefinierte CSS-Stylesheets hinzufügen können. Die CSS-Einträge in diesen Parametern sind bereits in die Style-Tags eingeschlossen. Geben Sie einfach die durch Semikolon 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 Module auf verschiedenen Geräten verwenden oder das mobile Design vereinfachen möchten, indem Sie bestimmte Elemente 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.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Konto-URL

Hier geben Sie die URL dieses sozialen Netzwerks ein. Wenn Sie Facebook als Netzwerk ausgewählt haben, geben Sie hier die URL Ihrer Facebook-Seite ein.

Individuelle Social Media Gestaltungsmöglichkeiten

individuelle Stiloption.png

Farbe des Icons

Divi hat Standardfarben für jedes soziale Netzwerk, das standardmäßig definiert ist. Hier können Sie diese Symbolfarbe ganz einfach nach Ihren Wünschen ändern.

Erweiterte Social Media-Optionen

Vorauswahlmodul folgen Sie uns divi.png

Benutzerdefiniertes CSS

Benutzerdefiniertes CSS kann auch auf das Modul und eines der internen Elemente des Moduls angewendet werden. Im Abschnitt Benutzerdefiniertes CSS finden Sie ein Textfeld, in dem Sie jedem Element direkt benutzerdefinierte CSS-Stylesheets hinzufügen können. Die CSS-Einträge in diesen Parametern sind bereits in die Style-Tags eingeschlossen. Geben Sie einfach die durch Semikolon getrennten CSS-Regeln ein.

Andere Divi Tutorials

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen 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.

Zurück nach oben
9 Aktien
Aktie4
tweet1
Registrieren4