Di recente abbiamo creato Blockstrap, che è sia un plugin (che fornisce i blocchi per la costruzione delle pagine) sia un tema a blocchi (FSE – Full Site Editing) che combina la potenza del nuovo Site Editor di WordPress e Bootstrap 5.
Abbiamo sviluppato Blockstrap come framework per la nostra nuova generazione di temi Directory, che presto includerà una directory generica per aziende ed eventi, un tema per il settore immobiliare, un tema per offerte di lavoro, un tema per gli annunci classificati e molti altri template directory per WordPress.
Tutti questi temi sono progettati appositamente per creare un sito directory perfetto nei minimi dettagli utilizzando GeoDirectory.
In questo tutorial troverai una guida passo dopo passo per costruire un sito directory utilizzando il tema Blockstrap, il tema figlio Directory e il nostro plugin GeoDirectory:
- Installa il tema Blockstrap/Directory
- Installa e configura GeoDirectory
- Progetta il sito directory utilizzando il Block theme Builder
In questa guida ti mostreremo come creare una fantastica directory online utilizzando il tema Directory e il plugin GeoDirectory.
Con questa configurazione puoi aggiungere facilmente funzionalità basate sulla posizione, rendere il tuo sito visivamente accattivante e aggiungere diversi tipi di contenuto che cambiano dinamicamente.
Ma per ora manterremo le cose semplici e facili da comprendere.
In questo tutorial tratteremo:
Installazione del tema e dei plugin.
1. Installa il tema Blockstrap e il suo tema figlio Directory
Prima di tutto, installiamo il Directory tema. Essendo un tema figlio di Blockstrap installerà automaticamente anche il tema principale.
L'installazione del tema Blockstrap ti chiederà anche di installare il plugin Blockstrap.
il plugin Blockstrap è il nostro page builder, necessario per aggiungere la raccolta di blocchi Blockstrap e migliorare il design del tuo sito directory.
e il suo URL (wordpress.org/themes/directory/) perché ne apprezzavamo il concetto e lo volevamo per il nostro nuovo prodotto. Purtroppo, questo ha comportato l'ereditarietà delle sue recensioni negative del passato.
Puoi andare sul tuo sito WordPress e da
WP-Admin >> Aspetto >> Temi >> Aggiungi nuovo: cerca Directory e installa la prima opzione di tema.
2. Installa GeoDirectory
Ecco cosa fare:
- Vai su "Plugin" e poi su "Aggiungi nuovo".
- Cerca GeoDirectory.
- Installalo e attivalo.
Fatto! I plugin sono tutti configurati.
3. Procedura guidata di installazione di GeoDirectory
Per GeoDirectory, devi completare la Procedura guidata di configurazione per impostare la chiave API di Google Maps e importare alcune inserzioni di esempio.
Scelta del sistema di mappe (Google Maps o OpenStreetMap)
Nel primo passaggio della configurazione, scegli tra due sistemi di mappe: Google Maps e OpenStreetMaps. Per questa guida, utilizzeremo OpenStreetMaps.
Se preferisci Google Maps, ci sono alcuni passaggi aggiuntivi:
- Fai clic sul pulsante
- Questi sono i passaggi importanti:
- Attiva le chiavi.
- Crea un nuovo progetto o selezionane uno esistente.
- Ottieni la chiave.
- Configura un account di fatturazione.
- Limita la chiave API (in modo che funzioni solo dall'URL del tuo sito web).
Il quarto passaggio è essenziale, ma paghi solo se superi i 200 $ al mese. Tuttavia, il credito gratuito di solito copre le esigenze della maggior parte delle directory.
Ora passiamo all'impostazione della città predefinita.
Impostazione della città predefinita
Successivamente, selezionerai la posizione predefinita, ovvero la città principale presente nella directory.
Abbiamo scelto Philadelphia come città predefinita, ma sei libero di scegliere qualsiasi altra località tu preferisca.
Se stai creando una directory che copre più città, avrai bisogno del componente aggiuntivo Location Manager.
Aggiunta di funzionalità extra
In questo passaggio, configureremo UsersWP, un plugin per la registrazione degli utenti. Ciò consente agli utenti di registrarsi e accedere al tuo sito web.
UsersWP è essenziale affinché gli utenti possano gestire le proprie inserzioni, creare profili e accedere a funzionalità come le recensioni.
Inoltre, installeremo Ninja Forms, che aggiunge moduli di contatto a tutte le inserzioni. Questi moduli inviano e-mail direttamente ai proprietari delle inserzioni. (NOTA: BlockStrap dispone di un semplice modulo di contatto che può essere utilizzato a questo scopo; Ninja Forms è utile per moduli più avanzati)
Tieni presente che AyeCode Connect non è necessario per questo tutorial, a meno che tu non voglia aggiungere componenti aggiuntivi premium di GeoDirectory direttamente dalla tua dashboard di WordPress.
Aggiunta di dati di esempio
L'ultima cosa da fare nella procedura guidata di installazione è aggiungere alcune inserzioni di esempio. Questo crea anche delle categorie per le inserzioni, ma puoi sempre modificarle in seguito se lo desideri.
Progetta il Blockstrap/Directory Theme Sito web Directory
Ora che abbiamo installato il tema e i plugin e completato la configurazione preliminare di GeoDirectory, possiamo iniziare a progettare il nostro sito web directory.
La nostra Il tema figlio di chiamato Directory offre già un template a blocchi predefinito per le pagine di GeoDirectory.
In questo articolo, personalizzeremo questi template predefiniti direttamente.
1. Blockstrap/Directory Design della homepage
Per personalizzare il design della homepage.
Vai su Aspetto >> Editor >> Clicca su Template
Ora seleziona il template della pagina principale e clicca sull'icona di modifica.
Prima di modificare il template della homepage, creiamo prima un logo per il sito web.
1. Il Logo
Prima di tutto, abbiamo bisogno di un logo per il nostro sito web.
Non è necessario assumere un designer per creare la prima versione del tuo logo.
Uno degli errori più grandi che puoi commettere quando avvii una nuova directory è spendere troppo tempo e denaro prima di verificare se le persone hanno bisogno di ciò che intendi realizzare.
Puoi creare un logo in soli cinque minuti usando un'app come Canva, che è fantastica e gratuita (o economica per ciò che offre se scegli un piano premium).
Per una versione base del tuo prodotto (chiamata MVP, ovvero minimum viable product), un logo realizzato con Canva andrà benissimo.
Ci sono tantissimi template di logo tra cui scegliere, e va bene se il tuo primo logo non è perfetto o super originale.
Se il tuo progetto inizia ad andare bene, potrai sempre lavorare per migliorare o cambiare completamente il logo in un secondo momento.
Di solito un logo ordinario non è la ragione per cui un progetto fallisce.
Useremo questo logo quando creeremo l'intestazione del sito web.
L'Header
Ora aggiungiamo questa immagine del logo selezionando il blocco appropriato dalla barra laterale sinistra, come indicato nello screenshot qui sotto.
Ora aggiungiamo alcune voci di menu necessarie. Come Home, Luoghi, e Blog, Contatti e Chi siamo nel nostro caso.
Puoi usare il BS > Elemento di navigazione blocco per aggiungere il nuovo elemento di menu.
CONSIGLIO PRO: Se decidi di utilizzare l'intestazione trasparente per la home page, dovrai aggiungere il logo sia all'intestazione normale che a quella trasparente.
Il Contenuto
Ecco come appare la home page predefinita con il Blockstrap's Directory Child Theme.
Sembra già completa di per sé, ma apporteremo alcune modifiche minori.
Il gd_location gli shortcode appartengono al Geodirectory Location Manager addon. Poiché al momento non stiamo usando questo addon, rimuovo gli shortcode che vedi nello screenshot qui sotto.
Ecco come appare ora la nostra home page.
Se vuoi aggiungere una nuova sezione o apportare modifiche al contenuto di qualsiasi pagina, puoi utilizzare i Blockstrap theme blocchi integrati che iniziano con BS >
2. Blockstrap/Directory Design della pagina Inserzioni e Ricerca del sito
Come accennato in precedenza, i temi Blockstrap e Directory dispongono già di template predefiniti per le pagine GD.
Tutti questi template sono completi di per sé, quindi non è necessario apportare alcuna modifica.
Poiché le pagine interne utilizzano un'intestazione hero, dobbiamo personalizzare la sezione dell'intestazione della pagina Archivio e aggiornarla con il nuovo logo e gli elementi di menu.
Andiamo su Aspetto >> Editor >> Clicca su Template >> Seleziona GD Archive per il layout della pagina Archivio.
Come per la home page, qui nella pagina Archivio GD caricheremo il nuovo logo e gli elementi di menu.
Ecco come appare la pagina Archivio GD con il design predefinito.
allo stesso modo, per la pagina GD Search seleziona il GD Search Archive template e apporta le modifiche necessarie.
Per questo articolo mantengo il layout predefinito.
3. Blockstrap/Directory Design della pagina Inserzione singola del sito
Per personalizzare il GD Detail seleziona il GD Single template della pagina e apportare le modifiche necessarie.
Ecco come appare il template predefinito della pagina Dettagli GD: sembra completo e contiene tutti gli elementi necessari, quindi non lo modificherò.
Aggiungere funzionalità Premium al tuo Blockstrap/Directory Sito web
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 scegliere quanto far pagare per aggiungere un'inserzione. Puoi impostare prezzi diversi per opzioni diverse. Ad esempio, potresti offrire più funzionalità per le inserzioni a pagamento, come la possibilità di caricare più immagini, limitando invece le funzionalità per quelle gratuite. Puoi anche decidere quali campi speciali sono disponibili e la lunghezza massima delle descrizioni.
- Claim Listings: Questa funzionalità è fondamentale per una directory. Ecco come funziona: prima l'amministratore configura il database, poi invita i titolari delle attività a gestire le loro inserzioni gratuite. Se un titolare desidera il pieno controllo, potrebbe dover prima passare a un'inserzione a pagamento.
- Pubblicità: vendita di spazi pubblicitari è un'altra forma di monetizzazione di una directory online. Se il tuo sito ha molti visitatori, puoi utilizzare le reti pubblicitarie. In caso contrario, puoi vendere spazi pubblicitari direttamente. Questo significa che le aziende possono pagare per mostrare banner in aree specifiche del tuo sito, oppure le loro inserzioni possono apparire come annunci, ad esempio in cima ai risultati di ricerca.
Questi sono solo tre esempi. Tuttavia, un sito directory offre molti modi per guadagnare online.
Puoi creare un mercato mondiale per articoli artigianali, vendere biglietti per eventi o offrire coupon sconto.
Se sei interessato a iniziare, consulta questa risorsa: Come creare un sito directory da zero.
Questo tutorial è versatile e può essere adattato per funzionare con qualsiasi tema o page builder.
Le possibilità di ciò che puoi fare con il tuo sito sono infinite.
Conclusione
Abbiamo pubblicato un gran numero di tutorial sulla creazione di una Directory con i temi e i page builder più diffusi.
Se ne hai letto qualcuno, noterai che costruire con il framework Blockstrap e il suo directory child theme è più semplice.
Il risultato ha un aspetto nettamente migliore.
E infine, ma non per importanza, se metti alla prova un sito Directory Blockstrap, noterai anche che è molto più veloce di qualsiasi altro per cui abbiamo creato tutorial finora.
La cosa migliore è che sia il tema e plugin Blockstrap che il Directory Child Theme sono 100% gratuiti!
Allora, cosa aspetti? Avvia il tuo sito Directory con Blockstrap e il plugin GeoDirectory e inizia a guadagnare online adesso!