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

Ecco una guida facile da capire su come creare un sito web Directory utilizzando il plugin Breakdance Website Builder:

1. Installa il plugin Breakdance
2. Installa e configura GeoDirectory
3. Progetta il sito web Directory usando il Breakdance plugin

Il Breakdance Plugin, utilizzato insieme al plugin GeoDirectory, è un modo eccellente per creare una directory online flessibile. Con questa combinazione, puoi aggiungere facilmente funzionalità basate sulla posizione, personalizzare il layout e includere contenuti dinamici per un'esperienza intuitiva.

Questo sistema consente a sviluppatori e designer web di costruire un sito web directory di alta qualità per settori specifici o per esigenze più ampie della comunità.
Vediamo nel dettaglio come farlo.

In questo tutorial vedremo come:

• Installa e configura i plugin
  1. Installa il Breakdance Plugin
  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 Breakdance Sito web Directory
  1. Progetta il Logo del Sito
  2. Il design della pagina Home
     • Il Menu di navigazione
     • La Tipografia
     • Il Contenuto
  3. Il design della pagina Annunci e Ricerca
  4. Il design della pagina del singolo Annuncio

Installazione e configurazione dei Plugin.

1. Installa il Breakdance Plugin

Puoi acquistare il plugin Breakdance dal sito breakdance.com. Riceverai un file zip del plugin. Per installarlo, vai su  Plugin >> Aggiungi nuovo >> Clicca su Carica plugin

Ora, dopo l'installazione, disabiliteremo il tema WordPress dalle Breakdance >> impostazioni >> Tema >> Disabilita tema

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 di gestione 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 Breakdance 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 Breakdance 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. Breakdance 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 > 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.

La Tipografia

Impostiamo le impostazioni tipografiche globali dal Breakdance >> impostazioni >> Stili globali >> Avvia Breakdance

le seguenti sono le impostazioni tipografiche
Font dei titoli: Poppins
Font del corpo: Poppins
Dimensione base: 16px
Proporzione: 1.2

Configura l'intestazione

Impostiamo l'intestazione del sito: per farlo andiamo su Breakdance >> Header e clicca Aggiungi intestazione.

qui daremo un titolo all'intestazione e selezioneremo
Posizione: Ovunque
Priorità: 1

Ora clicca il pulsante Aggiungi nuovo in alto a sinistra. Puoi creare un'intestazione usando gli elementi blocco disponibili, oppure puoi cliccare Libreria e utilizzare modelli di intestazione già pronti.

Sto usando uno dei modelli di intestazione esistenti dalla libreria e ho caricato il Logo e selezionato un menu lì.

Ora che la nostra intestazione è pronta, passiamo al contenuto della homepage.

Il Contenuto

Inizierò a costruire questa pagina da zero utilizzando il Breakdance plugin.

Per questo abbiamo bisogno di un hero header nella homepage.

Prima di tutto modifichiamo la Homepage in Breakdance facendo clic su Edit in Breakdance pulsante.

trascineremo una sezione vuota facendo clic sul Add pulsante in alto a sinistra.

Dalla scheda stile sezione imposta
Allineamento: Centra
Tipo di sfondo: Immagine
Dimensione immagine: Intera
Dimensione: Copri
Ripeti: no-repeat
Posizione: Centra
Allegato: Scorri
Rimuovi immagine a: Desktop
Altezza: Personalizzata
Altezza personalizzata: 400px

Ora trasciniamo un elemento Heading con le seguenti impostazioni.

Testo: Find The Best Restaurant In Philadelphia
Colore: #FFFFFFFF
Dimensione font: 48
Peso font: 600

aggiungeremo un blocco shortcode con il [gd_search] shortcode qui sotto.

Ora aggiungiamo un altro contenitore vuoto sotto di esso con il seguente shortcode per visualizzare l'elenco delle categorie.

[gd_categories post_type="0" max_level="1" max_count="all" max_count_child="all" sort_by="az" design_type="image" row_items="4" card_shadow="small" use_image="1" image_size="large" cat_text_color_custom="#000000" cat_font_size="0" badge_text_color_custom="#000000" badge_color="light" badge_font_size="0" title_tag="h4" mb="3" rounded="rounded"]

aggiungeremo un padding di 50px in alto e in basso.

Ora abbiamo bisogno di una sezione con gli annunci recenti. Aggiungeremo un elemento shortcode con il seguente shortcode.

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

Aggiungiamo ora un altro shortcode per visualizzare la mappa degli annunci.

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

Infine, abbiamo bisogno di una CTA per questo utilizzo un template CTA già esistente.

Configurazione del Footer

Per concludere, configuriamo il Footer del sito e andiamo su Breakdance >> Footer e clicca Add Footer.

possiamo creare un Footer da zero oppure utilizzarne uno già esistente. Io utilizzo un template Footer già pronto. Possiamo personalizzare facilmente i menu del Footer in base alle nostre esigenze.
Per ora lo lascio così com'è.

Congratulazioni! La tua homepage è completata.

2. Breakdance 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 per impostazione predefinita con un layout generico. In questo tutorial creeremo e personalizzeremo il layout di queste pagine usando Breakdance Builder.

Andiamo su Breakdance >> Template >> Aggiungi template

Nell'opzione successiva selezioneremo le impostazioni seguenti e cliccheremo su Aggiungi template pulsante.
Posizione: Archivio/Archivio tipo di post
Condizione: Tipo di post = Places

Nel template aggiungeremo una sezione vuota e inseriremo le seguenti impostazioni per il blocco sezione.
Layout
Allineamento: Centro
Allineamento verticale: Centro
Sfondo:
Colore: F5F8FFFF
Tipo: Gradiente

Ora aggiungiamo il blocco Titolo archivio al suo interno.

Ora hai due opzioni e te le mostreremo entrambe:

Il modo più semplice è utilizzare una singola colonna e lo shortcode: [gd_simple_archive layout=

2) Se vuoi avere il pieno controllo del design, dovremo aggiungere un blocco colonna con un layout a due colonne.

Nelle impostazioni utilizzeremo Larghezza: Intera

Ora trascineremo il contenitore shortcode e utilizzeremo al suo interno lo shortcode richiesto.

Nel contenitore di sinistra utilizzeremo i widget correlati alla pagina di 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.

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

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

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

Ora aggiungeremo la seguente gd-archive-left-container classe alla sezione di sinistra.

Nella colonna di sinistra aggiungeremo la seguente classe gd-archive-left-column.

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;
}

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

Fatto questo, la pagina Archivio inserzioni è ora pronta.

Pagina di ricerca

Ora creeremo un template per la pagina di ricerca di GeoDirectory, quindi andiamo su Breakdance >> Template >> Aggiungi template >> Risultati di ricerca

Ora copieremo tutto il contenuto del template GD Archive nel template GD Search template.

I nostri template per le pagine di ricerca e archivio GD sono ora pronti.

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

Andiamo su Breakdance >> Template >> Aggiungi template

Nell'opzione successiva selezioneremo le impostazioni seguenti e cliccheremo su Aggiungi template pulsante.
Posizione: Single/Places
Condizione: Tipo di post = Places

Aggiungeremo una sezione vuota con padding 0 da tutti i lati.

aggiungeremo il seguente shortcode per mostrare uno slider di immagini.

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

Ora aggiungiamo un'altra sezione e un layout a due colonne al suo interno.

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.

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

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

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

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

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

Scopri gli aspetti fondamentali con questa guida essenziale: Le basi per creare un sito web di directory.

Le possibilità sono infinite.

Ecco una guida semplice e chiara su come creare un sito web directory utilizzando il tema Beaver Builder e il plugin Beaver Builder:

1. Installa il tema Beaver Builder
2. Installa e configura GeoDirectory
3. Installa il plugin Beaver Builder & Beaver Themer
4. Progetta il sito web Directory usando il plugin Beaver Builder

Il Beaver Builder Theme, utilizzato insieme al plugin GeoDirectory e al plugin Beaver Builder, è un ottimo modo per creare una directory online flessibile. Con questa combinazione, puoi aggiungere facilmente funzionalità basate sulla posizione geografica, personalizzare il layout e includere contenuti dinamici per un'esperienza intuitiva.

Questo sistema consente a sviluppatori e designer web di costruire un sito web directory di alta qualità per settori specifici o per esigenze più ampie della comunità.
Vediamo nel dettaglio come farlo.

In questo tutorial vedremo come:

• Installa e configura il tema e i plugin
  1. Installa il Beaver Builder 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 Beaver Builder Sito web Directory
  1. Progetta il Logo del Sito
  2. Il design della pagina Home
     • Il Menu di navigazione
     • La Tipografia
     • 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 Beaver Builder

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

Vai su https://www.wpbeaverbuilder.com e acquista il Beaver Builder Pro Plugin, inclusi i temi Beaver e Beaver Themer plugin.

Scarica questi prodotti dalla sezione Il mio account pagina.

Vai su Aspetto >> Temi.

Seleziona Aggiungi nuovo, installa il tema Beaver e il tema figlio, e attiva il Child Beaver Tema.

2. Installa il Beaver Builder Pro & Beaver Themer plugin

Beaver Builder Pro e Beaver Themer sono potenti plugin WordPress progettati per migliorare l'esperienza di creazione e personalizzazione del sito web.

Vai su Plugin >> Aggiungi nuovo >> Clicca su Carica plugin

Carica il file zip del plugin e attiva entrambi i plugin uno alla volta.

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. Abbiamo completato l'installazione dei plugin.

4. 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 Beaver Builder 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 Beaver Builder 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. Beaver Builder 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.

Ora imposta il logo da Aspetto >> Personalizza >> Intestazione >> Logo intestazione
impostato. Tipo di logo: Intestazione e carica l'immagine del logo.

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

La Tipografia

Ora definiamo la Tipografia per il font e la dimensione del testo del sito. Sto impostando una Famiglia di font, uno Spessore del font e una Dimensione del font globali che verranno applicati a tutto il testo del sito.

andremo su Aspetto > Personalizza > Generale > Layout e configureremo le seguenti impostazioni
Larghezza: Larghezza intera
Larghezza contenuto: 1200

andremo su Aspetto > Personalizza > Generale > Testo.

Famiglia di font: Outfit
Peso font: Light
Dimensione font: 18
Interlinea: 1.45

Il Contenuto

Inizierò a costruire questa pagina da zero utilizzando il Beaver Builder plugin.

Per questo abbiamo bisogno di un hero header nella homepage.

Prima di tutto, modifichiamo la homepage in Beaver Builder facendo clic su Avvia Beaver Builder.

Ora trascina un contenitore di riga facendo clic sull'icona più in alto a destra.

Dalla scheda Stile riga imposta
Larghezza: Larghezza intera
Larghezza contenuto: Fisso
Altezza minima: 600px
Tipo di sfondo: Foto
Sorgente foto di sfondo: Libreria multimediale
Posizione: Centra
Scala: Riempi

Trasciniamo ora un'intestazione e il GD > Seach Block sopra questa riga.

Aggiungiamo ora un contenitore di riga vuoto e aggiungeremo un GD > Categories block al suo interno.

Imposta il GD > Categories block con le seguenti impostazioni
Tipo di design: Sfondo immagine
Elementi per riga: 4
Attiva 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 una riga vuota con layout a 1 colonna.

con le seguenti impostazioni
Colore: rgba(234,240,255,0.64)
Larghezza: Larghezza intera
Larghezza contenuto: Fisso

Ora aggiungeremo un elemento intestazione
Testo: Annunci recenti
Dimensione: 42
Allineamento: Centra

Successivamente, modificheremo alcune impostazioni in questo GD > Listings block.

Imposteremo: Ordinamento: recente
Griglia: 4

Aggiungeremo un contenitore di riga con le seguenti impostazioni.
Larghezza: Larghezza intera
Larghezza contenuto: Larghezza intera

Aggiungi il GD > Map block al suo interno e lasceremo le impostazioni predefinite.

Ora, infine, abbiamo bisogno di una CTA in fondo.

Aggiungeremo una riga vuota con un layout a due colonne e le seguenti impostazioni.
Larghezza: Larghezza intera
Larghezza contenuto: Fisso

Aggiungiamo ora un'intestazione e del contenuto nella colonna sinistra, mentre nella colonna destra aggiungeremo un pulsante per indirizzare gli utenti alla pagina di aggiunta annuncio.

Congratulazioni! La tua homepage è completata.

3. Beaver Builder 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 di default con un layout generale. In questo tutorial personalizzeremo un po' il design di queste pagine.

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

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

È molto semplice.

Pagina degli annunci

Vai su Beaver Builder > Themer Layout > Aggiungi nuovo e seleziona
Titolo: GD Archive
Tipo: Themer Layout
Layout: Archivio
Fai clic su Aggiungi layout tema pulsante

Nella pagina successiva, seleziona Posizione: Archivio luoghi.

Dopo aver salvato queste impostazioni, clicca su Launch Beaver Builder. Aggiungeremo una riga vuota con layout a 1 colonna.
Larghezza: Larghezza intera
Colore di sfondo: #577196

Aggiungeremo un titolo di archivio.

Ora aggiungiamo una riga con un layout a due colonne.
Larghezza: Larghezza intera
Larghezza contenuto: Larghezza intera

Successivamente, 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 destra trascineremo il blocco GD > Map blocco.

Lasceremo tutte le impostazioni predefinite per GD > Map. Impostiamo un'altezza: ho deciso di assegnarle un'altezza di 100vh.

Aggiungi il seguente stile nel personalizzatore del tema da  Aspetto => Personalizza => Aggiungi CSS.

.geodir-archive .geodir-listings .geodir_location_listing{
    overflow-y: scroll;
    max-height: 100vh;
    padding-right: 15px;
}

Dopodiché, la pagina Archivio annunci è pronta.

Un'altra opzione è utilizzare il block GD > Simple Archive, come spiegato in questo tutorial sulla creazione di un Directory Website with Elementor.

Per la pagina di ricerca, ripetiamo lo stesso processo.

Pagina di ricerca

Vai su Beaver Builder > Themer Layout > Aggiungi nuovo e seleziona
Titolo: GD Search
Tipo: Themer Layout
Clicca su Aggiungi Theme Layout pulsante

Copia tutto il contenuto del GD Archive template Themer Layout e incollalo nel GD Search Template di layout Themer.

Ora vai su Geodirectory > Impostazioni > Generale > Pagine e nel campo Layout Themer pagina di ricerca seleziona GD Search

Ora le nostre pagine GD Search e Archivio sono pronte.

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

Vai su Beaver Builder > Themer Layout > Aggiungi nuovo e seleziona
Titolo: GD Details
Tipo: Themer Layout
Layout: Singolare
Fai clic su Aggiungi layout Themer pulsante.

Nella pagina successiva, seleziona Posizione: Tutti i luoghi

Dopo aver salvato queste impostazioni, clicca su Launch Beaver Builder. Aggiungeremo una riga vuota con layout a 1 colonna.
Larghezza: Larghezza intera
Larghezza contenuto: Larghezza intera
Padding: 0

Prima di tutto, aggiungi uno slider di immagini nella parte superiore della pagina Dettaglio inserzione.

Trascineremo il blocco 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 aggiungiamo una riga con un layout a due colonne.

Ora, aggiungiamo individualmente tutti gli shortcode della pagina GD Detail richiesti nella colonna di sinistra.

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

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

Dopo averlo fatto, la nostra pagina Dettaglio inserzione è completa.

Aggiungere funzionalità Premium al tuo Beaver Builder 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.

Segui questo tutorial per un approccio passo dopo passo: Tutorial: Come creare un sito directory.

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

Le possibilità sono infinite.

Ecco una guida passo dopo passo per costruire un sito web directory usando il tema Neve e il plugin Otter blocks:

1. Installa il Neve tema
2. Installa e configura GeoDirectory
3. Installa il plugin Otter
4. Progetta il sito web directory usando il tema Neve e Gutenberg Editor

Il tema Neve, utilizzato insieme al plugin GeoDirectory e al plugin Otter, offre una piattaforma completa e adattabile per sviluppare una sofisticata directory online.

Grazie a questa combinazione, gli utenti possono integrare facilmente funzionalità basate sulla posizione geografica, perfezionare le configurazioni del layout e aggiungere blocchi di contenuto dinamici, garantendo un'interfaccia intuitiva e coinvolgente.

Questo sistema coeso permette a sviluppatori web e designer di costruire un sito web directory di alto livello, in grado di soddisfare esigenze specifiche del settore o requisiti di comunità più ampie.

Approfondiamo i dettagli su come raggiungere questo obiettivo.

In questo tutorial vedremo come:

• Installa e configura il tema e i plugin
  1. Installa il tema Neve
  2. Installa il plugin Otter
  3. Installa GeoDirectory
  4. Procedura guidata di installazione di GeoDirectory
     • Scelta del sistema di mappe
     • Impostazione della città predefinita
     • Aggiunta di funzionalità extra
     • Aggiunta di dati di esempio
• Progetta il sito web directory con Neve
  1. Il design della pagina Home
     • Il Logo
     • Il Menu di navigazione
     • La Tipografia
     • 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 Neve Tema

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

Vai su Aspetto >> Temi

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

2. Installa il Otter plugin

Il plugin Gutenberg predefinito non è sufficiente per personalizzare un template, quindi installeremo il Otter 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 Otter. 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 Neve 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 Neve Suite di strumenti.

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

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.

La Tipografia

Ora definiamo la Tipografia per il font e la dimensione del testo del sito. Sto impostando una Famiglia di font, uno Spessore del font e una Dimensione del font globali che verranno applicati a tutto il testo del sito.

andremo su Aspetto > Personalizza > Tipografia > Generale > Corpo. Imposteremo il 
Famiglia di font: Inter 
Font aggiuntivo Varianti: Regular 400, Medium 500, Semi-Bold 600, Bold 700, Extra Bold 800, Black 900
Trasformazione: Nessuno
Peso: 400
Dimensione font: 16
Altezza riga: 1.7
Famiglia di font: Arial, Helvetica, sans-serif

Da Aspetto > Layout > Pagine imposta il Layout intestazione: Copri

Il Contenuto

Inizierò a costruire questa pagina da zero utilizzando il Otter plugin.

Per questo abbiamo bisogno di un'intestazione hero nella homepage, aggiungiamo un blocco Riga fornito da WordPress.

Aggiungeremo un blocco Sezione con un Layout a schermo intero.

Allineamento verticale: Allinea al centro (mostrato nello screenshot) nelle blocco Sezione impostazioni e imposta le Struttura sezione impostazioni su.
Altezza minima: Personalizzata
Altezza personalizzata: 600

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

Seleziona le impostazioni di sovrapposizione sfondo, imposta
Sovrapposizione Opacità: 50
Colore sovrapposizione sfondo: #000000 (Nero)

Impostazioni del colore di sovrapposizione dell'immagine hero

Ora che abbiamo reso l'immagine hero più scura, possiamo aggiungere del testo.

Clicca al centro dell'immagine (è appena visibile un pulsante con il segno più). Questo ti permetterà di selezionare un nuovo blocco. Aggiungi un blocco Sezione.
Fai clic al centro dell'immagine di nuovo e aggiungi unIntestazione avanzata blocco.
Nel blocco Testo, aggiungi un testo come:Find The Best Restaurant Philadelphia”.

Blocco selezionato H1 come Tag HTML. Allineamento testo Centra. (mostrato nello screenshot.)

Nel Stile blocco Intestazione avanzata impostazioni
Dimensione font: 48
Trasformazione font: Prima lettera maiuscola
Colore testo: #FFFFFF

A questo punto, possiamo aggiungere il modulo di ricerca alla sezione hero del nostro sito directory Neve.
Clicca sul pulsante + nell'angolo in basso a destra della sezione Titolo per aggiungere una nuova sezione.
Per aggiungere la ricerca GD nell'intestazione della homepage, trascina il blocco GD > Search all'interno del contenitore hero.

Ora aggiungiamo le seguenti impostazioni al Sezione blocco.
Nel Impostazioni struttura imposta
Larghezza massima contenuto: 1170
Allineamento orizzontale: Centro

Ora aggiungeremo un po' di spazio sotto la sezione hero. Usiamo un blocco spaziatore e impostiamo altezza = 40.

È il momento di aggiungere altre sezioni necessarie alla homepage, fai clic sull'icona più e aggiungi un blocco Sezione con layout a larghezza intera.

Modifica le blocco Sezione impostazioni e aggiorna le Struttura sezione impostazioni su
Larghezza massima del contenuto: 1170 e Allineamento orizzontale: Centro.

Ora aggiungeremo una sezione vuota sotto l'intestazione hero e aggiungeremo il GD > Categories blocco in quella griglia.

Imposta le opzioni del blocco come segue
Tipo di design: Sfondo immagine
Elementi per riga: 4
Abilita Usa Immagine Categoria

Puoi impostare un'immagine per una categoria modificandola da wp-admin -> places -> Place Categories.

Ogni categoria ha un'opzione per impostare un'immagine predefinita

Procediamo ora ad aggiungere la terza sezione al nostro sito web. La chiameremoAnnunci recenti“.
Clicca sull'icona più e cerca 'Advanced Heading' e, una volta aggiunto, configura le impostazioni del testo come segue: imposta il tag HTML su H3 e allinealo a centro.

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 spuntare l'opzione 'Abilita filtro per posizione' e imposta il Ordina per: Più recenti.

Ora aggiungiamo una Colonna vuota con Contenuto e Larghezza al 100.

Aggiungi il GD > Map blocco e mantieni le impostazioni predefinite.

Congratulazioni! La tua homepage è completata.

2. Design della pagina Inserzioni e Ricerca del sito directory Neve

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.

imposteremo le impostazioni della pagina come segue
Layout barra laterale: Nessuna barra laterale
Widget piè di pagina: Predefinito
Contenitore contenuto: Larghezza intera

Ora aggiungi un Sezione blocco con un layout 1:1.

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 .container.grid-container{
      max-width:100%;
}
.geodir-archive .wp-block-geodirectory-geodir-widget-loop .geodir-loop-container .geodir-listing-posts{
    overflow-y: scroll;
    max-height: 100vh;
}

Poiché il tema Neve presenta un problema minore di compatibilità con il titolo della pagina Archivio di GD, creeremo un contenitore per il titolo nella parte superiore di questa pagina.

trascineremo una sezione vuota e imposteremo le impostazioni del blocco su
Sfondo: #444444
Padding: 50 px, 20 px, 50 px, 20 px
trascineremo il Titolo archivio blocco al suo interno.

Fatto questo, la pagina Archivio inserzioni è ora pronta.

Un'altra opzione è utilizzare il blocco GD > Archivio Semplice come spiegato in questo tutorial su come Costruire un sito web di directory con Elementor.

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.

Ora le nostre pagine GD Search e GD Archive sono pronte.

3. Design della pagina di singola inserzione del sito directory Neve

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

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

Modificheremo il/la blocco Sezione impostazioni e aggiorna le Struttura sezione impostazioni su Larghezza massima del contenuto: 1170 e Allineamento orizzontale: Centra

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.

Ora aggiungiamo una classe ( single-gd-section ) a questa intera sezione padre per darle un tocco finale.

Infine, aggiungi il seguente CSS nel personalizzatore del tema da Aspetto => Personalizza => Aggiungi CSS

.single-gd-section{
	max-width:1170px;
	margin:auto;
}

Dopo averlo fatto, il nostro pagina Dettagli Inserzione è stata completata.

Aggiungere funzionalità Premium al tuo sito directory Neve

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.

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

Inizia a costruire il tuo sito oggi con questa guida dettagliata: La tua guida per creare un sito directory. Si tratta di un tutorial generico che può essere adattato a qualsiasi tema o page builder.

Le possibilità sono infinite.

Ecco una guida passo passo per creare un sito directory usando il tema Ollie per WordPress:

1. Installa il tema Ollie
2. Installa e configura GeoDirectory
3. Progetta il sito directory usando il tema OllieWP e Gutenberg Editor

GeoDirectory è completamente compatibile con i temi a blocchi FSE come Ollie, quindi in questo caso non avremo bisogno di un page builder o di un plugin aggiuntivo per i blocchi.

GeoDirectory offre una soluzione robusta e flessibile per creare una directory online dinamica con qualsiasi tema o page builder.

In questo tutorial mostreremo come costruire un sito directory con il tema OllieWP in combinazione con il plugin GeoDirectory.

Questo duo consente agli utenti di integrare facilmente funzionalità basate sulla posizione geografica, personalizzare i layout e incorporare blocchi di contenuto interattivi, garantendo un'esperienza utente intuitiva e coinvolgente.

Con questo approccio integrato, sviluppatori web e designer possono realizzare con facilità un sito directory di livello professionale, su misura per mercati di nicchia specifici o per esigenze di comunità più ampie.

Vediamo nel dettaglio come farlo.

In questo tutorial vedremo come:

• Installa e configura il tema e i plugin
  1. Installa il tema OllieWP
  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 sito directory con OllieWP
  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 tema OllieWP

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

Vai su Aspetto >> Temi

Seleziona Aggiungi nuovo, Installa, e Attiva il OllieWP 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 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 di accesso 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 OllieWP 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 OllieWP Suite di strumenti.

1. OllieWP 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 > Editor > Pages > Home e clicca sul pulsante di modifica.

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.

Il Menu di navigazione

Dopo aver creato e aggiunto il logo, vai su Aspetto > Editor, e crea il tuo menu.

Clicca sui menu in alto e rimuovi tutti quelli esistenti.

Ora aggiungiamo un blocco colonne con un layout a due colonne.

Nella colonna sinistra aggiungi il blocco logo del sito.

Clicca sul contenitore dell'intestazione principale e dalle impostazioni del blocco imposta Sfondo: #FFFFF

Nella colonna di destra aggiungi il menu di navigazione.

Abbiamo aggiunto i seguenti link di navigazione principali e alcuni link di navigazione secondari:

1. Home
2. Chi siamo
3. Blog
4. Luoghi e aggiungi luoghi
5. Profilo
6. Login/out

Il blocco Login/out mostrerà solo i link di Login e Logout in base allo stato di accesso dell'utente.

Il Contenuto

Inizierò a costruire questa pagina da zero utilizzando il OllieWP e i blocchi Gutenberg.

Vai su Aspetto > Editor > Design > Pages e clicca sul pulsante per modificare la home page.

abbiamo bisogno di un hero header nella homepage; per farlo, rimuoviamo tutto il contenuto di questa pagina e aggiungiamo un Copri blocco.

Poi, controlla le impostazioni del blocco e imposta l'URL dell'immagine di sfondo.

Per la sezione Hero, abbiamo bisogno di un'immagine e ne scaricheremo una gratuita da Pexels.com (Grazie, @rachel-claire).

aggiungeremo le seguenti impostazioni in questo blocco cover

Contenuto: 1200
Ampio: 100
Opacità: 50
Padding e Margine: 0
Altezza minima del cover: 600

Ora aggiungiamo un tag header all'interno di questo blocco cover con il
Testo: Trova il Miglior Ristorante a Philadelphia

daremo anche al tag header una classe aggiuntiva ( heading-text-center ) per aggiungere uno stile.

Ora aggiungiamo il seguente stile nel personalizzatore del tema.

.heading-text-center{
    text-align:center;
}

Ora aggiungiamo il GD > search blocco sotto questo titolo.

sotto di esso, aggiungiamo dello spazio usando un blocco spaziatore con un'Altezza di: 60

Ora aggiungiamo una colonna vuota e inseriamo il GD > Categories blocco al suo interno.

Imposta le opzioni del blocco come segue
Tipo di design: Sfondo immagine
Elementi per riga: 3
Abilita Usa Immagine Categoria

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

Sotto la sezione hero, aggiungi un'altra Colonna cliccando sull'icona più e aggiungi i GD > Listings blocchi lì.

Ora eseguiremo alcune impostazioni necessarie in questo GD > Listings blocco. Imposteremo l'ordinamento: recenti

Ora aggiungiamo una Colonna vuota con Contenuto e Larghezza al 100.

Aggiungi il GD > Map blocco al suo interno e mantieni le impostazioni predefinite.

Clicca sul Footer e OllieWP mette già a disposizione alcuni modelli di Footer predefiniti. Ne sto selezionando uno.

Congratulazioni! La tua homepage è completata.

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

Ora devi progettare due pagine essenziali per qualsiasi directory.

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.

Pagina degli annunci

Vai su Aspetto > Editor > Design > Modelli e clicca su Modifica GD Archive modello di pagina

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

Ora aggiungiamo una riga vuota.

Al suo interno aggiungi un layout a due colonne

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 destra trascineremo il blocco GD > Map blocco.

manterremo tutte le impostazioni predefinite per il GD > Map. diamogli un po' di altezza; ho deciso di impostare un'altezza di 100vh.

Aggiungi il seguente stile nel personalizzatore del tema da  Aspetto => Personalizza => Aggiungi CSS

.geodir-archive .geodir-listings .geodir_location_listing{
    overflow-y: scroll;
    max-height: 100vh;
    padding-right: 15px;
}

Ora, dopo questo, la pagina Archivio Annunci è pronta.

Un'altra opzione è utilizzare il blocco GD > Archivio Semplice come spiegato in questo tutorial su come Costruire un sito web di directory con Elementor.

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.

Ora le nostre pagine GD Search e GD Archive sono pronte.

3. OllieWP Design della pagina di inserzione singola del sito web di directory

Per modificare e personalizzare la pagina GD Detail, puoi andare su Aspetto > Editor > Design > Modelli e clicca su Modifica GD Single template di pagina.

Aggiungi una colonna vuota

Prima aggiungiamo un carosello di immagini in cima alla pagina Dettaglio Annuncio. 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 aggiungiamo una riga vuota con
Contenuto: 1200
Ampio: 100

aggiungi due colonne al suo interno.

Ora aggiungiamo tutti gli shortcode necessari della pagina Dettaglio GD nella colonna sinistra, uno alla volta.

Che include GD > Tassonomie Singolo, GD > Tab Singolo e GD > Precedente/Successivo Singolo.

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

Dopo averlo fatto il nostro Pagina di dettaglio dell'inserzione è stata completata.

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

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

Dai il via al tuo progetto di sito directory con questi consigli: Crea oggi un sito directory.

Le possibilità sono infinite.

Ecco una guida passo dopo passo per costruire un sito directory utilizzando il tema Generatepress e il plugin Generatepress blocks:

1. Installa il tema Generatepress
2. Installa e configura GeoDirectory
3. Installa il GenerateBlocks plugin
4. Progetta il sito web Directory usando il Generatepress tema e il Gutenberg Editor

Generatepress Tema in combinazione con il Plugin GeoDirectory e un GenerateBlocks Plugin, offre una soluzione robusta e flessibile per creare una directory online dinamica.

Questo trio consente agli utenti di integrare facilmente funzionalità basate sulla posizione, personalizzare il layout e incorporare blocchi di contenuto interattivi, garantendo un'esperienza utente intuitiva e coinvolgente.

Con questo approccio integrato, sviluppatori web e designer possono realizzare con facilità un sito directory di livello professionale, su misura per mercati di nicchia specifici o per esigenze di comunità più ampie.

Vediamo nel dettaglio come farlo.

In questo tutorial vedremo come:

• Installa e configura il tema e i plugin
  1. Installa il tema Generatepress
  2. Installa il plugin GenerateBlocks
  3. Installa GeoDirectory
  4. Procedura guidata di installazione di GeoDirectory
     • Impostazione della città predefinita
     • Aggiunta di funzionalità extra
     • Aggiunta di dati di esempio
• Progetta il sito web della directory con Generatepress
  1. Il design della pagina Home
     • Il Logo
     • Il Menu di navigazione
     • La Tipografia
     • 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 tema Generatepress

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

Vai su Aspetto >> Temi

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

2. Installa GenerateBlocks plugin

Il plugin Gutenberg predefinito non è sufficiente per personalizzare un template, quindi installeremo il GenerateBlocks plugin.

Questo plugin fornisce GenerateBlocks personalizzati, migliori rispetto ai blocchi predefiniti, che ti aiuteranno a progettare i template delle pagine.

Vai su Plugin >> Aggiungi nuovo.

Cerca GenerateBlocks. 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 New York 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 di accesso 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 Generatepress 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 Generatepress Suite di strumenti.

1. Generatepress 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 Aspetto > Personalizza > Intestazione, clicca Logo > Seleziona Logo, 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.

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.

La Tipografia

Ora definiamo la Tipografia per il font e la dimensione del testo del sito. Sto impostando una Famiglia di font, uno Spessore del font e una Dimensione del font globali che verranno applicati a tutto il testo del sito.

andremo su Aspetto > Personalizza > Tipografia > Corpo. Imposteremo il Famiglia di font: Poppines Categoria: sans-serif e Variante: 100, 100italic, 200, 200italic, 300, 300italic, regular, italic, 500, 500italic, 600, 600italic, 700, 700italic, 800, 800italic, 900, 900italic

Il Contenuto

Inizierò a costruire questa pagina da zero utilizzando il GenerateBlocks plugin.

abbiamo bisogno di un'intestazione hero nella homepage, per questo aggiungiamo un blocco Griglia fornito dal GenerateBlocks plugin.

imposteremo l'allineamento del blocco su wide.

Nelle impostazioni della Griglia, imposta il layout su
Layout barra laterale: Nessuna barra laterale
Widget piè di pagina: Predefinito
Contenitore contenuto: Larghezza intera
Disabilita elemento: Titolo contenuto
Larghezza elemento griglia: 100

Poi, controlla le impostazioni del blocco e imposta l'URL dell'immagine di sfondo.

Per la sezione Hero, abbiamo bisogno di un'immagine e ne scaricheremo una gratuita da Pexels.com (Grazie, @rachel-claire).

Nelle impostazioni di spaziatura, padding 100px sui margini superiore e inferiore.

Ora aggiungiamo un tag intestazione per inserire del testo.

Testo: Trova i migliori ristoranti a Philadelphia
Dimensione: Piccola
Aspetto: Piccolo Grassetto
Colore testo: #FFFFFF

All'interno della stessa Griglia, aggiungeremo il GD > Search blocco con padding in alto e in basso di 200px.

Ora aggiungeremo una griglia vuota sotto l'intestazione hero e inseriremo il GD > Categories blocco in quella griglia.

Imposta le opzioni del blocco come segue
Tipo di design: Sfondo immagine
Elementi per riga: 3
Abilita Usa Immagine Categoria

Puoi impostare un'immagine per una categoria modificandola da wp-admin -> places -> Place Categories.

Ogni categoria ha un'opzione per impostare un'immagine predefinita

Non ho trovato alcuna impostazione funzionante in Generateblocks per trasformare la griglia nel layout del contenuto. Aggiungeremo il home-container classe alla griglia padre della categoria.

Sotto la sezione hero, aggiungi un'altra Griglia cliccando sull'icona più e aggiungi i GD > Listings blocchi lì.

Ora eseguiremo alcune impostazioni necessarie in questo GD > Listings blocco. Imposteremo l'ordinamento: recenti

Analogamente al blocco categoria, aggiungeremo la home-container classe alla griglia padre delle Ultime Inserzioni.

Ora aggiungiamo una griglia vuota e inseriamo al suo interno il blocco GD > Mappa, mantenendo le impostazioni predefinite.

Analogamente agli altri, aggiungeremo la home-container classe alla griglia padre di GD > Mappa.

Infine, aggiungi il seguente CSS nel personalizzatore del tema da Aspetto => Personalizza => Aggiungi CSS

.home-container{
	max-width:1200px;
	margin:auto;
}

Congratulazioni! La tua homepage è completata.

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

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.

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.

imposteremo le impostazioni della pagina come segue
Layout barra laterale: Nessuna barra laterale
Widget piè di pagina: Predefinito
Contenitore contenuto: Larghezza intera

Ora aggiungi una griglia vuota con due colonne.

Nel contenitore di sinistra, trascineremo i widget correlati alla pagina archivio GD, come GD > Azione Loop, GD > Loop, GD > Paginazione Loop e GD > Ricerca in cima, così l'utente potrà effettuare ricerche dalla pagina archivio.

Nella colonna destra trascineremo il blocco GD > Map blocco.

manterremo tutte le impostazioni predefinite per il GD > Map. diamogli un po' di altezza; ho deciso di impostare un'altezza di 150vh.

Per rendere il layout della pagina archivio a piena larghezza, aggiungeremo il seguente CSS nel personalizzatore del tema da Aspetto => Personalizza => Aggiungi CSS

.geodir-archive .container.grid-container{
      max-width:100%;
}
.geodir-archive .wp-block-geodirectory-geodir-widget-loop .geodir-loop-container .geodir-listing-posts{
    overflow-y: scroll;
    max-height: 100vh;
}

Ora, dopo questo, la pagina Archivio Annunci è pronta.

Un'altra opzione è utilizzare il blocco GD > Archivio Semplice come spiegato in questo tutorial su come Costruire un sito web di directory con Elementor.

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.

Ora le nostre pagine GD Search e GD Archive sono pronte.

3. Generatepress Design della pagina di inserzione singola del sito web di directory

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 tutto questo contenuto predefinito e aggiungeremo una nuova Griglia.

Prima aggiungiamo un carosello di immagini in cima alla pagina Dettaglio Annuncio. 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 ulteriore blocco Griglia vuoto al di sotto, con un layout a due colonne.

aggiungeremo una classe (single-details-container ) a questa Griglia dalle impostazioni del blocco.

Ora aggiungiamo tutti gli shortcode necessari della pagina Dettaglio GD nella colonna sinistra, uno alla volta.

Che include GD > Tassonomie Singolo, GD > Tab Singolo e GD > Precedente/Successivo Singolo.

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

Infine, aggiungi il seguente CSS nel personalizzatore del tema da Aspetto => Personalizza => Aggiungi CSS

.single-details-container {
    max-width: 1200px;
    margin: auto !important;
}
.single-gd_place .entry-content{
    margin:0px;
}

Dopo averlo fatto il nostro Pagina di dettaglio dell'inserzione è stata completata.

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

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

Potenzia il tuo sito web con queste strategie chiave: Strategie chiave per creare un sito web directory.

Le possibilità sono infinite.

Come creare un sito web directory con il tema Divi?

Il modo più semplice per costruire un sito web directory usando il tema Divi di WordPress è seguire i seguenti 3 passaggi:

1. Installa il tema Divi
2. Installa e configura GeoDirectory
3. Progetta il sito web directory usando il tema Divi

Prima di descrivere nei dettagli come creare una directory aziendale passo dopo passo, vorrei citare un articolo pubblicato l'11 settembre 2023 sul blog ufficiale di Elegantthemes, gli sviluppatori del tema Divi.

GeoDirectory è il miglior plugin WordPress per creare un sito web di directory aziendale con il tema Divi?

Sul blog di Elegant Themes è stato pubblicato un articolo intitolato

Il plugin GeoDirectory ha conquistato la prima posizione nella classifica. Nel contenuto dell'articolo, l'autore spiega perché GeoDirectory è il miglior plugin WordPress per creare un sito web directory.

Ti invito a leggere questo articolo. Di seguito è riportata una citazione dalla sezione FAQ dell'articolo menzionato.

Qual è il miglior plugin directory per WordPress?
GeoDirectory è il miglior plugin directory per WordPress. Offre inserzioni personalizzabili, ricerca avanzata, recensioni degli utenti, integrazione con Google Maps, opzioni di monetizzazione e un'ottima compatibilità con temi e plugin. Con GeoDirectory puoi creare facilmente siti web directory ricchi di funzionalità.

Citazione dalla sezione FAQ dell'articolo: 7 Best WordPress Directory Plugins in 2023 (Ranked).

Il mio primo sito WordPress, creato nel 2013, era una directory aziendale senza alcun plugin dedicato.

Ricordo quando i creatori di WP GeoDirectory, Paolo Tajani e Stiofan O'Connor, fecero un fork del tema

Ne migliorarono le prestazioni e successivamente lanciarono GeoTheme oltre 10 anni fa.

In seguito, adattandosi all'ecosistema WordPress in continua evoluzione e facendo tesoro delle loro esperienze, abbandonarono lo sviluppo di temi.

Partendo da quella base, crearono il plugin GeoDirectory, che facilita la realizzazione di siti directory di quasi qualsiasi tipo.

Ho testato la maggior parte dei plugin e dei temi per WordPress che consentono di creare un sito web directory.

Sia l'articolo sopra citato che i miei 11 anni di esperienza confermano che WP GeoDirectory è il miglior plugin per questo scopo.

Guida passo dopo passo su come creare un sito web directory usando il tema Divi e il plugin GeoDirectory

Vediamo nel dettaglio come costruire un sito web directory con GeoDirectory e il tema Divi.

In questo tutorial vedremo come:

Indice dei contenuti

• Come creare un sito web directory con il tema Divi?
  • GeoDirectory è il miglior plugin WordPress per creare un sito web di directory aziendale con il tema Divi?
  • Guida passo dopo passo su come creare un sito web directory usando il tema Divi e il plugin GeoDirectory
• Installazione del tema e dei plugin.
  • 1. Installa il tema Divi
  • 2. Installa GeoDirectory
  • 3. Procedura guidata di installazione di GeoDirectory
    • Scelta del sistema di mappe (Google Maps o OpenStreetMap)
    • Impostazione della città predefinita
    • Aggiunta di funzionalità extra
    • Aggiunta di dati di esempio
• Progettare il sito directory con Divi
  • 1. Design della Home Page del sito directory con Divi
    • Il Logo
    • Il Menu di navigazione
    • Il Contenuto
    • Crea il footer globale
  • Design della pagina inserzioni e ricerca del sito directory con Divi
    • Pagina di ricerca
    • Pagina della singola inserzione
  • Ottimizzazione del tuo sito directory con Divi
  • Colori e tipografia
• Massimizza il potenziale del tuo sito directory Divi con DiviGeo
• Aggiungere funzionalità premium al tuo sito web directory con Divi

Installazione del tema e dei plugin.

1. Installa il tema Divi

Prima di tutto, dovrai installare un tema Divi

Vai su Aspetto >> Temi >>

Seleziona Aggiungi nuovo, Carica tema, Installa e Attiva il tema Divi.

2. Installa GeoDirectory

Ora devi installare il plugin GeoDirectory.

Vai su Plugin >> Aggiungi nuovo, cerca GeoDirectory. Installalo e attivalo.

Fatto! Una volta che il tema Divi e il plugin GeoDirectory sono attivi, possiamo passare al passaggio successivo.

3. Procedura guidata di installazione di GeoDirectory

Se apprezzi Divi Builder per la sua semplicità, apprezzerai sicuramente la Procedura guidata di configurazione integrata nel plugin GeoDirectory.

Scelta del sistema di mappe (Google Maps o OpenStreetMap)

Ora devi completare la Procedura guidata di configurazione. Puoi scegliere tra due sistemi di mappatura nel primo passaggio della procedura guidata: Google Maps e Open Street Maps (che non richiede una chiave API).

In questo tutorial selezioniamo OpenStreetMaps.

Seleziona OpenStreetMap e fai clic su Continua.

Nel caso in cui desideri selezionare Google Maps, segui questi passaggi aggiuntivi.

Fai clic sul pulsante Genera chiave e segui i passaggi in questa 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. GeoDirectory utilizza Philadelphia come città predefinita.

Considerando la nicchia che ho scelto per questo tutorial, imposteremo la città predefinita su Spalato, in Croazia.

Puoi trascinare il segnaposto sulla mappa per utilizzare qualsiasi posizione desideri, oppure accedere alle impostazioni avanzate facendo clic su "Mostra avanzate".

Se hai bisogno di aggiungere inserzioni a più di una città, avrai bisogno del Add-on Location Manager.

Aggiunta di funzionalità extra

In questo passaggio installeremo UsersWP, un plugin di accesso 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.

Progettare il sito directory con Divi

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 con il tema Divi.

1. Design della Home Page del sito directory con Divi

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 Impostazioni > Lettura > Impostazioni Homepage e seleziona la tua Home.

Selezioneremo la pagina dei Post in seguito.

Il Logo

Evita di spendere soldi per un designer per il tuo logo iniziale.

Molti commettono l'errore di investire pesantemente prima di valutare l'adattamento al mercato.

Usa app come Canva per design rapidi, economici e di qualità.

Per un MVP, un logo progettato con Canva è più che sufficiente.

Anche se la perfezione iniziale non è fondamentale, puoi migliorare il logo se il tuo progetto ha successo.

Ricorda, un logo mediocre non è la causa dei fallimenti di un progetto.

Dopo aver progettato il tuo logo, vai su Divi > Theme Options, clicca su carica e seleziona il logo che hai creato con Canva.com.

Salta il ritaglio (o ritaglia l'immagine secondo necessità) e clicca su Salva modifiche nell'angolo in alto a sinistra dello schermo.

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'opzione

In questo esempio, avremo solo il menu di navigazione nell'intestazione.

Abbiamo aggiunto dodici collegamenti:

1. Home
2. Chi siamo
3. Blog
4. Account
5. Profilo (Visibile per gli utenti connessi )
6. Cambia Password (Visibile per gli utenti connessi )
7. Disconnetti (Visibile per gli utenti connessi connessi.)
8. Registrati (Visibile per gli utenti non connessi)
9. Accedi (Visibile per gli utenti non connessi)
10. Password dimenticata? (Visibile per gli utenti non connessi)
11. Pagina di Ricerca
12. Aggiungi Inserzione

I collegamenti dagli Endpoint di UsersWP sono dinamici, vedi le parentesi sopra.

Il Contenuto

Il tema Divi offre oltre 330 pacchetti di layout predefiniti.

Ai fini di questo tutorial, sceglierò un layout pronto all'uso che consente di creare una directory aziendale attraente senza il noioso compito di stilizzare i moduli Divi.

Per questo tutorial, ho scelto il pacchetto di layout predefinito Charter Divi Layout Pack.

Vai alla tua homepage, clicca su 'Enable Visual Builder', quindi clicca su 'Browse Layouts'.

Nella libreria di layout predefiniti, seleziona 'Charter Boat Landing Page' e clicca su 'Use This Layout'.

Dopo il secondo modulo di testo, aggiungi il modulo codice e clicca su Add Shortcode.

Divi non consente l'uso dei blocchi Gutenberg, ma i creatori del plug-in GeoDirectory hanno implementato un generatore di shortcode.

Grazie a questo, puoi aggiungere facilmente widget dinamici utilizzando il modulo codice di Divi.

Quindi, la funzione di generatore di shortcode è il tuo migliore alleato quando si crea un sito directory con Divi.

Seleziona "gd_search" (GD > Search)" dall'elenco a discesa e clicca su Copy shortcode.

Lo shortcode copiato si trova negli appunti. Incolla il codice copiato nel modulo codice. Quindi clicca sull'icona del segno di spunta.

Cambia il contenuto del primo modulo testo in "Search for".

Cambia il contenuto dell'intestazione nella scheda contenuto in Yacht Delivery. Nella scheda Design, cambia la dimensione del font dell'intestazione h1 a 70px e clicca sul segno di spunta.

Rimuovi il modulo pulsante "Book a Trip".

Ora la nostra sezione Hero è completata.

Nella sezione successiva, partendo dal template predefinito della landing page Divi, cambia il contenuto dell'intestazione H2 in "Listings Categories".

Rimuovi il modulo testo sotto l'intestazione (font dorato) oppure modificane il contenuto con il tuo, io lascerò i frammenti Lorem Ipsum per rendere il design del sito più interessante.

Elimina la riga a due colonne con foto e testo, quindi aggiungi una nuova riga con un modulo codice. Durante l'inserimento, clicca su 'Add Shortcode' nello stesso modo in cui hai fatto per il modulo di ricerca.

Seleziona "gd_categories" (GD > Categories)" dall'elenco a discesa.

Le opzioni che ho modificato nel generatore di shortcode per ottenere l'aspetto delle colonne di categorie mostrato di seguito:

Scheda Filtri:
Numero massimo di categorie da mostrare per CPT: 3
Seleziona: Nascondi vuote
Scheda Card Design:
Tipo di design: Sfondo immagine
Posizionamento riga: Centra
Ombra card: Grande
Scheda Icona / Immagine:
Seleziona: Usa immagine categoria
Dimensione immagine: Grande

Puoi anche copiare lo shortcode qui sotto e incollarlo nel modulo codice.

Shortcode generato:

[gd_categories post_type="0" hide_empty="1" max_level="1" max_count="3" max_count_child="all" sort_by="count" design_type="image" row_positioning="center" card_shadow="large" 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"]

Puoi impostare un'immagine per una categoria modificandola da wp-admin -> places -> Place Categories.

Ogni categoria ha un'opzione per impostare un'immagine predefinita.

Ho anche modificato i nomi delle categorie per adattarli alla nicchia che ho scelto per questo tutorial.

Utilizzeremo la sezione successiva per mostrare gli ultimi inserimenti.

Cambia l'intestazione Our boats in Latest Yacht providers. Elimina la riga dopo l'intestazione e aggiungi una nuova sezione con il modulo codice di Divi.

Analogamente al modulo di ricerca e alle categorie, dobbiamo generare uno shortcode che mostri gli ultimi listing.

Seleziona "gd_listings" (GD > Listings)" dall'elenco a discesa.

Le opzioni che ho modificato nel generatore di shortcode per ottenere l'aspetto mostrato di seguito:

Scheda Filtri:
Post da mostrare: 3
Scheda Design:
Layout: Vista a griglia (tre colonne)

Puoi anche copiare lo shortcode qui sotto e incollarlo nel modulo codice.

Shortcode generato:[gd_listings post_type=

Questa sezione non sarà necessaria, quindi eliminala.

La sezione successiva fungerà da sezione CTA. Cambia il testo in "Do you provide Yacht Delivery services?" Nella scheda design del modulo testo, modifica la dimensione dell'intestazione h2 a 60px.

Modifica il testo del modulo pulsante per aggiungere un'inserzione e imposta il link su "/add-listing/places/".

Puoi rimuovere la sezione "FAQ" successiva, ma io non lo farò, per rendere il progetto più interessante.

Ti consiglio di popolare la sezione FAQ con contenuti relativi alla nicchia per cui stai creando una business directory.

Più contenuto tematico c'è, meglio è per l'ottimizzazione del tuo sito web sui motori di ricerca.

Allo stesso modo, con la sezione successiva: la rimuoverò in questa guida, ma puoi usarla per ottimizzare il tuo sito web per i motori di ricerca.

Non rimuoverò la sezione recensioni per un design della homepage migliore. Puoi fare come preferisci.

Crea il footer globale

La homepage del sito Divi Directory è completa. Ora creiamo un footer globale per il nostro sito.

Clicca sull'icona Salva sezione nella libreria, nel campo del nome della sezione scrivi "global-footer" e clicca su Salva nella libreria. Dopodiché, salva il layout della tua homepage con il pulsante Salva nell'angolo in basso a destra dello schermo.

Elimina la sezione salvata nella libreria di Divi e salva nuovamente il progetto.

Vai alla dashboard di WordPress, poi clicca su Divi > Theme Builder, clicca su Aggiungi footer globale e seleziona Crea footer globale.

Inserisci una nuova sezione, clicca su Aggiungi dalla libreria, scegli la sezione creata in precedenza e clicca su Usa questa sezione.

La sezione del footer globale è composta da una foto, quattro moduli testo e un modulo icone social.

Modifica il contenuto e i link dei moduli testo. Utilizzerò i moduli testo per riproporre le categorie della mia business directory sul sito per una navigazione più semplice.

Inserisci i link appropriati nel modulo Social Media Follow.

Elimina la sezione vuota e salva il footer globale, quindi clicca su Chiudi nell'angolo in alto a destra dello schermo. 

Molto importante: quando ritorni al Divi Theme Builder, clicca sul pulsante Salva modifiche.

La homepage e il footer globale del sito directory sono pronti.

Design della pagina inserzioni e ricerca del sito directory con Divi

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, ma in questo tutorial apporteremo piccole modifiche alle pagine predefinite.

Dobbiamo aggiungere una mappa e un Modulo Testo con un titolo dinamico.

Vai alla scheda 'Tutte le pagine' nella dashboard di WordPress, trova la pagina 'GD Archive', clicca su 'Modifica con Divi' e poi modifica il contenuto esistente.

Elimina il modulo testo e aggiungi i due moduli codice.

Ora usa il generatore di shortcode nello stesso modo in cui lo hai usato per generare shortcode per le categorie o le inserzioni recenti.

Dall'elenco a discesa, seleziona, copia e incolla i seguenti shortcode nell'ordine indicato:

GD > Map

GD > Notifications

GD > Search

GD > Loop Action

GD > Loop

GD > Loop paging

Puoi anche incollare i seguenti shortcode nel modulo codice.

Nel primo modulo codice, dobbiamo aggiungere lo shortcode responsabile della mappa:

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

Secondo modulo codice:

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

[gd_notifications]

[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=”]

Ora, sopra la sezione dei moduli codice di Divi, dobbiamo aggiungere una nuova sezione con un Modulo Titolo di Divi.

Per visualizzare il titolo delle pagine di archivio, utilizzeremo l'opzione integrata di Divi per la visualizzazione di contenuti dinamici.

Nella scheda contenuto, passa il cursore sul campo intestazione e clicca su Usa contenuto dinamico a destra. Seleziona Titolo pagina/archivio dall'elenco a discesa.

Clicca sul segno di spunta e salva il tuo layout GD Archive Divi.

Pagina di ricerca

Per la pagina di ricerca, ripetiamo un processo simile, ma come per la creazione del footer, utilizzeremo il Divi Theme Builder.

Dal pannello di controllo di WordPress, vai su Divi > Theme Builder. Clicca su Aggiungi nuovo template e poi su Crea nuovo template.

Visualizzerai le impostazioni del template. Nella scheda Usa su, trova la sezione Altro e seleziona Pagina risultati di ricerca GD, quindi clicca su Crea template.

Visualizzerai un nuovo template responsabile della pagina GD Search.

Aggiungi un corpo personalizzato, clicca su Aggiungi dalla libreria nella scheda La tua pagina esistente, clicca su GD Archive Layout e poi usa questo layout.

Clicca sull'icona della matita e modifica il corpo personalizzato. Non devi fare nulla, salva semplicemente il layout e salva le modifiche nel Divi Builder Theme.

Solo un altro passaggio e il tuo sito directory creato con Divi sarà completamente funzionante.

Pagina della singola inserzione

La pagina del singolo annuncio è responsabile della visualizzazione di un singolo elemento nel tuo sito directory.

Analogamente alla pagina GD Archive e alla pagina GD Search, il template di pagina è stato creato dalla procedura guidata di installazione di GD.

Vai alle pagine nel tuo pannello di controllo WordPress e modifica con Divi la pagina GD Details.

Elimina il contenuto e aggiungi una riga a due colonne come mostrato nell'immagine seguente.

Nel modulo codice sinistro, aggiungeremo gli shortcode responsabili del contenuto del post e della galleria.

Nel modulo codice destro, aggiungeremo gli shortcode responsabili della visualizzazione dei dettagli del post, come numero di telefono, indirizzo, link ai social media e altro.

Sai già come usare il generatore di shortcode, quindi genera, copia e incolla i seguenti shortcode. Ho preparato anche degli shortcode pronti da copiare qui sotto.

Modulo codice a sinistra

[gd_post_images title='' types='' fallback_types='' ajax_load='true' limit='' limit_show='' css_class='' type='slider' slideshow='true' controlnav='1' animation='slide' show_title='true' show_caption='true' image_size='' aspect='' cover='' link_to='' link_screenshot_to='' bg='' mt='' mr='' mb='' ml='' pt='' pr='' pb='' pl='' border='' rounded='' rounded_size='' shadow='' ]

[gd_single_taxonomies taxonomy=” prefix=” link_style=” link_color=” link_color_custom=” link_icon=’false’ mt=” mr=” mb=’2′ ml=” pt=” pr=” pb=” pl=” ]

[gd_single_tabs show_as_list=’false’ output=” tab_style=” disable_greedy=’false’ ]

[gd_single_next_prev bg=” mt=’4′ mr=” mb=’3′ ml=” pt=” pr=” pb=” pl=” border=” rounded=” rounded_size=” shadow=” ]

Modulo codice a destra

[gd_output_location location="detail" list_style="wrap"]

Quasi fatto!

Ora, in modo analogo a quando abbiamo creato il template della pagina GD Archive, dobbiamo aggiungere un modulo Intestazione che sarà responsabile della visualizzazione del titolo dinamico dell'annuncio.

Aggiungi un nuovo modulo Intestazione Divi nella prima colonna sopra il modulo codice e imposta il titolo dinamico come Titolo pagina/archivio.

Clicca sul segno di spunta e salva il layout. La pagina del singolo post apparirà come segue.

Ottimizzazione del tuo sito directory con Divi

Il tuo sito directory Divi è quasi pronto: ora dobbiamo configurare alcune opzioni e ottimizzare il tuo sito.

Colori e tipografia

Il colore principale che ho scelto per questo sito è una tonalità di blu navy. Codice Hex: #1e2d44.

Vai a Personalizzatore tema > Impostazioni generali > Impostazioni layout e cambia il colore di accento del tema Divi in: #1e2d44.

Ora dobbiamo cambiare il colore primario del plugin GeoDirectory.

Nel personalizzatore del tema, clicca su AyeCode UI e imposta il colore primario su: #1e2d44.

Ora dobbiamo impostare il font globale. Vai a Personalizzatore tema > Impostazioni generali > Tipografia e cambia il font delle intestazioni in Cinzel.

Come puoi vedere, il font delle intestazioni generate da WpGeodirectory non è cambiato nel font Cinzel.

Vai alla scheda CSS aggiuntivo nel Personalizzatore tema e incolla il seguente codice CSS.

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: 'Cinzel', Georgia, "Times New Roman", serif!important;
}

Cambia la versione di BootStrap

Nel pannello di controllo di WordPress, clicca su Impostazioni e poi su AyeCode UI, cambia la versione in BootStrap V5 e salva.

Il tuo sito directory Divi è pronto.

Massimizza il potenziale del tuo sito directory Divi con DiviGeo

Questo è un metodo semplice per creare una directory con GeoDirectory e Divi.

Se preferisci non affrontare questo progetto da solo, o hai bisogno di qualcosa di più sofisticato, non esitare a contattarmi.

Visita il mio sito web, valuta l'acquisto di uno dei miei Divi Business GeoDirectory child theme DiviGeopre-progettati, oppure assumimi per creare un sito web unico su misura per le tue esigenze.

Aggiungere funzionalità premium al tuo sito web directory con Divi

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 titolari di attività a prendere il controllo delle loro inserzioni gratuite. Il processo di rivendicazione dell'inserzione può includere l'obbligo di passare a un'inserzione a pagamento per assumerne la proprietà.
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 come orientarti nel processo di creazione con questi consigli: Creare un sito directory: consigli e trucchi.

Le possibilità sono infinite.

Come Creare un Sito Web Directory con OceanWP?

Ecco una guida passo-passo per costruire un Sito Web Directory usando il tema OceanWP:

1. Installa il tema OceanWP
2. Installa e configura GeoDirectory
3. Installa il Plugin Spectra Gutenberg Blocks
4. Progetta il Sito Web Directory usando il tema OceanWP e Gutenberg Editor

Il tema OceanWP, in combinazione con il Plugin GeoDirectory e un Plugin Gutenberg Blocks, offre una soluzione robusta e flessibile per creare una directory online dinamica.

Questo trio consente agli utenti di integrare facilmente funzionalità basate sulla posizione, personalizzare il layout e incorporare blocchi di contenuto interattivi, garantendo un'esperienza utente intuitiva e coinvolgente.

Con questo approccio integrato, sviluppatori web e designer possono realizzare con facilità un sito directory di livello professionale, su misura per mercati di nicchia specifici o per esigenze di comunità più ampie.

Vediamo nel dettaglio come farlo.

In questo tutorial vedremo come:

• Installa e configura il tema e i plugin
  1. Installa il Tema OceanWP
  2. Installa Spectra Blocks
  3. Installa GeoDirectory
  4. Procedura guidata di installazione di GeoDirectory
     • Scelta del sistema di mappe (Google Maps o OpenStreetMap)
     • Impostazione della città predefinita
     • Aggiunta di funzionalità extra
     • Aggiunta di dati di esempio
• Progetta il Sito Web Directory con OceanWP
  1. Il design della pagina Home
     • Il Logo
     • Il Menu di navigazione
     • La Tipografia
     • 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 Tema OceanWP

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

Vai su Aspetto >> Temi

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

2. Installa il plugin Spectra Blocks

Il plugin Gutenberg predefinito non è sufficiente per stilizzare un template, quindi installeremo il plugin Spectra Blocks. (dai un'occhiata a questo tutorial se vuoi creare un sito web directory con il Tema Astra e il Plugin Spectra)

Questo plugin fornisce blocchi Gutenberg personalizzati, migliori di quelli predefiniti, e ti aiuterà a progettare i template delle pagine.

Vai su Plugin >> Aggiungi nuovo.

Cerca Spectra 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 New York 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 di accesso 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 Sito Web Directory con OceanWP

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 con il Tema OceanWP.

1. Design della Home Page del Sito Web Directory con OceanWP

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 iniziale (prodotto minimo funzionante), un logo realizzato con Canva è più che adeguato.

Canva offre una grande varietà di template per loghi, e va benissimo se il tuo primo logo non è perfetto o originale al 100%.

Man mano che il tuo progetto prende slancio, hai sempre la possibilità di perfezionare o rinnovare completamente il tuo logo.

Ricorda, il successo di un progetto non dipende dalla perfezione del suo logo.

Ora vai su Aspetto > Personalizza > Intestazione > Logo, clicca su Seleziona Logo, e carica il tuo file PNG. Salta il ritaglio (o ritaglia l'immagine secondo le tue esigenze) e clicca su pubblica. Puoi anche impostare l'altezza e la larghezza massima del logo se le sue dimensioni sono maggiori.

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. Pagina di Ricerca
6. Accedi
7. Account > Profilo > Password dimenticata > Logout

Il link di accesso (dagli endpoint di UsersWP) sarà visibile solo agli utenti non autenticati, mentre i link di logout, account e profilo saranno visibili solo agli utenti autenticati.

La Tipografia

Ora definiamo la Tipografia per il font e la dimensione del testo del sito. Sto impostando una Famiglia di font, uno Spessore del font e una Dimensione del font globali che verranno applicati a tutto il testo del sito.

andremo su Aspetto > Personalizza > Tipografia > Corpo. Imposteremo il Famiglia di font: Red Hat Text e Peso font: Normal: 400

e nelle impostazioni Aspetto > Personalizza > Tipografia > menu principale imposteremo Peso font: Medium 500, Dimensione font: 13px

Ora andremo su Aspetto > Personalizza > Opzioni Generali > Stile Generale Colore primario: #ff914d e Colore primario al passaggio del mouse: #ff731c

Il Contenuto

Inizierò a costruire questa pagina da zero utilizzando il plugin Spectra Blocks.

abbiamo bisogno di un header hero nella homepage; per farlo aggiungiamo un blocco contenitore fornito dal plugin Spectra Blocks.

Successivamente, clicca su Stile dalle schede in alto. Seleziona > Immagini come Tipo di sfondo.

Per la sezione Hero, abbiamo bisogno di un'immagine e ne scaricheremo una gratuita da Pexels.com (Grazie, @Kelly).

Fai clic sulla sezione aggiunta e seleziona Larghezza intera nell'opzione Larghezza contenuto, come mostrato nello screenshot qui sotto.

Dalla scheda Stile delle impostazioni del blocco contenitore, seleziona Ripeti su Nessuna ripetizione e Dimensione su Copri.

Trascina e rilascia un elemento Titolo all'interno dell'immagine hero.

È il momento di dare un titolo alla nostra immagine hero della Homepage.

Dalla scheda Stile, cambia il colore del testo in bianco (#FFFFFF) per migliorare il contrasto e la leggibilità.

In questo tutorial userò qualcosa di semplice come Ristoranti a New York

Non dimenticare di centrare il testo usando l'opzione di allineamento.

Per aggiungere la ricerca GD nell'intestazione della homepage, trascina il blocco GD > Search all'interno del contenitore hero.

Successivamente, aggiungi un'altezza minima a questo contenitore hero. La imposterò su 650 x 600 px in larghezza e altezza e imposta anche la larghezza del contenitore: Boxed e larghezza del contenuto: Boxed.

è il momento di rimuovere il titolo della pagina e lo spazio extra nella sezione dell'intestazione.

Clicca sull'icona O in alto a destra della pagina, basta cliccarci sopra. All'interno, nella sezione Generale imposta padding: disabilitato e nella selezione Titolo Titolo: disabilitato

È il momento di aggiungere altre sezioni necessarie alla home page; ora aggiungerò una sezione con gli annunci recenti.

Sotto la sezione hero, aggiungi un'altra container cliccando sull'icona più e aggiungi i GD > Listings blocchi lì.

Ora eseguiremo alcune impostazioni necessarie in questo GD > Listings blocco. Imposteremo l'ordinamento: recenti

Ora aggiungeremo una CTA per attirare i proprietari di attività ad aggiungere le loro aziende. Aggiungeremo un contenitore vuoto e nelle impostazioni di stile.
impostiamo uno sfondo.

Ora aggiungiamo gli stili del contenitore:

Tipo di Overlay: Colore
Colore Overlay Immagine: #FF6900
Opacità Overlay: 0.3
Larghezza contenitore: Larghezza intera
Larghezza contenuto: Boxed

Ora aggiungeremo anche un Call To Action blocco fornito da Spectra all'interno di questo contenitore.

Tipografia per la sezione CTA.
Colore: #fffff
Dimensione font: 32px

aggiungiamo un po' di stile al pulsante.
Colore testo: #000000
Colore di sfondo: #FFFFFF
Raggio: 30px su tutti i lati
Padding: 10px, 30px, 10px, 30px

Cambiamo il testo del pulsante in Aggiungi Inserzione e il link alla pagina Aggiungi Inserzione.

Ora la nostra sezione CTA è completata. Aggiungeremo un'altra sezione: GD > Categories sezione sottostante.

Le impostazioni saranno le seguenti
Tipo di design: Sfondo immagine
Elementi per riga: 3
Abilita Usa Immagine Categoria

Puoi impostare un'immagine per una categoria modificandola da wp-admin -> places -> Place Categories.

Ogni categoria ha un'opzione per impostare un'immagine predefinita

Ecco fatto, ora aggiungiamo l'ultima sezione per la visualizzazione dei link ai social media. La chiameremo RESTA IN CONTATTO.

Aggiungi un nuovo contenitore vuoto con sfondo #000000.

Ora aggiungeremo un'intestazione in questo contenitore con Allineamento: Centro e Intestazione: H3

Inserirò il testo Rimani in Contatto
Colore: #ffffff
Dimensione font: 24px

Aggiungiamo ora un paragrafo sotto di essa per inserire del testo.

Aggiungi uno stile
Colore testo: #ffffff
Dimensione: Piccolo

Ora aggiungeremo il blocco icone social sotto di essa.

In questo blocco icone social aggiungi il seguente stile
Dimensione: 15px
Dimensione sfondo: 10px
Raggio del bordo: 100
Colore: #ffffff

Congratulazioni! La tua homepage è completata.

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

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.

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 aggiungi un contenitore con due colonne.

Nel contenitore di sinistra, trascineremo i widget correlati alla pagina archivio GD, come GD > Azione Loop, GD > Loop, GD > Paginazione Loop e GD > Ricerca in cima, così l'utente potrà effettuare ricerche dalla pagina archivio.

Nella colonna destra trascineremo il blocco GD > Map blocco.

manterremo tutte le impostazioni predefinite per il GD > Map. diamogli un po' di altezza; ho deciso di impostare un'altezza di 100vh.

Ora imposta semplicemente il contenitore principale a larghezza intera seguendo le istruzioni riportate nell'immagine qui sotto.

Ora imposteremo il template della pagina Archivio a larghezza intera

regoleremo anche la sezione stile intestazione per tutte le pagine dal Personalizzatore del tema > Opzioni generali > Impostazioni generali.
con Stile
Stile intestazione: Centrato
Padding: 20px
Colore di sfondo: #1e73be
Colore testo: #ffffff

Ora, dopo questo, la pagina Archivio Annunci è pronta.

Un'altra opzione è utilizzare il blocco GD > Archivio Semplice come spiegato in questo tutorial su come Costruire un sito web di directory con Elementor.

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.

Ora le nostre pagine GD Search e GD Archive sono pronte.

3. Design della pagina singolo Annuncio del sito Directory OceanWP

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

Prima aggiungiamo un carosello di immagini in cima alla pagina Dettaglio Annuncio. Trascineremo il GD > Post Image blocco in questo contenitore.

In questo blocco GD > Immagine, regola le seguenti impostazioni.

Limite immagini: 50

Limite visualizzazione: 2

Ora aggiungiamo un altro contenitore sotto questo contenitore, dove inseriremo gli altri blocchi necessari del pagina Geodirectory Detail.

Ora aggiungiamo uno per uno tutti gli shortcode GD Detail necessari. Tra questi troviamo GD > Single Taxonomies, GD > Single Tabs, GD > Single Next Prev.

È ora di aggiungere alcuni widget alla barra laterale. Andremo quindi su wp-admin > Aspetto > Widget.

Aggiungi il widget GD > Azione Autore nella barra laterale principale. Questo widget fornirà un Modifica, Elimina Annuncio.

Aggiungi un altro widget GD > Output Location. Questo widget mostrerà tutti i principali dettagli dell'annuncio che sono stati contrassegnati come visibili nella pagina di dettaglio.

Dopo aver fatto questo, la nostra Pagina di dettaglio dell'inserzione è stata completata.

Aggiungere funzionalità premium al tuo sito Directory OceanWP

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.

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

Fai risaltare il tuo sito directory seguendo questa guida: Crea un sito directory professionale.

Le possibilità sono infinite.