Das weltweit fortschrittlichste und skalierbarste WordPress-Verzeichnis-Plugin

Kürzlich haben wir Blockstrap entwickelt – ein Plugin (das die Seitenbausteine bereitstellt) und gleichzeitig ein Block-Theme (FSE – Full Site Editing), das die Leistungsfähigkeit des neuen Site-Editors von WordPress mit Bootstrap 5 verbindet.

Wir haben Blockstrap als Framework für unsere neue Generation von Directory-Themes entwickelt, die bald ein allgemeines Business-Verzeichnis und ein Events-Theme, ein Immobilien-Theme, ein Jobboard-Theme, ein Kleinanzeigen-Theme und viele weitere Directory-Templates für WordPress umfassen werden,

All diese Themes sind speziell dafür konzipiert, eine pixelgenaue Verzeichnis-Website mit GeoDirectory zu erstellen.

In diesem Tutorial findest du eine Schritt-für-Schritt-Anleitung zum Erstellen einer Verzeichnis-Website mit dem Blockstrap-Theme, dem Directory-Child-Theme und unserem GeoDirectory-Plugin:

1. Installiere das Blockstrap-/Directory-Theme
2. Installiere und richte GeoDirectory ein
3. Gestalte die Verzeichnis-Website mit dem Block-Theme-Builder

In dieser Anleitung zeigen wir dir, wie du mit dem Directory-Theme und dem GeoDirectory-Plugin ein ansprechendes Online-Verzeichnis erstellst.

Mit diesem Setup kannst du ganz einfach standortbasierte Funktionen hinzufügen, deine Website großartig aussehen lassen und verschiedene Arten von Inhalten einbinden, die sich dynamisch ändern.

Für den Moment halten wir die Dinge jedoch einfach und leicht verständlich.

In diesem Tutorial behandeln wir:

• Theme und Plugins installieren und einrichten
  1. Installiere das Blockstrap-/Directory-Theme
  2. GeoDirectory installieren
  3. GeoDirectory Installations-Assistent
     • Das Kartensystem auswählen
     • Festlegen der Standardstadt
     • Zusatzfunktionen hinzufügen
     • Dummy-Daten hinzufügen
• Die Blockstrap-/Directory-Verzeichnis-Website gestalten
  1. Das Logo
  2. Das Design der Startseite
     • Der Header
     • Der Inhalt
  3. Das Design der Listings- und Suchseite
  4. Das Design der einzelnen Listing-Seite

Theme und Plugins installieren.

1. Installiere das Blockstrap-Theme und sein Directory-Child-Theme

Zuerst installieren wir das Directory Theme. Da es ein Child-Theme von Blockstrap ist, wird das Haupttheme automatisch ebenfalls installiert.

Die Installation des Blockstrap-Themes fordert dich auch dazu auf, das Blockstrap-Plugin zu installieren.

Das Blockstrap-Plugin ist unser Page-Builder und wird benötigt, um die Sammlung von Blockstrap-Blöcken hinzuzufügen und das Design deiner Verzeichnis-Website.

Falls du dich über die drei 1-Stern-Bewertungen für das Theme wunderst: Bitte beachte, dass diese Bewertungen eine sehr alte Version dieses Themes betreffen, die von anderen Entwicklern erstellt wurde – nicht die aktuelle Version. Wir haben das ursprüngliche „Directory"-Theme und seine URL (wordpress.org/themes/directory/) erworben, weil uns das Konzept gefiel und wir es für unser neues Produkt nutzen wollten. Leider bedeutete das auch, dass wir die alten negativen Bewertungen geerbt haben.

Du kannst auf deiner WordPress-Website und von 

WP-Admin >> Darstellung >> Themes >> Add Newaus: Suche nach Directory und installiere die erste Theme-Option.

2. Installiere GeoDirectory

Folge diesen Schritten:

1. Gehe zu „Plugins" und dann zu „Neu hinzufügen".
2. Suche nach GeoDirectory.
3. Installiere und aktiviere es.

Das war's! Die Plugins sind jetzt alle eingerichtet.

3. GeoDirectory Installations-Assistent

Für GeoDirectory musst du den Einrichtungsassistenten abschließen, um den Google Maps API-Schlüssel zu konfigurieren und einige Beispiel-Listings zu importieren.

Auswahl des Kartensystems (Google Maps oder OpenStreetMap)

Im ersten Schritt der Einrichtung wählst du zwischen zwei Kartensystemen: Google Maps und OpenStreetMaps. In dieser Anleitung verwenden wir OpenStreetMaps.

Falls du Google Maps bevorzugst, sind einige zusätzliche Schritte erforderlich:

1. Klicke auf die Schaltfläche „Schlüssel generieren" und folge den hier angegebenen Anweisungen, um einen gültigen API-Schlüssel zu erstellen.
2. Dies sind die wichtigsten Schritte:
   • Schlüssel aktivieren.
   • Erstelle ein neues Projekt oder wähle ein vorhandenes aus.
   • Den Schlüssel abrufen.
   • Ein Abrechnungskonto einrichten.
   • Den API-Schlüssel einschränken (damit er nur von der URL deiner Website aus funktioniert).

Schritt vier ist entscheidend, aber du zahlst nur, wenn du 200 $ pro Monat überschreitest. Das kostenlose Guthaben deckt jedoch in der Regel den Bedarf der meisten Verzeichnisse.

Kommen wir nun zur Einstellung der Standardstadt.

Festlegen der Standardstadt

Anschließend wählen Sie den Standardstandort aus, also die Hauptstadt, die im Verzeichnis angezeigt wird.

Wir haben uns für Philadelphia als Standardstadt entschieden, aber Sie können natürlich jeden beliebigen Ort wählen.

Wenn Sie ein Verzeichnis erstellen, das mehrere Städte umfasst, benötigen Sie das Location Manager Add-on.

Zusatzfunktionen hinzufügen

In diesem Schritt richten wir UsersWP ein, ein Plugin für die Benutzerregistrierung. Damit können sich Benutzer auf Ihrer Website registrieren und anmelden.

UsersWP ist unverzichtbar, damit Benutzer ihre Einträge verwalten, Profile erstellen und auf Funktionen wie Bewertungen zugreifen können.

Außerdem installieren wir Ninja Forms, das allen Einträgen Kontaktformulare hinzufügt. Diese Formulare senden E-Mails direkt an die Inhaber der Einträge. (HINWEIS: BlockStrap verfügt über ein einfaches Kontaktformular, das hierfür verwendet werden kann. Ninja Forms ist nützlich für komplexere Formulare)

Beachten Sie, dass AyeCode Connect für dieses Tutorial nicht erforderlich ist, es sei denn, Sie möchten Premium-GeoDirectory-Add-ons direkt über Ihr WordPress-Dashboard hinzufügen.

Dummy-Daten hinzufügen

Der letzte Schritt im Installationsassistenten besteht darin, einige Beispieleinträge hinzuzufügen. Dabei werden auch Kategorien für die Einträge erstellt, die Sie jedoch jederzeit nach Belieben ändern können.

Gestalten Sie die Blockstrap/Directory Theme Verzeichnis-Website

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

Unser Blockstrap's Child-Theme namens Directory Theme bietet bereits eine vorgefertigte Block-Vorlage für GeoDirectory-Seiten.

In diesem Artikel passen wir diese vorgefertigten Vorlagen direkt an.

1. Blockstrap/Directory Startseiten-Design

So passen Sie das Startseiten-Design an.
Gehen Sie zu Darstellung >> Editor >> Auf Vorlagen klicken

Wählen Sie jetzt die Vorlage für die Startseite aus und klicken Sie auf das Bearbeiten-Symbol.

Bevor wir die Startseiten-Vorlage bearbeiten, erstellen wir zunächst ein Logo für die Website.

1. Das Logo

Zuallererst benötigen wir ein Logo für unsere Website.

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

Einer der größten Fehler, den Sie beim Start eines neuen Verzeichnisses machen können, ist, zu viel Zeit und Geld zu investieren, bevor Sie getestet haben, ob Menschen das, was Sie aufbauen möchten, überhaupt brauchen.

Mit einer App wie Canva können Sie in nur fünf Minuten ein Logo erstellen – die App ist großartig und kostenlos (oder günstig für das, was sie bietet, wenn Sie sich für einen Premium-Plan entscheiden).

Für eine Basisversion Ihres Produkts (auch MVP oder Minimum Viable Product genannt) ist ein mit Canva erstelltes Logo völlig ausreichend.

Es gibt zahlreiche Logo-Vorlagen zur Auswahl, und es ist völlig in Ordnung, wenn Ihr erstes Logo nicht perfekt oder besonders einzigartig ist.

Wenn Ihr Projekt gut läuft, können Sie das Logo jederzeit verbessern oder später komplett erneuern.

Ein einfaches Logo ist selten der Grund, warum ein Projekt scheitert.

Wir verwenden dieses Logo, wenn wir den Header der Website erstellen.

Der Header

Jetzt fügen wir dieses Logo-Bild hinzu, indem wir den entsprechenden Block auf der linken Seite auswählen, wie im Screenshot unten gezeigt.

Jetzt fügen wir einige erforderliche Menüpunkte hinzu, zum Beispiel Home, Places, und Blog, Kontakt und Über uns in unserem Fall.

Sie können den BS > Nav item Block verwenden, um den neuen Menüpunkt hinzuzufügen.

PROFI-TIPP: Wenn Sie sich für einen transparenten Header auf der Startseite entscheiden, müssen Sie das Logo sowohl zum regulären Header als auch zum transparenten Header hinzufügen.

Der Inhalt

So sieht die Standard-Startseite mit dem Blockstrap's Directory Child Theme.

Sie wirkt bereits in sich vollständig, aber wir werden einige kleinere Änderungen vornehmen.

Das gd_location Shortcodes gehören zum Geodirectory Location Manager Add-on. Da wir dieses Add-on momentan nicht verwenden, entferne ich die Shortcodes, die Sie im Screenshot unten sehen.

So sieht unsere Startseite jetzt aus.

Wenn Sie einen neuen Abschnitt hinzufügen oder Änderungen an Seiteninhalten vornehmen möchten, können Sie die Blockstrap-Theme integrierten Blöcke verwenden, die mit BS >

2. Blockstrap/Directory Design der Website-Listings und Suchseite

Wie bereits erwähnt, verfügen die Blockstrap- und Directory-Themes bereits über vorgefertigte Vorlagen für GD-Seiten.

Alle diese Vorlagen sind in sich vollständig, sodass wir keine Änderungen an ihnen vornehmen müssen.

Da innere Seiten einen Hero-Header verwenden, müssen wir den Header-Bereich der Archivseite anpassen und ihn mit dem neuen Logo und den Menüpunkten aktualisieren.

Gehen Sie zu Darstellung >> Editor >> Auf Vorlagen klicken >> Wählen Sie GD Archive für das Layout der Archivseite.

Ähnlich wie auf der Startseite laden wir hier auf der GD-Archivseite das neue Logo und die Menüpunkte hoch.

So sieht die GD-Archivseite mit dem Standarddesign aus.

Wählen Sie ebenso für die GD Search Seite die GD Search Archive Vorlage aus und nehmen Sie die erforderlichen Änderungen daran vor.

Für diesen Artikel behalte ich das Standardlayout bei.

3. Blockstrap/Directory Design der einzelnen Listing-Seite der Website

Um die GD Detail Seite die GD Single Seitenvorlage anzupassen und die erforderlichen Änderungen daran vorzunehmen.

So sieht die Standardvorlage der GD-Detailseite aus – sie wirkt vollständig und enthält alle erforderlichen Elemente. Daher werde ich sie nicht bearbeiten.

Premium-Funktionen zu Ihrem hinzufügen Blockstrap/Directory 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 festlegen, wie viel es kostet, ein Listing hinzuzufügen. Sie können unterschiedliche Preise für verschiedene Optionen festlegen. Beispielsweise können Sie für kostenpflichtige Listings mehr Funktionen anbieten, wie das Hochladen mehrerer Bilder, während Sie Funktionen für kostenlose Listings einschränken. Sie können auch bestimmen, welche speziellen Felder verfügbar sind und wie lang die Beschreibungen sein dürfen.
2. Inserate beanspruchen: Diese Funktion ist für ein Verzeichnis besonders wichtig. So funktioniert es: Zunächst richtet der Administrator die Datenbank ein. Anschließend lädt er Unternehmensinhaber ein, ihre kostenlosen Listings zu verwalten. Wenn ein Unternehmensinhaber die volle Kontrolle möchte, muss er möglicherweise zunächst auf ein kostenpflichtiges Listing upgraden.
3. Werbung: Werbung verkaufen ist eine weitere Form der Monetarisierung eines Online-Verzeichnisses. Wenn Ihre Website viele Besucher hat, können Sie Werbenetzwerke nutzen. Andernfalls können Sie Werbung direkt verkaufen. Das bedeutet, dass Unternehmen dafür bezahlen können, Banner in bestimmten Bereichen Ihrer Website anzuzeigen, oder ihre Listings als Anzeigen erscheinen können, beispielsweise ganz oben in den Suchergebnissen.

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

Sie können einen weltweiten Marktplatz für handgefertigte Artikel erstellen, Tickets für Veranstaltungen verkaufen oder Rabattgutscheine anbieten.

Wenn Sie loslegen möchten, schauen Sie sich diese Ressource an: So erstellen Sie eine Verzeichnis-Website von Grund auf.

Dieses Tutorial ist vielseitig und kann an jedes Theme oder jeden Page Builder angepasst werden.

Die Möglichkeiten, was Sie mit Ihrer Website tun können, sind grenzenlos.

Fazit

Wir haben eine große Anzahl von Tutorials zum Aufbau eines Verzeichnisses mit den bekanntesten Themes und Page Buildern veröffentlicht.

Wenn Sie eines davon gelesen haben, werden Sie feststellen, dass das Arbeiten mit dem Blockstrap-Framework und dem dazugehörigen Directory-Child-Theme einfacher ist.

Das Ergebnis sieht deutlich besser aus.

Und last but not least: Wenn Sie eine Blockstrap-Verzeichnis-Website testen, werden Sie auch feststellen, dass sie wesentlich schneller ist als alle anderen, für die wir bisher Tutorials erstellt haben.

Das Beste daran: Sowohl das Blockstrap-Theme und Plugin als auch das Directory-Child-Theme sind 100 % kostenlos!

Worauf warten Sie noch? Starten Sie jetzt Ihre Verzeichnis-Website mit Blockstrap und dem GeoDirectory-Plugin und verdienen Sie online Geld!

Wie baut man eine Verzeichnis-Website mit Bricks Builder?

🚨 Neue Bricks-Vorlage verfügbar! 🚨
Wir haben soeben eine großartige Bricks Builder-Vorlage veröffentlicht, die den Aufbau deiner GeoDirectory-betriebenen Verzeichnis-Website 100x einfacher und schneller macht!
🎯 Live-Demo: Hier ansehen
📥 Download & Tutorial: Hol dir die Bricks Directory template
💬 Tritt der Diskussion bei: Diskutiere in unserem Community-Forum
Probiere es aus und lass uns wissen, was du davon hältst!

Wenn du stattdessen deine eigene Vorlage gestalten möchtest, findest du hier einen Einstiegsleitfaden zum Erstellen einer Verzeichnis-Website mit dem Bricks Builder und dem GeoDirectory-Plugin:

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

Die Verwendung des Bricks Builders zusammen mit dem GeoDirectory Plugin ermöglicht es Ihnen, ein außergewöhnlich anspruchsvolles Online-Verzeichnis zu erstellen.

Diese Kombination ermöglicht die mühelose Integration standortbasierter Funktionen, die Anpassung des Erscheinungsbilds und die Einbindung dynamischer Inhaltsblöcke – das Ergebnis ist eine benutzerfreundliche und ansprechende Website-Erfahrung.

In diesem Tutorial konzentrieren wir uns jedoch auf Einfachheit und Benutzerfreundlichkeit.

Wir verwenden den Bricks Builder hauptsächlich mit den GeoDirectory Shortcodes.

In den nächsten Wochen werden wir tiefer eintauchen und detaillierte Tutorials veröffentlichen, wie man jedes GD-Template hauptsächlich mit Bricks Element und Query Loops (dynamische Daten) gestaltet.

In diesem Tutorial werden wir:

• Theme und Plugins installieren und einrichten
  1. Das Bricks Theme installieren
  2. GeoDirectory installieren
  3. GeoDirectory Installations-Assistent
     • Das Kartensystem auswählen
     • Festlegen der Standardstadt
     • Zusatzfunktionen hinzufügen
     • Dummy-Daten hinzufügen

• Die Bricks-Verzeichnis-Website gestalten
  1. Das Logo
  2. Das Design der Startseite
     • Das Navigationsmenü
     • Der Header
     • Der Inhalt
     • Der Footer
  3. Das Design der Listings- und Suchseite
  4. Das Design der einzelnen Listing-Seite

Theme und Plugins installieren.

1. Installiere das Bricks Theme

Laden Sie zunächst das Theme und das Child-Theme von der Bricks Website herunter.

Installieren Sie das Theme auf Ihrer WordPress-Website über WP-Admin >> Darstellung >> Themes

Aktivieren Sie die Theme-Lizenz.

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

Für diese Anleitung entscheiden wir uns für OpenStreetMaps.

Wenn Sie stattdessen Google Maps verwenden möchten, müssen Sie einige zusätzliche Schritte durchführen:

• Klicken Sie auf die Schaltfläche „Generate Key
• Hier sind die wichtigen Schritte:
  1. Aktivieren Sie die Schlüssel.
  2. Erstellen Sie ein neues Projekt oder wählen Sie eines aus, das Sie bereits haben.
  3. Den Schlüssel abrufen.
  4. Ein Abrechnungskonto einrichten.
  5. Beschränken Sie den API-Schlüssel (damit er nur von der URL Ihrer Website aus funktioniert).

Punkt vier ist ein Muss, aber du zahlst nur, wenn du über 200 $ pro Monat hinausgehst.

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

Festlegen der Standardstadt

Als Nächstes wählst du den Standardstandort aus, also die Stadt, um die es in dem Verzeichnis geht.

Wir nehmen Philadelphia als Standardstadt, aber du kannst jeden beliebigen Ort wählen.

Wenn du ein Verzeichnis für mehrere Städte erstellst, benötigst du 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.

Du musst AyeCode Connect für dieses Tutorial nicht verwenden. Es ist nur notwendig, wenn du premium GeoDirectory-Add-ons hinzufügen und direkt über dein WordPress-Dashboard installieren möchtest.

Dummy-Daten hinzufügen

Der letzte Schritt zum Abschluss des Installationsassistenten besteht darin, einige Beispiel-Einträge hinzuzufügen. Dadurch werden auch Kategorien für Einträge eingerichtet, die du später nach Belieben ändern kannst.

Im Moment fügen wir keine Sidebar-Widgets oder Menüpunkte hinzu. Darum kümmern wir uns später.

Gestalten Sie die Bricks 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. Das Logo

Zuallererst benötigen wir ein Logo für unsere Website.

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

Einer der größten Fehler, den du beim Start eines neuen Verzeichnisses machen kannst, ist, zu viel Zeit und Geld zu investieren, bevor du getestet hast, ob die Leute es überhaupt wollen.

Du kannst ein Logo in nur fünf Minuten mit einer App wie Canva erstellen, die günstig und wirklich gut ist.

Für eine Basisversion Ihres Produkts (auch MVP oder Minimum Viable Product genannt) ist ein mit Canva erstelltes Logo völlig ausreichend.

Es gibt zahlreiche Logo-Vorlagen zur Auswahl, und es ist völlig in Ordnung, wenn Ihr erstes Logo nicht perfekt oder besonders einzigartig ist.

Wenn Ihr Projekt gut läuft, können Sie das Logo jederzeit verbessern oder später komplett erneuern.

Ein gewöhnliches Logo ist normalerweise nicht der Grund, warum ein Projekt scheitert. Wir verwenden dieses Logo, wenn wir den Header der Website erstellen.

1. Bricks 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

Sie müssen diese Seite als Startseite der Website festlegen. Gehen Sie dazu zu wp-admin >> Einstellungen >> Lesen

Lassen Sie uns nun zunächst das Navigationsmenü der Website einrichten.

Das Navigationsmenü

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„ Optionen.

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:

1. Home
2. Orte und Orte hinzufügen
3. Suchen
4. Blog
5. Konto
6. Registrierungs- & Anmeldeseiten

Der Header

Um den Website-Header festzulegen, gehen Sie zu wp-admin >> Bricks >> Vorlagen >> Add New

Erstelle eine Bricks-Vorlage für den Header.

wir wählen ein zweispaltiges Layout mit einem 30::70-Verhältnis.

Ziehe in der linken Spalte den Logo-Block hinein und lade das Seitenlogo darin hoch.

Setzen wir die Breite: 200px

Ziehe in der rechten Spalte das Nav menu in die rechte Spalte.

mit Einstellungen wie
Hauptachse ausrichten: center
Querachse ausrichten: Rechts

Typografie
Texttransformation: Poppins 500

Der Inhalt

Jetzt gestalten wir die Startseite. Wir bearbeiten die Startseite, indem wir auf die Schaltfläche „Mit Bricks bearbeiten

Wir fügen einen leeren Container mit den folgenden Einstellungen hinzu
Selbstausrichtung: Zentriert
Hauptachsen ausrichten: Zentriert
Querachse ausrichten: Zentriert

In den Stil Reiter des Abschnitts

Innenabstand (Padding): 50px (oben) 50px (unten)
Mindesthöhe: 500
Hintergrundbild hochladen
Hintergrundposition: Mitte Mitte
Hintergrundwiederholung: Repeat

Fügen wir nun ein Überschriften-Tag über diesem Container hinzu.
Text: Finden Sie das beste Restaurant in Philadelphia

Fügen Sie nun im Style-Tab des Heading-Tags die folgenden Einstellungen hinzu.
Typografie:
Schriftgröße: 48px
Textausrichtung: Zentriert
Texttransformation: Großschreibung
Schriftart: Poppins

Fügen Sie nun darunter einen Shortcode-Block hinzu und fügen Sie den [gd_search mb=”3″] Shortcode darin ein.

Fügen Sie nun einen weiteren leeren Container hinzu und fügen Sie einen Shortcode-Block mit dem folgenden Shortcode ein.

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

Im Style-Tab des Kategorie-Containers. Gehen Sie zu Layout > Margin

Innenabstand oben: 50px
Innenabstand unten: 50px
Innenabstand links: 50px
Innenabstand rechts: 50px

Jetzt fügen wir einen Abschnitt hinzu, um aktuelle Unternehmen anzuzeigen.

Fügen wir einen weiteren leeren Abschnitt mit einem Header-Tag hinzu und
Text: Aktuelle Unternehmenseinträge

mit den folgenden typografischen Einstellungen wie
Schriftgröße: 32px

Fügen wir nun darunter den folgenden Shortcode hinzu

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

Darunter möchten wir nun eine Karte hinzufügen, die alle Unternehmen auflistet.
Dazu fügen wir einen leeren Container und darin einen Shortcode-Block mit dem folgenden Shortcode ein.
mit dem folgenden Stil für den Container.
Innenabstand oben: 50px
Innenabstand unten: 50px

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

Nun möchten wir einen CTA hinzufügen, wofür wir ein zweispaltiges Layout verwenden.
Mit folgenden Einstellungen
Richtung: Horizontal (Zeile)
Selbstausrichtung: Zentriert
Querachse ausrichten: Zentriert
Spaltenabstand: 20
Zeilenabstand: 20

In der linken Spalte ziehen wir ein Bild hinein, und in der rechten Spalte fügen wir einen Text und eine Schaltfläche hinzu, um eine Eintragungsseite zu erstellen.

Der Footer

Um nun eine Fußzeile zu gestalten und zu erstellen, gehen Sie zu wp-admin >> Bricks >> Vorlagen >> Add New
und wählen Sie das Template-Tag als Footer aus und bearbeiten Sie das Template mit Bricks.

Jetzt fügen wir einen leeren Container mit dem Hintergrundfarbe: #072027

Fügen Sie den grundlegenden Textblock mit etwas Text und Stil hinzu Textausrichtung: Zentriert

Danach ist unsere Startseite fertig.

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

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 bearbeiten Sie sie mit Bricks Builder.

Jetzt fügen wir einen leeren Abschnitt hinzu und ziehen darin den Post Title Block hinein.

Stellen Sie in den Abschnitts-Stileinstellungen
Hintergrundfarbe: #072027
Innenabstand (Padding): 30px 10px 30px 10px

Stellen Sie für den Post-Title-Block die Typografie-Einstellung auf
Schriftart: Poppins
Farbe: #fffff

Fügen wir nun einen leeren Abschnitt und darin einen zweispaltigen Container (50::50) hinzu.

Als Nächstes fügen wir im linken Container Shortcode-Blöcke mit den GD-Archivseiten-bezogenen Shortcodes hinzu, wie GD > Loop Action, GD > Loop, GD > Loop Pagination und GD > Search oben, damit der Benutzer über die Archivseite suchen kann.

[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='' ]

Wir fügen einen Shortcode-Block mit dem GD > Map-Shortcode in der rechten Spalte mit den folgenden Einstellungen hinzu.

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

Wir fügen außerdem eine Klasse scrolling-gd-loop zur linken Spalte für Scroll-Touch hinzu. Sie können die im nachfolgenden Screenshot markierte Option aktivieren.

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.

Wir werden die GD Search Seitenvorlage aus Bricks >> Vorlagen >> Add Newerstellen. Stellen Sie sicher, dass Sie Vorlagentyp auswählen: GD Search Results

Kopiere den gesamten Inhalt des GD Archive Bricks-Vorlage und fügen Sie sie in die GD Search Seiten-Bricks-Vorlage ein.

Klicken Sie dazu auf der GD-Archivseite auf das Symbol „Kopieren (alle)

Navigieren Sie zur Suchseite. Sie finden die Suchseite unter Geodirectory > Einstellungen > Allgemein > Seiten.

Bearbeiten Sie sie mit Bricks. Klicken Sie auf das Symbol „Entfernen (alle)

Finally, click the Paste (all) icon on the Bricks Builder right column:

This will make the search page and the Archive page identical, full width, with the results on the left column and the fixed map on the right column.

For the search page, we also need to instruct Bricks to show this template on the individual page.

Dazu müssen wir auf das Zahnrad-Symbol > Template-Einstellungen > Bedingungen > Individuell > Suchseite (Titel Ihrer Suchseite).

3. Bricks Directory Website – Design der einzelnen Listing-Seite

Es ist Zeit, das Detail-Seiten-Template zu erstellen. Wir werden das GD Detail Seiten-Template in Bricks bearbeiten.

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 alle diese Standardinhalte entfernen und sie mit Bricks bearbeiten.

Fügen wir einen leeren Abschnitt hinzu und fügen darin einen Shortcode-Block ein.

Verwenden wir den folgenden Shortcode, um den Bild-Slider anzuzeigen.

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

Jetzt fügen wir in einem leeren Abschnitt einen zweispaltigen Container hinzu.

Im linken Container fügen wir die folgenden Shortcodes hinzu.

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

[gd_page_title tag='h1'  no_wrap='false'  title_container='1'  strip_html=']
[gd_single_taxonomies taxonomy=''  prefix=''  link_style=''  link_color=''  link_color_custom=''  link_icon='false']
[gd_single_tabs heading_font_size="0" heading_text_color_custom="#000000" mt_lg="3" border_type="border"]

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

[gd_author_actions hide_edit='false'  hide_delete='false'  author_page_only='false']
[gd_output_location location="detail" list_style="wrap"]

Danach ist unsere Listing-Detailseite fertig.

Premium-Funktionen zu Ihrem hinzufügen Bricks 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 hinzu. Sie können festlegen, wie viel es kostet, ein Inserat hinzuzufügen. Für verschiedene Preisstufen können Sie wählen, welche Funktionen enthalten sind oder nicht. Zum Beispiel könnten Sie für bezahlte Inserate mehr Bilder erlauben, diese jedoch für kostenlose einschränken. Sie können auch entscheiden, ob bestimmte benutzerdefinierte Felder verfügbar sind oder nicht, und ob Beschreibungen länger oder kürzer sein dürfen.

1. Inserate beanspruchen: Diese Funktion ist für ein Verzeichnis wirklich wichtig. So funktioniert es: Der Administrator richtet die Datenbank ein und lädt dann Geschäftsinhaber ein, ihre kostenlosen Inserate zu verwalten. Wenn ein Geschäftsinhaber die Kontrolle über ein Inserat übernehmen möchte, muss er möglicherweise zunächst auf ein bezahltes Inserat upgraden.

1. Werbung: Werbung verkaufen ist eine weitere Form der Monetarisierung eines Online-Verzeichnisses. Wenn Ihre Website viele Besucher hat, können Sie Werbenetzwerke nutzen. Andernfalls können Sie Werbung direkt verkaufen. Das bedeutet, Unternehmen können dafür bezahlen, Banner in bestimmten Bereichen Ihrer Website zu platzieren, oder ihre Inserate können als Anzeigen erscheinen, beispielsweise ganz oben in den 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.

Für alle, die ihr erstes Projekt in Angriff nehmen, hier ist Ihr Leitfaden: Ihre eigene Verzeichnis-Website erstellen.

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

Die Möglichkeiten sind grenzenlos.

Befolgen Sie diese Schritte, um eine Verzeichnis-Website mit dem BuddyBoss- und GeoDirectory-Plugin zu erstellen:

1. Installieren Sie das BuddyBoss-Theme und die BuddyBoss Platform.
2. Richten Sie GeoDirectory ein.
3. Installieren Sie das Elementor-Plugin.
4. 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 und einrichten
  1. BuddyBoss-Theme und BuddyBoss Platform installieren
  2. Elementor-Plugin installieren
  3. GeoDirectory installieren
  4. GeoDirectory Installations-Assistent
     • Das Kartensystem auswählen
     • Festlegen der Standardstadt
     • Zusatzfunktionen hinzufügen
     • Dummy-Daten hinzufügen
  5. GeoDirectory BuddyBoss Integration
• Die BuddyBoss-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. 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:

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.

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:

1. Home
2. Orte und Orte hinzufügen
3. Mitglieder
4. Blog
5. 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:

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.

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.

Hier ist eine Schritt-für-Schritt-Anleitung zum Aufbau einer Verzeichnis-Website mit dem Blocksy Theme und dem Stackable – Page Builder Gutenberg Blocks Plugin:

1. Installieren Sie das Blocksy-Theme
2. Installieren Sie das Stackable – Page Builder Gutenberg Blocks Plugin
3. Installiere und richte GeoDirectory ein
4. Gestalten Sie die Verzeichnis-Website mit dem Blocksy Theme und dem Stackable – Page Builder Gutenberg Blocks plugin

Das Blocksy-Theme bildet zusammen mit dem GeoDirectory-Plugin und dem Stackable – Page Builder Gutenberg Blocks Plugin eine vielseitige und leistungsstarke Plattform für den Aufbau eines ausgereiften Online-Verzeichnisses.

Diese Integration ermöglicht es Nutzern, standortbasierte Funktionen nahtlos einzubinden, Layout-Optionen anzupassen und dynamische Inhaltsblöcke einzufügen – für eine benutzerfreundliche und ansprechende Oberfläche.

Dieses integrierte System ermöglicht es Webentwicklern und Designern, eine erstklassige Verzeichnis-Website zu erstellen, die auf spezifische Branchenanforderungen oder breitere Community-Bedürfnisse zugeschnitten ist.

Lassen Sie uns im Detail erkunden, wie das gelingt.

In diesem Tutorial werden wir:

• Theme und Plugins installieren und einrichten
  1. Installiere das Blocksy Theme
  2. Installiere das Plugin Stackable – Page Builder Gutenberg Blocks
  3. GeoDirectory installieren
  4. GeoDirectory Installations-Assistent
     • Das Kartensystem auswählen
     • Festlegen der Standardstadt
     • Zusatzfunktionen hinzufügen
     • Dummy-Daten hinzufügen
• Gestalte die Blocksy-Verzeichnis-Website
  1. Das Logo
  2. Das Design der Startseite
     • Das Navigationsmenü
     • Der Inhalt
  3. Das Design der Listings- und Suchseite
  4. Das Design der einzelnen Listing-Seite

Theme und Plugins installieren.

1. Installiere das Blocksy Theme

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

Gehen Sie zu Darstellung >> Themes

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

2. Installieren Sie das Stackable – Page Builder Gutenberg Blocks Plugin

Das Standard-Gutenberg-Plugin reicht nicht aus, um eine Vorlage zu gestalten, daher installieren wir das Stackable – Page Builder Gutenberg Blocks 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 Stackable – Page Builder Gutenberg Blocks. 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 Blocksy 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 Blocksy Theme und dem Plugin Stackable – Page Builder Gutenberg Blocks.

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.

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.

2. Blocksy 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 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.

Stelle die Menü-Einstellungen auf Schriftart: Standardschriftart / 14px / Fett 700

Der Inhalt

Ich werde diese Seite von Grund auf mit dem Stackable – Page Builder Gutenberg Blocks Plugin erstellen.

Wir benötigen einen Hero-Header auf der Startseite – dafür fügen wir einen Spaltenblock hinzu, der vom Stackable – Page Builder Gutenberg Blocks Plugin erstellen.

In der Spalten-Layout-Einstellung
Blockbreite: Volle Breite
Inhaltsbreite: Volle Breite
Maximale Inhaltsbreite: 1200px

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

Jetzt fügen wir einen Überschriftsblock über dem Bild hinzu mit
Inhalt: Finden Sie das beste Restaurant in Philadelphia
Titel-HTML-Tag: H1
Größe: 48
Textfarbe: #000000

Jetzt fügen wir auch den GD > Search Block darunter hinzu.

Fügen wir nun eine weitere leere Spalte mit einem Innenabstand von 50px oben und unten hinzu.

Wir ziehen den GD > Categories Block hinein, um eine Liste der Kategorien anzuzeigen.

Fügen wir nun einen weiteren leeren Container mit den folgenden Einstellungen hinzu.

Blockbreite: Volle Breite
Inhaltsbreite: Volle Breite
Maximale Inhaltsbreite: 1200px
Farbe: #00000

Nun fügen wir den dritten Abschnitt unserer Website hinzu. Wir nennen ihn „Aktuelle Unternehmenseinträge“.

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 stelle sicher, dass du die Standortfilter aktivieren Option und setze die Sortieren nach: Neueste.

Fügen wir nun einen weiteren leeren Container mit den folgenden Einstellungen hinzu.

Blockbreite: Volle Breite
Inhaltsbreite: Volle Breite

Füge das GD > Map Block darauf und behalte die Einstellungen bei
Breite: 100%
Höhe: 450px

Zum Abschluss fügen wir einen CTA hinzu. Wir verwenden eine der vordefinierten Vorlagen

Achte darauf, folgende Einstellung zu verwenden

Blockbreite: Volle Breite
Inhaltsbreite: Volle Breite

Herzlichen Glückwunsch! Ihre Startseite ist fertig.

3. Blocksy 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 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.

Fügen wir eine leere Spalte mit folgender Einstellung hinzu
Blockbreite: Volle Breite
Inhaltsbreite: Volle Breite
Maximale Inhaltsbreite: 1200px
Farbe: #00000
Innenabstand (Padding): 30px

Fügen wir den GD > Beitragstitel Shortcode darin ein.

Füge nun einen Spalte Block mit einem 50:50-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 .gd-archive-left-container{
    overflow-Y: scroll;
    max-height: 100%;
	  height:100vh;
		padding-right:15px;
}

.breakdance .bde-column-111-108.bde-column{
	overflow:hidden;
}

Danach ist die Listing-Archivseite nun fertig.

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.

Abschließend benötigst du dieses CSS, um die Suchseite auf volle Breite zu stellen.

.geodir-page-search #main article {
max-width: 100%;
}

Unsere GD Search- und Archivseiten sind jetzt fertig.

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

Zunächst deaktivieren wir den Standard-Titel unter Design > Anpassen > Orte > Einzelner Ort und deaktivieren den Titel wie unten beschrieben.

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 Spalten-Block 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 70/20-Layout.

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.

Danach wird unsere Listing-Detailseite fertiggestellt.

Premium-Funktionen zu Ihrem hinzufügen BlocksyVerzeichnis-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.

Wenn du darüber nachdenkst, ein Online-Geschäft zu starten, ist das Erstellen einer Verzeichnis-Website möglicherweise der einfachste Einstieg.

Entdecke die Geheimnisse eines Online-Verzeichnisses mit diesem Leitfaden: Leitfaden zur Erstellung einer Verzeichnis-Website.

Hier ist eine leicht verständliche Anleitung zur Erstellung einer Verzeichnis-Website mit dem Avada-Theme und dem Avada Builder -Plugin:

1. Das Avada-Theme installieren
2. Installiere und richte GeoDirectory ein
3. Die Verzeichnis-Website mit dem Avada Builder gestalten

Das Avada-Theme ist in Kombination mit dem GeoDirectory-Plugin und dem Avada Builder-Plugin eine hervorragende Möglichkeit, ein flexibles Online-Verzeichnis zu erstellen.

Diese Kombination ermöglicht das einfache Hinzufügen standortbasierter Funktionen, die Anpassung des Layouts und die Einbindung dynamischer Inhalte für eine benutzerfreundliche Erfahrung.

Sie ermöglicht Webentwicklern und Designern, eine hochwertige Verzeichnis-Website zu erstellen, die auf bestimmte Branchen oder breitere Community-Bedürfnisse zugeschnitten ist.

Lassen Sie uns die Details dazu genauer betrachten.

In diesem Tutorial werden wir:

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

Theme und Plugins installieren.

1. Das Avada-Theme installieren

Avada ist ein vielseitiges und beliebtes WordPress-Theme, das für seine Flexibilität und leistungsstarken Funktionen bekannt ist.

Es ist ein Mehrzweck-Theme, das mit einem benutzerfreundlichen Drag-and-Drop-Builder individuell angepasst werden kann, um eine Vielzahl von Websites zu erstellen – ganz ohne Programmierkenntnisse.

Um das Avada-Theme zu erwerben und seine umfangreichen Funktionen zu erkunden, besuchen Sie den offiziellen ThemeForest-Marktplatz: Avada Theme-Kauflink.

Sie können diesem Video folgen, um das Avada-Theme einzurichten.

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 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 Avada 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 Avada 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. Avada 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 > Standort anzeigen Abschnitt können Sie die „Haupt Navigation„-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.

Header-Layout erstellen

Erstellen wir nun ein Website-Header-Layout mit dem Avada Builder.
Wir gehen also zu Avada > Layout und wählen den Header aus Globales Layout.

Klicken Sie auf Neues Layout erstellen Schaltfläche klicken.

Klicken wir nun auf die Schaltfläche „Live Builder

Es öffnet sich die Avada Builder Library vor uns.

Sie sehen viele vorgefertigte Vorlagen für verschiedene Bereiche.

In diesem Beispiel wählen wir ein vorgefertigtes Header-Layout aus dem Studio Abschnitt.

Nun ersetzen wir unser Logo, indem wir auf den Logo-Bereich des vorgefertigten Headers klicken.
Wir setzen die Maximale Bildbreite zu 150px in den Logo-Einstellungen.

Im Header-Menü wählen oder ändern wir das Menü, das im Website-Header angezeigt werden soll.

Wir nehmen einige Stil- und Ausrichtungsänderungen vor, wie im folgenden Screenshot beschrieben.

Unser Website-Header ist nun fertig. Konzentrieren wir uns jetzt auf den Inhalt der Startseite.

Der Inhalt

Wir bearbeiten die Home Seite im Live Builder.

Fügen wir einen leeren Container mit den folgenden Einstellungen hinzu
Inhaltsbreite innen: 100%
Höhe: Mindesthöhe
Mindesthöhe: 500
Zeilenausrichtung: Strecken
Spaltenausrichtung: Zentriert
Spaltenausrichtung (Justierung): Zentriert

In den Hintergrundeinstellungen fügen wir ein Bild hinzu.
Hintergrundposition: Mitte Mitte
Hintergrundwiederholung: No Repeat
Hintergrundgröße: Zentriert
Muster: Punkt
Musterfarbe: rgba(0,0,0,0.41)

Jetzt fügen wir ein Header-Titel-Tag über dem Bild hinzu mit
Text: Finden Sie das beste Restaurant in Philadelphia
Typografie:
Schriftfamilie: Inter
Variante: Bolt 700
Schriftgröße: 42px
Schriftfarbe: #ffffff

Jetzt fügen wir den GD > Search Block und behalte die Standardeinstellungen.

Jetzt fügen wir einen leeren Container mit dem GD > Category Block hinzu.

Design-Typ: Icon Links
Zeilenelemente: 4

Jetzt fügen wir einen weiteren leeren Container mit dem GD > Listing Block mit den folgenden Einstellungen hinzu.
Sortierung: recent
Grid: 4
Anzuzeigende Beiträge: 8

Jetzt fügen wir einen leeren Container mit den folgenden Einstellungen hinzu.
Inhaltsbreite innen: 100% Breite
Höhe: Auto

Inhaltsabstand: Links, Rechts 0px

Jetzt fügen wir einen GD > Map darin ein.

Zum Abschluss ist es Zeit, einen CTA-Bereich hinzuzufügen. Wir fügen einen leeren Container hinzu.
Wir fügen ihm ein Heading-Tag hinzu.

Mit folgenden Einstellungen
Ausrichtung: Links
HTML-Überschriften-Tag: H3

Jetzt fügen wir einen Button-Block mit einem Link zur Add listing Seite hinzu.

Footer-Layout erstellen

Abschließend erstellen wir ein globales Footer-Layout – auf ähnliche Weise wie beim Header-Bereich.

In diesem Beispiel verwenden wir ein vorgefertigtes Footer-Layout.

Du kannst Änderungen an diesem Footer-Layout vornehmen. Für den Moment belasse ich es bei den Standardeinstellungen.

Nach diesem letzten Schritt ist unsere Homepage fertig.

3. Avada 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 werden wir das Layout dieser Seiten mit dem Avada Builder erstellen und anpassen.

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.

Bearbeite die Seite jetzt mit dem Live-Builder.

Wir fügen einen leeren Container mit einem Inhalts-Padding von 0 oben und unten hinzu.

Jetzt fügen wir eine Spalte hinzu und ziehen GD > Page title hinein.

Lass uns
Hintergrundfarbe festlegen: #f6f6f9
Innenabstand (Padding): 50px 0px 50px 0px
Container-Linkfarbe: #efefef

Jetzt fügen wir einen zweispaltigen Container hinzu.

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.

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

Lassen Sie uns die Karte einstellen
Höhe: 150vh
Innenabstand (Padding): 30px 0px 30px 0px
und die Einstellungen auf Standard belassen.

wir fügen den gd-loop-column Klasse zur linken Spalte hinzu.

fügen wir den folgenden CSS-Schnipsel im Theme-Customizer ein.

.gd-loop-column .fusion-column-wrapper{
    overflow-y: scroll;
    padding-right: 17px;
    max-height: 960px;
}

Unsere Archivseite ist fertig.

Um das Layout der Suchseite zu erstellen.
Wir weisen diesem Layout den globalen Header und Footer zu.

gehen wir zu Avada > Layouts
fügen wir dieses hinzu und weisen dieses Layout der Suchseite zu.

Erstellen Sie auf der Suchseite nun eine Such-Inhaltsvorlage

und kopieren Sie alle Abschnitte aus der GD > Archive Seite auf diese Suchseite.
Danach ist unsere Suchseitenvorlage fertig.

4. Avada Directory Website – Design der Einzellistingseite

Jetzt ist es Zeit, die Detailseitenvorlage zu erstellen. Wir gehen und bearbeiten die GD Detail Seitenvorlage im Avada Builder.

Wir fügen einen leeren Container mit
Inhaltsbreite innen: 100% Breite

Wir fügen darin einen GD > Beitragsbild-Block mit den folgenden Einstellungen hinzu.
Bildlimit: 10
Anzeigelimit: 3
Ausgabetyp: Slider
Autostart: Aktivieren

In den GD Details Seite – stellen Sie sicher, dass Sie Erstes Beitragsbild anzeigen.

Jetzt fügen wir erneut einen Container mit einem zweispaltigen Layout wie unten hinzu.

Fügen wir nun alle erforderlichen GD-Detailseiten-Blöcke einzeln in die linke Spalte ein.

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

Wir fügen den 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 Avada 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.

Einsteiger, beginnen Sie Ihre Reise hier: Eine Verzeichniswebsite starten: Ein Leitfaden für Anfänger.

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

Die Möglichkeiten sind grenzenlos.