So erstellen Sie eine herausragende Verzeichnis-Website mit BuddyBoss
Befolgen Sie diese Schritte, um eine Verzeichnis-Website mit dem BuddyBoss- und GeoDirectory-Plugin zu erstellen:
- Installieren Sie das BuddyBoss-Theme und die BuddyBoss Platform.
- Richten Sie GeoDirectory ein.
- Installieren Sie das Elementor-Plugin.
- Gestalten Sie Ihre Verzeichnis-Website mit dem BuddyBoss-Theme und Elementor.
Durch die Kombination von BuddyBoss mit dem GeoDirectory-Plugin und dem Elementor-Plugin erhalten Sie eine vielseitige Plattform, um ein ausgefeiltes Online-Verzeichnis mit Social-Networking-Funktionen zu erstellen.
Mithilfe dieser Kombination und den in diesem Artikel beschriebenen Schritten kann man ganz einfach eine benutzerfreundliche Verzeichnis-Website mit Social-Networking-Funktionen erstellen.
Lassen Sie uns die Details erkunden, wie dies umgesetzt werden kann.
In diesem Tutorial werden wir:
Theme und Plugins installieren.
1. Installiere das BuddyBoss Theme und die BuddyBoss Platform
Wir müssen ein Theme installieren, und für dieses Tutorial installierst du das BuddyBoss Theme.
Gehen Sie zu buddyboss.com, kaufen und laden Sie das BuddyBoss-Theme und die BuddyBoss Platform herunter.
Gehen Sie zu Darstellung >> Themes
Wählen Sie „Neu hinzufügen Installieren, und Aktivieren das BuddyBoss Theme.
Gehen Sie zu Plugins >> Add New
Wählen Sie Hochladen, Installieren, und Aktivieren das BuddyBoss Platform Plugin erstellen.
Jetzt konfigurieren wir BuddyBoss.
Gehen Sie zu BuddyBoss >> Komponenten
Ich aktiviere alle Komponenten – Sie können dies je nach Ihren Bedürfnissen entscheiden.
Richten wir nun einige erforderliche Seiten für BuddyBoss über die BuddyBoss >> Seiten
Ich behalte alle Einstellungen als Standard bei, aber Sie können sie prüfen und bei Bedarf erforderliche Änderungen vornehmen.
Unsere Website ist jetzt mit allen Social-Networking-Funktionen und dem BuddyBoss-Look-and-Feel einsatzbereit.
2. Installieren Sie das Elementor Plugin
Um die Templates zu gestalten, installieren wir das Elementor Plugin erstellen.
Das Elementor Plugin bietet viele Anpassungsmöglichkeiten, die besser als die Standardoptionen sind, und hilft Ihnen, die Seitentemplates zu gestalten.
Es gibt eine Elementor Pro-Version, die viele Funktionen bietet, und GeoDirectory ist mit beiden kompatibel.
Wir verwenden die Elementor kostenlose Version für diesen Artikel.
Gehen Sie zu Plugins >> Neu hinzufügen.
Suche nach Elementor. Installiere es und aktiviere es.
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.
5. GeoDirectory BuddyBoss Integration
Um BuddyBoss mit GeoDirectory zu verbinden, benötigen wir das GeoDirectory BuddyBoss Integration das sowohl für BuddyBoss und BuddyPress Integration funktioniert.
Laden Sie dieses Addon aus dem Geodirectory Dashboard herunter, laden Sie es hoch und installieren Sie dieses Plugin.
aus dem Geodiectory >> Einstellungen >> BuddyPress Tab alle in dem folgenden Screenshot aufgeführten Einstellungen aktivieren.
Dieses Plugin ermöglicht es Benutzern, ihre Inserate über die BuddyBoss-Profilseite zu verwalten.
Gestalten Sie die BuddyBoss Verzeichnis-Website
Nachdem wir das Theme und die Plugins installiert und die grundlegende Einrichtung von GeoDirectory vorgenommen haben, können wir mit der Gestaltung unserer Verzeichnis-Website beginnen.
1. BuddyBoss 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 BuddyBoss > Theme Options > Logo, und laden Sie Ihre PNG-Datei hoch.
Zuschneiden überspringen (oder das Bild nach Bedarf zuschneiden), unter Logo-Layout und klicken Sie auf Änderungen speichern.
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 „Header-Menü – Eingeloggter Benutzer und Header-Menü – Ausgeloggter Benutzer„-Option auswählen.
Wenn Sie möchten, können Sie dasselbe Menü auch auf dem Mobilgerät anzeigen lassen oder ein weiteres Menü dafür erstellen.
In diesem Beispiel haben wir nur das Header-Navigationsmenü.
Wir haben sieben Hauptnavigationslinks und einige Unternavigationslinks hinzugefügt:
- Home
- Orte und Orte hinzufügen
- Mitglieder
- Blog
- Kontaktieren Sie uns
Der Inhalt
Ich werde diese Seite von Grund auf mit dem Elementor Plugin erstellen.
Wir haben bereits einen Artikel über Wie man eine Verzeichnis-Website mit Elementor erstellt.
In diesem Artikel fügen wir BuddyBoss in den Mix hinzu.
Dafür benötigen wir einen Hero-Header auf der Startseite. Gehe dazu zu Seiten > Startseite und klicke auf Mit Elementor bearbeiten.
Füge einen Bereich hinzu. (Klicke auf die Plus-Schaltfläche des Seitenerstellers, wo es heißt Widget hierher ziehen.)
Jetzt hast du eine leere Seite mit nur einem Bereich und einer Spalte.
Lass uns ein Hintergrundbild aus dem Container-Stil-Bereich hochladen sowie einige Einstellungen wie
Position: Mitte Mitte
Wiederholen: No Repeat
Anzeigegestaltung: Abdecken
Hintergrundüberlagerung: #000000
Deckkraft: 0.51
Im Layout-Bereich des Containers nehmen wir die folgenden Einstellungen vor
Mindesthöhe: 500
Richtung: Spalte vertikal
Mittig ausrichten: zentriert
Element ausrichten: Zentriert
Dann fügen wir oben ein Header-Tag mit dem Text: Find The Best Restaurant In Philadelphia und den folgenden Einstellungen hinzu
HTML-Tag: H1
Ausrichtung: Zentriert
Textfarbe: #ffffff
Typografie Größe: 48px
Als Nächstes entwerfen wir den GD > Search Block und befüllen ihn mit den Standardeinstellungen. Im Erweitert-Tab Breite: Volle Breite (100%)
Fügen wir darunter einen weiteren leeren Container hinzu und ziehen wir den GD > Categories Block hinein, um Kategorielisten anzuzeigen.
Die GD > Kategorien-Block-Einstellungen auf Folgendes setzen
Designtyp: Bildhintergrund
Zeilenelemente: 4
Aktiviere den 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 einen leeren Container mit einem Überschriften-Tag und
Text: Aktuelle Unternehmenseinträge
Ausrichtung: Zentriert
Typografie Größe: 38px
Fügen wir darunter den GD > Listings-Block mit den folgenden Einstellungen hinzu
Sortierung: recent
Grid: 4
Darunter, innerhalb eines leeren Containers, ziehen wir den GD > Map Shortcode.
Mit den folgenden Einstellungen im Elementor-Container
Inhalt Breite: auf volle Breite
Abstand: 0
Außenabstand: Oben und unten 50px
Innenabstand (Padding): 0px
Abschließend fügen wir einen CTA hinzu, um Nutzer zur Seite „Eintrag hinzufügen
Fügen Sie einen leeren Container mit zweispaltigem Layout hinzu.
Im linken Container fügen Sie eine Bildbox hinzu.
Im rechten Container ziehen wir die Überschrift, den Text und den Button per Drag-and-Drop, um es wie folgt aussehen zu lassen
Danach ist unsere Startseite fertig.
2. BuddyBoss Verzeichnis-Website – Listings und Suchergebnisseite Design
Sie müssen zwei wichtige Seiten für ein Verzeichnis erstellen: eine für Einträge (einschließlich Archiv, Kategorien und Tags) und eine weitere für Suchergebnisse.
GeoDirectory richtet diese automatisch mit einem einfachen Design ein. Diese Anleitung hilft Ihnen, das Erscheinungsbild dieser Seiten etwas anzupassen.
Da die Eintrags- und Suchseiten sehr ähnlich sind, gestalten wir sie einmal und verwenden dasselbe Layout für beide.
Unsere Wahl für das Design der Eintragsseite sieht die Einträge auf der linken Seite und eine fixierte Karte auf der rechten Seite vor, die den Standort jedes Eintrags anzeigt.
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 und bearbeite sie mit Elementor.
Lege in den Seiteneinstellungen das Seitenlayout auf Elementor Volle Breite fest.
Fügen wir nun einen leeren Container mit den folgenden Einstellungen hinzu
Richtung: Spalte vertikal
Mittig ausrichten: zentriert
Element ausrichten: Zentriert
Hintergrundfarbe: #2143D3
Ziehen wir nun das GD > page title Block darüber.
Fügen wir nun ein zweispaltiges Layout mit den folgenden Einstellungen hinzu.
Inhalt Breite: auf volle Breite
Abstand: 0
Als Nächstes fügen wir im linken Container GD-Archivseiten-bezogene Blöcke hinzu, wie z. B. GD > Loop Action, GD > Loop, GD > Loop Pagination, und GD > Search oben, damit der Benutzer auf der Archivseite suchen kann.
Wir fügen außerdem eine Klasse scrolling-gd-loop zu dieser Spalte für scrollbares Touch-Verhalten.
In der rechten Spalte ziehen wir den GD > Map Block mit der folgenden Einstellung.
Spalteneinstellung
Innenabstand (Padding): 0px
Außenabstand: 0px
die GD > Map Shortcode-Einstellungen auf Standard zurücksetzen und
Height: 100%
Width: 100vh
Fügen wir den folgenden Stil zum Theme-Customizer hinzu.
.scrolling-gd-loop{ overflow-y: scroll !important; max-height: 1000px; }
Danach ist unsere Archivseite fertig.
Um das Layout der Suchseite zu erstellen.
Kopiere den gesamten Inhalt des GD Archive Elementor-Vorlage und füge sie in die GD Search Seiten-Elementor-Vorlage ein.
Die Suchseite findest du unter Geodirectory > Einstellungen > Allgemein > Seiten.
3. BuddyBoss Directory Website – Design der einzelnen Eintragsseite
Es ist Zeit, das Detail-Seiten-Template zu erstellen. Wir werden das GD Detail Seitenvorlage in Elementor.
Sie können zu Geodirectory > Einstellungen > Allgemein > Seiten > Klicke auf GD-Detailseiten-Vorlage bearbeiten.
In dieser Vorlage finden Sie bereits von Geodirectory generierten Standardinhalt.
werden wir all diese Standardinhalte entfernen und sie mit Elementor bearbeiten.
Fügen wir einen leeren Container hinzu
Inhaltsbreite: auf volle Breite
Abstand: 0
Außenabstand: Oben und unten 50px
Innenabstand (Padding): 0px
Richtung: Spalte vertikal
Mittig ausrichten: zentriert
Element ausrichten: Zentriert
Ziehen wir nun das Gd > Post Images Shortcode hinein mit den folgenden Einstellungen.
Bildlimit: 10
Anzeigelimit: 3
Ausgabetyp: Slider
Autostart: Aktivieren
Stelle sicher, dass der Container Breite: volle Breite (100%)
Fügen wir ein zweispaltiges Spaltenlayout hinzu.
In der linken Spalte nacheinander.
Dazu gehören GD > Post Title, GD > Single Taxonomies, und GD > Single Tabs.
In der rechten Spalte fügen wir das (BB) Post Author, GD > Author Action, und GD > Output Location Block hinein.
Danach ist unsere Listing-Detailseite fertig.
Premium-Funktionen zu Ihrem hinzufügen BuddyBoss Verzeichnis-Website
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 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.
- 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.
Entdecke hier die notwendigen Schritte für dein nächstes Online-Projekt: Schritte zur Erstellung einer erfolgreichen Verzeichnis-Website.
Dieses allgemeine Tutorial lässt sich an jedes Theme oder jeden Page-Builder anpassen.
Die Möglichkeiten sind grenzenlos.
Newsletter – Bleiben Sie auf dem Laufenden!
Erhalten Sie die neuesten Nachrichten, Tipps und exklusive Inhalte direkt in Ihrem Posteingang.