Come creare un sito web di directory eccezionale con BuddyBoss
Segui questi passaggi per creare un sito directory usando BuddyBoss e il plugin GeoDirectory:
- Installa il tema BuddyBoss e la BuddyBoss Platform.
- Configura GeoDirectory.
- Installa il plugin Elementor.
- Progetta il tuo sito directory usando il tema BuddyBoss ed Elementor.
Combinando BuddyBoss con il Plugin GeoDirectory e il Plugin Elementor, avrai una piattaforma versatile per realizzare una directory online curata, completa di funzionalità social.
Utilizzando questa combinazione e seguendo i passaggi descritti in questo articolo, chiunque può creare facilmente un sito directory intuitivo con funzionalità di social networking.
Scopriamo nel dettaglio come fare.
In questo tutorial vedremo come:
- Installa e configura il tema e i plugin
- Progetta il sito directory con BuddyBoss
Installazione del tema e dei plugin.
1. Installa il BuddyBoss Tema e BuddyBoss Platform
Dobbiamo installare un tema e, per questo tutorial, installerai il BuddyBoss Tema.
Vai su buddyboss.com, acquista e scarica il tema BuddyBoss e la BuddyBoss Platform.
Vai su Aspetto >> Temi
Seleziona Aggiungi nuovo, Installa, e Attiva il BuddyBoss Tema.
Vai su Plugin >> Aggiungi nuovo
Seleziona Carica, Installa, e Attiva il BuddyBoss Platform plugin.
Ora configuriamo BuddyBoss.
Vai su BuddyBoss >> Componenti
Sto abilitando tutti i componenti, puoi decidere in base alle tue esigenze.
Ora configuriamo alcune pagine richieste da BuddyBoss dalle BuddyBoss >> Pages
Lascerò tutte le impostazioni predefinite, ma puoi controllarle e apportare le modifiche necessarie se lo desideri.
Ora il nostro sito è pronto con tutte le funzionalità di social networking e l'aspetto grafico di BuddyBoss.
2. Installa il Elementor plugin
Per stilizzare i template, installeremo il Elementor plugin.
Il Elementor plugin offre molte funzionalità di personalizzazione superiori a quelle predefinite e ti aiuterà a progettare i template delle pagine.
Esiste una versione pro di Elementor che offre molte funzionalità aggiuntive, e GeoDirectory è compatibile con entrambe.
Useremo la Elementor versione gratuita per questo articolo.
Vai su Plugin >> Aggiungi nuovo.
Cerca Elementor. Installalo e attivalo.
3. Installa GeoDirectory
Infine, devi installare GeoDirectory.
Vai su Plugin >> Aggiungi nuovo, cerca GeoDirectory. Installalo e attivalo, e avremo completato l'installazione dei plugin.
4. Procedura guidata di installazione di GeoDirectory
Per GeoDirectory, dovrai completare la Procedura guidata di configurazione per impostare la chiave API di Google Maps e importare alcuni annunci di esempio.
Scelta del sistema di mappe (Google Maps o OpenStreetMap)
Nel primo passaggio della procedura guidata puoi scegliere tra due sistemi di mappe: Google Maps e Open Street Maps (che non richiede una chiave API).
In questo tutorial selezioniamo OpenStreetMaps.
Nel caso in cui desideri selezionare Google Maps, segui questi passaggi aggiuntivi.
Clicca sul pulsante Genera chiave e segui i passaggi di questo guida per generare una chiave API valida.
I passaggi essenziali sono:
- Abilitare le chiavi.
- Creare o selezionare un progetto esistente.
- Ottenere la chiave.
- Attivare un account di fatturazione.
- Limitare la chiave API (in modo che possa essere utilizzata solo dall'URL del tuo sito web)
Riguardo al punto quattro: è un requisito obbligatorio. Tuttavia, ti verranno addebitati costi solo se superi la soglia, che è di $200/mese.
Questo credito gratuito è più che sufficiente per il 99% delle directory.
Impostazione della città predefinita
Successivamente, imposterai la posizione predefinita. Questa è la città per cui viene creata la directory.
Imposteremo Philadelphia come città predefinita.
Puoi usare qualsiasi posizione di cui hai bisogno.
Se hai bisogno di aggiungere annunci in più di una città, avrai bisogno del componente aggiuntivo Location Manager.
Aggiunta di funzionalità extra
In questo passaggio installeremo UsersWP, un plugin per la registrazione degli utenti che consente agli utenti di registrarsi e accedere al tuo sito web.
È necessario per consentire agli utenti di aggiungere e modificare le proprie inserzioni. Creerà inoltre profili utente dove potranno trovare le proprie inserzioni, recensioni e molto altro.
Installeremo anche Ninja Forms in modo che tutte le inserzioni abbiano un modulo di contatto che invia email direttamente ai proprietari delle inserzioni.
AyeCode Connect non è obbligatorio per questo tutorial. È principalmente necessario se desideri aggiungere componenti aggiuntivi premium di GeoDirectory e installarli direttamente dalla dashboard di WordPress.
Aggiunta di dati di esempio
L'ultimo passaggio per completare la procedura guidata di installazione è l'aggiunta di alcune inserzioni di esempio. Verranno aggiunte anche categorie di inserzioni che potrai modificare in seguito in base alle tue esigenze.
Non aggiungerai i widget della barra laterale e le voci di menu adesso, poiché lo faremo più avanti.
5. Integrazione GeoDirectory con BuddyBoss
Per connettere BuddyBoss con Geodirectory, abbiamo bisogno del Integrazione GeoDirectory con BuddyBoss che funziona per entrambi BuddyBoss e BuddyPress integrazione.
Scarica questo addon dalla Geodirectory dashboard, carica e installa questo plugin.
dalla Geodiectory >> Impostazioni >> BuddyPress scheda abilita tutte le impostazioni indicate nello screenshot qui sotto.
Questo plugin consentirà agli utenti di gestire i propri annunci dalla pagina del profilo BuddyBoss.
Progetta il BuddyBoss Sito web Directory
Ora che abbiamo installato il tema e i plugin e completato la configurazione iniziale di GeoDirectory, possiamo iniziare a progettare il nostro sito directory.
1. BuddyBoss Design della pagina Home della Directory
Puoi creare una nuova pagina o utilizzarne una creata da WordPress per impostazione predefinita, come la Pagina di esempio.
Vai su Pagine, modifica la Pagina di esempio e rinominala Home, oppure crea una nuova pagina a questo scopo.
Successivamente, vai su Aspetto > Personalizza > Impostazioni Homepage e seleziona la tua Home.
Il Logo
Prima di tutto, avremo bisogno di un logo per il nostro sito web.
Non devi investire in un designer per abbozzare la prima versione del tuo logo.
Uno degli errori più grandi che puoi commettere quando avvii una nuova directory è investire troppo tempo e denaro prima di testare la compatibilità del prodotto con il mercato.
Puoi creare un logo in cinque minuti con un'app come Canva, economica e sorprendentemente efficace.
Per un MVP (minimum viable product), un logo realizzato con Canva sarà più che sufficiente.
Ci sono diversi modelli di logo tra cui scegliere, e non importa se il tuo logo iniziale non è così perfetto e originale come pensi dovrebbe essere.
Se il tuo progetto prende piede, potrai sempre investire per migliorarlo o cambiarlo radicalmente in seguito.
Un logo mediocre non è mai la causa principale del fallimento di un progetto.
Dopo aver progettato il tuo logo, vai su BuddyBoss > Theme Options > Logo, e carica il tuo file PNG.
Salta il ritaglio (o ritaglia l'immagine secondo necessità), in Layout Logo e clicca su salva modifiche.
Il Menu di navigazione
Dopo aver creato e aggiunto il logo, vai su Aspetto > Menu, e crea il tuo menu.
Aggiungi i collegamenti necessari (dalla colonna sinistra alla colonna destra) e salva. Nella sezione Impostazioni Menu > Posizione di visualizzazione, puoi selezionare l'opzioneMenu dell'intestazione – Utente connesso e Menu dell'intestazione – Utente non connesso».
Se vuoi, puoi far apparire lo stesso menu anche su mobile oppure crearne uno diverso da mostrare lì.
In questo esempio, avremo solo il menu di navigazione nell'intestazione.
Abbiamo aggiunto sette link di navigazione principali e alcuni link di sotto-navigazione:
- Home
- Luoghi e aggiungi luoghi
- Membri
- Blog
- Scrivici
Il Contenuto
Inizierò a costruire questa pagina da zero utilizzando il Elementor plugin.
Abbiamo già un articolo su Come creare un sito web di directory con Elementor.
In questo articolo, aggiungeremo BuddyBoss al mix.
Abbiamo bisogno di un header hero nella homepage; per farlo, vai su Pagine > Home e clicca su Modifica con Elementor.
Aggiungi una sezione. (Clicca il pulsante più del page builder dove è indicato Trascina il widget qui.)
Ora hai una pagina vuota con una sola sezione di una colonna.
Carichiamo un'immagine di sfondo dalla sezione stile del container e configuriamo alcune impostazioni come
Posizione: Centro Centro
Ripeti: Nessuna ripetizione
Dimensione di visualizzazione: Copri
Sovrapposizione sfondo: #000000
Opacità: 0.51
Nella sezione layout del container, avremo le seguenti impostazioni
Altezza minima: 500
Direzione: Colonna verticale
Giustifica centro: centro
Allinea elementi: Centra
Ora aggiungiamo un tag header in cima con il testo: Find The Best Restaurant In Philadelphia e le seguenti impostazioni
Tag HTML: H1
Allineamento: Centra
Colore testo: #ffffff
Tipografia Dimensione: 48px
Ora, bozziamo il GD > Search blocco e configuriamolo con le impostazioni predefinite. Nel tab avanzate imposta larghezza: Larghezza intera (100%)
Aggiungiamo un altro container vuoto qui sotto e trasciniamo il GD > Categories blocco per visualizzare l'elenco delle categorie.
Imposta le impostazioni del blocco GD > Categorie come segue
Tipo di design: Sfondo immagine
Elementi per riga: 4
Abilita il Usa immagine categoria opzione
Puoi impostare l'immagine per una categoria modificando la categoria da wp-admin -> places -> Place Categories.
Ogni categoria ha un'opzione per impostare un'immagine predefinita
Ora aggiungeremo un container vuoto con un tag Titolo e
Testo: Annunci recenti
Allineamento: Centra
Tipografia Dimensione: 38px
Aggiungiamo il blocco GD > Annunci qui sotto con le seguenti impostazioni
Ordinamento: recente
Griglia: 4
Qui sotto, all'interno di un container vuoto, trascina il GD > Map shortcode.
Con le seguenti impostazioni nel container Elementor
Contenuto larghezza: larghezza intera
Spazio: 0
Margine: Alto basso 50px
Padding: 0px
Infine, aggiungeremo una CTA per reindirizzare gli utenti alla pagina di aggiunta dell'inserzione.
Aggiungi un contenitore vuoto con layout a due colonne.
Nel contenitore sinistro aggiungi un box immagine.
Nel contenitore destro, trascineremo il titolo, il testo e il pulsante per renderlo simile all'esempio seguente
Dopo di ciò, la nostra Homepage è pronta.
2. Design della pagina Listings e Search del sito directory BuddyBoss
Per una directory devi creare due pagine importanti: una per gli annunci (che include archivio, categorie e tag) e un'altra per i risultati di ricerca.
GeoDirectory le configura automaticamente con un design di base. Questa guida ti aiuterà a perfezionare un po' l'aspetto di queste pagine.
Poiché la pagina degli annunci e quella di ricerca sono molto simili, le progetteremo una sola volta e utilizzeremo lo stesso layout per entrambe.
La nostra scelta per il design della pagina degli annunci è di avere i risultati a sinistra e una mappa fissa a destra, che mostra la posizione di ciascun annuncio.
È molto semplice.
Vai su Geodirectory > Settings > General > Pages > Clicca su modifica del template di pagina GD Archive
Rimuovi tutto il contenuto da questo GD Archive template di pagina e modificalo con Elementor.
Dalle impostazioni della pagina, imposta il layout su Elementor Full width.
Ora aggiungiamo un contenitore vuoto con le seguenti impostazioni
Direzione: Colonna verticale
Giustifica centro: centro
Allinea elementi: Centra
Colore di sfondo: #2143D3
Ora trasciniamo il GD > page title blocco sopra di esso.
Ora aggiungiamo un layout a due colonne con le seguenti impostazioni.
Contenuto larghezza: larghezza intera
Spazio: 0
Poi, nel contenitore di sinistra, aggiungeremo i blocchi relativi alla pagina GD Archive come GD > Loop Action, GD > Loop, GD > Loop Pagination, e GD > Search in cima, in modo che l'utente possa effettuare ricerche dalla pagina di archivio.
Aggiungeremo anche una classe scrolling-gd-loop a questa colonna per lo scorrimento touch.
Nella colonna destra trascineremo il blocco GD > Map blocco con la seguente impostazione.
Impostazione colonna
Padding: 0px
Margine: 0px
le impostazioni dello shortcode GD > Map ai valori predefiniti e
Height: 100%
Width: 100vh
Aggiungiamo il seguente stile al personalizzatore del tema.
.scrolling-gd-loop{ overflow-y: scroll !important; max-height: 1000px; }
Ora, dopo questo passaggio, la nostra pagina Archivio è pronta.
Per creare il layout della pagina di ricerca.
Copia tutto il contenuto del GD Archive template Elementor e incollalo nel GD Search template Elementor della pagina.
Puoi trovare la pagina di ricerca da Geodirectory > Impostazioni > Generale > Pagine.
3. Design della pagina singola inserzione del sito directory BuddyBoss
È ora di creare il template della pagina di dettaglio. Andremo a modificare il GD Detail template di pagina in Elementor.
Puoi andare a Geodirectory > Impostazioni > General > Pages > Clicca su modifica del template di pagina GD Detail.
In questo template, troverai già dei contenuti predefiniti generati da Geodirectory.
rimuoveremo tutti i contenuti predefiniti e lo modificheremo usando Elementor.
Aggiungiamo un contenitore vuoto
Larghezza contenuto: larghezza intera
Spazio: 0
Margine: Alto basso 50px
Padding: 0px
Direzione: Colonna verticale
Giustifica centro: centro
Allinea elementi: Centra
Ora trasciniamo il Gd > Post Images shortcode al suo interno con le seguenti impostazioni.
Limite immagini: 10
Limite visualizzazione: 3
Tipo di output: Slider
Avvio automatico: Attiva
Assicurati che il contenitore sia larghezza: larghezza intera (100%)
Aggiungiamo un layout a colonna a due colonne.
Nella colonna sinistra, uno alla volta.
Che include GD > Post Title, GD > Single Taxonomies, e GD > Single Schede.
Nella colonna destra, aggiungeremo il (BB) Post Author, GD > Author Action, e GD > Output Location blocco.
Al termine, la nostra pagina di dettaglio dell'annuncio è completa.
Aggiungere funzionalità Premium al tuo BuddyBoss Sito web Directory
Se lo desideri, ora puoi aggiungere funzionalità premium alla tua directory, come:
- Annunci a pagamento: con il componente aggiuntivo GeoDirectory Listing Price Manager add-on, puoi impostare i prezzi per l'inserimento degli annunci. Per ogni fascia di prezzo, puoi abilitare/disabilitare funzionalità come la limitazione del numero di immagini per gli annunci gratuiti, consentendo più foto per gli annunci a pagamento, e un numero maggiore o minore di tag e categorie. Abilitare o disabilitare specifici campi personalizzati. Inviare descrizioni più lunghe o più brevi.
- Claim Listings: Questa è una funzionalità fondamentale per una directory in cui l'amministratore crea il database e invita i proprietari di attività a prendere il controllo dei loro annunci gratuiti. Il processo di rivendicazione dell'inserzione può includere la richiesta di un aggiornamento a un'inserzione a pagamento per assumere la titolarità dell'inserzione.
- Pubblicità: vendita di spazi pubblicitari è un'altra forma di monetizzazione di una directory online. Se hai molto traffico, puoi utilizzare reti pubblicitarie. In alternativa, puoi vendere spazi pubblicitari direttamente, consentendo alle attività di aggiungere banner in aree specifiche del tuo sito web oppure permettendo alle inserzioni di apparire come annunci, ad esempio, in cima ai risultati di ricerca organici.
Questi sono solo tre esempi. Tuttavia, un sito directory offre molti modi per guadagnare online.
Puoi creare un marketplace globale di articoli artigianali, vendere biglietti per eventi o vendere coupon sconto.
Scopri qui i passaggi necessari per la tua prossima avventura online: Passaggi per creare un sito directory di successo.
Questo tutorial generico può essere adattato a qualsiasi tema o page builder.
Le possibilità sono infinite.
Newsletter - Rimani aggiornato!
Ricevi le ultime notizie, consigli e contenuti esclusivi direttamente nella tua casella di posta.