So erstellen Sie eine herausragende Verzeichnis-Website mit Bricks Builder
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:
- Installiere das Bricks-Theme
- Installiere und richte GeoDirectory ein
- 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.
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:
- Aktivieren Sie die Schlüssel.
- Erstellen Sie ein neues Projekt oder wählen Sie eines aus, das Sie bereits haben.
- Den Schlüssel abrufen.
- Ein Abrechnungskonto einrichten.
- 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:
- Home
- Orte und Orte hinzufügen
- Suchen
- Blog
- Konto
- 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:
- 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.
- 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.
- 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.
Newsletter – Bleiben Sie auf dem Laufenden!
Erhalten Sie die neuesten Nachrichten, Tipps und exklusive Inhalte direkt in Ihrem Posteingang.