Was ist der beste Weg, eine Kadence Directory-Website zu erstellen?
Beim Aufbau einer Kadence Directory-Website kommen das Kadence Theme, Kadence Blocks und das beste Kadence Directory-Plugin zum Einsatz.
Das Kadence Theme ist ein vielseitiges und hochgradig anpassbares WordPress-Theme, das eine solide Grundlage für Ihre Verzeichnis-Website bietet.
Kadence Blocks hingegen ist eine Gutenberg-Block-Bibliothek, mit der Sie benutzerdefinierte Layouts erstellen und Ihrer Website verschiedene Funktionen hinzufügen können.
Schließlich ist das GeoDirectory-Plugin mit Abstand das beste Verzeichnis-Plugin für das Kadence Theme – ein leistungsstarkes Tool, mit dem Sie Ihrer Website Verzeichnisfunktionen hinzufügen können, wie z. B. Unternehmenseinträge, Nutzerbewertungen und erweiterte Suchfunktionen.
Gemeinsam bieten diese Tools eine umfassende Lösung für die Erstellung einer robusten und funktionsreichen Verzeichnis-Website.
Kadence Directory-Website nur mit einem kostenlosen Theme und kostenlosen Plugins
In diesem Tutorial führen wir Sie durch den Prozess der Erstellung einer umfassenden Verzeichnis-Website mit kostenlosen WordPress-Ressourcen, wie dem kostenlosen Kadence Theme, dem Kadence Blocks-Plugin und dem kostenlosen GeoDirectory-Plugin.
Die Verzeichnis-Website wird folgende Funktionen bieten:
- Unbegrenzte Einträge mit unbegrenzt vielen benutzerdefinierten Feldern.
- Umgebungssuche.
- Nutzerbewertungen.
- Ein Frontend-Einreichungsformular, mit dem Nutzer ihre Einträge einreichen, bearbeiten und/oder löschen können.
Wir gehen davon aus, dass Sie bereits eine WordPress-Installation bei einem Hosting-Anbieter haben. Für dieses Tutorial erstellen wir ein Unternehmensverzeichnis für die Stadt Philadelphia.
Folgendes werden wir in diesem Tutorial behandeln:
- Theme und Plugins installieren und konfigurieren
- GeoDirectory Installations-Assistent
- Die Kadence Directory-Website gestalten
- Das Design der Eintrags- und Suchseite
- Das Design der Einzeleintrag-Seite
- Premium-Funktionen zu Ihrer Kadence Directory-Website hinzufügen
- Kadence Blocks Directory-Website-Vorlagen
Am Ende dieses Tutorials haben Sie eine voll funktionsfähige Verzeichnis-Website, die bereit ist, live zu gehen. Los geht's!
Das Kadence Theme und die Plugins installieren und konfigurieren
1. Das Kadence Theme installieren
Zum Einstieg beginnen wir mit der Installation eines Themes. Für dieses Tutorial verwenden wir das Kadence Theme.
Gehen Sie zu Darstellung >> Themes
Wählen Sie „Neu hinzufügen Installieren, und Aktivieren des Hello Theme.
2. Das Kadence Blocks-Plugin installieren
Jetzt müssen Sie das Kadence Block Pluginì installieren.
Gehen Sie zu Plugins >> Neu hinzufügen.
Suchen Sie nach Kadence. Installieren Sie es und aktivieren Sie es.
3. GeoDirectory installieren
Zu guter Letzt müssen Sie GeoDirectory.
Gehen Sie zu Plugins >> Neu hinzufügennach GeoDirectory suchen. Bitte installieren und aktivieren Sie es – damit sind wir mit der Plugin-Installation vorerst fertig.
- Ein neues Projekt erstellen oder ein vorhandenes auswählen.
- Schlüssel aktivieren.
- Den Schlüssel abrufen.
- Ein Abrechnungskonto aktivieren.
- Den API-Schlüssel einschränken (damit er nur von der URL Ihrer Website verwendet werden kann)
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 Google Maps.
Klicken Sie auf die Schaltfläche „Schlüssel generieren Dokumentation um einen gültigen API-Schlüssel zu generieren.
Die wesentlichen Schritte sind:
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 legen Sie den Standardstandort fest. Dies ist die Stadt, für die das Verzeichnis erstellt wird. Wir lassen die Standardstadt unverändert.
GeoDirectory verwendet Philadelphia als Standardstadt.
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 unser UsersWP-Plugin, ein Benutzerregistrierungs-Plugin das es Benutzern ermöglicht, sich auf Ihrer Website zu registrieren und anzumelden.
Dies ist erforderlich, damit Benutzer ihre Einträge hinzufügen und bearbeiten können. Außerdem werden Benutzerprofile erstellt, in denen sie ihre Einträge, Bewertungen und vieles mehr finden können.
Wir werden auch Ninja Forms installieren, damit alle Einträge ein Kontaktformular haben, das E-Mails direkt an die Eintragsinhaber sendet.
AyeCode Connect ist für dieses Tutorial nicht zwingend erforderlich. Es wird hauptsächlich benötigt, wenn Sie GeoDirectory-Premium-Add-ons hinzufügen und direkt über das WordPress-Dashboard installieren möchten.
Dummy-Daten hinzufügen
Der letzte Schritt zum Abschluss des Installationsassistenten besteht darin, einige Beispieleinträge hinzuzufügen. Dabei werden auch Eintragskategorien angelegt, die Sie später nach Bedarf bearbeiten können.
Sie fügen jetzt noch keine Sidebar-Widgets und Menüelemente hinzu, da wir das später erledigen werden.
Die Kadence Directory-Website gestalten
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 der Kadence Suite of tools beginnen.
1. Kadence Verzeichnis-Startseiten-Design
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
Klicken Sie nun oben rechts auf dem Bildschirm auf das Symbol für die Seiteneinstellungen.
Nehmen Sie folgende Änderungen vor:
- Seitentitel: Deaktivieren
- Seitenlayout: Volle Breite
- Inhaltsstil: Ungerahmt
Den Rest unverändert lassen. Gehen Sie anschließend zu Darstellung > Customize > Startseiten-Einstellungen und wählen Sie die obige Seite als Ihre Startseite aus.
Die Beitragsseite wählen wir später aus.
Bevor wir den Inhalt der Startseite erstellen, müssen wir uns um die Kopfzeile kümmern.
Das Design der Startseite werden wir danach angehen.
Das Logo
Zunächst das Wichtigste: Wir benötigen ein Logo für unsere Website.
Sie müssen keinen Designer beauftragen, um die erste Version Ihres Logos zu entwerfen.
Einer der größten Fehler beim Start eines neuen Verzeichnisses ist es, zu viel Zeit und Geld zu investieren, bevor man die Marktreife des Produkts getestet hat.
Mit einer App wie Canva können Sie in fünf Minuten ein Logo gestalten – kostengünstig und überraschend gut.
Für ein MVP (Minimum Viable Product) ist ein mit Canva gestaltetes Logo mehr als ausreichend.
Es gibt zahlreiche Logo-Vorlagen zur Auswahl, und es spielt keine Rolle, ob Ihr erstes Logo nicht so perfekt und einzigartig ist, wie Sie es sich vorstellen.
Wenn Ihr Projekt an Fahrt gewinnt, können Sie später jederzeit in eine Verbesserung oder einen kompletten Neuentwurf investieren.
Ein durchschnittliches Logo ist nie der Hauptgrund für das Scheitern eines Projekts.
Nachdem du dein Logo erstellt hast, gehe zu Darstellung > Customize > Header, klicken Sie auf Logo > Logo auswählen, und laden Sie Ihre PNG-Datei hoch. Zuschneiden überspringen (oder das Bild nach Bedarf zuschneiden), wählen Sie unter Logo-Layout die Option Logo aus und klicken Sie auf Veröffentlichen.
Das Navigationsmenü
Nachdem Sie das Logo erstellt und hinzugefügt haben, gehen Sie zu Darstellung > Menüs, und erstellen Sie Ihr Menü.
Fügen Sie die benötigten Links hinzu (von der linken Spalte in die rechte Spalte) und speichern. Im Menü-Einstellungen > Abschnitt „Anzeigeort, können Sie die Option „Primär
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ü.
We added eight links:
- Home
- Über uns
- Blog
- Places
- Add Places
- Profil
- Anmelden
- Logout
The Login link (from UsersWP Endpoints) will only appear for Logged-out users, while the logout and profile links will only appear for logged-in users.
Der Inhalt
Now you can start designing the home page. First, you will need to add a Hero-Bild unterhalb der Kopfzeile.
Gehe dazu zu Seiten > Startseite und klicke auf Bearbeiten.
Wenn du die Beispielseite verwendet hast, lösche den Text. Wenn du eine neue Seite erstellt hast, füge einen neuen Zeilenlayout-Block hinzu.
Tippe /Row an der Stelle, wo Tippe / steht, um einen Block auszuwählen, und wähle einen Kadence Row Layout Block. Wähle anschließend die einzelne Zeile (1. Option)
Füge im Feld Maximale Inhaltsbreite den Wert 800 ein.
Klicke anschließend in den oberen Block-Tabs auf Stil. Klicke auf Bild auswählen bei der Option Hintergrundbild
Für den Hero-Bereich verwenden wir dieses kostenlose Bild von Philadelphia von Pexels.com (Danke, @Kelly).
Lade dein Bild hoch und wähle die Option Fixiert für die Hintergrundbild-Befestigung und aktualisiere die Einstellungen.
Du siehst jetzt nur einen Streifen deines Bildes, aber die nächsten Schritte sorgen dafür, dass es wie gewünscht angezeigt wird.
Das Bild benötigt eine Überlagerung, da Text darüber sonst nicht ausreichend kontrastreich und schwer lesbar wäre.
Wähle die Einstellungen für die Hintergrundüberlagerung, setze die Überlagerungsdeckkraft auf 45 und die Überlagerungsfarbe auf 000000 (Schwarz).
Klicken Sie nun auf die Registerkarte „Erweitert
Now that we have made the hero image darker, we can add text.
Click the center of the image (a plus button is barely visible). This will allow you to select a new block. Add a Section block.
Click the center of the image again and add a Text (Adv) block.
in the Text block add something like: “My Philadelphia Directory”.
In the General Section of the Block select H1 as HTML Tag. Text Alignment Center.
Klicken Sie auf den Tab „Style
Next in the FONT SIZE section, click the set custom size icon and set 40 as the font size.
Finally, in Advanced Typography Settings > FONT WEIGHT select Bold 700.
At this point, we can add the search form to the hero section of our Kadence directory website.
Click on the + button at the lower-right corner of the Title Section to add a new section.
Search and select another Section Block, click on the plus button in the middle of the new section, and add a GD > Search block.
An diesem Punkt haben wir den Hero-Bereich der Startseite fertiggestellt – so sieht er aus.
Es ist Zeit, einige weitere erforderliche Abschnitte auf der Startseite hinzuzufügen. Ich werde jetzt einen Bereich für aktuelle Einträge hinzufügen.
Unterhalb des Hero-Bereichs füge einen Row Layout Block hinzu, indem du auf das Plus-Symbol klickst, und füge einen Section Block darin ein.
Jetzt fügen wir einen Überschriften-Block hinzu und setzen die Typografie auf
Größe: Groß
Groß-/Kleinschreibung: Ab
Text: Aktuelle Unternehmenseinträge
Um die neuesten Einträge anzuzeigen, fügen wir den GD > Listings Block darunter mit den folgenden Einstellungen hinzu.
Sortieren nach: Neueste
Layout: Rasteransicht ( 4 Spalten )
Jetzt fügen wir einen Row Layout Block hinzu, indem du auf das Plus-Symbol klickst und einen Section Block darin ein.
In den Typografie Einstellungen des Überschriften-Blocks
Größe: Groß
Groß-/Kleinschreibung: Ab
Text: Beliebte Orte in deiner Stadt durchstöbern
Füge jetzt den GD>Category Block darin ein, um alle Kategorien anzuzeigen.
Füge im Stil die folgenden Einstellungen hinzu
Zeilenelemente: 4
Designtyp: Bildhintergrund
Jetzt fügen wir einen weiteren Abschnitt für So funktioniert eshinzu. Fügen wir einen Row Layout Block hinzu, indem du auf das Plus-Symbol klickst und das 4-Spalten-Layout auswählst.
Füge jetzt den Info Box Block in alle Container ein.
Bei der Inhaltsbreite: Maximale Breite vom Theme übernehmen.
Jetzt legen wir das Symbol für jeden Container fest. Klicke auf eine beliebige Info Box und wähle in den Block-Einstellungen Stil > Medieneinstellungen
Medientyp: Symbol
Jetzt legen wir die Farbe der Symbole fest
Symbolfarbe: #FFFFFF
Symbol-Hintergrund: #FF6616
Medien-Innenabstand: 20px
Symbol-Rahmenradius: 15px
Fügen wir nun noch einen weiteren leeren Row Layout
werden wir einen CTA einfügen.
Fügen Sie eine Überschrift hinzu und in dem Typografie Einstellungen des Überschriften-Blocks
Größe: Groß
Groß-/Kleinschreibung: Ab
werden wir den einzelnen Button-Block hinzufügen und in den Stileinstellungen dieses Blocks Folgendes festlegen:
Farbe: #FFFFF
Hintergrundfarbe: #FF6A00
Rahmenradius: 10px
Jetzt richten wir die Fußzeile ein.
Gehen Sie zu Darstellung > Anpassen > Fußzeile
Wir fügen hier einige Footer-Menü-Widgets hinzu, und Kadence bietet einen Social-Block. Sie können ihn oben im Fußzeilenbereich einfügen.
Wenn Sie auf das Einstellungssymbol des Social-Widgets klicken, öffnet sich ein Einstellungsbereich, in dem Sie die Social-Optionen konfigurieren können.
Herzlichen Glückwunsch, Ihre Startseite ist jetzt fertig.
Kadence Directory-Website – Design der Eintragsübersichts- und Suchseite
Jetzt müssen wir zwei Seiten gestalten, die für jedes Verzeichnis unverzichtbar sind.
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.
Ich habe entschieden, dass das Layout der Eintragsübersichtsseite die Einträge auf der linken Seite zeigt und rechts 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.
Fügen Sie ein Zeilen-Layout mit
Erstellen Sie ein 60-40-Verhältnis, indem Sie den markierten Punkt im Bild unten verschieben.
Im linken Bereich fügen wir nun alle erforderlichen Blöcke für die GD Archive Seite hinzu. Zum Beispiel GD > Loop Action, GD > Loop, GD > Loop Pagination, und GD > Search
In der rechten Spalte ziehen wir den GD > Map Block hinein.
Alle Einstellungen für den GD > Mapbelassen wir auf den Standardwerten. Geben wir ihm eine bestimmte Höhe – ich habe mich für eine Höhe von 100vh.
Im übergeordneten Zeilen-Container des Kartenblocks fügen wir eine CSS-Klasse hinzu kt-inside-inner-col
und wir fügen das folgende CSS im Theme-Customizer unter Darstellung > Anpassen > Zusätzliches CSS hinzu
body.archive .kt-inside-inner-col { position: sticky; top: 0; }
Nun werden wir die Seite schließlich auf Volle Breite setzen, indem wir auf das Kadence-Symbol oben rechts klicken und das Seitenlayout auf Volle Breite einstellen.
und wir werden außerdem den folgenden Stil für das Haupt-Zeilenlayout festlegen.
Maximale Breite: 100%
Spaltenabstand: SW
Zeilenabstand: Keine
Gehe zu Geodirectory > Einstellungen > Allgemein > Seiten > Klicke auf GD-Suchseiten-Vorlage bearbeiten
Entfernen Sie den gesamten Inhalt aus dieser GD Search Seitenvorlage.
Kopiere den gesamten Inhalt der GD-Archivseite und füge ihn in die GD-Suchseite ein.
Unsere GD-Such- und Archivseite ist jetzt fertig.
Eine weitere Möglichkeit, diese Vorlage einfach zu erstellen, ist die Verwendung einer Seitenvorlage mit voller Breite und der GD > Simple Archive Block hinein.
Kadence Directory Website – Design der Einzel-Listingseite
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 werden diesen gesamten Standardinhalt entfernen und einen neuen hinzufügen Row Layout mit: Inhaltsbreite: 100%
Füge eine Klasse (single-header-image) zu diesem Zeilenlayout unter Erweitert > Zusätzliche CSS-Klasse
Jetzt fügen wir einen zweispaltigen Row Layout Container hinzu.
Im linken Container fügen wir den GD > Post Badge Block hinzu, um einige Badges zu definieren, und im rechten Container fügen wir den GD > Post Favorite Block hinein.
Im übergeordneten Zeilenlayout dieses Containers fügen wir eine benutzerdefinierte Klasse hinzu (header-position-feature).
Darunter fügen wir einen Bild-Slider hinzu, dazu ziehen wir den GD > Post Image Block hinein.
Wir wählen die folgenden Einstellungen
Ausgabetyp: Slider
Autostart: Aktivieren
Animation: Folie
Jetzt fügen wir einen zweispaltigen Row Layout Container.
Im linken Container fügen wir die erforderlichen Blöcke für die GD-Detailseite hinzu, darunter GD > Single Taxonomies, GD > Single Tabs, GD > Single Next Prev.
Mit folgenden Einstellungen
Maximale Breite: 1200px
Spaltenabstand: SW
Zeilenabstand: Keine
Im rechten Container verwenden wir den GD > Output Location und GD > Author Actions Block hinein.
Wir fügen dem Layout der GD-Detailseite mit dem folgenden CSS einige zusätzliche Design-Elemente hinzu.
Fügen Sie das folgende CSS in den Bereich Darstellung > Customize > Zusätzliches CSS
.single-header-image { max-height: 400px !important; overflow: hidden; } .geodir-page-single .entry-header { display: none; } .geodir-page-single .content-area { margin: 0px; } .geodir-page-single .content-container { padding: 0px; max-width: 100%; } @media (min-width: 576px) { .bsui .row.row-cols-md-0 .card .embed-responsive { max-width: 100% !important; display: inline-block; } } .geodir-page-single .entry-content-wrap { padding: 0px !important; } .geodir-page-single .entry-content { margin-top: 0px; } .single-header-image { max-height: 400px !important; overflow: hidden; } .single-feature { padding: 10px !important; } .header-position-feature { position: absolute !important; width: 100%; } .kb-row-layout-id15_c06314-2b > .kt-row-column-wrap { z-index: 1; position: relative; padding:0px !important; }
Unsere GD-Detailseite ist jetzt fertig.
Premium-Funktionen zu Ihrer Kadence Directory-Website hinzufügen
Wenn Sie möchten, können Sie Ihrem Verzeichnis jetzt Premium-Funktionen hinzufügen, wie zum Beispiel:
- Kostenpflichtige Einträge: mit dem GeoDirectory Listing Price Manager Add-on können Sie Preise für die Einreichung von Einträgen festlegen. Für jede Preisstufe können Sie Funktionen aktivieren/deaktivieren, wie z. B.: Einschränkung der Anzahl der Bilder für kostenlose Einträge bei gleichzeitig mehr Bildern für kostenpflichtige Einträge. Mehr oder weniger Tags und Kategorien erlauben. Bestimmte benutzerdefinierte Felder aktivieren oder deaktivieren. Längere oder kürzere Beschreibungen einreichen.
- Inserate beanspruchen: Dies ist eine grundlegende Funktion für ein Verzeichnis, bei dem der Administrator die Datenbank erstellt und Unternehmensinhaber einlädt, die Kontrolle über ihre kostenlosen Einträge zu übernehmen. Der Prozess zur Übernahme eines Eintrags kann das Upgrade auf einen kostenpflichtigen Eintrag erfordern, um die Eigentümerschaft zu übernehmen.
- Werbung: Werbung verkaufen ist eine weitere Form der Monetarisierung eines Online-Verzeichnisses. Wenn Sie viel Traffic haben, können Sie Werbenetzwerke nutzen. Andernfalls können Sie Werbeanzeigen direkt verkaufen, indem Sie Unternehmen ermöglichen, Banner in bestimmten Bereichen Ihrer Website zu platzieren, oder Einträge als Anzeigen erscheinen zu lassen, beispielsweise über den organischen Suchergebnissen.
Das sind nur drei Beispiele. Ein Verzeichnis-Website bietet jedoch viele Möglichkeiten, online Geld zu verdienen.
Sie können einen globalen Marktplatz für handgefertigte Artikel erstellen, Veranstaltungstickets verkaufen oder Rabattgutscheine anbieten.
Navigieren Sie den Erstellungsprozess ganz einfach mit dieser Anleitung: Eine Schritt-für-Schritt-Anleitung zur Erstellung einer Verzeichnis-Website.
Die Möglichkeiten sind unbegrenzt.
Erstellen Sie eine Verzeichnis-Website mit Kadence Blocks
Das Kadence-Theme bietet viele erweiterte Blöcke. Diese Blöcke finden Sie in der Kadence Blocks Liste und auch in den Gutenberg-Blocklisten zur Verwendung.
Innerhalb jeder Seite finden Sie oben eine Schaltfläche „Design-Bibliothek". Klicken Sie darauf und nutzen Sie alle vordefinierten Block-Layouts.
Kadence Blocks Directory-Website-Vorlagen
GeoDirectory bietet viele vordefinierte Demos für das Kadence-Theme. Alle diese ansprechenden Demos finden Sie hier.
Sie können diese Vorlagen in Ihre Website importieren. Sie benötigen dazu das Ayecode connects Plugin. Laden Sie es herunter und aktivieren Sie es, falls es noch nicht installiert ist.
Nach der Aktivierung dieses Plugins müssen Sie Ihre Mitgliedschaft verknüpfen.
Sie können die Demo importieren, indem Sie auf die Schaltfläche „Ansehen" neben der Kadence-Demo klicken.
Beispiele sind das Real Estate Directory Theme, das Restaurant Directory Theme, das Job Board Theme und dem Yoga Salon Directory Theme Designs für das Kadence-Theme.