Eine Verzeichnis-Website mit Breakdance erstellen – Website Builder für WordPress

Hier ist eine leicht verständliche Anleitung, wie Sie mit dem Breakdance Website Builder-Plugin eine Verzeichnis-Website erstellen:

1. Installieren Sie das Breakdance-Plugin
2. Installiere und richte GeoDirectory ein
3. Gestalten Sie die Verzeichnis-Website mit dem Breakdance Plugin

Das Breakdance Plugin ist in Kombination mit dem GeoDirectory-Plugin eine hervorragende Möglichkeit, ein flexibles Online-Verzeichnis zu erstellen. Mit dieser Kombination können Sie ganz einfach standortbasierte Funktionen hinzufügen, das Layout anpassen und dynamische Inhalte für eine benutzerfreundliche Erfahrung einbinden.

Dieses System ermöglicht es Webentwicklern und Designern, eine hochwertige Verzeichnis-Website für bestimmte Branchen oder breitere Community-Bedürfnisse zu erstellen.
Sehen wir uns die Details an, wie das geht.

In diesem Tutorial werden wir:

• Plugins installieren und einrichten
  1. Installieren Sie das Breakdance Plugin
  2. GeoDirectory installieren
  3. GeoDirectory Installations-Assistent
     • Festlegen der Standardstadt
     • Zusatzfunktionen hinzufügen
     • Dummy-Daten hinzufügen
• Gestalten Sie die Breakdance Verzeichnis-Website
  1. Das Website-Logo gestalten
  2. Das Design der Startseite
     • Das Navigationsmenü
     • Die Typografie
     • Der Inhalt
  3. Das Design der Listings- und Suchseite
  4. Das Design der einzelnen Listing-Seite

Plugins installieren und einrichten.

1. Installiere das Breakdance Plugin

Du kannst das Breakdance-Plugin von der breakdance.comkaufen. Du erhältst eine Plugin-ZIP-Datei. Um sie zu installieren, gehe zu  Plugins >> Neu hinzufügen >> Klicke auf Plugin hochladen

Jetzt nach der Installation deaktivieren wir das WordPress-Theme über die Breakdance >> Einstellungen >> Theme >> Theme deaktivieren

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:

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: 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 Benutzerverwaltungs-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 Eintrags­kategorien 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 Breakdance Verzeichnis-Website

Jetzt, da wir die Plugins installiert und die grundlegende Einrichtung von GeoDirectory abgeschlossen haben, können wir beginnen, unsere Verzeichnis-Website mit dem Breakdance 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. Breakdance 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 > Abschnitt „Anzeigeort, du kannst die „Haupt„-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:

1. Home
2. Über uns
3. Blog
4. Orte und Orte hinzufügen
5. Profil
6. Anmelden
7. 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.

Die Typografie

Lass uns die globalen Typografie-Einstellungen über die Breakdance >> Einstellungen >> Globale Stile >> Breakdance starten

folgende Typografie-Einstellungen
Überschriften-Schriftart: Poppins
Schriftart für den Text: Poppins
Basisgröße: 16px
Verhältnis: 1.2

Kopfzeile einrichten

Richten wir nun die Kopfzeile der Website ein – dazu gehen wir zu Breakdance >> Header und klicken auf Add header.

Hier geben wir der Kopfzeile einen Titel und wählen
Ort: Überall
Priorität: 1

Klicken Sie jetzt auf Add New Schaltfläche oben links. Sie können eine Kopfzeile mit den verfügbaren Blockelementen erstellen oder auf Library klicken und bereits fertige Kopfzeilen-Vorlagen verwenden.

Ich verwende eine der vorhandenen Kopfzeilen-Vorlagen aus der Bibliothek und habe das Logo hochgeladen und ein Menü ausgewählt.

Da unsere Kopfzeile nun fertig ist, widmen wir uns dem Inhalt der Startseite.

Der Inhalt

Ich werde diese Seite von Grund auf mit dem Breakdance Plugin erstellen.

Dazu benötigen wir einen Hero-Header auf der Startseite.

Bearbeiten wir zunächst die Startseite in Breakdance indem wir auf Edit in Breakdance Schaltfläche klicken.

Wir ziehen einen leeren Bereich, indem wir auf die Add Schaltfläche oben links klicken.

Legen Sie im Stil-Tab des Bereichs Folgendes fest:
Ausrichtung: Zentriert
Hintergrundtyp: Bild
Bildgröße: Voll
Größe: Abdecken
Wiederholen: no-repeat
Position: Zentriert
Anhang: Scrollen
Bild aufheben bei: Desktop
Höhe: Benutzerdefiniert
Benutzerdefinierte Höhe: 400px

Jetzt ziehen wir ein Überschriften-Element mit den folgenden Einstellungen hinein.

Text: Finden Sie das beste Restaurant in Philadelphia
Farbe: #FFFFFFFF
Schriftgröße: 48
Schriftgewicht: 600

fügen wir einen Shortcode-Block mit dem [gd_search] Shortcode darunter ein.

Jetzt fügen wir darunter einen weiteren leeren Container mit dem folgenden Shortcode ein, um Kategorielisten anzuzeigen.

[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" rounded="rounded"]

geben wir oben und unten einen Innenabstand von 50px.

Jetzt benötigen wir einen Bereich für aktuelle Einträge. Wir fügen ein Shortcode-Element mit dem folgenden Shortcode ein.

[gd_listings post_type="gd_place" post_limit="6" add_location_filter="1" sort_by="latest" title_tag="h3" layout="3" view_all_link="1" bottom_pagination="1" slide_interval="5" mb="3" rounded="rounded"]

Jetzt fügen wir einen weiteren Shortcode hinzu, um die Eintrags-Karte anzuzeigen.

[gd_map map_type="auto" post_settings="1" 
width="100%" height="425px" 
maptype="ROADMAP" zoom="0"]

Am Ende benötigen wir einen CTA dafür verwende ich eine vorhandene CTA-Vorlage.

Footer einrichten

Zum Abschluss richten wir nun den Website-Footer ein und gehen zu Breakdance >> Footer und klicken auf Add Footer.

Wir können einen Footer von Grund auf neu erstellen oder einen der vorhandenen verwenden. Ich verwende eine vorhandene Footer-Vorlage. Diese Footer-Menüs lassen sich ganz einfach nach unseren Bedürfnissen anpassen.
Fürs Erste lasse ich es so, wie es ist.

Herzlichen Glückwunsch! Ihre Startseite ist fertig.

2. Breakdance Design der Eintrags- und Suchseite für Verzeichnis-Websites

Eintragsübersichtsseite

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 mit einem allgemeinen Layout. In diesem Tutorial erstellen und passen wir das Layout dieser Seiten mit dem Breakdance Builder an.

Gehen wir zu den Breakdance >> Vorlagen >> Vorlage hinzufügen

Bei der nächsten Option wählen wir die folgenden Einstellungen und klicken auf Vorlage hinzufügen Schaltfläche klicken.
Ort: Archiv/Beitragstyp-Archiv
Bedingung: Beitragstyp = Orte

In der Vorlage fügen wir einen leeren Abschnitt hinzu und nehmen die folgenden Einstellungen für den Abschnittsblock vor.
Layout
Ausrichtung: Zentriert
Vertikale Ausrichtung: Zentriert
Hintergrund:
Farbe: F5F8FFFF
Typ: Verlauf

Jetzt fügen wir den Archivtitel-Block darin ein.

Jetzt haben Sie zwei Möglichkeiten, und wir zeigen Ihnen beide:

Die einfachere Methode ist eine einzelne Spalte mit dem folgenden Shortcode: [gd_simple_archive layout=

2) Wenn Sie die vollständige Kontrolle über das Design haben möchten, müssen wir stattdessen einen Spaltenblock mit einem zweispaltigen Layout hinzufügen.

In den Einstellungen verwenden wir Breite: Voll

Jetzt ziehen wir den Shortcode-Container und verwenden den erforderlichen Shortcode darin.

Auf dem linken Container verwenden wir die GD-Archivseiten-bezogenen Widgets wie GD > Loop Action, GD > Loop, GD > Loop Pagination, und GD > Search oben, damit der Benutzer auf der Archivseite suchen kann.

[gd_search mb="3"]
[gd_loop_actions]
[gd_loop layout='2']
[gd_loop_paging]

In der rechten Spalte verwenden Sie den GD > Map block, und wir lassen alle Einstellungen auf ihren Standardwerten. Wir werden jedoch die Höhe des GD > Map-Blocks auf 100vh setzen.

[gd_map map_type="auto" post_settings="1" scrollwheel="1"  width="100%" height="100vh" maptype="ROADMAP" zoom="0"]

Jetzt fügen wir die folgende gd-archive-left-container Klasse zum linken Abschnitt hinzu.

In der linken Spalte fügen wir die folgende Klasse hinzu gd-archive-left-column.

Als letzten Schliff fügen wir das folgende CSS im Theme-Customizer unter Darstellung => Customize => Add CSS

.geodir-archive .gd-archive-left-container{
    overflow-Y: scroll;
    max-height: 100%;
    height:100vh;
    padding-right:15px;
}

.gd-archive-left-column{
	overflow:hidden;
}

Danach ist die Listing-Archivseite nun fertig.

Suchseite

Jetzt erstellen wir eine Vorlage für die GeoDirectory-Suchseite. Gehen wir dazu zu den Breakdance >> Vorlagen >> Vorlage hinzufügen >> Suchergebnissen

Jetzt kopieren wir den gesamten Inhalt der GD Archive Vorlage in die GD Search Vorlage.

Damit sind unsere GD-Such- und Archivseiten-Vorlagen fertig.

4. Breakdance Einzelseiten-Design für die Verzeichnis-Website

Gehen wir zu den Breakdance >> Vorlagen >> Vorlage hinzufügen

Bei der nächsten Option wählen wir die folgenden Einstellungen und klicken auf Vorlage hinzufügen Schaltfläche klicken.
Ort: Single/Places
Bedingung: Beitragstyp = Orte

Wir fügen einen leeren Abschnitt mit 0 Abstand auf allen Seiten hinzu.

Wir fügen den folgenden Shortcode hinzu, um einen Bild-Slider anzuzeigen.

[gd_post_images ajax_load="1" limit="10" limit_show="3" type="slider" slideshow="1" controlnav="1" animation="slide"]

Jetzt fügen wir einen weiteren Abschnitt und ein zweispaltiges Layout darin ein.

Jetzt fügen wir alle erforderlichen GD Detail Seiten-Shortcodes nacheinander in der linken Spalte hinzu.

Dazu gehören GD > Post Title, GD > Single Taxonomies, und GD > Single Tabs.

[gd_single_taxonomies taxonomy=''  prefix=''  link_style=''  link_color=''  link_color_custom=''  link_icon='false'  mt=''  mr=''  mb='2'  ml=''  pt=''  pr=''  pb=''  pl='' ]
[gd_single_tabs heading_font_size="0" heading_text_color="primary" heading_text_color_custom="#000000" mt_lg="3" border_type="border"]
[gd_single_next_prev bg=''  mt='4'  mr=''  mb='3'  ml=''  pt=''  pr=''  pb=''  pl=''  border=''  rounded=''  rounded_size=''  shadow='' ]

In der rechten Spalte fügen wir GD > Author Action und GD > Output Location Block hinein.

[gd_author_actions hide_edit='false'  hide_delete='false'  author_page_only='false'  display=''  size=''  alignment=''  color='primary'  text_color='white'  btn_mt='1'  btn_mr=''  btn_mb='1'  btn_ml=''  bg=''  mt=''  mr=''  mb=''  ml=''  pt=''  pr=''  pb=''  pl=''  border=''  rounded=''  rounded_size=''  shadow='' ]
[gd_output_location location="detail" list_style="wrap"]

Premium-Funktionen zu Ihrem hinzufügen Breakdance Verzeichnis-Website

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

Lernen Sie die grundlegenden Aspekte mit diesem unverzichtbaren Leitfaden: Die Grundlagen zur Erstellung einer Verzeichnis-Website.

Die Möglichkeiten sind endlos.