GeoDirectory

Eine Verzeichnis-Website mit Divi aufbauen

Wie erstellt man eine Verzeichnis-Website mit dem Divi-Theme?

Der einfachste Weg, eine Verzeichnis-Website mit dem Divi WordPress-Theme zu erstellen, besteht darin, die folgenden 3 Schritte umzusetzen:

  1. Installiere das Divi-Theme
  2. Installiere und richte GeoDirectory ein
  3. Gestalte die Verzeichnis-Website mit dem Divi-Theme

Bevor ich die Details beschreibe, wie man ein Unternehmensverzeichnis Schritt für Schritt erstellt, möchte ich einen Beitrag zitieren, der am 11. September 2023 auf dem offiziellen Elegantthemes-Blog veröffentlicht wurde – dem Blog der Entwickler des Divi-Themes.

Ist GeoDirectory das beste WordPress-Plugin zur Erstellung einer Unternehmensverzeichnis-Website mit dem Divi-Theme?

Im Ranking von Elegant Themes belegte das GeoDirectory-Plugin den ersten Platz.

Auf dem Elegant Themes-Blog wurde ein Artikel mit dem Titel „7 Best WordPress Directory Plugins in 2023 (Ranked)

GeoDirectory plugin belegte den Spitzenplatz im Ranking. Im Artikelinhalt begründet der Autor, warum GeoDirectory das beste WordPress-Plugin zur Erstellung einer Verzeichnis-Website ist.

Ich empfehle Ihnen, diesen Artikel zu lesen. Nachfolgend finden Sie ein Zitat aus dem FAQ-Bereich des genannten Artikels.

Was ist das beste Verzeichnis-Plugin für WordPress?
GeoDirectory ist das beste WordPress-Verzeichnis-Plugin. Es bietet anpassbare Einträge, erweiterte Suche, Nutzerbewertungen, Google Maps-Integration, Monetarisierungsoptionen und eine hervorragende Kompatibilität mit Themes und Plugins. Mit GeoDirectory können Sie mühelos funktionsreiche Verzeichnis-Websites erstellen.

Zitat aus dem FAQ-Bereich des Artikels: 7 Best WordPress Directory Plugins in 2023 (Ranked).

Meine erste WordPress-Website, die ich 2013 erstellt habe, war ein Unternehmensverzeichnis ohne dedizierte Plugins.

Ich erinnere mich, als die Entwickler von WP GeoDirectory, Paolo Tajani und Stiofan O'Connor, das Theme „GeoPlaces

Sie verbesserten die Leistung und führten GeoTheme vor über 10 Jahren ein.

Später, angepasst an das sich wandelnde WordPress-Ökosystem und gestützt auf ihre Erfahrungen, wandten sie sich von der Theme-Entwicklung ab.

Aufbauend auf dieser Grundlage entwickelten sie das GeoDirectory-Plugin, das die Erstellung von Verzeichnis-Websites nahezu jeder Art ermöglicht.

Ich habe die meisten Plugins und Themes für WordPress getestet, die die Erstellung einer Verzeichnis-Website ermöglichen.

Sowohl der oben genannte Beitrag als auch meine 11 Jahre Erfahrung bestätigen, dass WP GeoDirectory das beste Plugin für diesen Zweck ist.

Schritt-für-Schritt-Anleitung zur Erstellung einer Verzeichnis-Website mit dem Divi-Theme und dem GeoDirectory-Plugin

Sehen wir uns im Detail an, wie wir eine Verzeichnis-Website mit GeoDirectory und dem Divi-Theme erstellen können.

In diesem Tutorial werden wir:

Inhaltsverzeichnis

Theme und Plugins installieren.

1. Installiere das Divi-Theme

Zuerst müssen Sie ein Divi-Theme installieren

Divi-Theme installieren


Gehen Sie zu Appearance >> Themes >>

Wählen Sie „Neu hinzufügen", „Theme hochladen", installieren und aktivieren Sie das Divi-Theme.

2. Installiere GeoDirectory

Jetzt müssen Sie das GeoDirectory-Plugin installieren.

Gehen Sie zu Plugins >> Neu hinzufügen, suchen Sie nach GeoDirectory. Bitte installieren und aktivieren Sie es.

Das GeoDirectory-Plugin installieren und aktivieren

Sobald das Divi-Theme und das GeoDirectory-Plugin aktiv sind, können wir mit dem nächsten Schritt fortfahren.

3. GeoDirectory Installations-Assistent

Wenn Sie den Divi Builder wegen seiner Einfachheit schätzen, werden Sie den integrierten Setup-Assistenten des GeoDirectory-Plugins sicher genauso schätzen.

Auswahl des Kartensystems (Google Maps oder OpenStreetMap)

Jetzt müssen Sie den Setup-Assistenten zur Konfiguration abschließen. Im ersten Schritt des Assistenten können Sie zwischen zwei Kartensystemen wählen: Google Maps und OpenStreetMap (ohne API-Schlüssel erforderlich).

GeoDirectory Setup-Assistent Schritt 1

In diesem Tutorial wählen wir OpenStreetMaps.

Wählen Sie OpenStreetMap und klicken Sie auf „Weiter".

Falls Sie Google Maps auswählen möchten, führen Sie die folgenden zusätzlichen Schritte durch.

Klicken Sie auf die Schaltfläche „Schlüssel generieren" und folgen Sie den Schritten in dieser Dokumentation um einen gültigen API-Schlüssel zu generieren.

Die wesentlichen Schritte sind:

  1. Schlüssel aktivieren.
  2. Ein neues Projekt erstellen oder ein vorhandenes auswählen.
  3. Den Schlüssel abrufen.
  4. Ein Abrechnungskonto aktivieren.
  5. Den API-Schlüssel einschränken (damit er nur von der URL Ihrer Website verwendet werden kann)

Zu Punkt vier: Dies ist eine Voraussetzung. Sie werden jedoch nur belastet, wenn Sie den Schwellenwert überschreiten, der bei 200 $/Monat liegt.

Dieses kostenlose Guthaben reicht für 99 % aller Verzeichnisse mehr als aus.

Festlegen der Standardstadt

GeoDirectory Setup-Assistent – Standardstandort auswählen

Danach legen Sie den Standardstandort fest. Dies ist die Stadt, für die das Verzeichnis erstellt wird. GeoDirectory verwendet Philadelphia als Standardstadt.

Angesichts der Nische, die ich für dieses Tutorial gewählt habe, setzen wir die Standardstadt auf Split in Kroatien.

Sie können den Kartenmarker verschieben, um einen beliebigen Ort zu verwenden, oder die erweiterten Einstellungen durch Klicken auf „Erweitert anzeigen" nutzen.

Wenn Sie Einträge in mehr als einer Stadt hinzufügen müssen, benötigen Sie die Location Manager add-on.

Zusatzfunktionen hinzufügen

In diesem Schritt installieren wir UsersWP, ein Benutzer-Login-Plugin das es Benutzern ermöglicht, sich auf Ihrer Website zu registrieren und anzumelden.

Dies ist erforderlich, damit Benutzer ihre Einträge hinzufügen und bearbeiten können. Außerdem werden Benutzerprofile erstellt, in denen sie ihre Einträge, Bewertungen und vieles mehr finden können.

Wir werden auch Ninja Forms installieren, damit alle Einträge ein Kontaktformular haben, das E-Mails direkt an die Eintragsinhaber sendet.

AyeCode Connect ist für dieses Tutorial nicht zwingend erforderlich. Es wird hauptsächlich benötigt, wenn Sie GeoDirectory-Premium-Add-ons hinzufügen und direkt über das WordPress-Dashboard installieren möchten.

Dummy-Daten hinzufügen

Installationsassistent – Beispieldaten

Der letzte Schritt zum Abschluss des Installationsassistenten besteht darin, einige Beispieleinträge hinzuzufügen. Dabei werden auch Eintrags­kategorien angelegt, die Sie später nach Bedarf bearbeiten können.

Sie fügen jetzt noch keine Sidebar-Widgets und Menüelemente hinzu, da wir das später erledigen werden.

Die Divi-Verzeichnis-Website gestalten

Divi Directory Website

Nachdem wir das Theme und die Plugins installiert und die grundlegende Einrichtung von GeoDirectory vorgenommen haben, können wir mit dem Gestalten unserer Verzeichnis-Website mit dem Divi Theme beginnen.

1. Design der Startseite der Divi-Verzeichnis-Website

Sie können eine neue Seite erstellen oder eine verwenden, die WordPress standardmäßig anlegt, wie z. B. die Beispielseite.

Gehen Sie zu Seiten, bearbeiten Sie die Beispielseite und benennen Sie sie in „Home

Gehe dann zu Einstellungen > Lesen > Startseiten-Einstellungen und wähle deine Startseite aus.

Die Beitragsseite wählen wir später aus.

Startseite für das Divi Business Directory einrichten

Spare bei deinem ersten Logo die Kosten für einen Designer.

Viele machen den Fehler, stark zu investieren, bevor sie die Marktpassung bewertet haben.

Verwende Apps wie Canva für schnelle, kostengünstige und hochwertige Designs.

Erstelle deinen Logo-Entwurf mit Canva.com

Für ein MVP reicht ein mit Canva gestaltetes Logo völlig aus.

Anfängliche Perfektion ist nicht entscheidend – du kannst das Logo verbessern, wenn dein Projekt erfolgreich wird.

Denk daran: Ein durchschnittliches Logo ist nicht der Grund für das Scheitern von Projekten.

Nachdem du dein Logo erstellt hast, gehe zu Divi > Theme Options, klicke auf „Hochladen

Zuschneiden überspringen (oder das Bild nach Bedarf zuschneiden) und oben links auf dem Bildschirm auf Änderungen speichern klicken.

Legen Sie das Logo fest, das Sie auf canva.com erstellt haben

Das Navigationsmenü

Nachdem Sie das Logo erstellt und hinzugefügt haben, gehen Sie zu Darstellung > Menüs, und erstellen Sie Ihr Menü.

Divi Directory Navigation Menu

Fügen Sie die benötigten Links hinzu (von der linken Spalte in die rechte Spalte) und speichern. Im Menü-Einstellungen > Abschnitt „Anzeigeort, können Sie die Option „Primäres Menü

In diesem Beispiel haben wir nur das Header-Navigationsmenü.

Wir haben zwölf Links hinzugefügt:

  1. Home
  2. Über uns
  3. Blog
  4. Konto
  5. Profil (Sichtbar für eingeloggte Benutzer)
  6. Passwort ändern (Sichtbar für eingeloggte Benutzer)
  7. Abmelden (Sichtbar für eingeloggte Benutzer.)
  8. Registrieren (Sichtbar für nicht eingeloggte)
  9. Anmelden (Sichtbar für nicht eingeloggte Benutzer)
  10. Passwort vergessen? (Sichtbar für nicht eingeloggte)
  11. Suchseite
  12. Eintrag hinzufügen

Links von UsersWP-Endpunkten sind dynamisch, siehe Klammern oben.

Menü sichtbar für eingeloggte Benutzer
Menü sichtbar für nicht eingeloggte Benutzer

Der Inhalt

Das Divi-Theme bietet über 330 vorgefertigte Layout-Pakete.

Für die Zwecke dieses Tutorials wähle ich ein gebrauchsfertiges Layout, das die Erstellung eines ansprechenden Business-Verzeichnisses ermöglicht – ganz ohne die mühsame Aufgabe, Divi-Module zu gestalten.

Für dieses Tutorial habe ich das vorgefertigte Charter Divi Layout Pack gewählt.

Erstelle ein Divi-Business-Verzeichnis auf Basis eines vorgefertigten Layout-Pakets

Gehe zu deiner Startseite, klicke auf 'Visual Builder aktivieren' und dann auf 'Layouts durchsuchen'.

Wähle in der vorgefertigten Layout-Bibliothek die Seite 'Charter Boat Landing Page' aus und klicke auf 'Dieses Layout verwenden'.

Füge nach dem zweiten Textmodul das Code-Modul hinzu und klicke auf „Shortcode hinzufügen'.

Divi erlaubt keine Verwendung von Gutenberg-Blöcken, aber die Entwickler des GeoDirectory-Plugins haben einen Shortcode-Generator implementiert.

Damit kannst du ganz einfach dynamische Widgets über das Divi Code-Modul hinzufügen.

Der Shortcode-Generator ist also dein bester Freund, wenn du eine Verzeichnis-Website in Divi erstellst.

Einen Shortcode für das Suchformular hinzufügen

Wähle aus der Dropdown-Liste „gd_search" (GD > Search)" aus und klicke auf „Shortcode kopieren'.

Der kopierte Shortcode befindet sich in der Zwischenablage. Füge den kopierten Code in das Code-Modul ein und klicke auf das Häkchen-Symbol.

Inhalt des Textmoduls und H1-Schriftgröße bearbeiten

Ändere den Inhalt des ersten Textmoduls in „Suche nach'.

Ändere den Header-Inhalt im Inhalts-Tab zu „Yacht Delivery'. Ändere im Design-Tab die H1-Header-Schriftgröße auf 70px und klicke auf das Häkchen.

Entferne das Schaltflächen-Modul „Book a Trip'.

Unser Hero-Bereich ist damit fertiggestellt.

Ändere im nächsten Abschnitt, ausgehend von der vordefinierten Divi-Landingpage-Vorlage, den Inhalt des H2-Headers in „Listings Categories'.

Entferne das Textmodul unter der Überschrift (goldene Schrift) oder ersetze den Inhalt durch deinen eigenen – ich lasse die Lorem-Ipsum-Fragmente, um das Website-Design interessanter zu gestalten.

Lösche die zweispaltige Zeile mit Fotos und Text und füge dann eine neue Zeile mit einem Code-Modul hinzu. Klicke beim Hinzufügen auf 'Shortcode hinzufügen', genauso wie beim Suchformular.

Wähle aus der Dropdown-Liste „gd_categories" (GD > Categories)" aus.

Die Optionen, die ich im Shortcode-Generator geändert habe, um das Erscheinungsbild der Kategorie-Spalten wie unten dargestellt zu erreichen:

Tab „Filter":
Maximale Anzahl anzuzeigender Kategorien pro CPT: 3
Markieren: Leere ausblenden
Tab „Kartendesign":
Designtyp: Bildhintergrund
Zeilenausrichtung: Zentriert
Karten-Schatten: Groß
Symbol / Bild-Tab:
Markierung: Kategoriebild verwenden
Bildgröße: Groß

Sie können auch den unten stehenden Shortcode kopieren und in das Code-Modul einfügen.

Generierter Shortcode:

[gd_categories post_type="0" hide_empty="1" max_level="1" max_count="3" max_count_child="all" sort_by="count" design_type="image" row_positioning="center" card_shadow="large" use_image="1" image_size="large" cat_text_color_custom="#000000" cat_font_size="0" badge_text_color_custom="#000000" badge_color="light" badge_font_size="0" title_tag="h4" mb="3"]
Bereich für Listing-Kategorien

Sie können einer Kategorie ein Bild zuweisen, indem Sie die Kategorie über wp-admin -> Orte -> Ortskategorien bearbeiten.

Jede Kategorie bietet eine Option, um ein Standardbild festzulegen.

Ich habe außerdem die Kategorienamen angepasst, um sie auf die Nische abzustimmen, die ich für dieses Tutorial gewählt habe.

Standardbild der Kategorien
Abschnitt mit den neuesten Listings

Wir verwenden den nächsten Abschnitt, um die neuesten Einträge anzuzeigen.

Ändern Sie die Überschrift „Our boats

Ähnlich wie beim Suchformular und den Kategorien müssen wir einen Shortcode generieren, der die neuesten Einträge anzeigt.

Shortcode für neueste Einträge generieren

Wählen Sie „gd_listings

The options I changed in the shortcode generator to achieve the appearance as shown below:

Tab „Filter":
Posts to show: 3
Design-Tab:
Layout: Rasteransicht (drei Spalten)

Sie können auch den unten stehenden Shortcode kopieren und in das Code-Modul einfügen.

Generated shortcode:[gd_listings post_type="gd_place" post_limit="3" add_location_filter="1" sort_by="az" title_tag="h3" layout="3" view_all_link="1" bottom_pagination="1" slide_interval="5" mb="3"]

Remove unnecessary section

This section will not be needed, so delete it.

The next section will serve as our CTA section. Change the text to “Do you provide Yacht Delivery services?” In the design tab of the text module, change the size of the h2 header to 60px.

Edit button module text to add listing and set link to “/add-listing/places/”.

You can remove the next “FAQ” section, but I won’t, to make the project look more interesting.

I recommend populating the FAQ section with content related to the niche for which you are creating a business directory.

Je mehr thematischer Inhalt, desto besser für die Optimierung Ihrer Website in Suchmaschinen.

Ähnlich verhält es sich mit dem nächsten Abschnitt: Ich werde ihn in diesem Leitfaden entfernen, aber Sie können ihn nutzen, um Ihre Website für Suchmaschinen zu optimieren.

Ich werde den Bewertungsbereich nicht entfernen, um ein besseres Homepage-Design zu erzielen. Sie können es nach Belieben handhaben.

Die Homepage der Divi Directory-Website ist fertig. Nun erstellen wir eine globale Fußzeile für unsere Website.

Wir werden diesen Abschnitt als globale Fußzeile verwenden

Klicken Sie auf das Symbol „Abschnitt in Bibliothek speichern", geben Sie im Namensfeld „global-footer" ein und klicken Sie auf „In Bibliothek speichern". Speichern Sie anschließend Ihr Homepage-Layout mit der Schaltfläche „Speichern" in der unteren rechten Ecke des Bildschirms.

Löschen Sie den in der Divi-Bibliothek gespeicherten Abschnitt und speichern Sie das Projekt erneut.

Globale Divi-Fußzeile erstellen

Gehen Sie zum WordPress-Dashboard, klicken Sie dann auf Divi > Theme Builder, klicken Sie auf „Globale Fußzeile hinzufügen" und wählen Sie „Globale Fußzeile erstellen".

Fügen Sie einen neuen Abschnitt ein, klicken Sie auf „Aus Bibliothek hinzufügen", wählen Sie den zuvor erstellten Abschnitt aus und klicken Sie auf „Diesen Abschnitt verwenden".

Globale Footer-Links bearbeiten

Der globale Footer-Bereich besteht aus einem Foto-Modul, vier Textmodulen und Social-Icons-Modulen.

Ändern Sie den Inhalt und die Links der Textmodule. Ich werde Textmodule verwenden, um die Kategorien meines Unternehmensverzeichnisses auf der Website zur besseren Navigation darzustellen.

Geben Sie die entsprechenden Links im Social Media Follow-Modul ein.

Löschen Sie den leeren Abschnitt und speichern Sie den globalen Footer

Löschen Sie den leeren Abschnitt und speichern Sie den globalen Footer, klicken Sie dann auf „Schließen 

Very important: when you return to the Divi theme Builder, click the Save Changes button.

The home page and global footer of the directory website are done.

Design der Listings- und Suchseite der Divi-Verzeichnis-Website

Now you need to design two pages that are essential for any directory.

The listings page (general archive, categories, tags), and the search results page.

GeoDirectory erstellt sie standardmäßig, aber in diesem Tutorial nehmen wir kleinere Änderungen an den Standardseiten vor.

Wir müssen eine Karte sowie ein Textmodul mit einem dynamischen Titel hinzufügen.

GD Archive mit Divi bearbeiten

Gehe im WordPress-Dashboard zum Tab „Alle Seiten‟, finde die Seite „GD Archive‟, klicke auf „Mit Divi bearbeiten‟ und bearbeite dann den vorhandenen Inhalt.

Lösche das Textmodul und füge die zwei Code-Module hinzu.

Links ein Karten-Shortcode, rechts ein Listings-Shortcode.

Verwende nun den Shortcode-Generator auf die gleiche Weise wie beim Generieren von Shortcodes für Kategorien oder aktuelle Listings.

Wähle aus der Dropdown-Liste die folgenden Shortcodes der Reihe nach aus, kopiere und füge sie ein:

GD > Map

GD > Notifications

GD > Search

GD > Loop Action

GD > Loop

GD > Loop paging

Du kannst die folgenden Shortcodes auch in das Code-Modul einfügen.

Im ersten Code-Modul müssen wir den Shortcode hinzufügen, der für die Karte zuständig ist:

[gd_map map_type="auto" post_settings="1" width="100%" height="425px" maptype="ROADMAP" zoom="0"]

Zweites Code-Modul:

[gd_map map_type="auto" post_settings="1" width="100%" height="425px" maptype="ROADMAP" zoom="0"] <br>

[gd_notifications]

[gd_search bg=” mt=” mr=” mb=’3′ ml=” pt=” pr=” pb=” pl=” border=” rounded=” rounded_size=” shadow=”]

[gd_loop_actions bg=” mt=” mr=” mb=’3′ ml=” pt=” pr=” pb=” pl=” border=” rounded=” rounded_size=” shadow=”]

[gd_loop layout=’2′ row_gap=” column_gap=” card_border=” card_shadow=” bg=” mt=” mr=” mb=” ml=” pt=” pr=” pb=” pl=” border=” rounded=” rounded_size=” shadow=”]

[gd_loop_paging show_advanced=” bg=” mt=” mr=” mb=’3′ ml=” pt=” pr=” pb=” pl=” border=” rounded=” rounded_size=” shadow=”]

Nun müssen wir oberhalb des Divi-Code-Modul-Bereichs einen neuen Abschnitt mit einem Divi Heading-Modul hinzufügen.

Um den Titel der Archivseiten anzuzeigen, verwenden wir Divis integrierte Option zur Anzeige dynamischer Inhalte.

Dynamischen Inhalt für die GD Archive-Seite festlegen.

Fahre im Content-Tab mit der Maus über das Überschriftenfeld und klicke rechts auf „Dynamischen Inhalt verwenden‟. Wähle aus der Dropdown-Liste „Page/Archive Title‟ aus.

Klicke auf das Häkchen und speichere dein GD Archive Divi-Layout.

Suchseite

Für die Suchseite wiederholen wir einen ähnlichen Vorgang, aber wie beim Erstellen der Fußzeile verwenden wir den Divi Theme Builder.

Eine GD-Suchseite mit dem Divi Theme Builder erstellen

Navigiere im WordPress-Dashboard zu Divi > Theme Builder. Klicke auf „Neue Vorlage hinzufügen‟ und dann auf „Neue Vorlage erstellen‟.

Du siehst die Vorlageneinstellungen. Suche im Tab „Verwenden auf‟ den Bereich „Sonstiges‟, wähle „GD Search Results Page‟ aus und klicke auf „Vorlage erstellen‟.

Du siehst eine neue Vorlage, die für die GD-Suchseite zuständig ist.

Klicke auf „Benutzerdefinierten Body hinzufügen‟, dann auf „Aus Bibliothek hinzufügen‟ im Tab „Deine vorhandene Seite‟, klicke auf „GD Archive Layout‟ und verwende dann dieses Layout.

Klicke auf das Bleistift-Symbol und bearbeite den benutzerdefinierten Body. Du musst nichts weiter tun – speichere einfach das Layout und die Änderungen im Divi Builder Theme.

Nur noch ein Schritt, und deine mit Divi erstellte Verzeichnis-Website ist voll funktionsfähig.

Einzelne Listing-Seite

Eine einzelne Listing-Seite ist dafür zuständig, einen einzelnen Eintrag in deiner Verzeichnis-Website anzuzeigen.

Ähnlich wie bei der GD Archive- und der GD-Suchseite wurde die Seitenvorlage vom GD-Installationsassistenten erstellt.

Gehe im WordPress-Dashboard zu den Seiten und bearbeite die GD Details-Seite mit Divi.

Lösche den Inhalt und füge eine Zweispalten-Zeile hinzu, wie im Bild unten gezeigt.

Spalten-Layout der Gd Details-Seite

Im linken Code-Modul fügen wir Shortcodes hinzu, die für den Beitragsinhalt und die Galerie zuständig sind.

Im rechten Code-Modul fügen wir Shortcodes hinzu, die für die Anzeige von Beitragsdetails wie Telefonnummer, Adresse, Social-Media-Links und weitere Informationen zuständig sind.

Du weißt, wie du den Shortcode-Generator verwendest – generiere, kopiere und füge daher die folgenden Shortcodes ein. Ich habe auch fertige Shortcodes zum Kopieren weiter unten vorbereitet.

Code-Modul auf der linken Seite

[gd_post_images title='' types='' fallback_types='' ajax_load='true' limit='' limit_show='' css_class='' type='slider' slideshow='true' controlnav='1' animation='slide' show_title='true' show_caption='true' image_size='' aspect='' cover='' link_to='' link_screenshot_to='' bg='' mt='' mr='' mb='' ml='' pt='' pr='' pb='' pl='' border='' rounded='' rounded_size='' shadow='' ]

[gd_single_taxonomies taxonomy=” prefix=” link_style=” link_color=” link_color_custom=” link_icon=’false’ mt=” mr=” mb=’2′ ml=” pt=” pr=” pb=” pl=” ]

[gd_single_tabs show_as_list=’false’ output=” tab_style=” disable_greedy=’false’ ]

[gd_single_next_prev bg=” mt=’4′ mr=” mb=’3′ ml=” pt=” pr=” pb=” pl=” border=” rounded=” rounded_size=” shadow=” ]

GD Output location Shortcode

Code-Modul auf der rechten Seite

[gd_output_location location="detail" list_style="wrap"]

Fast geschafft!

Ähnlich wie beim Erstellen der GD Archive-Seitenvorlage müssen wir nun ein Heading-Modul hinzufügen, das für die Anzeige des dynamischen Listing-Titels zuständig ist.

Füge ein neues Divi Heading-Modul in der ersten Spalte oberhalb des Code-Moduls hinzu und lege den dynamischen Titel als „Page/Archive Title‟ fest.

Klicke auf das Häkchen und speichere dein Layout. Die Einzelbeitragsseite wird wie folgt aussehen.

Divi Theme GeoDirectory Plugin – Listing-Detailseite fertiggestellt

Ihre Divi-Verzeichnis-Website feinabstimmen

Deine Divi-Verzeichnis-Website ist fast fertig. Jetzt legen wir noch einige Optionen fest und optimieren deine Website.

Farben und Typografie

Die Hauptfarbe, die ich für diese Website gewählt habe, ist ein Marineblaution. Hex-Code: #1e2d44.

Gehe zu Theme Customizer > General Settings > Layout settings und ändere die Akzentfarbe des Divi Themes auf: #1e2d44.

Jetzt müssen wir die Primärfarbe des GeoDirectory-Plugins ändern.

Klicken Sie im Theme-Customizer auf AyeCode UI und setzen Sie die Primärfarbe auf: #1e2d44.

Passen Sie Farben und Typografie mit dem Theme-Customizer an.

Jetzt müssen wir die globale Schriftart festlegen. Gehen Sie zu Theme-Customizer > Allgemeine Einstellungen > Typografie und ändern Sie die Header-Schriftart zu Cinzel.

Wie Sie sehen können, hat sich die Schriftart der von WpGeodirectory generierten Überschriften nicht auf die Cenzel-Schrift geändert.

Wechseln Sie im Theme-Customizer zum Tab Zusätzliches CSS und fügen Sie den folgenden CSS-Code ein.

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: 'Cinzel', Georgia, "Times New Roman", serif!important;
}

BootStrap-Version ändern

AyeCode UI BootStrap-Versionseinstellungen

Klicken Sie im WordPress-Dashboard auf Einstellungen und AyeCode UI, ändern Sie die Version auf BootStrap V5 und speichern Sie.

Ihre Divi-Verzeichnis-Website ist fertig.

Holen Sie das volle Potenzial Ihres Divi-Verzeichnisses mit DiviGeo heraus

Dies ist eine einfache Methode, um ein Verzeichnis mit GeoDirectory und Divi zu erstellen.

Falls Sie dieses Projekt nicht allein angehen möchten oder etwas Ausgefeilteres benötigen, zögern Sie nicht, mich zu kontaktieren.

Besuchen Sie meine Website, schauen Sie sich eines meiner vorgefertigten Divi Business GeoDirectory child theme DiviGeo, oder beauftragen Sie mich, eine individuelle Website ganz nach Ihren Wünschen zu erstellen.

Premium-Funktionen zu Ihrer Divi-Verzeichnis-Website hinzufügen

Wenn Sie möchten, können Sie Ihrem Verzeichnis jetzt Premium-Funktionen hinzufügen, wie zum Beispiel:

  1. Kostenpflichtige Einträge: mit dem GeoDirectory Listing Price Manager Add-on können Sie Preise für die Einreichung von Einträgen festlegen. Für jede Preisstufe können Sie Funktionen aktivieren/deaktivieren, wie z. B.: Einschränkung der Anzahl der Bilder für kostenlose Einträge bei gleichzeitig mehr Bildern für kostenpflichtige Einträge. Mehr oder weniger Tags und Kategorien erlauben. Bestimmte benutzerdefinierte Felder aktivieren oder deaktivieren. Längere oder kürzere Beschreibungen einreichen.
  2. Inserate beanspruchen: Dies ist eine grundlegende Funktion für ein Verzeichnis, bei der der Administrator die Datenbank erstellt und Unternehmensinhaber einlädt, die Kontrolle über ihre kostenlosen Einträge zu übernehmen. Der Prozess zur Übernahme eines Eintrags kann auch eine Pflicht zum Upgrade auf einen kostenpflichtigen Eintrag beinhalten, um die Eigentümerschaft zu übernehmen.
  3. Werbung: Werbung verkaufen ist eine weitere Form der Monetarisierung eines Online-Verzeichnisses. Wenn Sie viel Traffic haben, können Sie Werbenetzwerke nutzen. Andernfalls können Sie Werbeanzeigen direkt verkaufen, indem Sie Unternehmen ermöglichen, Banner in bestimmten Bereichen Ihrer Website zu platzieren, oder Einträge als Anzeigen erscheinen zu lassen, beispielsweise über den organischen Suchergebnissen.

Das sind nur drei Beispiele. Ein Verzeichnis-Website bietet jedoch viele Möglichkeiten, online Geld zu verdienen.

Sie können einen globalen Marktplatz für handgefertigte Artikel erstellen, Veranstaltungstickets verkaufen oder Rabattgutscheine anbieten.

Gewinnen Sie Einblicke in den Aufbauprozess mit diesen Tipps: Eine Verzeichnis-Website aufbauen: Tipps und Tricks.

Die Möglichkeiten sind grenzenlos.