Eine Verzeichnis-Website mit dem Astra-Theme und dem Spectra-Plugin erstellen

Was ist der beste Weg, eine Verzeichnis-Website mit dem Astra Theme zu erstellen?

Der beste Weg, eine Verzeichnis-Website mit dem Astra Theme zu erstellen, ist die Verwendung des GeoDirectory Plugins und des Spectra Blocks Plugins. Eine großartige Möglichkeit, ein leistungsstarkes und anpassbares Online-Verzeichnis aufzubauen.

Hier ist eine Schritt-für-Schritt-Anleitung zum Erstellen einer Verzeichnis-Website mit dem Astra Theme und deren Spectra Website Builder Plugin

1. Astra Theme installieren
2. Spectra Blocks installieren
3. GeoDirectory installieren und einrichten
4. Die Verzeichnis-Website mit dem Astra Theme und dem Spectra Block gestalten

Schauen wir uns im Detail an, wie wir eine Verzeichnis-Website mit GeoDirectory und dem Astra Theme erstellen können.

In diesem Tutorial werden wir:

• Theme und Plugins installieren und einrichten
  1. Das Astra Theme installieren
  2. Spectra Blocks Plugin installieren
  3. GeoDirectory installieren
  4. GeoDirectory Installations-Assistent
     • Auswahl des Kartensystems (Google Maps oder OpenStreetMap)
     • Festlegen der Standardstadt
     • Zusatzfunktionen hinzufügen
     • Dummy-Daten hinzufügen
• Die Astra-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. Das Astra Theme installieren

Zunächst müssen Sie ein Theme installieren, und für dieses Tutorial installieren Sie das Astra Theme.

Gehen Sie zu Darstellung >> Themes

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

2. Das Spectra Blocks Plugin installieren

Jetzt müssen Sie das Spectra Blocks Plugin installieren. Dieses Plugin bietet mehr Möglichkeiten zur Seitengestaltung mit Gutenberg-Blöcken.

Gehen Sie zu Plugins >> Neu hinzufügen.

Suchen Sie nach Spectra Blocks. Installieren Sie es und aktivieren Sie es.

Sie können alle Schritte des Setup-Assistenten überspringen.

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.

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" und folgen Sie den Schritten in dieser 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 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 UsersWP, ein Benutzerregistrierungs-Plugin das 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 Benutzer ihre Einträge, Bewertungen und andere relevante Informationen 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 im Installationsassistenten besteht darin, einige Beispiel-Einträge hinzuzufügen. Dabei werden auch Eintrags-Kategorien erstellt, die Sie später nach Ihren Bedürfnissen bearbeiten können.

Sie fügen jetzt noch keine Sidebar-Widgets und Menüelemente hinzu, da wir das später erledigen werden.

Die Astra-Verzeichnis-Website gestalten

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

1. Astra Verzeichnis-Website – Design der Startseite

Sie können eine neue Seite erstellen oder eine verwenden, die WordPress standardmäßig anlegt, wie z. B. die Beispielseite.

Startseite um, oder erstellen Sie eine neue Seite für diesen Zweck.

Gehe dann zu Darstellung > Customize > Startseiten-Einstellungen und wähle deine Startseite aus.

Das Logo

Zunächst benötigen wir 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, den Sie beim Start eines neuen Web-Verzeichnis-Unternehmens machen können, ist es, zu viel Zeit und Geld zu investieren, bevor Sie die Produkt-Markt-Passung getestet haben.

Sie können in nur fünf Minuten ein Logo mit einer App wie Canva erstellen, die überraschend erschwinglich und effektiv ist.

Für ein MVP (Minimum Viable Product) ist ein mit Canva gestaltetes Logo mehr als ausreichend.

Es gibt mehrere Logo-Vorlagen zur Auswahl, und es spielt keine Rolle, ob Ihr erstes Logo nicht so perfekt oder originell ist, wie Sie es sich vorstellen.

Wenn Ihr Projekt an Fahrt gewinnt, können Sie jederzeit in die Verbesserung investieren oder später grundlegende Änderungen vornehmen.

Ein durchschnittliches Logo ist nie der Hauptgrund für das Scheitern eines Projekts.

Nachdem du dein Logo erstellt hast, gehe zu Darstellung > Customize > Site Identity, klicken Sie auf Logo auswählen und laden Sie Ihre PNG-Datei hoch. Zuschneiden überspringen (oder das Bild nach Bedarf zuschneiden) und auf Veröffentlichen klicken.

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

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 Links hinzugefügt:

1. Home
2. Über uns
3. Blog
4. Places
5. Profil
6. Anmelden
7. Logout

Der Login-Link (aus UsersWP-Endpunkten) wird nur für abgemeldete Benutzer angezeigt, während die Abmelde- und Profillinks nur für angemeldete Benutzer erscheinen.

Die Typografie

Legen wir nun die Typografie für Schriftart und -größe des Website-Textes fest. Ich lege eine globale Schriftfamilie, Schriftstärke und Schriftgröße fest, die auf den gesamten Website-Text angewendet wird.

Der Inhalt

klicken.
Sie können diese Seitenvorlagen oder ein bestimmtes Muster zum Aufbau Ihrer Website-Seiten verwenden.

Ich werde diese Seite von Grund auf mit dem Spectra Blocks-Plugin aufbauen.

Wir benötigen einen Hero-Header auf der Startseite; fügen wir einen Container-Block hinzu, der vom Spectra Blocks-Plugin bereitgestellt wird.

aus, wie im folgenden Screenshot gezeigt.

aus.

Für den Hero-Bereich benötigen wir ein Bild, das wir kostenlos herunterladen werden von Pexels.com (Danke, @Kelly).

Laden Sie Ihr Bild hoch und wählen Sie Repeat zu No Repeat und Size zu Abdecken.

Das Bild benötigt eine Überlagerung, da Text darüber sonst nicht ausreichend kontrastreich und schwer lesbar wäre.
Overlay-Typ auswählen: Farbe, Farbe: #1E293B, und Deckkraft: 0.3

Now that we have made the hero image darker, we can add text.

Ein Überschriften-Element per Drag-and-Drop in das Hero-Bild ziehen.

Jetzt ist es an der Zeit, unserem Homepage-Hero-Bild einen Titel zu geben.
Ändern Sie im Tab „Stil#FFFFFF) um den Kontrast und die Lesbarkeit zu verbessern.

In diesem Tutorial verwende ich ein einfaches Beispiel, wie z. B. „Das beste Restaurant in Philadelphia finden.

To add the GD search to the homepage header, drag the GD > Search Block in den Hero-Container.

Füge als Nächstes dem Hero-Container eine Mindesthöhe hinzu. Ich werde die Höhe und Breite auf 800px setzen und außerdem die Breite des Containers auf volle Breite und seine Inhaltsbreite auf Boxed.

Jetzt sieht der Header der Startseite so aus, mit dem Seitentitel und etwas zusätzlichem Abstand.

Es ist an der Zeit, diesen Seitentitel und den zusätzlichen Abstand im Header-Bereich zu entfernen.

Klicken Sie auf den Seitentitel – Sie sehen ein Auge-Symbol; klicken Sie darauf, um den Seitentitel auszublenden und den zusätzlichen Abstand zu entfernen.

Es ist an der Zeit, einige weitere erforderliche Abschnitte auf der Startseite hinzuzufügen. Ich werde jetzt einen Kategorieabschnitt hinzufügen.

Unterhalb des Hero-Bereichs, klicken Sie auf das Plus-Symbol, um einen weiteren hinzuzufügen Container, dann fügen Sie das GD > Categories Block dort hinzu.

Jetzt nehmen wir einige notwendige Konfigurationen im GD > Kategorie-Block vor. Wir setzen den Design-Typ auf Image Background, mit 4 Zeilenelementen, und aktivieren die Kategoriebild verwenden Einstellung.

Sie können einer Kategorie ein Bild zuweisen, indem Sie die Kategorie über wp-admin -> places -> Place Categories bearbeiten.

Jede Kategorie hat eine Option, um ein Standardbild festzulegen

Jetzt ist es an der Zeit, etwas Innenabstand zu diesem neuen Container hinzuzufügen. Du kannst auf den äußeren Container klicken und den erforderlichen Innenabstand im Abschnitt „Stil 70px padding from top and bottom.

Now, quickly, we will add a few more containers. I will add recent listings below the category section using the GD > Listings widget.
The settings to be changed are:

In Filters > Post to Show = 4
In Sortierung > Sortieren nach = Neueste
In Design > Layout = Rasteransicht (vier Spalten)
Wrapper-Stile > Abstand oben = 5

Fügen wir dort einige Karten hinzu, damit Benutzer Einträge mit verschiedenen Filtern sortieren und auf der Karte anzeigen können.

Verwenden wir GD > Map mit den folgenden Einstellungen:

Kartentyp: Directory Map
Kartenoptionen: Alle aktivieren

Verleihen wir dem Ganzen etwas Stil, indem wir auf den Tab „Stile 100% und the height to 600px um sicherzustellen, dass es gut angezeigt wird.

Wir werden den Karten-Container auch auf volle Breite setzen, damit er breiter wirkt und gut aussieht.

Klicken Sie auf den äußeren Container der Karte und stellen Sie in den allgemeinen Einstellungen Container Width: Full Width und Content Width: Full Width ein.

Fügen wir nun einen weiteren Container hinzu, um aktuelle Beiträge anzuzeigen. Sie können den Post Grid Block-Container verwenden, der vom Spectra Blocks Plugin bereitgestellt wird.

Glückwunsch! Ihre Startseite ist fertig.

Wenn Sie möchten, können Sie weitere Container oder CTAs hinzufügen.

2. Astra Directory Website – Design der Listings- und Suchseite

Now you need to design two pages that are essential for any directory.

Die Listings-Seite (allgemeives Archiv, Kategorien, Tags) und die Suchergebnisseite.

GeoDirectory erstellt diese standardmäßig mit einem allgemeinen Layout. In diesem Tutorial passen wir das Design dieser Seiten etwas an.

Die Listings- und die Suchseite sind größtenteils identisch, daher erstellen wir das Layout einmal und kopieren es auf die andere Seite.

Wir haben entschieden, dass das Layout der 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.

Fügen Sie jetzt einen Container mit zwei Spalten hinzu.

Jetzt ziehen wir im linken Container GD-Archivseiten-bezogene Widgets wie GD > Loop Action, GD > Loop, GD > Loop Pagination und GD > Search nach oben, damit der Benutzer direkt von der Archivseite aus suchen kann.

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

Wir behalten alle Einstellungen für GD > Map als Standard bei. Geben wir ihm eine bestimmte Höhe – ich habe mich für eine Höhe von 100vh.

Stellen Sie jetzt den Hauptcontainer auf volle Breite ein, indem Sie den Anweisungen im Bild folgen.

Danach ist die Listing-Archivseite fertig.

Die kostenlose Version von Astra bietet eingeschränkte Einstellungen. Daher benötigen Sie möglicherweise das folgende CSS-Snippet, um den Inhalt des linken Containers in der Größe an den rechten Kartencontainer anzupassen. Sie können es über wp-admin > Appearance > Customise in Ihrem Theme-Customizer einfügen.

.geodir-archive .wp-block-geodirectory-geodir-widget-loop .geodir-loop-container .geodir-listing-posts{
    overflow-y: scroll;
    max-height: 100vh;
}

Es gibt einen noch einfacheren Weg. Wenn Sie Ihre Seite auf volle Breite setzen, können Sie den GD > Simple Archive Block hinzufügen, wie in unserem Tutorial erklärt So erstellen Sie eine Verzeichnis-Website mit Elementor.

Für die Suchseite wiederholen wir denselben Vorgang.

Suchseite

Gehen Sie zu GeoDirectory > Settings > General > Pages > Klicken Sie auf „GD Search page template 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.

3. Astra-Verzeichniswebsite – Design der einzelnen Listing-Seite

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 den gesamten Standardinhalt und fügen einen Container mit der Einstellung hinzu Container-Breite: Volle Breite und Inhaltsbreite: Volle Breite.

Fügen wir jetzt einen Bild-Slider oben auf der Detailseite des Eintrags hinzu. Wir ziehen den GD > Post Image Block in diesen Container.

Wir setzen das Bildlimit auf 10 und das Anzeigelimit auf 1, sodass nur ein einzelnes Bild pro Folie angezeigt wird.

Fügen wir jetzt einen weiteren Container unterhalb dieses Containers hinzu, in dem wir die anderen erforderlichen Blöcke der Geodirectory-Detailseite.

Fügen wir jetzt alle erforderlichen GD-Detailseiten-Shortcodes hier nacheinander hinzu. Dazu gehören GD > Single Taxonomies, GD > Single Tabs

Jetzt ist es an der Zeit, einige Sidebar-Widgets hinzuzufügen. Dazu gehen wir zu wp-admin > Design > Widgets.

Fügen Sie das Widget GD > Author Action in die primäre Sidebar ein. Dieses Widget bietet dem Eintrags-Autor eine Bearbeiten- und Löschen -Option für den Eintrag.

Fügen Sie ein weiteres Widget hinzu, GD > Output Location. Dieses Widget zeigt alle wichtigen Eintragsdetails an, die für die Anzeige auf der Detailseite markiert wurden.

Danach ist unsere Listing-Detailseite fertiggestellt.

Premium-Funktionen zu Ihrer Astra-Verzeichnis-Website hinzufügen

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 Eintragseinreichung festlegen. Für jede Preisstufe können Sie Funktionen aktivieren/deaktivieren, wie z. B.: Begrenzung der Bildanzahl bei kostenlosen Einträgen und Erlauben von mehr Bildern bei bezahlten Einträgen, Erlauben von mehr oder weniger Tags und Kategorien, Aktivieren oder Deaktivieren bestimmter benutzerdefinierter Felder sowie das Einreichen längerer oder kürzerer Beschreibungen.
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. Bei hohem Traffic können Sie Werbenetzwerke nutzen. Alternativ können Sie Anzeigen direkt verkaufen, sodass Unternehmen Banner in bestimmten Bereichen Ihrer Website schalten oder Einträge als Anzeigen erscheinen lassen können – zum Beispiel ganz oben in 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.

Entwickeln Sie Ihre perfekte Verzeichnis-Website mit dieser umfassenden Ressource: Ihre Verzeichnis-Website erstellen: Ein umfassender Leitfaden.

Die Möglichkeiten sind endlos.