Eine Verzeichnis-Website mit Beaver Builder erstellen

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.