Springe zum Hauptinhalt

Divi Tutorial: Wie man das Navigationsmodul in Artikeln verwendet

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]

Bevor Sie Ihrer Seite ein Divi-Artikel-Navigationsmodul 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.

Navigation in articles.png

Suchen Sie das Navigationsmodul 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 "Navigation in Artikeln" eingeben und dann auf die Eingabetaste klicken, um das Navigationsmodul zu suchen und automatisch 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 benutzerdefinierter Navigationslinks am Ende eines Blogposts

Wenn Sie Navigationslinks zu den folgenden und vorherigen Artikeln am Ende Ihres Artikels haben, können Sie Ihre Besucher optimal mit Ihren Inhalten in Verbindung bringen. In diesem Beispiel werde ich Ihnen zeigen, wie Sie die tatsächlichen Namen der Veröffentlichungstitel für Ihre Navigationslinks anstelle der allgemeinen Linknamen "Vorherige" und "Nächste" verwenden. Ich zeige Ihnen auch, wie Sie einen Rahmen um die Links einfügen, um sie effektiver zu gestalten.

Beispiel Navigationsmenü Titel publication.jpg

Lassen Sie uns beginnen.

Verwenden Sie den Visual Builder, um einen Standardabschnitt mit einem Layout in voller Breite (1-Spalte) am unteren Rand der Publikation hinzuzufügen. Fügen Sie dann nach der Zeile ein Navigationsmodul ein.

Ändern Sie die Titel der divi.png Links

Aktualisieren Sie die Einstellungen für die Veröffentlichungsnavigation wie folgt:

Registerkarte "Inhalt"

Vorheriger Linktext:% title (diese Variable fügt den Titel des Artikels ein)
Text des folgenden Links:% title (diese Variable fügt den Titel des Artikels ein)

Registerkarte Design

Beginnen Sie mit der Bewerbung Ihres Blogs

Laden Sie Dutzende von Logos, Bannern, Website-Vorlagen und vielen anderen Marketing-Tools herunter, um Ihren WordPress-Blog zu vermarkten. [Empfohlen]

Schriftart-Links: PT Sans
Links Schriftgröße: 20px
Links Textfarbe: # 5e95c1
Verwenden Sie den Rand: JA
Rahmenfarbe: # 5e95c1
Breite des Rahmens: 1px
Benutzerdefinierte Polsterung: 20px oben, 20px rechts, 20px unten, 20px links

ändere die Navigation links.png

Das ist alles! Sie haben jetzt Veröffentlichungstitel auf den Navigationslinks

Beispiel für Artikellink auf divi.png

Inhaltsoptionen für das Navigationsmodul

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.

Inhaltsbereichsmodul Titel des Artikels.png

Text des vorherigen Links

Legen Sie einen benutzerdefinierten Text für den vorherigen Link fest. Sie können die Variable% title verwenden, um den Titel des Artikels einzuschließen. Für den Standardwert leer lassen.

Text des folgenden Links

Definieren Sie einen benutzerdefinierten Text für den folgenden Link. Sie können die Variable% title verwenden, um den Titel der Nachricht einzuschließen. Für den Standardwert leer lassen.

In der gleichen Kategorie

Hier können Sie festlegen, ob der vorherige und der nächste Artikel denselben Taxonomiebegriff wie der aktuelle Artikel haben sollen.

Name der benutzerdefinierten Taxonomie

Lassen Sie diese Option leer, wenn Sie dieses Modul für ein Projekt oder einen Artikel verwenden. Andernfalls geben Sie den Namen der Taxonomie ein, damit die Option "In derselben Kategorie" ordnungsgemäß funktioniert.

Vorherigen Link ausblenden

Sie können hier auswählen, ob der vorherige Link ausgeblendet oder angezeigt werden soll.

Verstecken Sie den folgenden Link

Sie können hier auswählen, ob der folgende Link ein- oder ausgeblendet 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.

Gestaltungsmöglichkeiten nach der Navigation

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 Konstruktionsparametern, mit denen Sie alles ändern können.

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]

Abschnitt Design-Modul Artikel title.png

Verknüpfungsschriftart

Sie können die Schriftart Ihres Linktexts ändern, indem Sie die gewünschte Schriftart aus dem Dropdown-Menü auswählen. Divi wird mit Dutzenden großer Schriftarten geliefert, die von Google Fonts unterstützt werden. Standardmäßig verwendet Divi die Open Sans-Schriftart für den gesamten Text auf Ihrer Seite. Sie können den Stil Ihres Textes auch anpassen, indem Sie die Optionen Fett, Kursiv, Großbuchstaben und Unterstrichen verwenden.

Verknüpfungsschriftgröße

Hier können Sie die Größe Ihres Linktextes anpassen. Sie können den Bereichsschieberegler ziehen, um den Text zu vergrößern oder zu verkleinern, oder den Wert der gewünschten Textgröße direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Textfarbe der Links

Standardmäßig werden alle Divi-Textfarben in Weiß oder Dunkelgrau angezeigt. Wenn Sie die Farbe Ihres Linktexts ändern möchten, wählen Sie mit dieser Option die gewünschte Farbe in der Farbauswahl.

Abstand von Links Buchstaben

Der Abstand der Buchstaben wirkt sich auf den Abstand zwischen den Buchstaben aus. Wenn Sie den Abstand zwischen den einzelnen Buchstaben in Ihrem Linktext vergrößern möchten, verwenden Sie den Bereichsregler, um den Abstand anzupassen, oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld rechts neben dem Regler ein. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Höhe der Linkliste

Die Höhe der Zeile wirkt sich auf den Abstand zwischen den einzelnen Textzeilen in Ihren Links aus. Wenn Sie den Abstand zwischen den einzelnen Zeilen vergrößern möchten, verwenden Sie den Bereichsregler, um den Abstand anzupassen, oder geben Sie die gewünschte Abstandsgröße in das Textfeld ein. rechts vom Cursor eingegeben. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Benutze den Rand

Wenn Sie diese Option aktivieren, wird Ihr Modul mit einem Rahmen versehen. Dieser Rahmen kann mit den folgenden bedingten Parametern angepasst werden.

Farbe der Grenze

Diese Option wirkt sich auf die Farbe Ihres Rahmens aus. Wählen Sie im Farbwähler eine benutzerdefinierte Farbe aus, um sie auf Ihren Rand anzuwenden.

Breite der Grenze

Standardmäßig haben die Ränder eine Breite von 1-Pixeln. Sie können diesen Wert erhöhen, indem Sie den Bereichsregler ziehen oder einen benutzerdefinierten Wert in das Eingabefeld rechts neben dem Regler eingeben. Benutzerdefinierte Maßeinheiten werden unterstützt, dh Sie können die Standardeinheit von "px" in eine andere Einheit ändern, z. B. em, vh, vw usw.

Grenzstil

Rahmen unterstützen acht verschiedene Stile: Solide, Gepunktete, Gepunktete, Doppelte, Groove, Crest, Inlay und Start. Wählen Sie den gewünschten Stil aus dem Dropdown-Menü aus, um ihn auf Ihren Rand anzuwenden.

Benutzerdefinierter Rand

Der Rand ist der Abstand, der an der Außenseite Ihres Moduls zwischen dem Modul und dem nächsten Element darüber, darunter oder links und rechts davon eingefügt wird. Sie können einer der vier Seiten des Moduls benutzerdefinierte Randwerte hinzufügen. Entfernen Sie den hinzugefügten Wert aus dem Eingabefeld, um den benutzerdefinierten Rand zu entfernen. Standardmäßig werden diese Werte in Pixel gemessen. Sie können jedoch benutzerdefinierte Maßeinheiten in die Eingabefelder eingeben.

Benutzerdefinierte Polsterung

Füllung ist der in Ihrem Modul hinzugefügte Raum zwischen der Kante des Moduls und seinen internen Elementen. Sie können einer der vier Seiten des Moduls benutzerdefinierte Füllwerte hinzufügen. Entfernen Sie den hinzugefügten Wert aus dem Eingabefeld, um den benutzerdefinierten Rand zu entfernen. Standardmäßig werden diese Werte in Pixel gemessen. Sie können jedoch benutzerdefinierte Maßeinheiten in die Eingabefelder eingeben.

Erweiterte Optionen für das Navigationsmodul

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.

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]

Vorlaufoption Titelmodul von articles.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 Divi-Designoptionen oder Divi Builder-Seiteneinstellungen hinzufügen.

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.

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
114 Aktien
Aktie10
tweet3
Registrieren101