Il Plugin WordPress per Directory Più Avanzato e Scalabile al Mondo

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:

1. Installa il tema Blockstrap/Directory
2. Installa e configura GeoDirectory
3. 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:

• Installa e configura il tema e i plugin
  1. Installa il tema Blockstrap/Directory
  2. Installa GeoDirectory
  3. 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 directory Blockstrap/Directory
  1. Il Logo
  2. Il design della pagina Home
     • L'Header
     • 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 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:

1. Vai su "Plugin" e poi su "Aggiungi nuovo".
2. Cerca GeoDirectory.
3. 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:

1. Fai clic sul pulsante
2. 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:

1. 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.
2. 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.
3. 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!

Come costruire un sito web directory con Bricks Builder?

🚨 Nuovo Template Bricks Disponibile! 🚨
Abbiamo appena rilasciato uno straordinario template per Bricks Builder per rendere la creazione del tuo sito directory basato su GeoDirectory 100 volte più facile e veloce!
🎯 Demo live: Scoprilo qui
📥 Download e Tutorial: Scarica il template Bricks Directory
💬 Partecipa alla conversazione: Discutine nel nostro forum della community
Provalo e dicci cosa ne pensi!

Se invece vuoi progettare il tuo template personalizzato, ecco una guida introduttiva per costruire un sito directory usando Bricks builder e il plugin GeoDirectory:

1. Installa il tema Bricks
2. Installa e configura GeoDirectory
3. Progetta il sito directory con Bricks Builder

Utilizzare Bricks Builder insieme al plugin GeoDirectory ti permette di creare una directory online straordinariamente sofisticata.

Questa combinazione consente di integrare facilmente funzionalità basate sulla posizione geografica, personalizzare l'estetica e inserire blocchi di contenuto dinamico, dando vita a un'esperienza utente intuitiva e coinvolgente.

In questo tutorial, tuttavia, ci concentreremo sulla semplicità e sulla facilità d'uso.

Utilizzeremo Bricks builder principalmente con gli shortcode di GeoDirectory.

Nelle prossime settimane, approfondiremo l'argomento e pubblicheremo tutorial dettagliati su come progettare ogni template GD principalmente con gli elementi Bricks e i query loop (dati dinamici).

In questo tutorial vedremo come:

• Installa e configura il tema e i plugin
  1. Installa il tema Bricks
  2. Installa GeoDirectory
  3. 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 directory con Bricks
  1. Il Logo
  2. Il design della pagina Home
     • Il Menu di navigazione
     • L'Header
     • Il Contenuto
     • Il Footer
  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 Bricks Tema

Prima di tutto, scarica il tema e il tema figlio dal sito Bricks ufficiale.

Installa il tema nel tuo sito WordPress da WP-Admin >> Aspetto >> Temi

Attiva la licenza del tema.

2. Installa GeoDirectory

Infine, devi installare GeoDirectory.

Vai su Plugin >> Aggiungi nuovo, cerca GeoDirectory. Installalo e attivalo, e avremo completato l'installazione dei plugin.

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

Per questa guida, scegliamo OpenStreetMaps.

Se invece vuoi usare Google Maps, dovrai fare alcune operazioni aggiuntive:

• Clicca sul pulsante "Genera chiave" e segui le istruzioni in questa guida per creare una chiave API valida.
• Ecco i passaggi più importanti:
  1. Attiva le chiavi.
  2. Crea un nuovo progetto o selezionane uno esistente.
  3. Ottenere la chiave.
  4. Configura un account di fatturazione.
  5. Limita la chiave API (in modo che funzioni solo dall'URL del tuo sito).

Il quarto punto è obbligatorio, ma paghi solo se superi i 200 $ al mese.

Questo credito gratuito è più che sufficiente per il 99% delle directory.

Impostazione della città predefinita

Successivamente, sceglierai la posizione predefinita, ovvero la città a cui è dedicata la directory.

Noi sceglieremo Philadelphia come città predefinita, ma puoi selezionare qualsiasi luogo tu voglia.

Se stai creando una directory per più 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.

Non è necessario usare AyeCode Connect per questo tutorial. È indispensabile solo se vuoi 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 consiste nell'inserire alcuni annunci di esempio. Questo configura anche le categorie per gli annunci, che potrai modificare in seguito come preferisci.

Per ora, non aggiungeremo widget nella barra laterale né voci di menu. Ce ne occuperemo più avanti.

Progetta il Bricks 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. 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 ne hanno effettivamente bisogno.

Puoi creare un logo in soli cinque minuti usando un'app come Canva, che è economica e davvero valida.

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 è il motivo per cui un progetto fallisce. Useremo questo logo quando creeremo l'intestazione del sito.

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

Dovrai impostare questa pagina come homepage del sito; per farlo, vai su wp-admin >> Impostazioni >> Lettura

Ora configuriamo prima il menu di navigazione del sito.

Il Menu di navigazione

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

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:

1. Home
2. Luoghi e aggiungi luoghi
3. Cerca
4. Blog
5. Account
6. Pagine di registrazione e accesso

L'Header

Per impostare l'intestazione del sito, vai su wp-admin >> Bricks >> Template >> Aggiungi nuovo

Crea un template Bricks per l'intestazione.

selezioneremo un layout a due colonne con rapporto 30::70.

Nella colonna sinistra trascina il blocco Logo e carica il logo del sito al suo interno.

Impostiamo la larghezza: 200px

Nella colonna destra trascina il Menu di navigazione nella colonna destra.

con impostazioni come
Allinea asse principale: center
Allinea asse secondario: Destra

Tipografia
Trasformazione testo: Poppins 500

Il Contenuto

Ora progettiamo la homepage. Modificheremo la homepage facendo clic sul pulsante Modifica con Bricks.

Aggiungeremo un contenitore vuoto con le seguenti impostazioni
Allineamento autonomo: Centra
Allinea assi principali: Centra
Allinea asse secondario: Centra

Nel Stile scheda della sezione

Padding: 50px (in alto) 50px (in basso)
Altezza minima: 500
Carica immagine di sfondo
Posizione sfondo: Centro Centro
Ripetizione sfondo: Ripeti

Ora aggiungiamo un tag di intestazione sopra questo contenitore.
Testo: Find The Best Restaurant In Philadelphia

Ora nella scheda stile del tag di intestazione aggiungi le seguenti impostazioni.
Tipografia:
Dimensione carattere: 48px
Allineamento testo: Centra
Trasformazione testo: Prima lettera maiuscola
Font: Poppins

Ora aggiungi un blocco shortcode sotto di esso e inserisci il [gd_search mb=”3″] shortcode al suo interno.

Ora aggiungiamo un altro contenitore vuoto e inseriamo un blocco shortcode con il seguente shortcode.

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

Nella scheda stile del contenitore delle categorie, vai su Layout > Margine

Padding superiore: 50px
Padding inferiore: 50px
Padding sinistro: 50px
Padding destro: 50px

Ora aggiungeremo una sezione per mostrare le attività recenti.

aggiungiamo un'altra sezione vuota con un tag intestazione e
Testo: Annunci recenti

con le seguenti caratteristiche tipografiche come
Dimensione font: 32px

Ora sotto di esso aggiungiamo il seguente shortcode

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

Ora sotto di esso vogliamo aggiungere una mappa che elenca tutte le attività.
Per farlo, aggiungeremo un contenitore vuoto e un blocco shortcode al suo interno con il seguente shortcode.
con il seguente stile per il contenitore.
Padding superiore: 50px
Padding inferiore: 50px

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

Ora vogliamo aggiungere una CTA, per la quale utilizzeremo un layout a due colonne.
Con le seguenti impostazioni
Direzione: Orizzontale (riga)
Allineamento autonomo: Centra
Allinea asse secondario: Centra
Spazio tra colonne: 20
Spazio tra righe: 20

Nella colonna sinistra trascineremo un'immagine, mentre nella colonna destra aggiungeremo del testo e un pulsante per accedere alla pagina degli annunci.

Il Footer

Ora, per progettare e creare un footer, vai su wp-admin >> Bricks >> Template >> Aggiungi nuovo
e seleziona il tag template come Footer e modifica il template con Bricks.

Ora aggiungiamo un contenitore vuoto con il Colore di sfondo: #072027

Aggiungi il blocco di testo base con del testo e uno stile Allineamento testo: Centra

Dopo questo, la nostra homepage è pronta.

2. Bricks Design delle pagine Annunci e Ricerca del sito Directory

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 della pagina e modificalo con Bricks Builder.

Ora aggiungeremo una sezione vuota e al suo interno trascineremo il Titolo del post blocco.

Dalle impostazioni di stile della sezione, imposta
Colore di sfondo: #072027
Padding: 30px 10px 30px 10px

Per il blocco del titolo del post, imposta la tipografia su
Font: Poppins
Colore: #fffff

Ora aggiungiamo una sezione vuota e al suo interno un contenitore a due colonne (50::50).

Nel contenitore di sinistra aggiungeremo blocchi shortcode con gli shortcode relativi alla pagina archivio di GD, come GD > Loop Action, GD > Loop, GD > Loop Pagination e GD > Search in cima, così l'utente potrà effettuare ricerche dalla pagina archivio.

[gd_search bg=''  mt=''  mr=''  mb='3'  ml=''  pt=''  pr=''  pb=''  pl=''  border=''  rounded=''  rounded_size=''  shadow='' ]
[gd_loop_actions bg=''  mt=''  mr=''  mb='3'  ml=''  pt=''  pr=''  pb=''  pl=''  border=''  rounded=''  rounded_size=''  shadow='' ]
[gd_loop layout='2'  row_gap=''  column_gap=''  card_border=''  card_shadow=''  bg=''  mt=''  mr=''  mb=''  ml=''  pt=''  pr=''  pb=''  pl=''  border=''  rounded=''  rounded_size=''  shadow='' ]
[gd_loop_paging show_advanced=''  bg=''  mt=''  mr=''  mb='3'  ml=''  pt=''  pr=''  pb=''  pl=''  border=''  rounded=''  rounded_size=''  shadow='' ]

Nella colonna destra aggiungeremo un blocco Shortcode con lo shortcode GD > Map con le seguenti impostazioni.

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

Aggiungeremo anche una classe scrolling-gd-loop alla colonna sinistra per lo scorrimento touch. Puoi verificare l'opzione indicata nello screenshot qui sotto.

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.

Creeremo il GD Search template della pagina da Bricks >> Template >> Aggiungi nuovo. Assicurati di selezionare Seleziona il tipo di template: GD Search Results

Copia tutto il contenuto del GD Archive template Bricks e incollalo nel GD Search template Bricks della pagina.

Per farlo, nella pagina Archivio GD, fai clic sull'icona Copia (tutto) nella colonna destra di Bricks Builder (Struttura)

Vai alla pagina di ricerca. Puoi trovare la pagina di ricerca da Geodirectory > Impostazioni > Generale > Pagine.

Modificala con Bricks. Fai clic sull'icona Rimuovi (tutto) nella colonna destra di Bricks Builder:

Infine, fai clic sull'icona Incolla (tutto) nella colonna destra di Bricks Builder:

Questo renderà la pagina di ricerca e la pagina Archivio identiche, a larghezza intera, con i risultati nella colonna sinistra e la mappa fissa nella colonna destra.

Per la pagina di ricerca, dobbiamo anche indicare a Bricks di mostrare questo template sulla pagina singola.

Per farlo, dobbiamo fare clic su Icona ingranaggio > Impostazioni template > Condizioni > Individuale > Pagina di Ricerca (Titolo della tua pagina di ricerca).

3. Design della pagina del singolo annuncio del sito directory con Bricks

È ora di creare il template della pagina di dettaglio. Andremo a modificare il GD Detail template di pagina in Bricks.

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 questi contenuti predefiniti e lo modificheremo usando Bricks.

Aggiungiamo una sezione vuota e inseriamo al suo interno un blocco shortcode.

Usiamo il seguente shortcode per mostrare il carosello di immagini.

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

Ora, all'interno di una sezione vuota, aggiungiamo un contenitore a due colonne.

Nel contenitore di sinistra aggiungeremo i seguenti shortcode.

Che include GD > Post Title, GD > Single Taxonomies, e GD > Single Schede.

[gd_page_title tag='h1'  no_wrap='false'  title_container='1'  strip_html=']
[gd_single_taxonomies taxonomy=''  prefix=''  link_style=''  link_color=''  link_color_custom=''  link_icon='false']
[gd_single_tabs heading_font_size="0" heading_text_color_custom="#000000" mt_lg="3" border_type="border"]

Nella colonna di destra aggiungeremo il 
GD > Author Action, e GD > Output Location blocco.

[gd_author_actions hide_edit='false'  hide_delete='false'  author_page_only='false']
[gd_output_location location="detail" list_style="wrap"]

Al termine, la nostra pagina di dettaglio dell'annuncio è completa.

Aggiungere funzionalità Premium al tuo Bricks Sito 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 add-on. Puoi decidere quanto far costare l'aggiunta di un annuncio. Per i diversi livelli di prezzo, puoi scegliere quali funzionalità includere o escludere. Ad esempio, potresti consentire più immagini per gli annunci a pagamento e limitarle per quelli gratuiti. Puoi anche decidere se determinati campi personalizzati sono disponibili o meno, e se le descrizioni possono essere più lunghe o più corte.

1. Claim Listings: Questa funzionalità è davvero importante per una directory. Ecco come funziona: l'amministratore configura il database e poi invita i titolari delle attività a gestire i loro annunci gratuiti. Quando un titolare vuole prendere il controllo di un annuncio, potrebbe dover prima passare a un annuncio a pagamento.

1. Pubblicità: vendita di spazi pubblicitari è un'altra forma di monetizzazione di una directory online. Se il tuo sito riceve molti visitatori, puoi usare reti pubblicitarie. In caso contrario, puoi vendere spazi pubblicitari direttamente. Ciò significa che le aziende possono pagare per inserire banner in determinate aree del tuo sito, oppure i loro annunci possono apparire come pubblicità, 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 marketplace globale di articoli artigianali, vendere biglietti per eventi o vendere coupon sconto.

Per chi si appresta al suo primo progetto, ecco la tua guida: Costruire il tuo sito directory.

Questo tutorial generico può essere adattato a qualsiasi tema o page builder.

Le possibilità sono infinite.

Segui questi passaggi per creare un sito directory usando BuddyBoss e il plugin GeoDirectory:

1. Installa il tema BuddyBoss e la BuddyBoss Platform.
2. Configura GeoDirectory.
3. Installa il plugin Elementor.
4. 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
  1. Installa il tema BuddyBoss e la BuddyBoss Platform
  2. Installa il plugin Elementor
  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
  5. Integrazione GeoDirectory con BuddyBoss
• Progetta il sito directory con BuddyBoss
  1. Il design della pagina Home
     • Il Logo
     • Il Menu di navigazione
     • Il Contenuto
  2. Il design della pagina Annunci e Ricerca
  3. Il design della pagina del singolo Annuncio

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:

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.

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:

1. Home
2. Luoghi e aggiungi luoghi
3. Membri
4. Blog
5. 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:

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

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.

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.

Ecco una guida facile da seguire su come sviluppare un sito web directory utilizzando il tema Avada e il plugin Avada Builder :

1. Installa il tema Avada
2. Installa e configura GeoDirectory
3. Progetta il sito web directory con Avada Builder

Il tema Avada, utilizzato insieme al plugin GeoDirectory e al plugin Avada Builder, è un ottimo modo per creare una directory online flessibile.

Questa combinazione consente di aggiungere facilmente funzionalità basate sulla posizione geografica, personalizzare il layout e includere contenuti dinamici per un'esperienza intuitiva per l'utente.

Permette a sviluppatori web e designer di realizzare un sito web directory di alta qualità, su misura per specifici settori o per esigenze più ampie della comunità.

Approfondiamo i dettagli su come raggiungere questo obiettivo.

In questo tutorial vedremo come:

• Installa e configura il tema e i plugin
  1. Installa il Avada Tema
  2. Installa GeoDirectory
  3. Procedura guidata di installazione di GeoDirectory
     • Impostazione della città predefinita
     • Aggiunta di funzionalità extra
     • Aggiunta di dati di esempio
• Progetta il Avada Sito web Directory
  1. Progetta il Logo del Sito
  2. La pagina Home design
     • Il Menu di navigazione
     • L'Header
     • Il Contenuto
     • Il Footer
  3. Il design della pagina Archivio annunci e Ricerca
  4. Il design della pagina del singolo Annuncio

Installazione del tema e dei plugin.

1. Installa il tema Avada

Avada è un tema WordPress versatile e popolare, noto per la sua flessibilità e le sue potenti funzionalità.

È un tema multifunzione personalizzabile per creare un'ampia gamma di siti web, dotato di un intuitivo builder drag-and-drop che permette agli utenti di progettare e personalizzare il proprio sito senza bisogno di scrivere codice.

Per acquistare il tema Avada e scoprire tutte le sue numerose funzionalità, puoi visitare il marketplace ufficiale ThemeForest: Link per l'acquisto del tema Avada.

Puoi seguire questo video per configurare il tema Avada.

2. Installa GeoDirectory

Infine, devi installare GeoDirectory.

Vai su Plugin >> Aggiungi nuovo, cerca GeoDirectory. Installalo e attivalo. Abbiamo completato l'installazione dei plugin.

3. Procedura guidata di installazione di GeoDirectory

Per il plugin GeoDirectory, dovresti 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)

Puoi scegliere tra due sistemi di mappe nel primo passaggio della procedura guidata: Google Maps e OpenStreetMaps (che non richiede una chiave API).

In questo tutorial selezioniamo OpenStreetMaps.

Se 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 verrà addebitato un costo solo se superi la soglia 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ù città, avrai bisogno del componente aggiuntivo Location Manager.

Aggiunta di funzionalità extra

In questo passaggio installeremo UsersWP, un plugin per la registrazione e il login 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 widget nella barra laterale e voci di menu adesso; lo faremo più avanti.

Progetta il Avada 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 Directory con Avada Suite di strumenti.

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.

2. Avada 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 a quella destra) e salva.

Nel Impostazioni Menu > Visualizza posizione sezione, puoi controllare laPrincipale Navigazione».

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.

Crea layout Header

Ora creiamo un layout per l'header del sito utilizzando Avada builder.
Quindi andremo su Avada > Layout e selezioneremo l'header da Layout globale.

Fai clic su Crea nuovo layout pulsante.

Ora facciamo clic sul pulsante Live Builder.

Si aprirà la Avada Builder Library davanti a noi.

Vedrai molti template predefiniti per le diverse sezioni.

In questo esempio, selezioneremo un layout Header predefinito dalla sezione studio .

Ora sostituiremo il nostro logo facendo clic sulla sezione logo dell'Header predefinito.
Imposteremo la Larghezza massima immagine su 150px dalle impostazioni del logo.

Dal menu dell'header, selezioneremo o cambieremo il menu che vogliamo mostrare nell'header del sito.

apporteremo alcune modifiche allo stile e all'allineamento come indicato nello screenshot qui sotto.

Il nostro Header è pronto. Concentriamoci ora sul contenuto della homepage.

Il Contenuto

Modificheremo la Home pagina nel Live Builder.

Aggiungiamo un contenitore vuoto con le seguenti impostazioni
Larghezza contenuto interno: 100%
Altezza: Altezza minima
Altezza minima: 500
Allineamento riga: Estendi
Allineamento colonna: Centra
Giustificazione colonna: Centra

Dall'impostazione Sfondo, aggiungeremo un'immagine.
Posizione sfondo: Centro Centro
Ripetizione sfondo: Nessuna ripetizione
Dimensione sfondo: Centra
Pattern: Punto
Colore pattern: rgba(0,0,0,0.41)

Ora aggiungiamo un tag titolo Header sopra l'immagine con
Testo: Find The Best Restaurant In Philadelphia
Tipografia:
Famiglia di font: Inter
Variante: Bolt 700
Dimensione font: 42px
Colore font: #ffffff

Ora aggiungiamo il GD > Search blocco e mantienilo con le impostazioni predefinite.

Ora aggiungiamo un contenitore vuoto con il GD > Category blocco all'interno.

Tipo di design: Icona a sinistra
Elementi per riga: 4

Ora aggiungiamo un altro contenitore vuoto con il GD > Listing blocco al suo interno con le seguenti impostazioni.
Ordinamento: recente
Griglia: 4
Post da mostrare: 8

Ora aggiungiamo un contenitore vuoto con le seguenti impostazioni.
Larghezza contenuto interno: Larghezza 100%
Altezza: Auto

Spaziatura contenuto: Sinistra, Destra 0px

Ora aggiungeremo un GD > Map al suo interno.

Infine, è il momento di aggiungere una sezione CTA. Aggiungeremo un contenitore vuoto.
aggiungeremo un tag Heading.

Con le seguenti impostazioni
Allineamento: Sinistra
Tag HTML Heading: H3

Ora aggiungiamo un blocco pulsante con un link alla pagina Aggiungi inserzione pagina.

Crea layout Footer

Infine, creeremo un layout footer globale, in modo simile a quanto fatto per la sezione header.

In questo esempio, utilizzeremo un layout di Footer predefinito.

Puoi apportare modifiche a questo layout di footer. Per ora, lo lascio come predefinito.

Dopo quest'ultimo passaggio, la nostra homepage è pronta.

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

Ora devi progettare due pagine essenziali per qualsiasi directory.

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

GeoDirectory le crea automaticamente con un layout generale. In questo tutorial, creeremo e personalizzeremo il layout di queste pagine utilizzando Avada Builder.

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.

Pagina degli annunci

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.

Ora modifica la pagina utilizzando il Live Builder.

Aggiungeremo un contenitore vuoto con padding del contenuto 0 in alto e in basso.

Aggiungiamo ora una colonna al suo interno e trascineremo GD > Page title al suo interno.

Impostiamo
colore di sfondo: #f6f6f9
Padding: 50px 0px 50px 0px
Colore link del contenitore: #efefef

Aggiungiamo ora un contenitore a due colonne.

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.

Nella colonna destra trascineremo il blocco GD > Map blocco.

Impostiamo la mappa
Altezza: 150vh
Padding: 30px 0px 30px 0px
e lasciamo le impostazioni ai valori predefiniti.

aggiungeremo la gd-loop-column classe alla colonna di sinistra.

aggiungeremo il seguente snippet CSS nel personalizzatore del tema.

.gd-loop-column .fusion-column-wrapper{
    overflow-y: scroll;
    padding-right: 17px;
    max-height: 960px;
}

La nostra pagina Archive è pronta.

Per creare il layout della pagina di ricerca.
Assegneremo l'intestazione e il footer globali a questo layout.

andremo su Avada > Layouts
aggiungeremo questo layout e lo assegneremo alla pagina di ricerca.

Nella pagina di ricerca crea ora un template di contenuto per la ricerca

e copia tutte le sezioni dalla pagina GD > Archive in questa pagina di ricerca.
Dopo questa operazione, il nostro template della pagina di ricerca è pronto.

4. Design della pagina di dettaglio del singolo annuncio del sito directory Avada

È ora di creare il template della pagina di dettaglio. Andremo a modificare il GD Detail template di pagina in Avada Builder.

Aggiungeremo un contenitore vuoto con
Larghezza contenuto interno: Larghezza 100%

Aggiungeremo al suo interno il blocco GD > Post images con le seguenti impostazioni.
Limite immagini: 10
Limite visualizzazione: 3
Tipo di output: Slider
Avvio automatico: Attiva

Nel GD Details nella pagina assicurati di disabilitare Show first featured image.

Ora aggiungeremo di nuovo un contenitore con un layout a due colonne come mostrato di seguito.

Ora aggiungiamo singolarmente tutti i blocchi richiesti della pagina GD Detail nella colonna di sinistra.

Che include GD > post Title, GD > Single Taxonomies, GD > Single Tabs, e GD > Single Next Prev.

Aggiungeremo il GD > Author Action e GD > Output Location blocco nella colonna di destra.

Al termine, la nostra pagina di dettaglio dell'annuncio è completa.

Aggiungere funzionalità Premium al tuo Avada Sito 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 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.
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.

Puoi creare un marketplace globale di articoli artigianali, vendere biglietti per eventi o vendere coupon sconto.

Nuovi utenti, iniziate il vostro percorso da qui: Creare un sito web directory: guida per principianti.

Questo tutorial generico può essere adattato a qualsiasi tema o page builder.

Le possibilità sono infinite.