Come creare un sito web di directory con il tema Blocksy e il plugin Stackable Gutenberg Blocks

Ecco una guida passo passo per creare un sito web di directory utilizzando il Blocksy tema e il plugin Stackable – Page Builder Gutenberg Blocks:

1. Installa il tema Blocksy
2. Installa il plugin Stackable – Page Builder Gutenberg Blocks
3. Installa e configura GeoDirectory
4. Progetta il sito web Directory usando il Blocksy tema e il plugin Stackable – Page Builder Gutenberg Blocks

Il tema Blocksy, combinato con il plugin GeoDirectory e il plugin Stackable – Page Builder Gutenberg Blocks, crea una piattaforma versatile e avanzata per costruire una directory online sofisticata.

Questa integrazione consente agli utenti di incorporare facilmente funzionalità basate sulla posizione, personalizzare le opzioni di layout e introdurre blocchi di contenuto dinamici, garantendo un'interfaccia intuitiva e coinvolgente.

Questo sistema integrato permette a sviluppatori e designer web di creare un sito di directory di alto livello, su misura per le esigenze di settori specifici o per requisiti di comunità più ampi.

Scopriamo nel dettaglio come ottenere questo risultato.

In questo tutorial vedremo come:

• Installa e configura il tema e i plugin
  1. Installa il tema Blocksy
  2. Installa il plugin Stackable – Page Builder Gutenberg Blocks
  3. Installa GeoDirectory
  4. Procedura guidata di installazione di GeoDirectory
     • Scegliere il sistema di mappe
     • Impostazione della città predefinita
     • Aggiunta di funzionalità extra
     • Aggiunta di dati di esempio
• Progetta il sito web directory con Blocksy
  1. Il Logo
  2. Il design della pagina Home
     • Il Menu di navigazione
     • Il Contenuto
  3. Il design della pagina Annunci e Ricerca
  4. Il design della pagina del singolo Annuncio

Installazione del tema e dei plugin.

1. Installa il Blocksy Tema

Dobbiamo installare un tema e, per questo tutorial, installerai il Blocksy Tema.

Vai su Aspetto >> Temi

Seleziona Aggiungi nuovo, Installa, e Attiva il Blocksy Tema.

2. Installa il Stackable – Page Builder Gutenberg Blocks plugin

Il plugin Gutenberg predefinito non è sufficiente per personalizzare un template, quindi installeremo il Stackable – Page Builder Gutenberg Blocks plugin.

Questo plugin offre blocchi personalizzati superiori a quelli predefiniti e ti aiuterà a progettare i template delle pagine.

Vai su Plugin >> Aggiungi nuovo.

Cerca Stackable – Page Builder Gutenberg Blocks. Installalo e attivalo.

Puoi saltare tutti i passaggi della Procedura guidata di configurazione.

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:

1. Abilitare le chiavi.
2. Creare o selezionare un progetto esistente.
3. Ottenere la chiave.
4. Attivare un account di fatturazione.
5. 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.

Progetta il Blocksy Sito web Directory

Ora che abbiamo installato i plugin e completato la configurazione preliminare di GeoDirectory, possiamo iniziare a progettare il nostro sito web Directory con il Blocksy tema e il plugin Stackable – Page Builder Gutenberg Blocks.

1. Progetta il logo del sito web

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 Aspetto > Personalizza > Intestazione, clicca su Cambia logo link e carica il tuo file PNG. Salta il ritaglio (o ritaglia l'immagine secondo necessità), in Layout Logo seleziona l'opzione Logo e clicca su pubblica.

2. Blocksy Design della pagina Home della Directory

Puoi creare una nuova pagina o utilizzarne una che WordPress crea 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 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'opzionePrincipale».

Se vuoi, puoi fare in modo che lo stesso menu appaia nel footer oppure creare un altro menu da visualizzare 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:

1. Home
2. Chi siamo
3. Blog
4. Luoghi e aggiungi luoghi
5. Profilo
6. Accedi
7. Logout

Il link di accesso (dagli endpoint di UsersWP) verrà visualizzato solo per gli utenti non connessi, mentre i link di disconnessione, account e profilo appariranno solo per gli utenti connessi.

Imposta le impostazioni del menu su Font: Default Font / 14px / Bold 700

Il Contenuto

Inizierò a costruire questa pagina da zero utilizzando il Stackable – Page Builder Gutenberg Blocks plugin.

Per la homepage abbiamo bisogno di un hero header; per farlo, aggiungiamo un blocco colonna fornito dal Stackable – Page Builder Gutenberg Blocks plugin.

Nelle impostazioni del layout a colonne
Larghezza blocco: Align Full
Larghezza contenuto: Align Full
Larghezza massima contenuto: 1200px

Successivamente, controlla le impostazioni del blocco e imposta l'immagine di sfondo.

Per la sezione Hero avremo bisogno di un'immagine; scaricheremo un'immagine gratuita da Pexels.com (Grazie, @rachel-claire).

Ora aggiungiamo un blocco titolo sopra l'immagine con
Contenuto: Trova il Miglior Ristorante a Philadelphia
Tag HTML titolo: H1
Dimensione: 48
Colore testo: #000000

Ora aggiungeremo anche il GD > Search blocco qui sotto.

Ora aggiungiamo un'altra colonna vuota con un padding di 50px in alto e in basso.

trascineremo il GD > Categories blocco al suo interno per visualizzare l'elenco delle categorie.

Ora aggiungiamo un altro contenitore vuoto con le seguenti impostazioni.

Larghezza blocco: Align Full
Larghezza contenuto: Align Full
Larghezza massima contenuto: 1200px
Colore: #00000

Procediamo ora ad aggiungere la terza sezione al nostro sito web. La chiameremoAnnunci recenti“.

Aggiungi un GD > Listing blocco facendo clic sull'icona più e accedendo alle impostazioni del blocco. Assicurati di abilitare il Mostra Impostazioni Avanzate opzione.
Nel blocco Stile scheda, aggiorna Layout: Vista Griglia (Quattro Colonne).

Cambia il numero di post da mostrare: 8 e assicurati di selezionare Abilita filtro per posizione opzione e imposta Ordina per: Più recenti.

Ora aggiungiamo un altro contenitore vuoto con le seguenti impostazioni.

Larghezza blocco: Align Full
Larghezza contenuto: Align Full

Aggiungi il GD > Map blocco e mantieni le impostazioni su
Larghezza: 100%
Altezza: 450px

Infine aggiungeremo una CTA. Utilizzeremo uno dei template predefiniti

Assicurati di utilizzare le seguenti impostazioni

Larghezza blocco: Align Full
Larghezza contenuto: Align Full

Congratulazioni! La tua homepage è completata.

3. Blocksy Design delle pagine Annunci e Ricerca del sito Directory

Pagina degli annunci

Ora devi progettare due pagine essenziali per qualsiasi directory.

La pagina delle inserzioni (archivio generale, categorie, tag) e la pagina dei risultati di ricerca.

GeoDirectory le crea di default con un layout generale. In questo tutorial personalizzeremo un po' il layout di queste pagine.

Le pagine degli annunci e di ricerca sono quasi identiche, quindi la creiamo una volta sola e copiamo il layout sull'altra pagina.

Abbiamo deciso che il layout della pagina degli annunci avrebbe avuto gli annunci a sinistra e, a destra, una mappa fissa che mostra la posizione precisa degli annunci.

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

Aggiungiamo una colonna vuota con le seguenti impostazioni
Larghezza blocco: Align Full
Larghezza contenuto: Align Full
Larghezza massima contenuto: 1200px
Colore: #00000
Padding: 30px

Aggiungiamo lo GD > post title shortcode al suo interno.

Ora aggiungi un Colonna blocco con un layout 50:50.

Ora nel contenitore di sinistra trascineremo i widget correlati alla pagina Archivio GD 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.

Nella colonna di destra, trascina il blocco GD > Mappa, e lasceremo tutte le impostazioni ai valori predefiniti. Tuttavia, imposteremo l'altezza del blocco GD > Mappa a 100vh.

Per dare un tocco finale aggiungeremo il seguente CSS nel personalizzatore del tema da Aspetto => Personalizza => Aggiungi CSS

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

.breakdance .bde-column-111-108.bde-column{
	overflow:hidden;
}

Fatto questo, la pagina Archivio inserzioni è ora pronta.

Per la pagina di ricerca, ripetiamo lo stesso processo.

Pagina di ricerca

Vai su Geodirectory > Settings > General > Pages > Clicca su modifica del template di pagina GD Search

Rimuovi tutto il contenuto da questo GD Search template di pagina.

Copia tutto il contenuto della pagina GD Archive e incollalo nella pagina GD Search.

Infine, avrai bisogno di questo CSS per rendere la Pagina di Ricerca a larghezza intera.

.geodir-page-search #main article {
max-width: 100%;
}

Ora le nostre pagine GD Search e Archivio sono pronte.

4. Blocksy Design della pagina di inserzione singola del sito web di directory

Per prima cosa disabiliteremo il titolo predefinito da Aspetto > Personalizza > Luoghi > Luogo Singolo e disabilita il titolo come indicato di seguito.

Per modificare e personalizzare la pagina GD Detail, puoi andare su 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 questi contenuti predefiniti e aggiungeremo un nuovo blocco colonna.

Prima di tutto, aggiungiamo uno slider di immagini nella parte superiore della pagina Dettagli Inserzione.

trascineremo il GD > Post Image blocco in questo contenitore con le seguenti impostazioni

Limite immagini: 10
Limite visualizzazione: 3
Tipo di output: Slider
Avvio automatico: Attiva

Ora aggiungeremo un altro blocco Sezione sotto di esso con un layout 70/20.

Ora aggiungiamo tutti i GD Detail shortcode della pagina uno per uno nella colonna di sinistra.

Che include GD > Post Title, GD > Single Taxonomies, e GD > Single Schede.
Nella colonna di destra, aggiungeremo GD > Author Action e GD > Output Location blocco.

Dopo questo, la nostra pagina Dettagli Inserzione è stata completata.

Aggiungere funzionalità Premium al tuo BlocksySito web Directory

Se lo desideri, ora puoi aggiungere funzionalità premium alla tua directory, come:

1. Annunci a pagamento: con il componente aggiuntivo GeoDirectory Listing Price Manager puoi impostare i prezzi per l'inserimento degli annunci. Per ogni fascia di prezzo, puoi abilitare/disabilitare funzionalità come: limitare il numero di immagini per gli annunci gratuiti consentendone di più per quelli a pagamento. Permettere un numero maggiore o minore di tag e categorie. Abilitare o disabilitare campi personalizzati specifici. Inviare descrizioni più lunghe o più brevi.
2. 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.
3. 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.

Se stai pensando di avviare un'attività online, creare un sito web directory potrebbe essere il modo più semplice per iniziare.

Scopri i segreti di una directory online con questa guida: Guida alla creazione di un sito web directory.