Hier ist eine leicht verständliche Anleitung zur Erstellung einer Verzeichnis-Website mit dem Avada-Theme und dem Avada Builder -Plugin:
- Das Avada-Theme installieren
- Installiere und richte GeoDirectory ein
- 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.
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:
- Schlüssel aktivieren.
- Ein neues Projekt erstellen oder ein vorhandenes auswählen.
- Den Schlüssel abrufen.
- Ein Abrechnungskonto aktivieren.
- Den API-Schlüssel einschränken (damit er nur von der URL Ihrer Website verwendet werden kann)
Zu Punkt vier: 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 Eintragskategorien 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:
- Home
- Über uns
- Blog
- Orte und Orte hinzufügen
- Profil
- Anmelden
- 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:
- Kostenpflichtige Einträge: mit dem GeoDirectory Listing Price Manager Add-on können Sie Preise für die Eintragserstellung festlegen. Für jede Preisstufe können Sie Funktionen aktivieren/deaktivieren, z. B. die Anzahl der Bilder für kostenlose Einträge einschränken und mehr Bilder für kostenpflichtige Einträge erlauben, mehr oder weniger Tags und Kategorien zulassen, bestimmte benutzerdefinierte Felder aktivieren oder deaktivieren sowie längere oder kürzere Beschreibungen einreichen.
- Inserate beanspruchen: Dies ist eine grundlegende Funktion für ein Verzeichnis, bei dem der Administrator die Datenbank erstellt und Unternehmensinhaber einlädt, die Kontrolle über ihre kostenlosen Einträge zu übernehmen. Der Prozess zur Übernahme eines Eintrags kann das Upgrade auf einen kostenpflichtigen Eintrag erfordern, um die Eigentümerschaft zu übernehmen.
- Werbung: Werbung verkaufen ist eine weitere Form der Monetarisierung eines Online-Verzeichnisses. Wenn Sie viel Traffic haben, können Sie Werbenetzwerke nutzen. Andernfalls können Sie Werbeanzeigen direkt verkaufen, indem Sie Unternehmen ermöglichen, Banner in bestimmten Bereichen Ihrer Website zu platzieren, oder Einträge als Anzeigen erscheinen zu lassen, beispielsweise über den organischen Suchergebnissen.
Das sind nur drei Beispiele. Ein Verzeichnis-Website bietet jedoch viele Möglichkeiten, online Geld zu verdienen.
Sie können einen globalen Marktplatz für handgefertigte Artikel erstellen, Veranstaltungstickets verkaufen oder Rabattgutscheine anbieten.
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.