Wie erstellt man eine Elementor-Verzeichnis-Website?
Der einfachste Weg, eine Elementor-Verzeichnis-Website mit dem kostenlosen Elementor-Plugin zu erstellen, besteht darin, die folgenden 4 Schritte umzusetzen:
- Hello Theme installieren
- Elementor installieren
- GeoDirectory installieren und einrichten
- Die Elementor-Verzeichnis-Website gestalten
Sehen wir uns an, wie wir das im Detail umsetzen können. Aber zuerst schauen wir uns an, warum diese Lösung die beste ist.
Der beste Weg, eine Verzeichnis-Website mit Elementor zu erstellen.
Um eine Elementor-Verzeichnis-Website zu erstellen, empfiehlt Elementor.com die Verwendung der Plugins Custom Post Type UI, Advanced Custom Fields und Elementor Custom Skin.
Ist das der beste Weg?
Möglicherweise, aber nur, wenn du planst, ein einfaches Verzeichnis ohne Folgendes zu erstellen:
- Eine hohe Anzahl an Einträgen (Die wp-posts-Datenbanktabelle skaliert nicht gut)
- Viele benutzerdefinierte Felder für jeden Eintrag (Advanced Custom Fields skaliert nicht auch)
- Option für Benutzer, ihre Einträge im Frontend hinzuzufügen und zu bearbeiten
- Erweiterte Suche nach Standort, Umkreis, GeoLocation oder benutzerdefinierten Feldern
- Kostenpflichtige Einträge mit zusätzlichen Funktionen und erhöhter Sichtbarkeit
- Optionen für Eintragsinhaber, ihren Eintrag zu beanspruchen
- Benutzerbewertungen und Einträge nach Bewertung sortieren
- Interaktive Karten mit Wegbeschreibungen zum Unternehmen
- Kontaktformulare zum Senden von E-Mails an Unternehmensinhaber
- Weitere Monetarisierungsoptionen
- Ein Veranstaltungsverzeichnis
Folgt man deren Tutorial, kann man einen Unternehmenskatalog mit grundlegenden Informationen und sehr wenig Interaktivität für die Besucher der Website erstellen.
Hier listen wir alle Herausforderungen auf, mit denen Sie bei diesem Ansatz konfrontiert werden:
Entwicklung einer Verzeichnis-Website mit Custom Post Types und Advanced Custom Fields
Wenn Sie stattdessen einen oder mehrere der oben genannten Punkte benötigen, brauchen Sie viele zusätzliche Plugins und in manchen Fällen auch recht viel benutzerdefinierten Code.
Es muss einen besseren Weg geben! Moment, den gibt es!
Sie können GeoDirectory verwenden:
Das beste Elementor-Verzeichnis-Plugin
Mit den Premium-Add-ons erhalten Sie alles oben Genannte und noch viel mehr.
Außerdem können Sie unter Umständen sogar auf Elementor PRO verzichten, da die kostenlose Version von Elementor für dieses Tutorial mehr als ausreichend ist.
Sie benötigen Elementor PRO nur, wenn Sie ein sehr anspruchsvolles und individuelles Design wünschen.
Also, ohne weitere Umschweife: Sehen wir uns an, wie Sie eine Verzeichnis-Website mit GeoDirectory, einem kostenlosen Theme, der Basisversion des Elementor-Plugins und einem kostenlosen Drittanbieter-Add-on erstellen können.
Elementor-Verzeichnis-Website nur mit einem kostenlosen Theme und kostenlosen Plugins
Wir beginnen dieses Tutorial damit, Ihnen zu zeigen, wie Sie eine einfache Verzeichnis-Website mit kostenlosen WordPress-Ressourcen erstellen – zum Beispiel dem kostenlosen Elementor-Plugin, dem kostenlosen Hello Theme und dem kostenlosen GeoDirectory-Plugin.
Es wird folgende Funktionen bieten:
- Unbegrenzte Einträge mit unbegrenzt vielen benutzerdefinierten Feldern.
- Suche nach Umkreis.
- Benutzerbewertungen
- Ein Eintrag-Hinzufügen-Formular, mit dem Benutzer ihre Einträge über das Website-Frontend einreichen, bearbeiten und/oder löschen können.
WordPress bietet natürlich von Haus aus die Möglichkeit, einen Blog und unbegrenzt viele Seiten zu erstellen.
Wir gehen davon aus, dass Sie bereits einen Hosting-Anbieter und WordPress installiert haben.
In diesem Tutorial erstelle ich ein Unternehmensverzeichnis für die Stadt Philadelphia.
In diesem Tutorial werden wir:
Theme und Plugins installieren.
1. Das Hello Theme installieren
Zunächst müssen Sie ein Theme installieren. In diesem Tutorial installieren Sie das Hello Theme, das Starter-Theme von Elementor.
Gehen Sie zu Darstellung >> Themes
Wählen Sie „Neu hinzufügen Installieren, und Aktivieren des Hello Theme.
2. Elementor installieren
Jetzt müssen Sie den Seiteneditor installieren. In diesem Fall installieren Sie die kostenlose Version des Elementor-Plugins.
Gehen Sie zu Plugins >> Neu hinzufügen.
Suchen Sie nach Elementor. 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:
- 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)
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, unser 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 Beispieleinträge hinzuzufügen. Dabei werden auch Eintrags-Kategorien hinzugefügt, 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 Elementor-Verzeichnis-Website gestalten
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 mit Elementor beginnen.
1. Design der Startseite der Elementor-Verzeichnis-Website
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 „Startseite
Gehe dann zu Darstellung > Customize > Startseiten-Einstellungen und wähle deine Startseite aus.
Die Beitragsseite wählen wir später 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 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, wenn Ihr erstes Logo nicht so perfekt oder originell ist, wie Sie es sich wünschen.
Wenn Ihr Projekt an Fahrt gewinnt, können Sie später jederzeit in Verbesserungen oder grundlegende Änderungen investieren.
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:
- Home
- Über uns
- Blog
- Places
- Profil
- Anmelden
- Logout
Der Login-Link (aus UsersWP-Endpunkten) wird nur für nicht angemeldete Benutzer angezeigt, während die Abmelde- und Profillinks nur für angemeldete Benutzer sichtbar sind.
Der Inhalt
Now you can start designing the home page. First, you will need to add a Hero-Bild unterhalb der Kopfzeile.
Gehen Sie dazu zu Seiten > Startseite und klicken Sie auf Mit Elementor bearbeiten.
Wenn Sie die Beispielseite verwendet haben, löschen Sie den Texteditor, indem Sie mit der rechten Maustaste auf den Text klicken und Löschen auswählen. Wenn Sie eine neue Seite erstellt haben, fügen Sie einen Abschnitt hinzu. (Klicken Sie 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.
Klicken Sie auf das Abschnitt-bearbeiten-Symbol (hellblaues Symbol in der Mitte der Abschnitte) und wählen Sie Volle Breite in der Option Inhaltsbreite.
Klicken Sie dann oben auf den Reiter Stil. Wählen Sie > Klassisch als Hintergrundtyp.
Für den Hero-Bereich verwenden wir dieses kostenlose Bild von Philadelphia von Pexels.com (Danke, @Kelly).
Laden Sie Ihr Bild hoch und verwenden Sie die Option Position, um das Erscheinungsbild des Hintergrunds anzupassen. Wählen Sie in diesem Fall „Mitte Mitte.
Jetzt ist nur ein Streifen unseres Bildes zu sehen, aber im nächsten Schritt wird es wie gewünscht dargestellt.
Das Bild benötigt eine Überlagerung, da Text darüber sonst nicht ausreichend kontrastreich und schwer lesbar wäre.
Klicken Sie auf Hintergrundüberlagerung, wählen Sie Hintergrundtyp: Klassisch, Farbe: Schwarz (#000000) und Deckkraft: 0,5 (sollte bereits so eingestellt sein ).
Now that we have made the hero image darker, we can add text.
Klicken Sie in die Mitte des Bildes (eine graue Plus-Schaltfläche ist kaum sichtbar). Dadurch werden die Widgets im linken Elementor-Panel angezeigt.
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.
In diesem Tutorial verwende ich etwas Einfaches wie „My Philadelphia Directory.
Ändern Sie im Tab „Stil#FFFFFF) um den Kontrast und die Lesbarkeit zu verbessern.
Füge als Nächstes etwas Innenabstand hinzu, um das Hero-Bild wie vorgesehen zu enthüllen. Wähle den Reiter „Erweitertthis is done by clicking the link icon at the end of the values).
Add 250 to the top value and 50 to the bottom value. Leave 0 for both the right and left values.
Sie können das GeoDirectory-Suchwidget unterhalb des Titels hinzufügen, um das Hero-Bild der Startseite zu vervollständigen.
Zunächst müssen Sie jedoch einen inneren Abschnitt hinzufügen, um die Breite des Suchformulars zu steuern.
Klicken Sie im linken Elementor-Panel auf das Rastersymbol (rechts neben dem Elementor-Logo), um zur Elementliste zurückzukehren.
Ziehen Sie ein Element „Innerer Abschnitt
The inner section will have two columns by default. You have to delete one.
Right-click on one of them and delete it. Now click on the other one and set its width to 700.
Jetzt können Sie das GD > Search-Element zum inneren Abschnitt hinzufügen.
Klicken Sie im linken Elementor-Panel erneut auf das Rastersymbol (rechts neben dem Elementor-Logo), um zur Elementliste zurückzukehren.
Suchen GD > Search und per Drag-and-Drop in den inneren Abschnitt ziehen.
Klicken Sie abschließend auf den Tab „Erweitert", trennen Sie die Padding-Werte voneinander und fügen Sie beim unteren Padding den Wert 200 ein. Dadurch wird der untere Teil des Hero-Bildes angezeigt.
Sie können nun einige Listings-Widgets unterhalb des Hero-Bildes hinzufügen, zusammen mit einem Widget, das einige Blogbeiträge anzeigt.
Um beispielsweise ein Raster mit vier Listings hinzuzufügen, müssen Sie einen neuen Abschnitt unterhalb des Hero-Bildes einfügen, mit einer eingerahmten Inhaltsbreite und 1140 als Breite.
Fügen Sie in diesem Abschnitt zunächst eine Überschrift für die aktuellen Einträge hinzu, ändern Sie den Text zu „Aktuelle Einträge" (oder was auch immer Ihnen passend erscheint), zentrieren Sie den Text, ändern Sie die Farbe zu Dunkelgrau (#333333) und fügen Sie über den Tab „Erweitert" einen oberen Außenabstand von 50px hinzu.
Fügen Sie anschließend das Widget „GD > Listings" hinzu. Folgende Einstellungen müssen geändert werden:
In Filters > Post to Show = 4
In Sortierung > Sortieren nach = Neueste
In Design > Layout = Rasteransicht (vier Spalten)
Wrapper-Stile > Abstand oben = 5
Jetzt ist es Zeit, einige Blogbeiträge hinzuzufügen.
Ich habe dieses Plugin verwendet, um Testbeiträge mit Bildern zu erstellen. Ich habe das Post Grid Elementor Add-on verwendet, um sie auf der Startseite anzuzeigen.
Fügen Sie unterhalb der Listings eine Überschrift für die aktuellen Beiträge ein und ändern Sie den Text zu „Aktuelle Beiträge" (oder was auch immer Ihnen passend erscheint), zentrieren Sie den Text, ändern Sie die Farbe zu Dunkelgrau (#333333) und fügen Sie über den Tab „Erweitert" einen oberen Außenabstand von 50px hinzu.
Fügen Sie anschließend das Post Grid (von WPC Element) hinzu und passen Sie folgende Einstellungen an:
Ändern Sie im Tab „Style" > Titel > Typografie die Schriftgröße auf 1,25rem und die Farbe so, dass sie zu den Farben der Listings-Titel passt (#1E73BE).
Fügen Sie abschließend im Tab „Erweitert" einen oberen Außenabstand von 50px hinzu.
Fertig. Die Startseite ist abgeschlossen. Sie können nach Belieben weitere Inhalte hinzufügen, aber für dieses Tutorial ist das mehr als ausreichend.
2. Design der Listings- und Suchseite einer Elementor-Verzeichnis-Website
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, aber in diesem Tutorial löschen wir die Standardseiten und erstellen unsere eigenen.
Sie werden zwei identische Seiten erstellen. Wir verwenden ein Layout mit zwei breiten Spalten.
Auf der linken Seite befinden sich die Listings, auf der rechten Seite eine fixierte Karte, die den genauen Standort der Einträge anzeigt.
Das ist ganz einfach.
Eintragsübersichtsseite
Gehen Sie zu Seiten > Neu hinzufügen > Titel hinzufügen = Listings. Veröffentlichen Sie die neue Seite.
Klicken Sie nach dem Veröffentlichen der Seite auf die Schaltfläche „Mit Elementor bearbeiten".
Klicken Sie auf das Zahnrad-Symbol in der unteren linken Ecke des Bildschirms, blenden Sie den Titel aus, setzen Sie das Seitenlayout auf „Elementor Volle Breite" und klicken Sie auf „Aktualisieren".
Fügen Sie einen Abschnitt hinzu (Klicken Sie auf die Plus-Schaltfläche des Seitenerstellers, wo „Widget hier hinziehen" steht.)
Setzen Sie unter Layout > Inhaltsbreite die Option „Volle Breite". Klicken Sie nun auf die Plus-Schaltfläche im neuen Abschnitt, suchen Sie nach „GD > Simple Archive" und ziehen Sie das Widget per Drag-and-Drop in den neu erstellten Abschnitt.
Passen Sie folgende Einstellungen an.
Hauptausgabe > Suche anzeigen aktivieren
Karte > Fixierte Karte aktivieren
Klicken Sie auf „Aktualisieren". Das war es für die Listings-Seite.
Für die Suchseite wiederholen wir denselben Vorgang.
Suchseite
Gehen Sie zu Seiten > Neu hinzufügen > Titel hinzufügen = S. Veröffentlichen Sie die neue Seite.
Klicken Sie nach dem Veröffentlichen der Seite auf die Schaltfläche „Mit Elementor bearbeiten".
Klicken Sie auf das Zahnrad-Symbol in der unteren linken Ecke des Bildschirms, blenden Sie den Titel aus, setzen Sie das Seitenlayout auf „Elementor Volle Breite" und klicken Sie auf „Aktualisieren".
Fügen Sie einen Abschnitt hinzu (Klicken Sie auf die Plus-Schaltfläche des Seitenerstellers, wo „Widget hier hinziehen" steht.)
Gehen Sie unter Layout > Inhaltsbreite auf Volle Breite. Klicken Sie nun auf die Plus-Schaltfläche im neuen Abschnitt, suchen Sie nach GD > Simple Archive und ziehen Sie das Widget per Drag-and-drop in den neu erstellten Abschnitt.
Passen Sie die folgenden Einstellungen an:
- Hauptausgabe > Suche anzeigen aktivieren
- Karte > Fixierte Karte aktivieren
Klicken Sie auf Aktualisieren. Das war's für die Suchseite.
Wir müssen die GeoDirectory-Einstellungen anpassen, um dem Plugin mitzuteilen, dass es diese beiden Seiten anstelle der Standardseiten verwenden soll.
Klicken Sie im WordPress-Dashboard auf GeoDirectory > Einstellungen > Seiten.
Weisen Sie unsere Seite mit dem Titel Listings als Archivseite und die Seite mit dem Titel S als Suchseite zu.
Wir haben sowohl die neue Listings- als auch die Suchseite fertiggestellt, und GeoDirectory weiß, wie diese neuen Vorlagen zu verwenden sind.
3. Elementor-Verzeichniswebsite: Design der Einzelanzeige-Seite
Um das Verzeichnis zu vervollständigen, müssen wir eine weitere Vorlage gestalten: die GD-Detailseite. Diese Vorlage wird verwendet, um einzelne Einträge anzuzeigen.
GeoDirectory erstellt eine automatisch, aber wir werden sie ersetzen, um eine neue Seite zu erstellen.
Verwenden Sie einen beliebigen Titel. Ich habe sie „mpdetails
Wir müssen die GeoDirectory-Einstellungen anpassen, um dem Plugin mitzuteilen, dass es diese Seite anstelle der standardmäßigen GD-Detailseite verwenden soll.
Klicken Sie im WordPress-Dashboard auf GeoDirectory > Einstellungen > Seiten.
als Detailseite zu.
Gehen wir nun zurück zur Seite, öffnen Sie sie und klicken Sie auf die Schaltfläche „Mit Elementor bearbeiten".
Wie bei den vorherigen Seiten klicken Sie auf das Zahnrad-Symbol in der unteren linken Ecke des Bildschirms, blenden Sie den Titel aus, setzen Sie das Seitenlayout auf Elementor Full Width und klicken Sie auf „Aktualisieren".
Fügen Sie einen Abschnitt hinzu (Klicken Sie auf die Plus-Schaltfläche des Seitenerstellers, wo „Widget hier hinziehen" steht.)
Stellen Sie unter Layout > Inhaltsbreite „Volle Breite" ein. Klicken Sie nun auf die Plus-Schaltfläche im neuen Abschnitt, suchen Sie nach GD > Post Images und ziehen Sie das Widget per Drag-and-Drop in den neu erstellten Abschnitt.
Passen Sie die folgenden Einstellungen an:
- Allgemein > Anzeigelimit: 3
- Design > Output Type: Slider
Als nächstes müssen wir den Listing-Titel hinzufügen. Suche nach dem Element GD > Post Title und ziehe es in den Bereich „Drag Widget Here".
Passen Sie die folgenden Einstellungen an:
- General > Output Type: H1
- Design > Font Size: H1
Jetzt müssen wir den Listing-Inhalt hinzufügen. Füge einen neuen Abschnitt hinzu (Klicken Sie auf die Plus-Schaltfläche des Seitenerstellers, wo „Widget hier hinziehen" steht.)
Wähle das zweispaltige Layout 66/33 (wobei die linke Spalte doppelt so breit ist wie die rechte Spalte)
Wir ziehen das Element GD > Single Tabs in die linke Spalte. Die einzige Option, die aktiviert werden muss, ist Content > Show as a list.
Es gibt die Beschreibung, die Fotogalerie, die Karte und die Bewertungen jedes Listings als Liste aus.
Wenn du die Option „Show as List
Wir fügen das Element GD > Output location in der rechten Spalte hinzu.
Dieses Element gruppiert mehrere Informationen zum Eintrag, darunter Tags, Kategorien, Adressen, Kontaktinformationen und Öffnungszeiten.
Diese Details sind auch als eigenständige Elemente verfügbar, die für individuelle Designs separat verwendet werden können.
Sie können zum Beispiel das GD > Post Address Element verwenden, um die Adresse an beliebiger Stelle auf Ihrer Seite anzuzeigen.
Für alle Inhalte gibt es das GD > Post Meta Element. Jedes benutzerdefinierte Feld kann über dieses Element ausgegeben werden, indem der KEY-Wert entsprechend gesetzt wird.
Alternativ können Sie das Element verwenden GD > Badge um so gut wie alle Listing-Informationen als Schaltfläche anzuzeigen.
Um unsere einzelne Verzeichnis-Listing-Seite abzuschließen, füge ich benutzerdefiniertes CSS hinzu, um das Design an das Theme anzupassen und den gewünschten Look zu erzielen.
Ich halte mein gesamtes CSS gerne an einem Ort und füge es bevorzugt unter Appearance >> Customizer >> Additional CSS mit Kommentaren ein.
/* Reduce list heading font size */ h2.gd-tab-list-title.h3 { font-size: 1.25rem; } /* Add white space between headings and content */ div#geodir-tab-content-post_content, div#geodir-tab-content-post_images, div#geodir-tab-content-post_map, div#geodir-tab-content-reviews { margin-top: 30px ; }
So sieht die einzelne Listing-Seite danach aus.
Das ist das Ergebnis. Wir haben unsere Elementor-Verzeichniswebsite mit dem Hello Theme, der kostenlosen Version von Elementor und GeoDirectory erstellt.
Premium-Funktionen zu Ihrer Elementor-Verzeichniswebsite 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 Eintragsübermittlung festlegen. Für jede Preisstufe können Sie Funktionen aktivieren/deaktivieren, wie 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 sowie 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. 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.
Werden Sie Teil unserer Community und verwirklichen Sie Ihre Idee: Eine Verzeichniswebsite erstellen.
Die Möglichkeiten sind endlos.
Eine Verzeichniswebsite mit Elementor PRO erstellen
Wie bereits erwähnt, können Sie mit Elementor PRO deutlich anspruchsvollere Designs realisieren. Ich empfehle Ihnen, diesen Blogbeitrag zu lesen, um den vollen Umfang der GeoDirectory-Integration mit Elementor PRO kennenzulernen:
Das Design von GeoDirectory-Templates mit Elementor Pro anpassen
Elementor Pro Verzeichniswebsite-Vorlagen
Für Elementor PRO-Nutzer bieten wir mehrere Ein-Klick-Installationsvorlagen an, die vollständig funktionsfähige Verzeichniswebsites mit Dummy-Daten bereitstellen.
Diese Vorlagen sind kostenlos und können in weniger als einer Minute installiert werden.
Bearbeiten Sie anschließend den Dummy-Inhalt mit Ihren eigenen Inhalten und passen Sie die Vorlage an Ihr Branding an, indem Sie das Logo, die Farbpalette der Verzeichniswebsite und die Typografie ändern.
Im Folgenden finden Sie einige Beispiele dafür, was Sie mit GeoDirectory und Elementor PRO erreichen können.
Ein-Klick-Installation von DEMOS über das AyeCode connect plugin, siehe diesen Blogbeitrag für ein Tutorial
Veranstaltungsverzeichnis (Elementor Pro)
Ein Veranstaltungsverzeichnis und Ticket-Marktplatz, erstellt mit Elementor Pro.
Interessieren Sie sich für ein Tutorial zum Erstellen einer Verzeichniswebsite mit Gutenberg statt Elementor? Lesen Sie diesen Beitrag über wie man eine Verzeichniswebsite mit dem Astra Theme erstellt.
Die GeoDirectory-Integration mit Elementor PRO mit anderen WordPress-Verzeichnis-Plugins zu vergleichen ist eine der nützlichsten Übungen bei der Plugin-Auswahl. Die Frage zur nativen Dynamic-Data-Integration haben wir in unserem Directorist-Vergleich und unserem HivePress-Vergleichbehandelt. HivePress hat insbesondere seit 2022 die Elementor-Unterstützung als bestätigten Feature-Request, wie im Vergleichsbeitrag dokumentiert.