Hier ist eine Schritt-für-Schritt-Anleitung zum Aufbau einer Verzeichnis-Website mit dem Neve-Theme und dem Otter Blocks-Plugin:
- Installieren Sie das Neve Theme
- Installiere und richte GeoDirectory ein
- Installieren Sie das Otter-Plugin
- 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.
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:
- Schlüssel aktivieren.
- Ein neues Projekt erstellen oder ein vorhandenes auswählen.
- Den Schlüssel abrufen.
- Ein Abrechnungskonto aktivieren.
- 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 Eintragskategorien 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:
- Home
- Über uns
- Blog
- Orte und Orte hinzufügen
- Profil
- Anmelden
- 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:
- 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.
- 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.
- 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.