Das weltweit fortschrittlichste und skalierbarste WordPress-Verzeichnis-Plugin

Hier ist eine leicht verständliche Anleitung, wie Sie mit dem Breakdance Website Builder-Plugin eine Verzeichnis-Website erstellen:

1. Installieren Sie das Breakdance-Plugin
2. Installiere und richte GeoDirectory ein
3. Gestalten Sie die Verzeichnis-Website mit dem Breakdance Plugin

Das Breakdance Plugin ist in Kombination mit dem GeoDirectory-Plugin eine hervorragende Möglichkeit, ein flexibles Online-Verzeichnis zu erstellen. Mit dieser Kombination können Sie ganz einfach standortbasierte Funktionen hinzufügen, das Layout anpassen und dynamische Inhalte für eine benutzerfreundliche Erfahrung einbinden.

Dieses System ermöglicht es Webentwicklern und Designern, eine hochwertige Verzeichnis-Website für bestimmte Branchen oder breitere Community-Bedürfnisse zu erstellen.
Sehen wir uns die Details an, wie das geht.

In diesem Tutorial werden wir:

• Plugins installieren und einrichten
  1. Installieren Sie das Breakdance Plugin
  2. GeoDirectory installieren
  3. GeoDirectory Installations-Assistent
     • Festlegen der Standardstadt
     • Zusatzfunktionen hinzufügen
     • Dummy-Daten hinzufügen
• Gestalten Sie die Breakdance Verzeichnis-Website
  1. Das Website-Logo gestalten
  2. Das Design der Startseite
     • Das Navigationsmenü
     • Die Typografie
     • Der Inhalt
  3. Das Design der Listings- und Suchseite
  4. Das Design der einzelnen Listing-Seite

Plugins installieren und einrichten.

1. Installiere das Breakdance Plugin

Du kannst das Breakdance-Plugin von der breakdance.comkaufen. Du erhältst eine Plugin-ZIP-Datei. Um sie zu installieren, gehe zu  Plugins >> Neu hinzufügen >> Klicke auf Plugin hochladen

Jetzt nach der Installation deaktivieren wir das WordPress-Theme über die Breakdance >> Einstellungen >> Theme >> Theme deaktivieren

2. Installiere GeoDirectory

Abschließend musst du GeoDirectory.

Gehen Sie zu Plugins >> Neu hinzufügeninstallieren, suche nach GeoDirectory. Bitte installiere und aktiviere es. Wir haben die Installation der Plugins abgeschlossen.

3. GeoDirectory Installations-Assistent

Für das GeoDirectory-Plugin solltest du den Setup-Assistenten abschließen, um den Google Maps API-Schlüssel zu konfigurieren und einige Beispiel-Einträge zu importieren.

Auswahl des Kartensystems (Google Maps oder OpenStreetMap)

Im ersten Schritt des Assistenten kannst du zwischen zwei Kartensystemen wählen: Google Maps und OpenStreetMaps (welches keinen API-Schlüssel erfordert).

In diesem Tutorial wählen wir OpenStreetMaps.

Wenn du Google Maps auswählen möchtest, führe die folgenden zusätzlichen Schritte durch.

Klicken Sie auf die Schaltfläche „Schlüssel generieren 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: Es ist eine Voraussetzung. Du wirst jedoch nur belastet, wenn du den Schwellenwert von 200 $/Monat überschreitest.

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

Festlegen der Standardstadt

Danach legst du den Standardstandort fest. Dies ist die Stadt, für die das Verzeichnis erstellt wird.

Wir werden Philadelphia als Standardstadt festlegen.

Sie können jeden beliebigen Standort verwenden.

Wenn du Einträge für mehrere Städte hinzufügen möchtest, benötigst du das Location Manager-Add-on.

Zusatzfunktionen hinzufügen

In diesem Schritt installieren wir UsersWP, ein Benutzerverwaltungs-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

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.

Du fügst jetzt keine Sidebar-Widgets und Menüelemente hinzu; das machen wir später.

Gestalten Sie die Breakdance Verzeichnis-Website

Jetzt, da wir die Plugins installiert und die grundlegende Einrichtung von GeoDirectory abgeschlossen haben, können wir beginnen, unsere Verzeichnis-Website mit dem Breakdance Suite von Tools zu gestalten.

1. Das Website-Logo gestalten

Zuerst das Wichtigste: Wir benötigen ein Logo für unsere Website.

Sie müssen keinen Designer beauftragen, um die erste Version Ihres Logos zu entwerfen.

Einer der größten Fehler beim Start eines neuen Verzeichnisses ist es, zu viel Zeit und Geld zu investieren, bevor man die Marktreife des Produkts getestet hat.

Mit einer App wie Canva können Sie in fünf Minuten ein Logo gestalten – kostengünstig und überraschend gut.

Für ein MVP (Minimum Viable Product) ist ein mit Canva gestaltetes Logo mehr als ausreichend.

Es gibt zahlreiche Logo-Vorlagen zur Auswahl, und es spielt keine Rolle, ob Ihr erstes Logo nicht so perfekt und einzigartig ist, wie Sie es sich vorstellen.

Wenn Ihr Projekt an Fahrt gewinnt, können Sie später jederzeit in eine Verbesserung oder einen kompletten Neuentwurf investieren.

Ein durchschnittliches Logo ist nie der Hauptgrund für das Scheitern eines Projekts.

2. Breakdance Design der Verzeichnis-Startseite

Du kannst eine neue Seite erstellen oder eine von WordPress standardmäßig erstellte Seite verwenden, wie die Beispielseite.

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

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

Das Navigationsmenü

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

Fügen Sie die benötigten Links hinzu (von der linken in die rechte Spalte) und speichern.

In den Menü-Einstellungen > Abschnitt „Anzeigeort, du kannst die „Haupt„-Option auswählen.

If you want, you can make the same menu appear on the footer or create another menu to appear there.

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

Wir haben sieben Hauptnavigationslinks und einige Unternavigationslinks hinzugefügt:

1. Home
2. Über uns
3. Blog
4. Orte und Orte hinzufügen
5. Profil
6. Anmelden
7. Logout

Der Login-Link (aus UsersWP-Endpunkten) wird nur für abgemeldete Benutzer angezeigt, während die Abmelde-, Konto- und Profillinks nur für angemeldete Benutzer sichtbar sind.

Die Typografie

Lass uns die globalen Typografie-Einstellungen über die Breakdance >> Einstellungen >> Globale Stile >> Breakdance starten

folgende Typografie-Einstellungen
Überschriften-Schriftart: Poppins
Schriftart für den Text: Poppins
Basisgröße: 16px
Verhältnis: 1.2

Kopfzeile einrichten

Richten wir nun die Kopfzeile der Website ein – dazu gehen wir zu Breakdance >> Header und klicken auf Add header.

Hier geben wir der Kopfzeile einen Titel und wählen
Ort: Überall
Priorität: 1

Klicken Sie jetzt auf Add New Schaltfläche oben links. Sie können eine Kopfzeile mit den verfügbaren Blockelementen erstellen oder auf Library klicken und bereits fertige Kopfzeilen-Vorlagen verwenden.

Ich verwende eine der vorhandenen Kopfzeilen-Vorlagen aus der Bibliothek und habe das Logo hochgeladen und ein Menü ausgewählt.

Da unsere Kopfzeile nun fertig ist, widmen wir uns dem Inhalt der Startseite.

Der Inhalt

Ich werde diese Seite von Grund auf mit dem Breakdance Plugin erstellen.

Dazu benötigen wir einen Hero-Header auf der Startseite.

Bearbeiten wir zunächst die Startseite in Breakdance indem wir auf Edit in Breakdance Schaltfläche klicken.

Wir ziehen einen leeren Bereich, indem wir auf die Add Schaltfläche oben links klicken.

Legen Sie im Stil-Tab des Bereichs Folgendes fest:
Ausrichtung: Zentriert
Hintergrundtyp: Bild
Bildgröße: Voll
Größe: Abdecken
Wiederholen: no-repeat
Position: Zentriert
Anhang: Scrollen
Bild aufheben bei: Desktop
Höhe: Benutzerdefiniert
Benutzerdefinierte Höhe: 400px

Jetzt ziehen wir ein Überschriften-Element mit den folgenden Einstellungen hinein.

Text: Finden Sie das beste Restaurant in Philadelphia
Farbe: #FFFFFFFF
Schriftgröße: 48
Schriftgewicht: 600

fügen wir einen Shortcode-Block mit dem [gd_search] Shortcode darunter ein.

Jetzt fügen wir darunter einen weiteren leeren Container mit dem folgenden Shortcode ein, um Kategorielisten anzuzeigen.

[gd_categories post_type="0" max_level="1" max_count="all" max_count_child="all" sort_by="az" design_type="image" row_items="4" card_shadow="small" 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" rounded="rounded"]

geben wir oben und unten einen Innenabstand von 50px.

Jetzt benötigen wir einen Bereich für aktuelle Einträge. Wir fügen ein Shortcode-Element mit dem folgenden Shortcode ein.

[gd_listings post_type="gd_place" post_limit="6" add_location_filter="1" sort_by="latest" title_tag="h3" layout="3" view_all_link="1" bottom_pagination="1" slide_interval="5" mb="3" rounded="rounded"]

Jetzt fügen wir einen weiteren Shortcode hinzu, um die Eintrags-Karte anzuzeigen.

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

Am Ende benötigen wir einen CTA dafür verwende ich eine vorhandene CTA-Vorlage.

Footer einrichten

Zum Abschluss richten wir nun den Website-Footer ein und gehen zu Breakdance >> Footer und klicken auf Add Footer.

Wir können einen Footer von Grund auf neu erstellen oder einen der vorhandenen verwenden. Ich verwende eine vorhandene Footer-Vorlage. Diese Footer-Menüs lassen sich ganz einfach nach unseren Bedürfnissen anpassen.
Fürs Erste lasse ich es so, wie es ist.

Herzlichen Glückwunsch! Ihre Startseite ist fertig.

2. Breakdance Design der Eintrags- und Suchseite für Verzeichnis-Websites

Eintragsübersichtsseite

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 diese standardmäßig mit einem allgemeinen Layout. In diesem Tutorial erstellen und passen wir das Layout dieser Seiten mit dem Breakdance Builder an.

Gehen wir zu den Breakdance >> Vorlagen >> Vorlage hinzufügen

Bei der nächsten Option wählen wir die folgenden Einstellungen und klicken auf Vorlage hinzufügen Schaltfläche klicken.
Ort: Archiv/Beitragstyp-Archiv
Bedingung: Beitragstyp = Orte

In der Vorlage fügen wir einen leeren Abschnitt hinzu und nehmen die folgenden Einstellungen für den Abschnittsblock vor.
Layout
Ausrichtung: Zentriert
Vertikale Ausrichtung: Zentriert
Hintergrund:
Farbe: F5F8FFFF
Typ: Verlauf

Jetzt fügen wir den Archivtitel-Block darin ein.

Jetzt haben Sie zwei Möglichkeiten, und wir zeigen Ihnen beide:

Die einfachere Methode ist eine einzelne Spalte mit dem folgenden Shortcode: [gd_simple_archive layout=

2) Wenn Sie die vollständige Kontrolle über das Design haben möchten, müssen wir stattdessen einen Spaltenblock mit einem zweispaltigen Layout hinzufügen.

In den Einstellungen verwenden wir Breite: Voll

Jetzt ziehen wir den Shortcode-Container und verwenden den erforderlichen Shortcode darin.

Auf dem linken Container verwenden wir die GD-Archivseiten-bezogenen Widgets wie GD > Loop Action, GD > Loop, GD > Loop Pagination, und GD > Search oben, damit der Benutzer auf der Archivseite suchen kann.

[gd_search mb="3"]
[gd_loop_actions]
[gd_loop layout='2']
[gd_loop_paging]

In der rechten Spalte verwenden Sie den GD > Map block, und wir lassen alle Einstellungen auf ihren Standardwerten. Wir werden jedoch die Höhe des GD > Map-Blocks auf 100vh setzen.

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

Jetzt fügen wir die folgende gd-archive-left-container Klasse zum linken Abschnitt hinzu.

In der linken Spalte fügen wir die folgende Klasse hinzu gd-archive-left-column.

Als letzten Schliff fügen wir das folgende CSS im Theme-Customizer unter Darstellung => Customize => Add CSS

.geodir-archive .gd-archive-left-container{
    overflow-Y: scroll;
    max-height: 100%;
    height:100vh;
    padding-right:15px;
}

.gd-archive-left-column{
	overflow:hidden;
}

Danach ist die Listing-Archivseite nun fertig.

Suchseite

Jetzt erstellen wir eine Vorlage für die GeoDirectory-Suchseite. Gehen wir dazu zu den Breakdance >> Vorlagen >> Vorlage hinzufügen >> Suchergebnissen

Jetzt kopieren wir den gesamten Inhalt der GD Archive Vorlage in die GD Search Vorlage.

Damit sind unsere GD-Such- und Archivseiten-Vorlagen fertig.

4. Breakdance Einzelseiten-Design für die Verzeichnis-Website

Gehen wir zu den Breakdance >> Vorlagen >> Vorlage hinzufügen

Bei der nächsten Option wählen wir die folgenden Einstellungen und klicken auf Vorlage hinzufügen Schaltfläche klicken.
Ort: Single/Places
Bedingung: Beitragstyp = Orte

Wir fügen einen leeren Abschnitt mit 0 Abstand auf allen Seiten hinzu.

Wir fügen den folgenden Shortcode hinzu, um einen Bild-Slider anzuzeigen.

[gd_post_images ajax_load="1" limit="10" limit_show="3" type="slider" slideshow="1" controlnav="1" animation="slide"]

Jetzt fügen wir einen weiteren Abschnitt und ein zweispaltiges Layout darin ein.

Jetzt fügen wir alle erforderlichen GD Detail Seiten-Shortcodes nacheinander in der linken Spalte hinzu.

Dazu gehören GD > Post Title, GD > Single Taxonomies, und GD > Single Tabs.

[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 heading_font_size="0" heading_text_color="primary" heading_text_color_custom="#000000" mt_lg="3" border_type="border"]
[gd_single_next_prev bg=''  mt='4'  mr=''  mb='3'  ml=''  pt=''  pr=''  pb=''  pl=''  border=''  rounded=''  rounded_size=''  shadow='' ]

In der rechten Spalte fügen wir GD > Author Action und GD > Output Location Block hinein.

[gd_author_actions hide_edit='false'  hide_delete='false'  author_page_only='false'  display=''  size=''  alignment=''  color='primary'  text_color='white'  btn_mt='1'  btn_mr=''  btn_mb='1'  btn_ml=''  bg=''  mt=''  mr=''  mb=''  ml=''  pt=''  pr=''  pb=''  pl=''  border=''  rounded=''  rounded_size=''  shadow='' ]
[gd_output_location location="detail" list_style="wrap"]

Premium-Funktionen zu Ihrem hinzufügen Breakdance Verzeichnis-Website

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 dem 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 das Upgrade auf einen kostenpflichtigen Eintrag erfordern, 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.

Lernen Sie die grundlegenden Aspekte mit diesem unverzichtbaren Leitfaden: Die Grundlagen zur Erstellung einer Verzeichnis-Website.

Die Möglichkeiten sind endlos.

Hier ist ein leicht verständlicher Leitfaden, wie Sie mit dem Beaver Builder-Theme und dem Beaver Builder-Plugin eine Verzeichniswebsite erstellen:

1. Beaver Builder-Theme installieren
2. Installiere und richte GeoDirectory ein
3. Beaver Builder-Plugin installieren & Beaver Themer
4. Gestalten Sie die Verzeichnis-Website mit dem Beaver Builder plugin

Das Beaver Builder Theme, in Kombination mit dem GeoDirectory-Plugin und dem Beaver Builder-Plugin, ist eine hervorragende Möglichkeit, ein flexibles Online-Verzeichnis zu erstellen. Mit dieser Kombination können Sie ganz einfach standortbasierte Funktionen hinzufügen, das Layout anpassen und dynamische Inhalte für eine benutzerfreundliche Erfahrung einbinden.

Dieses System ermöglicht es Webentwicklern und Designern, eine hochwertige Verzeichnis-Website für bestimmte Branchen oder breitere Community-Bedürfnisse zu erstellen.
Sehen wir uns die Details an, wie das geht.

In diesem Tutorial werden wir:

• Theme und Plugins installieren und einrichten
  1. Installieren Sie das Beaver Builder Theme
  2. GeoDirectory installieren
  3. GeoDirectory Installations-Assistent
     • Festlegen der Standardstadt
     • Zusatzfunktionen hinzufügen
     • Dummy-Daten hinzufügen
• Gestalten Sie die Beaver Builder Verzeichnis-Website
  1. Das Website-Logo gestalten
  2. Das Design der Startseite
     • Das Navigationsmenü
     • Die Typografie
     • Der Inhalt
  3. Das Design der Listings- und Suchseite
  4. Das Design der einzelnen Listing-Seite

Theme und Plugins installieren.

1. Das Beaver Builder-Theme installieren

Wir müssen ein Theme installieren, und für dieses Tutorial installierst du das Beaver Builder Theme.

Gehen Sie zu https://www.wpbeaverbuilder.com und erwerben Sie das Beaver Builder Pro Plugin, einschließlich der Beaver-Themes & Beaver Themer Plugin erstellen.

Laden Sie diese Produkte aus dem My Account Seite hinzu.

Gehen Sie zu Darstellung >> Themes.

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

2. Installieren Sie das Beaver Builder Pro & Beaver Themer Plugin

Beaver Builder Pro und Beaver Themer sind leistungsstarke WordPress-Plugins, die entwickelt wurden, um das Erstellen und Anpassen von Websites zu verbessern.

Gehen Sie zu Plugins >> Neu hinzufügen >> Klicke auf Plugin hochladen

Laden Sie die Plugin-ZIP-Datei hoch und aktivieren Sie beide Plugins nacheinander.

Sie können alle Schritte des Setup-Assistenten überspringen.

3. GeoDirectory installieren

Abschließend musst du GeoDirectory.

Gehen Sie zu Plugins >> Neu hinzufügeninstallieren, suche nach GeoDirectory. Bitte installiere und aktiviere es. Wir haben die Installation der Plugins abgeschlossen.

4. GeoDirectory Installations-Assistent

Für das GeoDirectory-Plugin solltest du den Setup-Assistenten abschließen, um den Google Maps API-Schlüssel zu konfigurieren und einige Beispiel-Einträge zu importieren.

Auswahl des Kartensystems (Google Maps oder OpenStreetMap)

Im ersten Schritt des Assistenten kannst du zwischen zwei Kartensystemen wählen: Google Maps und OpenStreetMaps (welches keinen API-Schlüssel erfordert).

In diesem Tutorial wählen wir OpenStreetMaps.

Wenn du Google Maps auswählen möchtest, führe die folgenden zusätzlichen Schritte durch.

Klicken Sie auf die Schaltfläche „Schlüssel generieren 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: Es ist eine Voraussetzung. Du wirst jedoch nur belastet, wenn du den Schwellenwert von 200 $/Monat überschreitest.

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

Festlegen der Standardstadt

Danach legst du den Standardstandort fest. Dies ist die Stadt, für die das Verzeichnis erstellt wird.

Wir werden Philadelphia als Standardstadt festlegen.

Sie können jeden beliebigen Standort verwenden.

Wenn du Einträge für mehrere Städte hinzufügen möchtest, benötigst du das Location Manager-Add-on.

Zusatzfunktionen hinzufügen

In diesem Schritt installieren wir UsersWP, ein Plugin für Benutzerregistrierung und Anmeldung 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

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.

Du fügst jetzt keine Sidebar-Widgets und Menüelemente hinzu; das machen wir später.

Gestalten Sie die Beaver Builder Verzeichnis-Website

Nachdem wir das Theme und die Plugins installiert und die grundlegende Einrichtung von GeoDirectory abgeschlossen haben, können wir mit der Gestaltung unserer Verzeichnis-Website mit dem Beaver Builder Suite von Tools zu gestalten.

1. Das Website-Logo gestalten

Zuerst das Wichtigste: Wir benötigen ein Logo für unsere Website.

Sie müssen keinen Designer beauftragen, um die erste Version Ihres Logos zu entwerfen.

Einer der größten Fehler beim Start eines neuen Verzeichnisses ist es, zu viel Zeit und Geld zu investieren, bevor man die Marktreife des Produkts getestet hat.

Mit einer App wie Canva können Sie in fünf Minuten ein Logo gestalten – kostengünstig und überraschend gut.

Für ein MVP (Minimum Viable Product) ist ein mit Canva gestaltetes Logo mehr als ausreichend.

Es gibt zahlreiche Logo-Vorlagen zur Auswahl, und es spielt keine Rolle, ob Ihr erstes Logo nicht so perfekt und einzigartig ist, wie Sie es sich vorstellen.

Wenn Ihr Projekt an Fahrt gewinnt, können Sie später jederzeit in eine Verbesserung oder einen kompletten Neuentwurf investieren.

Ein durchschnittliches Logo ist nie der Hauptgrund für das Scheitern eines Projekts.

2. Beaver Builder Design der Verzeichnis-Startseite

Du kannst eine neue Seite erstellen oder eine von WordPress standardmäßig erstellte Seite verwenden, wie die Beispielseite.

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

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

Legen Sie nun das Logo unter Darstellung >> Anpassen >> Header >> Header-Logo fest
festlegen. Logo-Typ: Header und Logo-Bild hochladen.

Das Navigationsmenü

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

Fügen Sie die benötigten Links hinzu (von der linken in die rechte Spalte) und speichern.

In den Menü-Einstellungen > Abschnitt „Anzeigeort, du kannst die „Haupt„-Option auswählen.

If you want, you can make the same menu appear on the footer or create another menu to appear there.

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

Wir haben sieben Hauptnavigationslinks und einige Unternavigationslinks hinzugefügt:

1. Home
2. Über uns
3. Blog
4. Orte und Orte hinzufügen
5. Profil
6. Anmelden
7. Logout

Der Login-Link (aus UsersWP-Endpunkten) wird nur für abgemeldete Benutzer angezeigt, während die Abmelde-, Konto- und Profillinks nur für angemeldete Benutzer sichtbar sind.

Die Typografie

Legen wir nun die Typografie für Schriftart und -größe des Website-Textes fest. Ich lege eine globale Schriftfamilie, Schriftstärke und Schriftgröße fest, die auf den gesamten Website-Text angewendet wird.

Wir gehen zu Darstellung > Customiser > Allgemein > Layout. Wir nehmen die folgenden Einstellungen vor
Breite: Volle Breite
Inhaltsbreite: 1200

Wir gehen zu Darstellung > Customiser > Allgemein > Text.

Schriftfamilie: Outfit
Schriftgewicht: Light
Schriftgröße: 18
Zeilenhöhe: 1.45

Der Inhalt

Ich werde diese Seite von Grund auf mit dem Beaver Builder Plugin erstellen.

Dazu benötigen wir einen Hero-Header auf der Startseite.

Bearbeiten wir zunächst die Startseite in Beaver Builder, indem wir auf „Beaver Builder starten" klicken.

Ziehen Sie nun einen Zeilen-Container, indem Sie auf das Plus-Symbol oben rechts klicken.

Legen Sie im Tab „Zeilenstil" folgendes fest
Breite: Volle Breite
Inhaltsbreite: Fest
Mindesthöhe: 600px
Hintergrundtyp: Foto
Hintergrundfoto-Quelle: Medienbibliothek
Position: Zentriert
Skalierung: Füllen

Ziehen Sie nun einen Header und den GD > Seach Block über den oberen Bereich dieser Zeile.

Fügen wir nun einen leeren Zeilen-Container hinzu, in den wir einen GD > Categories Block einfügen.

Legen Sie die GD > Categories Block-Einstellungen wie folgt fest
Design-Typ: Bildhintergrund
Zeilenelemente: 4
Aktivieren das Kategoriebild verwenden Option

Sie können einer Kategorie ein Bild zuweisen, indem Sie die Kategorie über wp-admin -> places -> Place Categories.

Jede Kategorie hat eine Option, um ein Standardbild festzulegen

Jetzt fügen wir eine leere Zeile mit einem 1-Spalten-Layout hinzu.

mit den folgenden Einstellungen
Farbe: rgba(234,240,255,0.64)
Breite: Volle Breite
Inhaltsbreite: Fest

Jetzt fügen wir ein Header-Element hinzu
Text: Aktuelle Unternehmenseinträge
Größe: 42
Ausrichtung: Zentriert

Als Nächstes bearbeiten wir einige Einstellungen in diesem GD > Listings-Block.

Wir werden Folgendes festlegen: Sortierung: recent
Grid: 4

Wir fügen einen Zeilen-Container mit den folgenden Einstellungen hinzu.
Breite: Volle Breite
Inhaltsbreite: Volle Breite

Füge das GD > Map Block darin ein und behalten die Standardeinstellungen bei.

Jetzt benötigen wir abschließend einen CTA am unteren Rand.

Wir fügen eine leere Zeile mit einem zweispaltigen Layout und den folgenden Einstellungen hinzu.
Breite: Volle Breite
Inhaltsbreite: Fest

Fügen wir nun eine Überschrift und Inhalt in der linken Spalte hinzu, und in der rechten Spalte fügen wir eine Schaltfläche ein, die Benutzer zur Seite zum Hinzufügen von Einträgen weiterleitet.

Herzlichen Glückwunsch! Ihre Startseite ist fertig.

3. Beaver Builder Design der Eintrags- und Suchseite für Verzeichnis-Websites

Jetzt musst du zwei wesentliche Seiten für jedes Verzeichnis gestalten.

Die Listings-Seite (allgemeives Archiv, Kategorien, Tags) und die Suchergebnisseite.

GeoDirectory erstellt diese standardmäßig mit einem allgemeinen Layout. In diesem Tutorial passen wir das Design dieser Seiten etwas an.

Die Listings- und die Suchseite sind größtenteils identisch, daher erstellen wir das Layout einmal und kopieren es auf die andere Seite.

Wir haben entschieden, dass das Layout der Eintragsseite die Listings auf der linken Seite und auf der rechten Seite eine fixierte Karte zeigt, die den genauen Standort der Einträge anzeigt.

Das ist ganz einfach.

Eintragsübersichtsseite

Gehe zu Beaver Builder > Themer Layout > Neu hinzufügen und wähle
Titel: GD Archive
Typ: Themer Layout
Layout: Archiv
Klicken Sie auf Theme-Layout hinzufügen Schaltfläche

Wähle auf der nächsten Seite Ort: Ortsarchiv.

Klicke nach dem Speichern dieser Einstellungen auf Launch Beaver Builder. Wir fügen eine leere Zeile mit einem 1-Spalten-Layout hinzu.
Breite: Volle Breite
Hintergrundfarbe: #577196

Wir fügen ihm einen Archivtitel hinzu.

Fügen wir nun eine Zeile mit einem zweispaltigen Layout hinzu.
Breite: Volle Breite
Inhaltsbreite: Volle Breite

Als Nächstes ziehen wir im linken Container GD-Archivseiten-bezogene Widgets wie GD > Loop Action, GD > Loop, GD > Loop Pagination, und GD > Search oben, damit der Benutzer auf der Archivseite suchen kann.

In der rechten Spalte ziehen wir den GD > Map Block hinein.

Wir behalten alle Einstellungen für GD > Map als Standard. Geben wir ihm eine gewisse Höhe – ich habe mich für eine Höhe von 100vh.

Füge den folgenden Stil im Theme-Customizer hinzu unter  Darstellung => Customize => CSS hinzufügen.

.geodir-archive .geodir-listings .geodir_location_listing{
    overflow-y: scroll;
    max-height: 100vh;
    padding-right: 15px;
}

Danach ist die Eintragsarchiv-Seite fertig.

Eine weitere Möglichkeit ist die Verwendung des GD > Simple Archive-Blocks, wie in diesem Tutorial zum Erstellen einer Directory Website with Elementor.

Für die Suchseite wiederholen wir denselben Vorgang.

Suchseite

Gehen Sie zu Beaver Builder > Themer Layout > Neu hinzufügen und wähle
Titel: GD Search
Typ: Themer Layout
Klicke auf Hinzufügen Theme Layout Schaltfläche

Kopiere den gesamten Inhalt des GD Archive Themer Layout-Templates und füge ihn in das GD Search Themer Layout-Template ein.

Gehe jetzt zu Geodirectory > Einstellungen > Allgemein > Seiten und wähle im Suchseiten-Themer-Layout GD Search auswählen

Unsere GD Search- und Archivseiten sind jetzt fertig.

4. Beaver Builder Einzelseiten-Design für die Verzeichnis-Website

Gehe zu Beaver Builder > Themer Layout > Neu hinzufügen und wähle
Titel: GD Details
Typ: Themer Layout
Layout: Singular
Klicken Sie auf Themer Layout hinzufügen Schaltfläche klicken.

Wähle auf der nächsten Seite Ort: Alle Orte

Klicke nach dem Speichern dieser Einstellungen auf Launch Beaver Builder. Wir fügen eine leere Zeile mit einem 1-Spalten-Layout hinzu.
Breite: Volle Breite
Inhaltsbreite: Volle Breite
Innenabstand (Padding): 0

Füge zunächst einen Bild-Slider oben auf der Eintragsdetailseite hinzu.

Wir ziehen den GD > Post Image Block in diesen Container mit den folgenden Einstellungen

Bildlimit: 10
Anzeigelimit: 3
Ausgabetyp: Slider
Autostart: Aktivieren

Fügen wir jetzt eine Zeile mit einem Zwei-Spalten-Layout hinzu.

Jetzt fügen wir alle erforderlichen GD-Detailseiten-Shortcodes einzeln in der linken Spalte hinzu.

Dazu gehören GD > Beitragstitel, GD > Single Taxonomies, GD > Single Tabs, und GD > Single Next Prev.

Wir werden hinzufügen GD > Author Action und GD > Output Location Block in die rechte Spalte ein.

Danach ist unsere Listing-Detailseite fertig.

Premium-Funktionen zu Ihrem hinzufügen Beaver Builder Verzeichnis-Website

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 Eintragserstellung festlegen. Für jede Preisstufe können Sie Funktionen aktivieren/deaktivieren, z. B. die Anzahl der Bilder für kostenlose Einträge einschränken und mehr Bilder für kostenpflichtige Einträge erlauben, mehr oder weniger Tags und Kategorien zulassen, bestimmte benutzerdefinierte Felder aktivieren oder deaktivieren sowie längere oder kürzere Beschreibungen einreichen.
2. Inserate beanspruchen: Dies ist eine grundlegende Funktion für ein Verzeichnis, bei dem 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 das Upgrade auf einen kostenpflichtigen Eintrag erfordern, 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.

Folge diesem Tutorial für eine schrittweise Anleitung: Tutorial: So erstellst du eine Verzeichnis-Website.

Dieses allgemeine Tutorial lässt sich an jedes Theme oder jeden Page-Builder anpassen.

Die Möglichkeiten sind grenzenlos.

Hier ist eine Schritt-für-Schritt-Anleitung zum Aufbau einer Verzeichnis-Website mit dem Neve-Theme und dem Otter Blocks-Plugin:

1. Installieren Sie das Neve Theme
2. Installiere und richte GeoDirectory ein
3. Installieren Sie das Otter-Plugin
4. Gestalten Sie die Verzeichnis-Website mit dem Neve-Theme und dem Gutenberg Editor

Das Neve-Theme bietet, zusammen mit dem GeoDirectory-Plugin und dem Otter-Plugin, eine umfassende und anpassungsfähige Plattform für die Entwicklung eines anspruchsvollen Online-Verzeichnisses.

Mithilfe dieser Kombination können Benutzer mühelos standortbezogene Funktionen integrieren, Layout-Konfigurationen verfeinern und dynamische Inhaltsblöcke hinzufügen – für eine benutzerfreundliche und immersive Oberfläche.

Dieses zusammenhängende System befähigt Webentwickler und -designer, eine erstklassige Verzeichnis-Website zu erstellen, die spezifische Branchenanforderungen oder umfassendere Community-Bedürfnisse erfüllt.

Lassen Sie uns die Details erörtern, wie dies erreicht werden kann.

In diesem Tutorial werden wir:

• Theme und Plugins installieren und einrichten
  1. Neve-Theme installieren
  2. Otter-Plugin installieren
  3. GeoDirectory installieren
  4. GeoDirectory Installations-Assistent
     • Auswahl des Kartensystems
     • Festlegen der Standardstadt
     • Zusatzfunktionen hinzufügen
     • Dummy-Daten hinzufügen
• Die Neve-Verzeichnis-Website gestalten
  1. Das Design der Startseite
     • Das Logo
     • Das Navigationsmenü
     • Die Typografie
     • Der Inhalt
  2. Das Design der Listings- und Suchseite
  3. Das Design der einzelnen Listing-Seite

Theme und Plugins installieren.

1. Installiere das Neve Theme

Wir müssen ein Theme installieren, und für dieses Tutorial installierst du das Neve Theme.

Gehen Sie zu Darstellung >> Themes

Wählen Sie „Neu hinzufügen Installieren, und Aktivieren das Neve Theme.

2. Installieren Sie das Otter Plugin

Das Standard-Gutenberg-Plugin reicht nicht aus, um eine Vorlage zu gestalten, daher installieren wir das Otter Plugin erstellen.

Dieses Plugin bietet angepasste Blöcke, die besser als die Standardblöcke sind und dir helfen, die Seitenvorlagen zu gestalten.

Gehen Sie zu Plugins >> Neu hinzufügen.

Suche nach Otter. Installiere es und aktiviere es.

Sie können alle Schritte des Setup-Assistenten überspringen.

3. GeoDirectory installieren

Abschließend musst du GeoDirectory.

Gehen Sie zu Plugins >> Neu hinzufügen, suche nach GeoDirectory. Bitte installiere und aktiviere es – damit ist die Plugin-Installation abgeschlossen.

4. GeoDirectory Installations-Assistent

Für GeoDirectory müssen Sie den Setup-Assistenten abschließen, um den Google Maps API-Schlüssel zu konfigurieren und einige Beispieleinträge zu importieren.

Auswahl des Kartensystems (Google Maps oder OpenStreetMap)

Im ersten Schritt des Assistenten können Sie zwischen zwei Kartensystemen wählen: Google Maps und Open Street Maps (für das kein API-Schlüssel erforderlich ist).

In diesem Tutorial wählen wir OpenStreetMaps.

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 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

Danach legst du den Standardstandort fest. Dies ist die Stadt, für die das Verzeichnis erstellt wird.

Wir werden Philadelphia als Standardstadt festlegen.

Sie können jeden beliebigen Standort verwenden.

Wenn Sie Einträge in mehr als einer Stadt hinzufügen möchten, benötigen Sie das Location Manager-Add-on.

Zusatzfunktionen hinzufügen

In diesem Schritt installieren wir UsersWP, ein Benutzerregistrierungs-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

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.

Gestalten Sie die Neve Verzeichnis-Website

Nachdem wir das Theme und die Plugins installiert und die grundlegende Einrichtung von GeoDirectory abgeschlossen haben, können wir mit der Gestaltung unserer Verzeichnis-Website mit dem Neve Suite von Tools zu gestalten.

1. Neve Design der Verzeichnis-Startseite

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 Darstellung > Customize > Startseiten-Einstellungen und wähle deine Startseite aus.

Das Logo

Zunächst das Wichtigste: Wir benötigen ein Logo für unsere Website.

Sie müssen keinen Designer beauftragen, um die erste Version Ihres Logos zu entwerfen.

Einer der größten Fehler beim Start eines neuen Verzeichnisses ist es, zu viel Zeit und Geld zu investieren, bevor man die Marktreife des Produkts getestet hat.

Mit einer App wie Canva können Sie in fünf Minuten ein Logo gestalten – kostengünstig und überraschend gut.

Für ein MVP (Minimum Viable Product) ist ein mit Canva gestaltetes Logo mehr als ausreichend.

Es gibt zahlreiche Logo-Vorlagen zur Auswahl, und es spielt keine Rolle, ob Ihr erstes Logo nicht so perfekt und einzigartig ist, wie Sie es sich vorstellen.

Wenn Ihr Projekt an Fahrt gewinnt, können Sie später jederzeit in eine Verbesserung oder einen kompletten Neuentwurf investieren.

Ein durchschnittliches Logo ist nie der Hauptgrund für das Scheitern eines Projekts.

Nachdem du dein Logo erstellt hast, gehe zu Darstellung > Customize > Header, klicke auf den Logo ändern Link und lade deine PNG-Datei hoch. Zuschneiden überspringen (oder das Bild nach Bedarf zuschneiden), wählen Sie unter Logo-Layout die Option Logo aus und klicken Sie auf Veröffentlichen.

Das Navigationsmenü

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

Fügen Sie die benötigten Links hinzu (von der linken Spalte in die rechte Spalte) und speichern. Im Menü-Einstellungen > Abschnitt „Anzeigeort, du kannst die „Haupt„-Option auswählen.

If you want, you can make the same menu appear on the footer or create another menu to appear there.

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

Wir haben sieben Hauptnavigationslinks und einige Unternavigationslinks hinzugefügt:

1. Home
2. Über uns
3. Blog
4. Orte und Orte hinzufügen
5. Profil
6. Anmelden
7. Logout

Der Login-Link (aus UsersWP-Endpunkten) wird nur für abgemeldete Benutzer angezeigt, während die Abmelde-, Konto- und Profillinks nur für angemeldete Benutzer sichtbar sind.

Die Typografie

Legen wir nun die Typografie für Schriftart und -größe des Website-Textes fest. Ich lege eine globale Schriftfamilie, Schriftstärke und Schriftgröße fest, die auf den gesamten Website-Text angewendet wird.

wir gehen zu Darstellung > Customizer > Typografie > Allgemein > Textkörper. Wir werden die 
Schriftfamilie: Inter 
Zusätzliche Schriftart Varianten: Regular 400, Medium 500, Semi-Bold 600, Bold 700, Extra Bold 800, Black 900
Transformation: Keine
Stärke: 400
Schriftgröße: 16
Zeilenhöhe: 1.7
Schriftfamilie: Arial, Helvetica, sans-serif

Unter Darstellung > Layout > Seiten die Header-Layout: Abdecken

Der Inhalt

Ich werde diese Seite von Grund auf mit dem Otter Plugin erstellen.

Wir benötigen einen Hero-Header auf der Startseite. Dafür fügen wir einen Row-Block hinzu, der von WordPress.

Wir werden einen Abschnitts-Block mit einem vollflächigen Layout hinzufügen.

Vertikale Ausrichtung: Die Mitte ausrichten (im Screenshot gezeigt) in den Abschnitts-Block Einstellungen und die Section Structure Einstellungen festlegen auf.
Mindesthöhe: Benutzerdefiniert
Benutzerdefinierte Höhe: 600

Überprüfe als Nächstes die Blockeinstellung und lege das Hintergrundbild fest.

Für den Hero-Bereich benötigen wir ein Bild, das wir kostenlos von Pexels.com (Danke, @rachel-claire).

Hintergrundüberlagerungseinstellungen auswählen und
Overlay Deckkraft: 50
Background Overlay Color: #000000 (Black)

Einstellungen für die Überlagerungsfarbe des Hero-Bildes

Now that we have made the hero image darker, we can add text.

Click the center of the image (a plus button is barely visible). This will allow you to select a new block. Add a Section block.
Klicken Sie erneut auf die Mitte des Bildes und fügen Sie ein „Advanced Heading Block hinein.
Fügen Sie im Textblock einen Text wie folgt hinzu: „Find The Best Restaurant Philadelphia”.

Block select H1 als HTML TagTextausrichtung Zentriert. (im Screenshot gezeigt.)

In den Advanced Heading Block-Stil Einstellungen
Schriftgröße: 48
Font Transform: Capitalize
Textfarbe: #FFFFFF

An diesem Punkt können wir das Suchformular zum Hero-Bereich unserer Neve-Verzeichnis-Website hinzufügen.
Click on the + button at the lower-right corner of the Title Section to add a new section.
Um die GD-Suche in der Homepage-Kopfzeile hinzuzufügen, ziehen Sie den GD > Search Block in den Hero-Container.

Fügen wir nun die folgenden Einstellungen zum übergeordneten Section Block hinein.
In den Structure settings festlegen
Maximum Content Width: 1170
Horizontal Align: Center

Nun fügen wir etwas Abstand unterhalb des Hero-Bereichs hinzu. Verwenden wir einen Spacer-Block und setzen die Höhe = 40.

Es ist an der Zeit, einige weitere erforderliche Abschnitte zur Homepage hinzuzufügen. Klicken Sie auf das Plus-Symbol und fügen Sie ein Abschnitts-Block mit Vollbild-Layout hinzu.

Ändern Sie die Abschnitts-Block Einstellungen und aktualisieren Sie die Section Structure Einstellungen auf
Maximum Content Width: 1170 und Horizontal Align: Center.

Nun fügen wir einen leeren Abschnitt unterhalb der Hero-Kopfzeile hinzu und ergänzen die GD > Categories Block in dieses Grid ein.

Blockoptionen wie folgt festlegen
Design-Typ: Bildhintergrund
Zeilenelemente: 4
Kategoriebild verwenden aktivieren

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

Jede Kategorie hat eine Option, um ein Standardbild festzulegen

Nun fügen wir den dritten Abschnitt unserer Website hinzu. Wir nennen ihn „Aktuelle Unternehmenseinträge“.
Klicken Sie auf das Plus-Symbol und suchen Sie nach 'Advanced Heading' und konfigurieren Sie nach dem Hinzufügen die Texteinstellungen wie folgt: Setzen Sie das HTML-Tag auf H3 und richten Sie es an der zentriert.

Füge einen GD > Listing Block hinzu, indem du auf das Plus-Symbol klickst und dann die Blockeinstellungen aufrufst. Stelle sicher, dass du aktivierst das Erweiterte Einstellungen anzeigen Option.

Im Block Stil Tab aktualisiere bitte die Layout: Rasteransicht (Vier Spalten).

Ändere die Anzahl der anzuzeigenden Beiträge: 8 und stellen Sie sicher, dass Sie die Option 'Standortfilter aktivieren' aktivieren und die Sortieren nach: Latest.

Jetzt fügen wir eine leere Spalte mit Inhalt und Breite auf 100 hinzu.

Füge das GD > Map Block damit verknüpfen und die Einstellungen auf Standard belassen.

Herzlichen Glückwunsch! Ihre Startseite ist fertig.

2. Neve Verzeichnis-Website: Design der Eintragsübersicht und Suchseite

Eintragsübersichtsseite

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 diese standardmäßig mit einem allgemeinen Layout. In diesem Tutorial passen wir das Layout dieser Seiten etwas an.

Die Eintragsübersichts- und die Suchseite sind größtenteils identisch, daher erstellen wir das Layout einmal und kopieren es einfach auf die andere Seite.

Wir haben entschieden, dass das Layout der Listing-Seite die Einträge auf der linken Seite zeigt und auf der rechten Seite eine fixierte Karte mit den genauen Standorten der Einträge.

Das ist ganz einfach.

Gehen Sie zu Geodirectory > Einstellungen > Allgemein > Seiten > Klicken Sie auf „GD-Archiv-Seitenvorlage bearbeiten

Entfernen Sie den gesamten Inhalt aus dieser GD Archive Seitenvorlage.

wir setzen die Seiteneinstellungen auf Folgendes
Sidebar-Layout: Keine Seitenleiste
Footer-Widget: Standard
Inhalts-Container: Volle Breite

Füge nun einen Section Block mit einem 1:1 layout.

Im linken Container ziehen wir nun GD-Archiv-seitenbezogene Widgets wie GD > Loop Action, GD > Loop, GD > Loop Pagination, und GD > Search oben, damit der Benutzer auf der Archivseite suchen kann.

In der rechten Spalte ziehe den GD > Map block, und wir lassen alle Einstellungen auf ihren Standardwerten. Wir werden jedoch die Höhe des GD > Map-Blocks auf 100vh setzen.

Als letzten Schliff fügen wir das folgende CSS im Theme-Customizer unter Darstellung => Customize => Add CSS

.geodir-archive .container.grid-container{
      max-width:100%;
}
.geodir-archive .wp-block-geodirectory-geodir-widget-loop .geodir-loop-container .geodir-listing-posts{
    overflow-y: scroll;
    max-height: 100vh;
}

Da das Neve-Theme ein kleineres Kompatibilitätsproblem mit der GD > Archivseiten-Überschrift hat, erstellen wir oben auf dieser Seite einen Titelcontainer.

wir ziehen einen leeren Abschnitt hinein und setzen die Blockeinstellung auf
Hintergrund: #444444
Innenabstand (Padding): 50 px, 20 px, 50 px, 20 px
Wir ziehen den Archivtitel Block darin ein.

Danach ist die Listing-Archivseite nun fertig.

Eine weitere Option ist die Verwendung des GD > Simple Archive-Blocks, wie in diesem Tutorial erklärt, wie man Build a Directory Website with Elementor.

Für die Suchseite wiederholen wir denselben Vorgang.

Suchseite

Gehe zu Geodirectory > Einstellungen > Allgemein > Seiten > Klicke auf GD-Suchseiten-Vorlage bearbeiten

Entfernen Sie den gesamten Inhalt aus dieser GD Search Seitenvorlage.

Kopiere den gesamten Inhalt der GD-Archivseite und füge ihn in die GD-Suchseite ein.

Unsere GD-Such- und Archivseite ist jetzt fertig.

3. Neve Verzeichnis-Website: Design der einzelnen Eintragsseite

Um die GD-Detailseite zu bearbeiten und anzupassen, können Sie zu Geodirectory > Einstellungen > Allgemein > Seiten > Klicke auf GD-Detailseiten-Vorlage bearbeiten.

In dieser Vorlage finden Sie bereits von Geodirectory generierten Standardinhalt.
wir entfernen alle diese Standardinhalte und fügen einen neuen Abschnittsblock hinzu.

Zuerst fügen wir oben auf der Listing-Detailseite einen Bild-Slider hinzu.

Wir ziehen den GD > Post Image Block in diesen Container mit den folgenden Einstellungen

Bildlimit: 10
Anzeigelimit: 3
Ausgabetyp: Slider
Autostart: Aktivieren

Jetzt fügen wir einen weiteren Abschnitts-Block darunter mit einem 2:1 layout.

Wir ändern die Abschnitts-Block Einstellungen und aktualisieren Sie die Section Structure Einstellungen auf Maximum Content Width: 1170 und Horizontal Align: Zentriert

Jetzt fügen wir alle erforderlichen GD Detail Seiten-Shortcodes nacheinander in der linken Spalte hinzu.

Dazu gehören GD > Post Title, GD > Single Taxonomies, und GD > Single Tabs.
In der rechten Spalte fügen wir GD > Author Action und GD > Output Location Block hinein.

Fügen wir nun eine Klasse ( single-gd-section ) zu diesem gesamten übergeordneten Abschnitt hinzu, um den letzten Schliff zu geben.

Fügen Sie abschließend das folgende CSS im Theme-Customizer hinzu von Darstellung => Customize => Add CSS

.single-gd-section{
	max-width:1170px;
	margin:auto;
}

Danach sieht unser Listing-Detailseite fertiggestellt.

Premium-Funktionen zu Ihrer Neve 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 dem 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 das Upgrade auf einen kostenpflichtigen Eintrag erfordern, 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.

Beginnen Sie noch heute mit dem Aufbau Ihrer Website mithilfe dieser ausführlichen Anleitung: Ihr Leitfaden zum Aufbau einer Verzeichnis-Website. Dies ist ein allgemeines Tutorial, das für jedes Theme oder jeden Page-Builder angepasst werden kann.

Die Möglichkeiten sind endlos.

Hier ist eine Schritt-für-Schritt-Anleitung zum Erstellen einer Verzeichnis-Website mit dem Ollie-Theme für WordPress:

1. Das Ollie-Theme installieren
2. Installiere und richte GeoDirectory ein
3. Die Verzeichnis-Website mit dem OllieWP-Theme und dem Gutenberg gestalten Editor

GeoDirectory ist vollständig kompatibel mit FSE-Block-Themes wie Ollie, sodass wir in diesem Fall weder einen Page Builder noch ein zusätzliches Blocks-Plugin benötigen.

GeoDirectory bietet eine robuste und flexible Lösung zur Erstellung eines dynamischen Online-Verzeichnisses mit beliebigen Themes oder Page Buildern.

In diesem Tutorial zeigen wir, wie man eine Verzeichnis-Website mit dem OllieWP Theme in Kombination mit dem GeoDirectory-Plugin erstellt.

Dieses Duo ermöglicht es Nutzern, standortbasierte Funktionen nahtlos zu integrieren, Layout-Designs anzupassen und interaktive Inhaltsblöcke einzubinden – für ein intuitives und ansprechendes Nutzererlebnis.

Mit diesem integrierten Ansatz können Webentwickler und Designer mühelos eine professionelle Verzeichnis-Website erstellen, die auf spezifische Nischenmärkte oder breite Community-Bedürfnisse zugeschnitten ist.

Schauen wir uns das im Detail an.

In diesem Tutorial werden wir:

• Theme und Plugins installieren und einrichten
  1. Das OllieWP-Theme installieren
  2. GeoDirectory installieren
  3. GeoDirectory Installations-Assistent
     • Festlegen der Standardstadt
     • Zusatzfunktionen hinzufügen
     • Dummy-Daten hinzufügen
• Die OllieWP-Verzeichnis-Website gestalten
  1. Das Design der Startseite
     • Das Logo
     • Das Navigationsmenü
     • Der Inhalt
  2. Das Design der Listings- und Suchseite
  3. Das Design der einzelnen Listing-Seite

Theme und Plugins installieren.

1. Das OllieWP-Theme installieren

Wir müssen ein Theme installieren, und für dieses Tutorial installierst du das OllieWP Theme.

Gehen Sie zu Darstellung >> Themes

Wählen Sie „Neu hinzufügen Installieren, und Aktivieren das OllieWP Theme.

2. Installiere GeoDirectory

Abschließend musst du GeoDirectory.

Gehen Sie zu Plugins >> Neu hinzufügen, suche nach GeoDirectory. Bitte installiere und aktiviere es – damit ist die Plugin-Installation abgeschlossen.

3. GeoDirectory Installations-Assistent

Für GeoDirectory müssen Sie den Setup-Assistenten abschließen, um den Google Maps API-Schlüssel zu konfigurieren und einige Beispieleinträge zu importieren.

Auswahl des Kartensystems (Google Maps oder OpenStreetMap)

Im ersten Schritt des Assistenten können Sie zwischen zwei Kartensystemen wählen: Google Maps und Open Street Maps (für das kein API-Schlüssel erforderlich ist).

In diesem Tutorial wählen wir OpenStreetMaps.

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 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

Danach legst du den Standardstandort fest. Dies ist die Stadt, für die das Verzeichnis erstellt wird.

Wir werden Philadelphia als Standardstadt festlegen.

Sie können jeden beliebigen Standort verwenden.

Wenn Sie Einträge in mehr als einer Stadt hinzufügen möchten, benötigen Sie das 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

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.

Gestalten Sie die OllieWP Verzeichnis-Website

Nachdem wir das Theme und die Plugins installiert und die grundlegende Einrichtung von GeoDirectory abgeschlossen haben, können wir mit der Gestaltung unserer Verzeichnis-Website mit dem OllieWP Suite von Tools zu gestalten.

1. OllieWP Design der Verzeichnis-Startseite

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 Darstellung > Editor > Seiten > Home und klicke auf die Schaltfläche „Bearbeiten".

Das Logo

Zunächst das Wichtigste: Wir benötigen ein Logo für unsere Website.

Sie müssen keinen Designer beauftragen, um die erste Version Ihres Logos zu entwerfen.

Einer der größten Fehler beim Start eines neuen Verzeichnisses ist es, zu viel Zeit und Geld zu investieren, bevor man die Marktreife des Produkts getestet hat.

Mit einer App wie Canva können Sie in fünf Minuten ein Logo gestalten – kostengünstig und überraschend gut.

Für ein MVP (Minimum Viable Product) ist ein mit Canva gestaltetes Logo mehr als ausreichend.

Es gibt zahlreiche Logo-Vorlagen zur Auswahl, und es spielt keine Rolle, ob Ihr erstes Logo nicht so perfekt und einzigartig ist, wie Sie es sich vorstellen.

Wenn Ihr Projekt an Fahrt gewinnt, können Sie später jederzeit in eine Verbesserung oder einen kompletten Neuentwurf investieren.

Ein durchschnittliches Logo ist nie der Hauptgrund für das Scheitern eines Projekts.

Das Navigationsmenü

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

Klicke auf die Menüs oben und entferne alle vorhandenen.

Fügen wir jetzt einen Spaltenblock mit einem Zwei-Spalten-Layout hinzu.

Füge in der linken Spalte den Website-Logo-Block hinzu.

Klicke auf den Haupt-Header-Container und lege in den Block-Einstellungen fest: Hintergrund: #FFFFF

Füge in der rechten Spalte das Navigationsmenü hinzu.

Wir haben folgende Hauptnavigations-Links und einige Unternavigations-Links hinzugefügt:

1. Home
2. Über uns
3. Blog
4. Orte und Orte hinzufügen
5. Profil
6. Login/out

Der Login/out-Block zeigt nur Login- und Logout-Links basierend auf dem Anmeldestatus des Nutzers an.

Der Inhalt

Ich werde diese Seite von Grund auf mit dem OllieWP und Gutenberg-Blöcken.

Gehen Sie zu Darstellung > Editor > Design > Seiten und klicke auf die Schaltfläche „Startseite bearbeiten".

Wir benötigen einen Hero-Header auf der Startseite – dafür entfernen wir alle Inhalte dieser Seite und fügen einen Abdecken Block hinein.

Überprüfe anschließend die Block-Einstellungen und lege die Hintergrundbild-URL fest.

Für den Hero-Bereich benötigen wir ein Bild, das wir kostenlos herunterladen von Pexels.com (Danke, @rachel-claire).

wir werden folgende Einstellungen in diesem Cover-Block hinzufügen

Inhalt: 1200
Breit: 100
Deckkraft: 50
Innenabstand & Außenabstand: 0
Mindesthöhe des Covers: 600

Jetzt fügen wir ein Header-Tag in diesem Cover-Block mit dem
Text: Finden Sie das beste Restaurant in Philadelphia

wir werden dem Header-Tag außerdem eine zusätzliche Klasse geben ( heading-text-center ), um etwas Stil hinzuzufügen.

Jetzt fügen wir den folgenden Stil im Theme-Customizer hinzu.

.heading-text-center{
    text-align:center;
}

Jetzt fügen wir den GD > search Block unterhalb dieser Überschrift hinzu.

darunter fügen wir mit einem Spacer-Block etwas Abstand mit einer Höhe von: hinzu 60

Jetzt fügen wir eine leere Spalte hinzu und platzieren den GD > Categories Block darin.

Blockoptionen wie folgt festlegen
Design-Typ: Bildhintergrund
Zeilenelemente: 3
Kategoriebild verwenden aktivieren

Sie können einer Kategorie ein Bild zuweisen, indem Sie die Kategorie über wp-admin -> places -> Place Categories.

Jede Kategorie hat eine Option, um ein Standardbild festzulegen

Unterhalb des Hero-Bereichs fügen Sie eine weitere Spalte hinzu, indem Sie auf das Plus-Symbol klicken, und fügen Sie den GD > Listings Block dort hinzu.

Jetzt nehmen wir einige notwendige Einstellungen in diesem GD > Listings Block vor. Wir setzen die Sortierung auf: Neueste

Jetzt fügen wir eine leere Spalte mit Inhalt und Breite auf 100 hinzu.

Füge das GD > Map Block darin hinzufügen und die Einstellungen auf Standard belassen.

Klicken Sie auf die Fußzeile und OllieWP bietet bereits einige vorgefertigte Footer-Vorlagen an. Ich wähle eine davon aus.

Herzlichen Glückwunsch! Ihre Startseite ist fertig.

2. OllieWP Design der Eintrags- und Suchseite für Verzeichnis-Websites

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

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 diese standardmäßig mit einem allgemeinen Layout. In diesem Tutorial passen wir das Layout dieser Seiten etwas an.

Die Eintragsübersichts- und die Suchseite sind größtenteils identisch, daher erstellen wir das Layout einmal und kopieren es einfach auf die andere Seite.

Wir haben entschieden, dass das Layout der Listing-Seite die Einträge auf der linken Seite zeigt und auf der rechten Seite eine fixierte Karte mit den genauen Standorten der Einträge.

Das ist ganz einfach.

Eintragsübersichtsseite

Gehe zu Appearance > Editor > Design > Templates und klicke auf Edit GD Archive Seitenvorlage

Entfernen Sie den gesamten Inhalt aus dieser GD Archive Seitenvorlage.

Jetzt fügen wir eine leere Zeile hinzu.

Füge darin ein zweispaltiges Layout ein

Im linken Container ziehen wir nun GD-Archiv-seitenbezogene Widgets wie GD > Loop Action, GD > Loop, GD > Loop Pagination, und GD > Search oben, damit der Benutzer auf der Archivseite suchen kann.

In der rechten Spalte ziehen wir den GD > Map Block hinein.

Alle Einstellungen für den GD > Mapbelassen wir auf den Standardwerten. Geben wir ihm eine bestimmte Höhe – ich habe mich für eine Höhe von 100vh.

Füge den folgenden Stil im Theme-Customizer hinzu unter  Darstellung => Customize => Add CSS

.geodir-archive .geodir-listings .geodir_location_listing{
    overflow-y: scroll;
    max-height: 100vh;
    padding-right: 15px;
}

Danach ist die Listing-Archiv-Seite fertig.

Eine weitere Option ist die Verwendung des GD > Simple Archive-Blocks, wie in diesem Tutorial erklärt, wie man Build a Directory Website with Elementor.

Für die Suchseite wiederholen wir denselben Vorgang.

Suchseite

Gehe zu Geodirectory > Einstellungen > Allgemein > Seiten > Klicke auf GD-Suchseiten-Vorlage bearbeiten

Entfernen Sie den gesamten Inhalt aus dieser GD Search Seitenvorlage.

Kopiere den gesamten Inhalt der GD-Archivseite und füge ihn in die GD-Suchseite ein.

Unsere GD-Such- und Archivseite ist jetzt fertig.

3. OllieWP Einzelseiten-Design für die Verzeichnis-Website

Um die GD-Detailseite zu bearbeiten und anzupassen, können Sie zu Appearance > Editor > Design > Templates und klicke auf Edit GD Single Seitenvorlage.

Eine leere Spalte hinzufügen

Zuerst fügen wir oben auf der Listing-Detailseite einen Bild-Slider hinzu. Wir ziehen den GD > Post Image Block in diesen Container mit den folgenden Einstellungen

Bildlimit: 10
Anzeigelimit: 3
Ausgabetyp: Slider
Autostart: Aktivieren

Jetzt fügen wir eine leere Zeile mit
Inhalt: 1200
Breit: 100

füge zwei Spalten darin hinzu.

Jetzt fügen wir alle erforderlichen GD-Detailseiten-Shortcodes nacheinander in die linke Spalte ein.

Dazu gehören GD > Single Taxonomies, GD > Single Tabs und GD > Single Next Prev.

In der rechten Spalte fügen wir GD > Author Action und GD > Output Location Block hinein.

Nachdem wir das erledigt haben, ist unsere Listing-Detailseite fertiggestellt.

Premium-Funktionen zu Ihrem hinzufügen OllieWP Verzeichnis-Website

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 dem 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 das Upgrade auf einen kostenpflichtigen Eintrag erfordern, 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.

Starte dein Verzeichnis-Website-Projekt mit diesem Tipp: Starte noch heute eine Verzeichnis-Website.

Die Möglichkeiten sind grenzenlos.

Hier ist eine Schritt-für-Schritt-Anleitung zum Erstellen einer Verzeichniswebsite mit dem Generatepress Theme und dem Generatepress Blocks-Plugin:

1. Das Generatepress Theme installieren
2. Installiere und richte GeoDirectory ein
3. Installieren Sie das GenerateBlocks Plugin
4. Gestalten Sie die Verzeichnis-Website mit dem Generatepress Theme und dem Gutenberg Editor

Generatepress Theme in Kombination mit dem GeoDirectory-Plugin und einem GenerateBlocks Plugin bietet eine robuste und flexible Lösung für die Erstellung eines dynamischen Online-Verzeichnisses.

Dieses Trio ermöglicht es Nutzern, standortbasierte Funktionen nahtlos zu integrieren, Layout-Designs anzupassen und interaktive Inhaltsblöcke einzubinden – für ein intuitives und ansprechendes Nutzererlebnis.

Mit diesem integrierten Ansatz können Webentwickler und Designer mühelos eine professionelle Verzeichnis-Website erstellen, die auf spezifische Nischenmärkte oder breite Community-Bedürfnisse zugeschnitten ist.

Schauen wir uns das im Detail an.

In diesem Tutorial werden wir:

• Theme und Plugins installieren und einrichten
  1. Das Generatepress Theme installieren
  2. Das GenerateBlocks-Plugin installieren
  3. GeoDirectory installieren
  4. GeoDirectory Installations-Assistent
     • Festlegen der Standardstadt
     • Zusatzfunktionen hinzufügen
     • Dummy-Daten hinzufügen
• Die Generatepress-Verzeichniswebsite gestalten
  1. Das Design der Startseite
     • Das Logo
     • Das Navigationsmenü
     • Die Typografie
     • Der Inhalt
  2. Das Design der Listings- und Suchseite
  3. Das Design der einzelnen Listing-Seite

Theme und Plugins installieren.

1. Das Generatepress Theme installieren

Wir müssen ein Theme installieren, und für dieses Tutorial installierst du das Generatepress Theme.

Gehen Sie zu Darstellung >> Themes

Wählen Sie „Neu hinzufügen Installieren, und Aktivieren das Generatepress Theme.

2. Installieren GenerateBlocks Plugin

Das Standard-Gutenberg-Plugin reicht nicht aus, um eine Vorlage zu gestalten, daher installieren wir das GenerateBlocks Plugin erstellen.

Dieses Plugin bietet angepasste GenerateBlocks die besser als die Standard-Blöcke sind und Ihnen helfen, die Seitenvorlagen zu gestalten.

Gehen Sie zu Plugins >> Neu hinzufügen.

Suche nach GenerateBlocks. Installiere es und aktiviere es.

Sie können alle Schritte des Setup-Assistenten überspringen.

3. GeoDirectory installieren

Abschließend musst du GeoDirectory.

Gehen Sie zu Plugins >> Neu hinzufügen, suche nach GeoDirectory. Bitte installiere und aktiviere es – damit ist die Plugin-Installation abgeschlossen.

4. GeoDirectory Installations-Assistent

Für GeoDirectory müssen Sie den Setup-Assistenten abschließen, um den Google Maps API-Schlüssel zu konfigurieren und einige Beispieleinträge zu importieren.

Auswahl des Kartensystems (Google Maps oder OpenStreetMap)

Im ersten Schritt des Assistenten können Sie zwischen zwei Kartensystemen wählen: Google Maps und Open Street Maps (für das kein API-Schlüssel erforderlich ist).

In diesem Tutorial wählen wir OpenStreetMaps.

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 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

Danach legst du den Standardstandort fest. Dies ist die Stadt, für die das Verzeichnis erstellt wird.

Wir werden New York als Standardstadt festlegen.

Sie können jeden beliebigen Standort verwenden.

Wenn Sie Einträge in mehr als einer Stadt hinzufügen möchten, benötigen Sie das 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

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.

Gestalten Sie die Generatepress Verzeichnis-Website

Nachdem wir das Theme und die Plugins installiert und die grundlegende Einrichtung von GeoDirectory abgeschlossen haben, können wir mit der Gestaltung unserer Verzeichnis-Website mit dem Generatepress Suite von Tools zu gestalten.

1. Generatepress Design der Verzeichnis-Startseite

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 Darstellung > Customize > Startseiten-Einstellungen und wähle deine Startseite aus.

Das Logo

Zunächst das Wichtigste: Wir benötigen ein Logo für unsere Website.

Sie müssen keinen Designer beauftragen, um die erste Version Ihres Logos zu entwerfen.

Einer der größten Fehler beim Start eines neuen Verzeichnisses ist es, zu viel Zeit und Geld zu investieren, bevor man die Marktreife des Produkts getestet hat.

Mit einer App wie Canva können Sie in fünf Minuten ein Logo gestalten – kostengünstig und überraschend gut.

Für ein MVP (Minimum Viable Product) ist ein mit Canva gestaltetes Logo mehr als ausreichend.

Es gibt zahlreiche Logo-Vorlagen zur Auswahl, und es spielt keine Rolle, ob Ihr erstes Logo nicht so perfekt und einzigartig ist, wie Sie es sich vorstellen.

Wenn Ihr Projekt an Fahrt gewinnt, können Sie später jederzeit in eine Verbesserung oder einen kompletten Neuentwurf investieren.

Ein durchschnittliches Logo ist nie der Hauptgrund für das Scheitern eines Projekts.

Nachdem du dein Logo erstellt hast, gehe zu Darstellung > Customize > Header, klicken Sie auf Logo > Logo auswählen, und laden Sie Ihre PNG-Datei hoch. Zuschneiden überspringen (oder das Bild nach Bedarf zuschneiden), wählen Sie unter Logo-Layout die Option Logo aus und klicken Sie auf Veröffentlichen.

Das Navigationsmenü

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

Fügen Sie die benötigten Links hinzu (von der linken Spalte in die rechte Spalte) und speichern. Im Menü-Einstellungen > Abschnitt „Anzeigeort, du kannst die „Haupt„-Option auswählen.

If you want, you can make the same menu appear on the footer or create another menu to appear there.

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

Wir haben sieben Hauptnavigationslinks und einige Unternavigationslinks hinzugefügt:

1. Home
2. Über uns
3. Blog
4. Orte und Orte hinzufügen
5. Profil
6. Anmelden
7. Logout

Der Login-Link (aus UsersWP-Endpunkten) wird nur für abgemeldete Benutzer angezeigt, während die Abmelde-, Konto- und Profillinks nur für angemeldete Benutzer sichtbar sind.

Die Typografie

Legen wir nun die Typografie für Schriftart und -größe des Website-Textes fest. Ich lege eine globale Schriftfamilie, Schriftstärke und Schriftgröße fest, die auf den gesamten Website-Text angewendet wird.

gehen wir zu Darstellung > Customiser > Typografie > Body. Wir werden die Schriftfamilie: Poppines Kategorie: sans-serif und Variante: 100, 100italic, 200, 200italic, 300, 300italic, regular, italic, 500, 500italic, 600, 600italic, 700, 700italic, 800, 800italic, 900, 900italic

Der Inhalt

Ich werde diese Seite von Grund auf mit dem GenerateBlocks Plugin erstellen.

wir benötigen einen Hero-Header auf der Startseite – dazu fügen wir einen Grid-Block hinzu, der vom GenerateBlocks Plugin erstellen.

wir werden die Blockausrichtung auf breit.

In den Grid-Einstellungen setzen Sie die Layout-Einstellung auf
Sidebar-Layout: Keine Sidebars
Footer-Widget: Standard
Inhalts-Container: Volle Breite
Element deaktivieren: Inhaltstitel
Grid-Element-Breite: 100

Überprüfe anschließend die Block-Einstellungen und lege die Hintergrundbild-URL fest.

Für den Hero-Bereich benötigen wir ein Bild, das wir kostenlos herunterladen von Pexels.com (Danke, @rachel-claire).

In der Abstandseinstellung Innenabstand (Padding) 100px an den oberen und unteren Außenabständen (Margins).

Fügen wir nun ein Header-Tag hinzu, um etwas Text einzufügen.

Text:: Finden Sie die besten Restaurants in Philadelphia
Größe: Klein
Erscheinungsbild: Klein Fett
Textfarbe: #FFFFFF

Innerhalb desselben Grids fügen wir den GD > Search Block mit einem Innenabstand (Padding) von oben und unten von 200px hinzu.

Jetzt fügen wir ein leeres Grid unterhalb des Hero-Headers hinzu und fügen den GD > Categories Block in dieses Grid ein.

Blockoptionen wie folgt festlegen
Design-Typ: Bildhintergrund
Zeilenelemente: 3
Kategoriebild verwenden aktivieren

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

Jede Kategorie hat eine Option, um ein Standardbild festzulegen

Ich habe in Generateblocks keine funktionierende Einstellung gefunden, um das Grid in das Inhaltslayout umzuwandeln. Wir werden den home-container Klasse zum übergeordneten Kategorie-Grid hinzufügen.

Unterhalb des Hero-Bereichs fügen Sie eine weitere Grid hinzu, indem Sie auf das Plus-Symbol klicken, und fügen Sie den GD > Listings Block dort hinzu.

Jetzt nehmen wir einige notwendige Einstellungen in diesem GD > Listings Block vor. Wir setzen die Sortierung auf: Neueste

Ähnlich wie beim Kategorieblock werden wir den home-container Klasse zum übergeordneten Grid der zuletzt erstellten Einträge hinzufügen.

Fügen wir nun ein leeres Grid hinzu und fügen darin einen GD > Map-Block ein, wobei wir die Einstellungen auf Standard belassen.

Ähnlich wie bei den anderen werden wir den home-container Klasse zum GD > Karten-übergeordneten Raster hinzufügen.

Fügen Sie abschließend das folgende CSS im Theme-Customizer hinzu von Darstellung => Customize => Add CSS

.home-container{
	max-width:1200px;
	margin:auto;
}

Herzlichen Glückwunsch! Ihre Startseite ist fertig.

2. Generatepress Design der Eintrags- und Suchseite für Verzeichnis-Websites

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 diese standardmäßig mit einem allgemeinen Layout. In diesem Tutorial passen wir das Layout dieser Seiten etwas an.

Die Eintragsübersichts- und die Suchseite sind größtenteils identisch, daher erstellen wir das Layout einmal und kopieren es einfach auf die andere Seite.

Wir haben entschieden, dass das Layout der Listing-Seite die Einträge auf der linken Seite zeigt und auf der rechten Seite eine fixierte Karte mit den genauen Standorten der Einträge.

Das ist ganz einfach.

Eintragsübersichtsseite

Gehen Sie zu Geodirectory > Einstellungen > Allgemein > Seiten > Klicken Sie auf „GD-Archiv-Seitenvorlage bearbeiten

Entfernen Sie den gesamten Inhalt aus dieser GD Archive Seitenvorlage.

wir werden die Seiteneinstellung auf Folgendes setzen
Sidebar-Layout: Keine Seitenleiste
Footer-Widget: Standard
Inhalts-Container: Volle Breite

Fügen Sie jetzt ein leeres Raster mit zwei Spalten hinzu.

Jetzt ziehen wir im linken Container archivseiten-bezogene GD-Widgets wie GD > Loop Action, GD > Loop, GD > Loop Pagination und GD > Search nach oben, damit der Benutzer über die Archivseite suchen kann.

In der rechten Spalte ziehen wir den GD > Map Block hinein.

Alle Einstellungen für den GD > Mapbelassen wir auf den Standardwerten. Geben wir ihm eine bestimmte Höhe – ich habe mich für eine Höhe von 150vh.

Um das Layout der Archivseite in voller Breite darzustellen, fügen wir das folgende CSS im Theme-Customizer hinzu von Darstellung => Customize => Add CSS

.geodir-archive .container.grid-container{
      max-width:100%;
}
.geodir-archive .wp-block-geodirectory-geodir-widget-loop .geodir-loop-container .geodir-listing-posts{
    overflow-y: scroll;
    max-height: 100vh;
}

Danach ist die Listing-Archiv-Seite fertig.

Eine weitere Option ist die Verwendung des GD > Simple Archive-Blocks, wie in diesem Tutorial erklärt, wie man Build a Directory Website with Elementor.

Für die Suchseite wiederholen wir denselben Vorgang.

Suchseite

Gehe zu Geodirectory > Einstellungen > Allgemein > Seiten > Klicke auf GD-Suchseiten-Vorlage bearbeiten

Entfernen Sie den gesamten Inhalt aus dieser GD Search Seitenvorlage.

Kopiere den gesamten Inhalt der GD-Archivseite und füge ihn in die GD-Suchseite ein.

Unsere GD-Such- und Archivseite ist jetzt fertig.

3. Generatepress Einzelseiten-Design für die Verzeichnis-Website

Um die GD-Detailseite zu bearbeiten und anzupassen, können Sie zu Geodirectory > Einstellungen > Allgemein > Seiten > Klicke auf GD-Detailseiten-Vorlage bearbeiten.

In dieser Vorlage finden Sie bereits von Geodirectory generierten Standardinhalt.

wir werden alle diese Standardinhalte entfernen und ein neues Raster hinzufügen.

Zuerst fügen wir oben auf der Listing-Detailseite einen Bild-Slider hinzu. Wir ziehen den GD > Post Image Block in diesen Container mit den folgenden Einstellungen

Bildlimit: 10
Anzeigelimit: 3
Ausgabetyp: Slider
Autostart: Aktivieren

Jetzt fügen wir darunter einen weiteren leeren Rasterblock mit einem zweispaltigen Layout hinzu.

wir fügen eine Klasse (single-details-container ) zu diesem Raster über die Blockeinstellungen hinzu.

Jetzt fügen wir alle erforderlichen GD-Detailseiten-Shortcodes nacheinander in die linke Spalte ein.

Dazu gehören GD > Single Taxonomies, GD > Single Tabs und GD > Single Next Prev.

In der rechten Spalte fügen wir GD > Author Action und GD > Output Location Block hinein.

Fügen Sie abschließend das folgende CSS im Theme-Customizer hinzu von Darstellung => Customize => Add CSS

.single-details-container {
    max-width: 1200px;
    margin: auto !important;
}
.single-gd_place .entry-content{
    margin:0px;
}

Nachdem wir das erledigt haben, ist unsere Listing-Detailseite fertiggestellt.

Premium-Funktionen zu Ihrem hinzufügen Generatepress Verzeichnis-Website

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 dem 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 das Upgrade auf einen kostenpflichtigen Eintrag erfordern, 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.

Verbessern Sie Ihre Website mit diesen wichtigen Strategien: Wichtige Strategien zur Erstellung einer Verzeichnis-Website.

Die Möglichkeiten sind grenzenlos.

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?

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

• Wie erstellt man eine Verzeichnis-Website mit dem Divi-Theme?
  • Ist GeoDirectory das beste WordPress-Plugin zur Erstellung einer Unternehmensverzeichnis-Website mit dem Divi-Theme?
  • Schritt-für-Schritt-Anleitung zur Erstellung einer Verzeichnis-Website mit dem Divi-Theme und dem GeoDirectory-Plugin
• Theme und Plugins installieren.
  • 1. Installiere das Divi-Theme
  • 2. Installiere GeoDirectory
  • 3. GeoDirectory Installations-Assistent
    • Auswahl des Kartensystems (Google Maps oder OpenStreetMap)
    • Festlegen der Standardstadt
    • Zusatzfunktionen hinzufügen
    • Dummy-Daten hinzufügen
• Die Divi-Verzeichnis-Website gestalten
  • 1. Design der Startseite der Divi-Verzeichnis-Website
    • Das Logo
    • Das Navigationsmenü
    • Der Inhalt
    • Globalen Footer erstellen
  • Design der Listings- und Suchseite der Divi-Verzeichnis-Website
    • Suchseite
    • Einzelne Listing-Seite
  • Ihre Divi-Verzeichnis-Website feinabstimmen
  • Farben und Typografie
• Holen Sie das volle Potenzial Ihres Divi-Verzeichnisses mit DiviGeo heraus
• Premium-Funktionen zu Ihrer Divi-Verzeichnis-Website hinzufügen

Theme und Plugins installieren.

1. Installiere das Divi-Theme

Zuerst müssen Sie ein 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.

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).

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

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

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

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.

Das Logo

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.

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.

Das Navigationsmenü

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

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.

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.

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.

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.

Ä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"]

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.

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.

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"]

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.

Globalen Footer erstellen

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

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.

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".

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, 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.

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.

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.

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.

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.

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=” ]

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.

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.

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

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.

So erstellst du eine Verzeichnis-Website mit OceanWP?

Hier ist eine Schritt-für-Schritt-Anleitung zum Aufbau einer Verzeichnis-Website mit dem OceanWP Theme:

1. Installiere das OceanWP Theme
2. Installiere und richte GeoDirectory ein
3. Installiere das Spectra Gutenberg Blocks Plugin
4. Gestalte die Verzeichnis-Website mit dem OceanWP Theme und dem Gutenberg Editor

Das OceanWP Theme in Kombination mit dem GeoDirectory Plugin und einem Gutenberg Blocks Plugin bietet eine robuste und flexible Lösung für die Erstellung eines dynamischen Online-Verzeichnisses.

Dieses Trio ermöglicht es Nutzern, standortbasierte Funktionen nahtlos zu integrieren, Layout-Designs anzupassen und interaktive Inhaltsblöcke einzubinden – für ein intuitives und ansprechendes Nutzererlebnis.

Mit diesem integrierten Ansatz können Webentwickler und Designer mühelos eine professionelle Verzeichnis-Website erstellen, die auf spezifische Nischenmärkte oder breite Community-Bedürfnisse zugeschnitten ist.

Schauen wir uns das im Detail an.

In diesem Tutorial werden wir:

• Theme und Plugins installieren und einrichten
  1. Das OceanWP Theme installieren
  2. Spectra Blocks installieren
  3. GeoDirectory installieren
  4. GeoDirectory Installations-Assistent
     • Auswahl des Kartensystems (Google Maps oder OpenStreetMap)
     • Festlegen der Standardstadt
     • Zusatzfunktionen hinzufügen
     • Dummy-Daten hinzufügen
• Die OceanWP-Verzeichnis-Website gestalten
  1. Das Design der Startseite
     • Das Logo
     • Das Navigationsmenü
     • Die Typografie
     • Der Inhalt
  2. Das Design der Listings- und Suchseite
  3. Das Design der einzelnen Listing-Seite

Theme und Plugins installieren.

1. Das OceanWP Theme installieren

Wir müssen ein Theme installieren, und für dieses Tutorial installierst du das OceanWP Theme.

Gehen Sie zu Darstellung >> Themes

Wählen Sie „Neu hinzufügen Installieren, und Aktivieren das OceanWP Theme.

2. Spectra Blocks Plugin installieren

Das Standard-Gutenberg-Plugin reicht nicht aus, um ein Template zu gestalten, daher installieren wir das Spectra Blocks Plugin. (Schau dir dieses Tutorial an, wenn du stattdessen eine Verzeichnis-Website mit dem Astra Theme und dem Spectra Plugin erstellen möchtest)

Dieses Plugin bietet angepasste Gutenberg-Blöcke, die besser als die Standard-Blöcke sind und dir helfen, die Seitenvorlagen zu gestalten.

Gehen Sie zu Plugins >> Neu hinzufügen.

Suche nach Spectra Blocks. Installiere und aktiviere es.

Sie können alle Schritte des Setup-Assistenten überspringen.

3. GeoDirectory installieren

Abschließend musst du GeoDirectory.

Gehen Sie zu Plugins >> Neu hinzufügen, suche nach GeoDirectory. Bitte installiere und aktiviere es – damit ist die Plugin-Installation abgeschlossen.

4. GeoDirectory Installations-Assistent

Für GeoDirectory müssen Sie den Setup-Assistenten abschließen, um den Google Maps API-Schlüssel zu konfigurieren und einige Beispieleinträge zu importieren.

Auswahl des Kartensystems (Google Maps oder OpenStreetMap)

Im ersten Schritt des Assistenten können Sie zwischen zwei Kartensystemen wählen: Google Maps und Open Street Maps (für das kein API-Schlüssel erforderlich ist).

In diesem Tutorial wählen wir OpenStreetMaps.

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 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

Danach legst du den Standardstandort fest. Dies ist die Stadt, für die das Verzeichnis erstellt wird.

Wir werden New York als Standardstadt festlegen.

Sie können jeden beliebigen Standort verwenden.

Wenn Sie Einträge in mehr als einer Stadt hinzufügen möchten, benötigen Sie das 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

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 OceanWP-Verzeichnis-Website gestalten

Nachdem wir das Theme und die Plugins installiert und die grundlegende Einrichtung von GeoDirectory abgeschlossen haben, können wir mit der Gestaltung unserer Verzeichnis-Website mit dem OceanWP Theme beginnen.

1. Design der Startseite der OceanWP-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 Darstellung > Customize > Startseiten-Einstellungen und wähle deine Startseite aus.

Das Logo

Zunächst das Wichtigste: Wir benötigen ein Logo für unsere Website.

Sie müssen keinen Designer beauftragen, um die erste Version Ihres Logos zu entwerfen.

Einer der größten Fehler beim Start eines neuen Verzeichnisses ist es, zu viel Zeit und Geld zu investieren, bevor man die Marktreife des Produkts getestet hat.

Mit einer App wie Canva können Sie in fünf Minuten ein Logo gestalten – kostengünstig und überraschend gut.

Für ein erstes MVP (Minimum Viable Product) ist ein mit Canva erstelltes Logo völlig ausreichend.

Canva bietet eine Fülle von Logo-Vorlagen, und es ist völlig in Ordnung, wenn Ihr erstes Logo nicht Perfektion oder Originalität verkörpert.

Während Ihr Projekt Fahrt aufnimmt, haben Sie jederzeit die Möglichkeit, Ihr Logo zu verfeinern oder vollständig zu überarbeiten.

Denken Sie daran: Der Erfolg eines Projekts hängt nicht von der Perfektion seines Logos ab.

Gehen Sie jetzt zu Darstellung > Customize > Header > Logo, klicken Sie auf Logo auswählen und laden Sie Ihre PNG-Datei hoch. Überspringen Sie das Zuschneiden (oder schneiden Sie das Bild nach Bedarf zu) und klicken Sie auf Veröffentlichen. Sie können auch die maximale Höhe und Breite des Logos festlegen, wenn Ihr Logo größer ist.

Das Navigationsmenü

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

Fügen Sie die benötigten Links hinzu (von der linken Spalte in die rechte Spalte) und speichern. Im Menü-Einstellungen > Abschnitt „Anzeigeort, du kannst die „Haupt„-Option auswählen.

If you want, you can make the same menu appear on the footer or create another menu to appear there.

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

Wir haben sieben Hauptnavigationslinks und einige Unternavigationslinks hinzugefügt:

1. Home
2. Über uns
3. Blog
4. Orte und Orte hinzufügen
5. Suchseite
6. Anmelden
7. Account > Profile > Forgot Password > Logout

Der Login-Link (aus UsersWP-Endpunkten) wird nur für abgemeldete Benutzer angezeigt, während die Abmelde-, Konto- und Profillinks nur für angemeldete Benutzer sichtbar sind.

Die Typografie

Legen wir nun die Typografie für Schriftart und -größe des Website-Textes fest. Ich lege eine globale Schriftfamilie, Schriftstärke und Schriftgröße fest, die auf den gesamten Website-Text angewendet wird.

gehen wir zu Darstellung > Customiser > Typografie > Body. Wir werden die Schriftfamilie: Red Hat Text und Schriftgewicht: Normal: 400

und in den Einstellungen Appearance > Customiser > Typography > Hauptmenü werden wir Schriftgewicht: Medium 500, Schriftgröße: 13px

Jetzt gehen wir zu Appearance > Customiser > General Options > General Styling Primärfarbe: #ff914d und Primärfarbe beim Hover: #ff731c

Der Inhalt

Ich werde diese Seite von Grund auf mit dem Spectra Blocks-Plugin aufbauen.

Wir benötigen einen Hero-Header auf der Startseite – dazu fügen wir einen Container-Block hinzu, der vom Spectra Blocks-Plugin bereitgestellt wird.

aus.

Für den Hero-Bereich benötigen wir ein Bild, das wir kostenlos herunterladen von Pexels.com (Danke, @Kelly).

Klicken Sie auf den hinzugefügten Abschnitt und wählen Sie in der Option Inhaltsbreite die Option Volle Breite aus, wie im folgenden Screenshot beschrieben.

Wählen Sie im Style-Tab der Container-Block-Einstellungen Repeat zu No Repeat und Size zu Abdecken.

Ein Überschriften-Element per Drag-and-Drop in das Hero-Bild ziehen.

Jetzt ist es an der Zeit, unserem Homepage-Hero-Bild einen Titel zu geben.

Ändern Sie im Tab „Stil#FFFFFF) um den Kontrast und die Lesbarkeit zu verbessern.

In diesem Tutorial verwende ich etwas Einfaches wie „Finde die besten Restaurants in New York

Vergiss nicht, den Text mit der Ausrichtungsoption zu zentrieren.

Um die GD-Suche in der Homepage-Kopfzeile hinzuzufügen, ziehen Sie den GD > Search Block in den Hero-Container.

Füge diesem Hero-Container als Nächstes eine Mindesthöhe hinzu. Ich werde sie auf 650 x 600 px in Breite und Höhe festlegen und außerdem die Containerbreite anpassen: Boxed und Inhaltsbreite: Boxed.

Es ist Zeit, diesen Seitentitel und den zusätzlichen Abstand im Header-Bereich zu entfernen.

Klicken Sie auf das O-Symbol oben rechts auf der Seite und klicken Sie einfach darauf. Stellen Sie darin im Bereich „Allgemein padding: deaktiviert ein und wählen Sie unter „Titel Titel: deaktiviert

Es ist Zeit, einige weitere erforderliche Abschnitte auf der Startseite hinzuzufügen. Ich werde jetzt einen Bereich für aktuelle Einträge hinzufügen.

Unterhalb des Hero-Bereichs fügen Sie eine weitere container hinzu, indem Sie auf das Plus-Symbol klicken, und fügen Sie den GD > Listings Block dort hinzu.

Jetzt nehmen wir einige notwendige Einstellungen in diesem GD > Listings Block vor. Wir setzen die Sortierung auf: Neueste

Jetzt fügen wir einen CTA hinzu, um Geschäftsinhaber dazu zu bewegen, ihre Unternehmen einzutragen. Wir fügen einen leeren Container hinzu und nehmen Einstellungen in den Stiloptionen vor.
Lassen Sie uns einen Hintergrund festlegen.

Lassen Sie uns nun die Container-Stile hinzufügen:

Overlay-Typ: Farbe
Bild-Overlay-Farbe: #FF6900
Overlay-Deckkraft: 0.3
Container-Breite: Volle Breite
Inhaltsbreite: Boxed

Jetzt fügen wir auch einen Call To Action Block von Spectra in diesen Container ein.

Typografie für den CTA-Bereich.
Farbe: #fffff
Schriftgröße: 32px

Lassen Sie uns dem Button etwas Stil verleihen.
Textfarbe: #000000
Hintergrundfarbe: #FFFFFF
Radius: 30px alle Seiten
Innenabstand (Padding): 10px, 30px, 10px, 30px

Lassen Sie uns den Button-Text ändern in Eintrag hinzufügen und den Link zur Seite „Eintrag hinzufügen

Unser CTA-Bereich ist nun fertig. Wir fügen noch einen weiteren Bereich hinzu – den GD > Categories Bereich darunter.

Die Einstellungen lauten wie folgt
Design-Typ: Bildhintergrund
Zeilenelemente: 3
Kategoriebild verwenden aktivieren

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

Jede Kategorie hat eine Option, um ein Standardbild festzulegen

Und damit kommen wir nun zum letzten Bereich für die Anzeige von Social-Media-Links. Wir nennen ihn STAY IN TOUCH.

Fügen Sie einen neuen leeren Container mit Hintergrund hinzu #000000.

Jetzt fügen wir eine Überschrift in diesem Container hinzu mit Ausrichtung: Zentriert und Überschrift: H3

Ich füge den Text hinzu „Stay in Touch
Farbe: #ffffff
Schriftgröße: 24px

Fügen wir nun darunter einen Absatz hinzu, um etwas Text einzufügen.

Stil hinzufügen
Textfarbe: #ffffff
Größe: Klein

Jetzt fügen wir darunter den Social-Icons-Block hinzu.

Fügen Sie in diesem Social-Icons-Block den folgenden Stil hinzu
Größe: 15px
Hintergrundgröße: 10px
Rahmenradius: 100
Farbe: #ffffff

Herzlichen Glückwunsch! Ihre Startseite ist fertig.

2. OceanWP Verzeichnis-Website Listings- und Suchseiten-Design

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 diese standardmäßig mit einem allgemeinen Layout. In diesem Tutorial passen wir das Layout dieser Seiten etwas an.

Die Eintragsübersichts- und die Suchseite sind größtenteils identisch, daher erstellen wir das Layout einmal und kopieren es einfach auf die andere Seite.

Wir haben entschieden, dass das Layout der Listing-Seite die Einträge auf der linken Seite zeigt und auf der rechten Seite eine fixierte Karte mit den genauen Standorten der Einträge.

Das ist ganz einfach.

Eintragsübersichtsseite

Gehen Sie zu Geodirectory > Einstellungen > Allgemein > Seiten > Klicken Sie auf „GD-Archiv-Seitenvorlage bearbeiten

Entfernen Sie den gesamten Inhalt aus dieser GD Archive Seitenvorlage.

Fügen Sie jetzt einen Container mit zwei Spalten hinzu.

Jetzt ziehen wir im linken Container archivseiten-bezogene GD-Widgets wie GD > Loop Action, GD > Loop, GD > Loop Pagination und GD > Search nach oben, damit der Benutzer über die Archivseite suchen kann.

In der rechten Spalte ziehen wir den GD > Map Block hinein.

Alle Einstellungen für den GD > Mapbelassen wir auf den Standardwerten. Geben wir ihm eine bestimmte Höhe – ich habe mich für eine Höhe von 100vh.

Stellen Sie nun einfach den Hauptcontainer auf volle Breite ein, indem Sie die nachstehenden Anweisungen im Bild unten befolgen.

Jetzt setzen wir das Archivseiten-Template auf volle Breite

Wir werden außerdem den Header-Stil-Bereich für alle Seiten über Theme Customizer > Allgemeine Optionen > Allgemeine Einstellungen anpassen.
mit Stil
Überschriftenstil: Zentriert
Innenabstand (Padding): 20px
Hintergrundfarbe: #1e73be
Textfarbe: #ffffff

Danach ist die Listing-Archiv-Seite fertig.

Eine weitere Option ist die Verwendung des GD > Simple Archive-Blocks, wie in diesem Tutorial erklärt, wie man Build a Directory Website with Elementor.

Für die Suchseite wiederholen wir denselben Vorgang.

Suchseite

Gehe zu Geodirectory > Einstellungen > Allgemein > Seiten > Klicke auf GD-Suchseiten-Vorlage bearbeiten

Entfernen Sie den gesamten Inhalt aus dieser GD Search Seitenvorlage.

Kopiere den gesamten Inhalt der GD-Archivseite und füge ihn in die GD-Suchseite ein.

Unsere GD-Such- und Archivseite ist jetzt fertig.

3. OceanWP Verzeichnis-Website Einzelnes Listing-Seiten-Design

Um die GD-Detailseite zu bearbeiten und anzupassen, können Sie zu Geodirectory > Einstellungen > Allgemein > Seiten > Klicke auf GD-Detailseiten-Vorlage bearbeiten.

In dieser Vorlage finden Sie bereits von Geodirectory generierten Standardinhalt.

Wir werden alle diese Standardinhalte entfernen und einen neuen Container hinzufügen.

Zuerst fügen wir oben auf der Listing-Detailseite einen Bild-Slider hinzu. Wir ziehen den GD > Post Image Block in diesem Container.

Passen Sie im GD > Bild-Block die folgenden Einstellungen an.

Bildlimit: 50

Limit anzeigen: 2

Fügen wir nun einen weiteren Container unterhalb dieses Containers hinzu, in dem wir weitere erforderliche Blöcke der Geodirectory-Detailseite.

Fügen wir nun alle erforderlichen GD-Detailseiten-Shortcodes hier nacheinander hinzu. Dazu gehören GD > Single Taxonomies, GD > Single Tabs, GD > Single Next Prev.

Jetzt ist es an der Zeit, einige Sidebar-Widgets hinzuzufügen. Dazu gehen wir zu wp-admin > Darstellung > Widgets.

Füge das Widget GD > Autoren-Aktion in der Haupt-Sidebar hinzu. Dieses Widget bietet eine Bearbeiten, Löschen -Option für den Eintrag.

Ein weiteres Widget hinzufügen GD > Output Location. Dieses Widget zeigt alle wichtigen Eintragsdetails an, die für die Anzeige auf der Detailseite markiert wurden.

Danach ist unsere Listing-Detailseite fertiggestellt.

Premium-Funktionen zu deiner OceanWP-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 dem 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 das Upgrade auf einen kostenpflichtigen Eintrag erfordern, 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.

Hebe deine Verzeichnis-Website mit dieser Anleitung von der Masse ab: Eine professionelle Verzeichnis-Website erstellen.

Die Möglichkeiten sind grenzenlos.