So erstellen Sie eine dynamische HTML-Sitemap-Seite in Divi

Eine HTML-Sitemap-Seite kann für Benutzer nützlich sein, die in einer Panoramaansicht auf Ihrer Divi-Site navigieren möchten. Grundsätzlich ist eine HTML-Sitemap (wie der Name schon sagt) eine Karte Ihrer Site in HTML. Die Sitemap-Seite enthält normalerweise eine organisierte Liste mit Links zu allen relevanten Inhalten Ihrer Website. Eine HTML-Sitemap-Seite kann manuell erstellt werden, es hilft jedoch, wenn Sie den Inhalt der Sitemap-Seite dynamisch generieren können, sodass Sie sich nicht um ständige Aktualisierungen kümmern müssen.

In diesem Tutorial zeigen wir Ihnen, wie Sie in Divi mit einer Kombination aus Divi Design und dem Plugin WP Sitemap Page ein dynamisches HTML-Sitemap-Seitenlayout erstellen. Die Einrichtung ist denkbar einfach und das Ergebnis überraschend effektiv.

Lass uns anfangen.

Vorgeschmack

Laden Sie das HTML-Sitemap-Seitenlayout KOSTENLOS herunter

Um das Sitemap-Seitenlayout aus diesem Tutorial in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Abonnieren Sie unseren Youtube-Kanal

Um das Layout in Ihre Seite zu importieren, entpacken Sie einfach die ZIP-Datei und ziehen Sie die JSON-Datei in den Divi Builder.

HINWEIS: Dieses Layout basiert auf den Shortcodes, die mit dem WP-Sitemap-Seiten-Plugin verwendet werden. Wenn das Plugin auf Ihrer Website nicht aktiv ist, werden die Inhalte in den Modulen nicht angezeigt.

Was Sie für dieses Tutorial benötigen

Für dieses Tutorial benötigen Sie Folgendes:

1. Das Divi-Thema.
2. WordPress-Inhalte. Um HTML-Sitemap-Seiteninhalte zu generieren, müssen Sie tatsächlich Seiten, Beiträge, Kategorien, Produkte usw. auf Ihrer Site haben.
3. Das WP-Sitemap-Seiten-Plugin. Darauf können Sie über das WordPress-Dashboard zugreifen, das wir Ihnen im Folgenden zeigen.

Kommen wir zum Tutorial, ja?

Unterschied zwischen XML- und HTML-Sitemaps

Wenn Sie neu bei Sitemaps sind, gibt es im Wesentlichen zwei Arten – XML und HTML. Die XML-Sitemaps werden speziell generiert, um Suchmaschinen eine detaillierte Karte Ihrer Site zu bieten. Zum größten Teil existieren XML-Sitemaps ausschließlich für Suchmaschinen wie Google, um ihnen das Crawlen Ihrer Website zu erleichtern, was dazu beiträgt, Ihr Ranking zu verbessern. Als solche sind XML-Sites nicht für den Benutzer bestimmt. Hier kommen HTML-Sitemaps ins Spiel. HTML-Sitemaps sind integriertes echtes HTML (und PHP, da wir Divi und WordPress verwenden) auf einer tatsächlichen Sitemap-Seite auf Ihrer Website. Die Idee ist, eine organisierte Auflistung aller relevanten Website-Inhalte (Posts, Seiten, Produkte, Kategorien usw.) für den Benutzer an einem bequemen Ort zu erstellen. Im Grunde ist eine HTML-Sitemap-Seite wie ein Mega-Menü für Ihre gesamte Site.

Weitere Informationen zu Sitemaps (z. B. zum Erstellen einer XML-Sitemap in WordPress) finden Sie in unserem Beitrag zum Erstellen einer Sitemap für Ihre WordPress-Site.

Einrichten des Plugins

Für dieses Tutorial verwenden wir ein KOSTENLOSES, aber effektives WordPress-Plugin namens WP Sitemap Page, das es uns ermöglicht, Sitemap-Inhalte durch die Verwendung von Shortcodes dynamisch innerhalb eines Divi-Moduls anzuzeigen.

Um das Plugin herunterzuladen, gehen Sie zu Ihrem WordPress-Dashboard und navigieren Sie zu Plugins > Neu hinzufügen. Suchen Sie dann über die Suchleiste nach dem wp-Sitemap-Seiten-Plugin und installieren und aktivieren Sie das Plugin.

Um die Plugin-Einstellungen der WP-Sitemap-Seite zu öffnen, navigieren Sie zu Einstellungen > WP-Sitemap-Seite. Dort sehen Sie die verfügbaren Einstellungen. Für dieses Tutorial belassen wir die Optionen auf der Registerkarte Einstellungen allein, können sie aber später anzeigen.

Klicken Sie auf die Registerkarte Verwendung, um alle verfügbaren Shortcode-Beispiele anzuzeigen, die wir verwenden können, um den Inhalt unserer Sitemap-Seite anzuzeigen. Die hervorgehobenen sind diejenigen, die wir verwenden werden.

Erstellen der HTML-Sitemap-Seite in Divi

Sobald die Plugins eingerichtet sind, können wir mit der Gestaltung des Sitemap-Seitenlayouts in Divi beginnen.

Erstellen einer neuen Seite

Erstellen Sie zunächst eine neue Seite, geben Sie ihr den Titel „Sitemap“ und klicken Sie dann auf „Divi Builder verwenden“.

Hinzufügen des vorgefertigten Layouts zur Seite

Sie werden mit drei Optionen begrüßt, wie Sie Ihre Seite erstellen möchten. Wählen Sie „Wählen Sie ein vorgefertigtes Layout“.

Suchen und finden Sie dann das Magazin-Layout-Paket und klicken Sie, um das Kategorien-Seitenlayout zu verwenden.

Löschen nicht benötigter Elemente

Da wir nur den oberen Abschnitt dieses vorgefertigten Layouts verwenden, löschen Sie nach dem Laden des Layouts auf der Seite alle Abschnitte unter dem ersten Abschnitt.

Fügen Sie dann unterhalb des oberen Abschnitts einen neuen regulären Abschnitt hinzu.

Hinzufügen von Zeile 1 zum Anzeigen von Seiten

Für unsere erste Zeile werden wir HTML-Sitemap-Seiteninhalte hinzufügen, die alle Seiten der Site anzeigen. Beginnen wir mit dem Hinzufügen einer einspaltigen Zeile.

Hinzufügen von Textmodul zu Anzeigeseiten

Fügen Sie innerhalb der Zeile ein neues Textmodul hinzu.

Fügen Sie dann Folgendes in das Inhaltsfeld unter der Textregisterkarte ein:

<h2>Pages</h2>

[wp_sitemap_page only="page" display_title="false"]

Einstellungen für Textdesign

Obwohl der größte Teil des Textinhalts durch einen Shortcode generiert wird, können wir diese Elemente dennoch mit den integrierten Divi-Designeinstellungen entwerfen. Wechseln Sie zur Registerkarte Design und aktualisieren Sie Folgendes:

• Textschriftart: Montserrat
• Schriftstärke des Textes: Fett

Wählen Sie dann die Registerkarte Linkeinstellungen und aktualisieren Sie Folgendes:

• Linktextfarbe: #333333

Wählen Sie als Nächstes die Registerkarte Einstellungen für die ungeordnete Liste aus und aktualisieren Sie Folgendes:

• Textfarbe der ungeordneten Liste: #c5e0dc
• Stiltyp der ungeordneten Liste: Quadrat
• Position des ungeordneten Listenstils: Innen
• Einrückung der ungeordneten Listenelemente: 5vw

HINWEIS: Alle Linkstile überschreiben die Stile der ungeordneten Liste. Aus diesem Grund können wir diese ungeordnete Listentextfarbe hinzufügen und sie gilt nur für die kleinen quadratischen Aufzählungszeichen.

Aktualisieren Sie den Stil Überschrift 2 wie folgt:

• Überschrift 2 Schriftart: Montserrat
• Überschrift 2 Schriftstärke: Fett
• Überschrift 2 Textgröße: 3vw (Desktop), 38px (Tablet)

Aktualisieren Sie dann den Abstand mit einem negativen linken Rand, um das Modul etwas nach links zu ziehen. Dies fügt ein schönes überlappendes Design mit unserer Überschrift und unserem Box-Schatten hinzu.

Schließlich fügen Sie dem Modul eine benutzerdefinierte CSS-Klasse hinzu, damit wir sie später mit benutzerdefiniertem CSS zum Aufteilen des Inhalts in Spalten ausrichten können.

• CSS-Klasse: column-list

Zeileneinstellungen

Aktualisieren Sie nun die Zeileneinstellungen wie folgt:

• Rand: 5vw unten

• Box Shadow: siehe Screenshot
• Horizontale Position des Kastenschattens: -5vw
• Vertikale Position des Boxschattens: 0px
• Schattenfarbe: #c5e0dc

Hinzufügen von Zeile 2 zum Anzeigen von Beiträgen und Kategorien

Zeile duplizieren, um eine neue zu erstellen

In unserer zweiten Reihe werden wir HTML-Sitemap-Seiteninhalte für unsere Blog-Beiträge anzeigen. Um die zweite Zeile zu erstellen, duplizieren Sie die Zeile, die wir gerade erstellt haben, die unsere Seiten enthält.

Textmodul mit Shortcode aktualisieren, um Kategorien anzuzeigen

Öffnen Sie dann die Einstellungen für den Textbaustein in der duplizierten Zeile und ersetzen Sie den Inhalt durch Folgendes:

<h2>Categories</h2>

[wp_sitemap_page only="category" display_title="false"]

Dieser Shortcode zeigt die Beitragskategorien dynamisch an.

Textmodul duplizieren, um separate Titel für Beiträge nach Kategorie anzuzeigen

Um die Beiträge nach Kategorien anzuzeigen, duplizieren Sie das Textmodul, das die Beitragskategorien enthält, und aktualisieren Sie den Inhalt wie folgt:

<h2>Posts by Category</h2>

Textmodul duplizieren und Inhalt mit Shortcode aktualisieren, um Beiträge nach Kategorie aufzulisten

Wir werden den Titel aus Designgründen in ein separates Textmodul als den Shortcode einfügen.

Duplizieren Sie den gerade duplizierten Textbaustein noch einmal.

Aktualisieren Sie dann den Inhalt des neuen doppelten Textbausteins mit einem neuen Shortcode wie folgt:

[wp_sitemap_page only="post" display_category_title_wording="false" display_title="false"]

Aktualisieren Sie das Shortcode-Content-Design mit Divi

Da dieser Shortcode eine verschachtelte Liste hat, müssen wir ihn etwas anders optimieren. Klicken Sie auf die Registerkarte Design und aktualisieren Sie Folgendes:

• Position des ungeordneten Listenstils: Außerhalb
• Einzug der ungeordneten Listenelemente: 0px

• Rand: 0px übrig
• Polsterung: 3.2vw links

Ersetzen Sie dann die CSS-Klasse durch Folgendes:

• CSS-Klasse: flex-columns

Hinzufügen von Zeile 3 für Produkte

In dieser dritten und letzten Zeile werden wir HTML-Sitemap-Seiteninhalte hinzufügen, die Produktkategorien und alle Produkte anzeigen.

Zeile 1 duplizieren

Lassen Sie uns zunächst die oberste Zeile (die Seitenanzeige) duplizieren.

Aktualisieren Sie die Textmoduleinstellungen, um Produktkategorien anzuzeigen

Aktualisieren Sie dann die Texteinstellungen des Duplikats mit dem folgenden Inhalt:

<h2>Product Categories</h2>

[wp_sitemap_page only="product_cat" display_title="false"]

Dieser Shortcode zeigt die Produktkategorien an.

Textmodul duplizieren, um Produkte anzuzeigen

Als nächstes duplizieren Sie das soeben erstellte Textmodul.

Aktualisieren Sie dann die Einstellungen für doppelten Text mit folgendem Inhalt:

<h2>Products</h2>

[wp_sitemap_page only="product" display_title="false"]

Dieser Shortcode zeigt alle Produkte auf der ganzen Site an.

Zeilenrahmen-Schattenfarbe aktualisieren

Um eine kleine Trennung zwischen den Abschnitten zu erzielen, können wir den Kastenschatten für die Zeile ändern, die unsere Produktkategorien und Produkte enthält. Aktualisieren Sie dazu die Zeileneinstellungen wie folgt:

• Schattenfarbe: #ffc077

Seitenüberschrift aktualisieren

Bevor wir es vergessen, springen Sie zum oberen Abschnitt und aktualisieren Sie die beiden Textbausteine ​​mit dem Text „Sitemap“. Dadurch erhalten Sie einen korrekten Titel für unsere Sitemap-Seite.

Ergebnis bisher

Hier das bisherige Ergebnis.

Dieses einspaltige Design sieht so wie es ist wirklich toll aus, also zögern Sie nicht, es zu beenden und damit zu rollen. Wenn Sie jedoch das Layout mit mehreren Spalten verbessern möchten, siehe unten.

Hinzufügen mehrerer Spalten zu Sitemap-Seiteninhalten mit benutzerdefiniertem CSS

Im Moment zeigt das Standardlayout den Inhalt der Sitemap-Seite in einer einzigen Spalte an. Wenn Sie dies auf Desktop und Tablet in mehrere Spalten aufteilen möchten, können Sie einem Codemodul in Divi benutzerdefiniertes CSS hinzufügen.

Fügen Sie zuerst das Codemodul unten auf der Seite hinzu (egal wo).

Fügen Sie dann den folgenden CSS-Code in das Codefeld ein:

<style>
@media all and (min-width: 767px) {
  
  .flex-columns .wsp-posts-list {
    display:flex;
    flex-wrap: wrap;
  }
  .flex-columns .wsp-posts-list>li>ul {
    width: 300px;
    padding: 2% 10% 10% 5%;
  }
  .column-list .wsp-container {
    column-count: 3;
  }
  
}
</style>

Dieses CSS-Snippet gilt nur für ein großes Tablet und höher. Der Code zielt auf die Textmodule mit den CSS-Klassen ab, die wir ihnen zuvor hinzugefügt haben. Beim Textbaustein mit der Klasse „flex-columns“ ist der Shortcode, der die Beiträge nach Kategorien generiert, in Spalten von 300px Breite unterteilt. Die Textbausteine ​​mit der Klasse „column-list“ teilen den Inhalt der Shortcode-Sitemap-Seite in drei Spalten auf.

Endergebnis

Sehen Sie sich das Endergebnis an!

Andere Möglichkeiten zum Hinzufügen von Sitemap-Inhalten

Wir können der Sitemap-Seite auch Sitemap-Inhalte hinzufügen, indem wir WordPress-Widgets, Divi-Module und WooCommerce-Shortcodes verwenden.

Verwenden Sie WordPress-Widgets

WordPress hat einige Standard-Widgets, die Dinge wie Seiten, Kategorien und Produkte anzeigen. Sie finden sie im WordPress-Dashboard unter Darstellung > Widgets. Zögern Sie nicht, diejenigen zu nutzen, die das Sidebar-Modul von Divi verwenden, wenn Sie der Sitemap-Seite etwas hinzufügen möchten.

Verwenden Sie das Divi-Blog-Modul

Das Blog-Modul von Divi verfügt über integrierte Einstellungen zum Anzeigen von Beiträgen, Seiten, Projekten und Produkten. Und wenn Sie beim Design einen minimalistischen Ansatz verfolgen, können Sie eine ziemlich coole anpassbare Liste für Sitemap-Seiten erhalten.

Zum Beispiel können wir ein neues Blog-Modul hinzufügen und Produkte als Beitragstyp auswählen und ihm eine Beitragsanzahl geben, die groß genug ist, dass wir jetzt alle Produkte auf unserer Website anzeigen.

Dann können wir alle Elemente außer dem Produktlink/Titel ausblenden.

Dasselbe können wir auch für Seiten tun. Wählen Sie einfach Seiten für den Beitragstyp aus.

Produkt-Shortcode

Für WooCommerce-Produkte können wir den WooCommerce Product Shortcode verwenden, um Produktlisten oder Produktkategorielisten zu generieren. Der Produkt-Shortcode ist sehr robust und vielseitig, um Produkte nach Belieben anzuzeigen. Sie können sogar den Shortcode innerhalb eines Divi-Moduls verwenden, um die integrierten Einstellungen zu nutzen.

Abschließende Gedanken

Die Verwendung des WP-Sitemap-Seiten-Plugins in Kombination mit der Leistungsfähigkeit von Divi ist eine schöne vereinfachte Lösung zum Generieren einer dynamischen HTML-Sitemap-Seite für Ihre Website. Und Sie können Ihrer Sitemap-Seite ganz einfach dynamischere Inhalte hinzufügen, indem Sie eine beliebige Kombination von Divi-Modulen und WooCommerce-Shortcodes verwenden. Fühlen Sie sich frei zu experimentieren und finden Sie das richtige Design, das Ihren Bedürfnissen entspricht.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!