Come creare un sito web di directory con Elementor

Come costruire un semplice sito directory con Elementor gratuitamente o creare una directory online super professionale con Elementor PRO e i componenti aggiuntivi Premium di GeoDirectory.
elementor dirctory website geodirectory

Come costruire un sito directory con Elementor?

Il modo più semplice per creare un sito web directory con Elementor utilizzando il plugin gratuito Elementor è seguire questi 4 passaggi:

  1. Installa il tema Hello
  2. Installa Elementor
  3. Installa e configura GeoDirectory
  4. Progetta il sito web directory con Elementor

Vediamo come farlo nel dettaglio. Ma prima, scopriamo perché questa soluzione è la migliore.

Il modo migliore per creare un sito web directory con Elementor.

Per creare un sito web directory con Elementor, Elementor.com suggerisce di utilizzare i plugin Custom Post Type UI, Advanced Custom Fields ed Elementor Custom Skin.

È davvero il modo migliore?

Forse, ma solo se hai intenzione di creare una directory semplice, priva di quanto segue:

  1. Un elevato numero di inserzioni (la tabella del database wp-posts non scala bene)
  2. Molti campi personalizzati per ogni inserzione (Advanced Custom Fields non è scalabile neanche)
  3. Opzione per gli utenti di aggiungere e modificare le proprie inserzioni dal front end
  4. Ricerca avanzata per posizione, prossimità, GeoLocation o campi personalizzati
  5. Inserzioni a pagamento con funzionalità extra e maggiore visibilità
  6. Opzioni per i proprietari delle inserzioni di rivendicare la propria inserzione
  7. Recensioni degli utenti e ordinamento delle inserzioni per valutazione
  8. Mappe interattive con indicazioni stradali per raggiungere l'attività
  9. Moduli di contatto per inviare email ai titolari delle attività
  10. Altre opzioni di monetizzazione
  11. Una directory di eventi

Seguendo il loro tutorial, puoi creare un catalogo di attività con informazioni essenziali e un'interattività molto limitata per i visitatori del tuo sito.

Qui elenchiamo tutte le sfide che dovrai affrontare seguendo questo approccio:
Sviluppare un sito web directory con Custom Post Types e Advanced Custom Fields

Se invece hai bisogno di uno o più dei punti elencati sopra, avresti bisogno di molti plugin aggiuntivi e, in alcuni casi, di una buona quantità di codice personalizzato.

Ci deve essere un modo migliore! Aspetta, c'è!

Puoi usare GeoDirectory:

Il miglior plugin directory per Elementor

Con i suoi add-on premium, puoi ottenere tutto quanto elencato sopra e molto di più.

Inoltre, potresti persino evitare di usare Elementor PRO, perché la versione gratuita di Elementor sarà più che sufficiente per questo tutorial.

Hai bisogno di Elementor PRO solo se hai un design molto sofisticato e personalizzato.

Quindi, senza ulteriori indugi, vediamo come puoi creare un sito web directory con GeoDirectory, un tema gratuito, la versione base del plugin Elementor e un add-on gratuito di terze parti.

Sito web directory con Elementor usando solo un tema gratuito e plugin gratuiti

Inizieremo questo tutorial mostrandoti come creare un semplice sito web directory utilizzando risorse WordPress gratuite, come il plugin gratuito Elementor, il suo tema gratuito Hello e il plugin gratuito GeoDirectory.

Includerà le seguenti funzionalità:

  • Inserzioni illimitate con campi personalizzati illimitati.
  • Ricerca per prossimità.
  • Recensioni degli utenti
  • Un modulo per aggiungere inserzioni, che consente agli utenti di inviare, modificare e/o eliminare le proprie inserzioni dal front end del sito.

Naturalmente, WordPress, nella sua configurazione predefinita, offre la possibilità di creare un blog e pagine illimitate.

Diamo per scontato che tu abbia già un provider di hosting e WordPress installato.

In questo tutorial sto creando una directory aziendale per la città di Philadelphia.

In questo tutorial vedremo come:

Installazione del tema e dei plugin.

1. Installa il tema Hello

Per prima cosa, dovrai installare un tema: in questo tutorial installerai il tema Hello, che è il tema starter di Elementor.

installa il tema hello
Installa il tema Hello di Elementor

Vai su Aspetto >> Temi

Seleziona Aggiungi nuovo, Installa, e Attiva il tema Hello.

2. Installa Elementor

Ora dovrai installare il page builder. In questo caso, stai installando la versione gratuita del plugin Elementor.

Vai su Plugin >> Aggiungi nuovo.

Cerca Elementor. Installalo e attivalo.

installa elementor
Installa il Plugin Elementor

Puoi saltare tutti i passaggi della Configurazione guidata.

3. Installa GeoDirectory

Ultimo ma non meno importante, devi installare GeoDirectory.

Vai su Plugin >> Aggiungi nuovo, cerca GeoDirectory. Installalo e attivalo, e per ora abbiamo terminato l'installazione dei plugin.

installa geodirectory
Installa il plugin GeoDirectory

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)

Chiave API della mappa nella procedura guidata di installazione di GeoDirectory
Procedura guidata di configurazione di GeoDirectory

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

Fai clic sul pulsante Genera chiave e segui i passaggi in questa guida per generare una chiave API valida.

I passaggi essenziali sono:

  1. Creare o selezionare un progetto esistente.
  2. Abilitare le chiavi.
  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

Città predefinita nella procedura guidata di installazione di GeoDirectory
Come impostare la città predefinita della Directory

Successivamente, imposterai la posizione predefinita. Questa è la città per cui viene creata la directory. Lasceremo invariata la città predefinita.

GeoDirectory usa 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

Funzionalità extra nella procedura guidata di installazione di GeoDirectory

In questo passaggio, installeremo UsersWP, il nostro plugin per la registrazione degli utenti che consente agli utenti di registrarsi e accedere al tuo sito web.

Questo è necessario per permettere agli utenti di aggiungere e modificare le proprie inserzioni. Creerà inoltre profili utente dove gli utenti potranno trovare le proprie inserzioni, recensioni e altre informazioni pertinenti.

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

Dati di esempio nella procedura guidata di installazione di GeoDirectory
Annunci di esempio di GeoDirectory

L'ultimo passaggio della procedura guidata di installazione consiste nell'aggiungere alcune inserzioni di esempio. Questo aggiungerà 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 Elementor

Ora che abbiamo installato il tema, i plugin e completato la configurazione preliminare di GeoDirectory, possiamo iniziare a progettare il nostro sito web Directory con Elementor.

1. Design della Home Page del sito web Directory con Elementor

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 per questo scopo.

Successivamente, vai su Aspetto > Personalizza > Impostazioni Homepage e seleziona la tua Home.

Selezioneremo la pagina dei Post in seguito.

Sito web directory con Elementor - creazione della homepage
La pagina di esempio viene utilizzata come homepage.

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 attività è investire troppo tempo e denaro prima di testare l'adattamento del prodotto al mercato.

Puoi progettare un logo in soli cinque minuti con un'app come Canva, sorprendentemente conveniente ed efficace.

Creare il logo con canva.com
Crea la prima bozza del tuo logo usando Canva.com.

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 è perfetto o originale come vorresti.

Se il tuo progetto prende piede, potrai sempre investire per migliorarlo o apportare cambiamenti radicali 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 > Identità del sito, clicca su Seleziona Logo e carica il tuo file PNG. Salta il ritaglio (o ritaglia l'immagine secondo necessità) e clicca su pubblica.

logo di un sito web directory con elementor
Logo per la Directory Elementor realizzato con Canva.com.

Il Menu di navigazione

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

menu di navigazione
Menu di navigazione della Directory Elementor

Aggiungi i collegamenti necessari (dalla colonna sinistra alla colonna destra) e salva. Nella sezione Impostazioni Menu > Posizione di visualizzazione, puoi selezionare l'opzione

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:

  1. Home
  2. Chi siamo
  3. Blog
  4. Luoghi
  5. Profilo
  6. Accedi
  7. Logout
menu di navigazione sito web directory elementor
Il menu di navigazione è visibile nell'angolo in alto a destra del sito

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

Il Contenuto

Ora puoi iniziare a progettare la home page. Per prima cosa, dovrai aggiungere un immagine hero sotto l'intestazione.

Per farlo, vai su Pagine > Home e clicca su Modifica con Elementor.

Se hai utilizzato la Pagina di esempio, elimina l'Editor di testo facendo clic destro sul testo e selezionando elimina. Se hai creato una nuova pagina, aggiungi una sezione. (Clicca il pulsante più del page builder dove è indicato Trascina il widget qui.)

Ora hai una pagina vuota con una sola sezione di una colonna.

design homepage directory elementor
Homepage vuota con una sola sezione composta da una colonna

Clicca sull'icona Modifica sezione (icona centrale azzurra delle sezioni) e seleziona Larghezza intera nell'opzione Larghezza contenuto.

modifica sezione immagine hero della homepage
Modifica la sezione e rendila a larghezza intera.

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

Per la sezione Hero, utilizzeremo questa immagine gratuita di Philadelphia da Pexels.com (Grazie, @Kelly).

"Centro Centro".

sezione immagine hero
Immagine hero aggiunta alla sezione come sfondo.

Ora puoi vedere solo una striscia della nostra immagine, ma il passaggio successivo la farà apparire come desiderato.

L'immagine ha bisogno di una sovrapposizione, altrimenti qualsiasi testo sopra non avrà un contrasto sufficiente e sarà difficile da leggere.

Clicca su Sovrapposizione sfondo, seleziona Tipo di sfondo: Classico, Colore: Nero (#000000) e Opacità: 0.5 (dovrebbe essere già impostato in questo modo).

sovrapposizione scura sull'immagine hero
Aggiungi una sovrapposizione scura all'immagine hero.

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

Clicca al centro dell'immagine (un pulsante più grigio è appena visibile). Questo aprirà i widget nel pannello Elementor a sinistra.

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

aggiungi titolo all'immagine hero
Aggiunta del testo del titolo all'immagine hero

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

In questo tutorial utilizzerò qualcosa di semplice come "La mia Directory di Philadelphia". Puoi aggiungere qualsiasi slogan tu voglia. Non dimenticare di centrare il testo utilizzando l'opzione di allineamento.

testo hero centrato
Centra il testo del titolo.

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

testo hero bianco
Cambia il colore del testo del titolo nell'immagine hero.

Successivamente, aggiungi un po' di padding per mostrare l'immagine hero come previsto. Seleziona la scheda Avanzate nel pannello Elementor a sinistra e scollega i valori del padding (si fa cliccando sull'icona del collegamento alla fine dei valori).

Aggiungi 250 al valore superiore e 50 al valore inferiore. Lascia 0 per entrambi i valori destro e sinistro.

padding testo hero
Aggiungi padding al testo del titolo nell'immagine hero.

Puoi aggiungere il widget GeoDirectory Search sotto il titolo per completare l'Hero Image della homepage.

Ma prima devi aggiungere una sezione interna per controllare la larghezza del modulo di ricerca.

Nel pannello sinistro di Elementor, clicca sull'icona a griglia (a destra del logo di Elementor) per tornare all'elenco degli elementi.

torna agli elementi

Trascina e rilascia un elemento Sezione Interna sotto il Titolo.

La sezione interna avrà due colonne per impostazione predefinita. Dovrai eliminarne una.

Fai clic destro su una di esse ed eliminala. Ora clicca sull'altra e imposta la sua larghezza a 700.

sezione per la ricerca
Aggiungi una sezione per il Modulo di Ricerca.

Ora puoi aggiungere l'elemento GD > Search alla Sezione Interna.

Nel pannello sinistro di Elementor, clicca di nuovo sull'icona a griglia (a destra del logo di Elementor) per tornare all'elenco degli elementi.

Cerca GD > Search e trascinalo e rilascialo all'interno della sezione interna.

Infine, clicca sulla scheda Avanzate, scollega i valori del padding e aggiungi 200 all'opzione padding inferiore. Questo mostrerà la parte inferiore dell'hero image.

hero image della homepage con modulo di ricerca completato
Hero Image della Homepage completata.

Ora puoi aggiungere alcuni widget con le inserzioni sotto l'hero image, insieme a un widget che mostra alcuni post del blog.

Per aggiungere, ad esempio, una griglia con quattro inserzioni, dovrai aggiungere una nuova sezione sotto l'hero image, impostata con una larghezza del contenuto in box e 1140 come larghezza.

All'interno di questa sezione, aggiungi prima un'Intestazione per le inserzioni recenti, cambia il testo in Recent Listings (o quello che ritieni più adatto), centra il testo, cambia il colore in grigio scuro (#333333) e aggiungi 50px di Margine Superiore dalla scheda Avanzate.

Successivamente, aggiungi il widget "GD > Listings". Le impostazioni da modificare sono:

In Filtri > Post da mostrare = 4

In Ordinamento > Ordina per = più recenti

In Design > Layout = Vista griglia (quattro colonne)

Stili contenitore > Margine superiore = 5

inserzioni contenuto homepage

È il momento di aggiungere alcuni post del blog.

Ho usato questo plugin per generare post fittizi con immagini. Ho usato il Post Grid Elementor Add-on per visualizzarli nella homepage.

Sotto le inserzioni, aggiungi un'Intestazione per i post recenti, cambia il testo in Recent Posts (o quello che ritieni più adatto), centra il testo, cambia il colore in grigio scuro (#333333) e aggiungi 50px di Margine Superiore dalla scheda Avanzate.

Successivamente, aggiungi il Post Grid (da WPC Element) e modifica le seguenti impostazioni:

Dalla scheda Stile > Titolo > Tipografia, cambia la dimensione del carattere a 1.25rem e il colore in modo che corrisponda al colore dei titoli delle inserzioni (#1E73BE).

Infine, dalla scheda Avanzate, aggiungi un margine superiore di 50px.

post recenti homepage

Ecco fatto. La homepage è completata. Puoi aggiungere tutto ciò che vuoi in seguito, ma questo è più che sufficiente per questo tutorial.

Homepage del Sito Directory con Elementor completata
Sito Directory con Elementor – Homepage completata

2. Design della pagina Inserzioni e Ricerca del Sito Directory con Elementor

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, ma in questo tutorial elimineremo le pagine predefinite e creeremo le nostre.

Creerai due pagine identiche. Utilizzeremo un layout con due colonne larghe.

Le inserzioni si troveranno a sinistra, mentre a destra ci sarà una mappa fissa che mostra la posizione precisa delle inserzioni.

pagina ricerca inserzioni
Pagina degli annunci e di ricerca ispirata al layout della pagina di ricerca di Airbnb

È molto semplice.

Pagina degli annunci

Vai su Pagine > Aggiungi nuova > Aggiungi Titolo = Listings. Pubblica la nuova pagina.

crea pagina inserzioni
Crea la pagina delle inserzioni

Dopo aver pubblicato la pagina, clicca sul pulsante Modifica con Elementor.

Clicca sull'icona Ingranaggio nell'angolo in basso a sinistra dello schermo, nascondi il titolo, imposta il layout della pagina su Elementor Full Width e clicca su Aggiorna.

regola le impostazioni del layout della pagina inserzioni
Modifica le impostazioni del layout della pagina degli annunci

Aggiungi una sezione (Clicca il pulsante più del page builder dove è scritto Trascina il widget qui.)

In Layout > Larghezza contenuto, imposta Larghezza intera. Ora clicca il pulsante più all'interno della nuova sezione, cerca GD > Simple Archive e trascina il widget nella sezione appena creata.

Modifica le seguenti impostazioni.

Output principale > Seleziona Mostra ricerca

Mappa > Abilita mappa fissa

Clicca su Aggiorna. La pagina degli annunci è pronta.

Per la pagina di ricerca, ripetiamo lo stesso processo.

Pagina di ricerca

Vai su Pagine > Aggiungi nuova > Aggiungi titolo = S. Pubblica la nuova pagina.

crea pagina di ricerca
Crea la pagina di ricerca

Dopo aver pubblicato la pagina, clicca sul pulsante Modifica con Elementor.

Clicca sull'icona Ingranaggio nell'angolo in basso a sinistra dello schermo, nascondi il titolo, imposta il layout della pagina su Elementor Full Width e clicca su Aggiorna.

modifica le impostazioni del layout della pagina di ricerca
Modifica le impostazioni del layout della pagina di ricerca

Aggiungi una sezione (Clicca il pulsante più del page builder dove è scritto Trascina il widget qui.)

In Layout > Larghezza contenuto, imposta Larghezza intera. Ora clicca il pulsante più all'interno della nuova sezione, cerca GD > Simple Archive e trascina il widget nella sezione appena creata.

Modifica le seguenti impostazioni:

  • Output principale > Seleziona Mostra ricerca
  • Mappa > Abilita mappa fissa

Clicca su Aggiorna. La pagina di ricerca è pronta.

Dobbiamo modificare le impostazioni di GeoDirectory per indicare al plugin di utilizzare queste due pagine al posto di quelle predefinite.

Dalla Dashboard di WordPress, clicca su GeoDirectory > Impostazioni > Pagine.

Assegna la pagina intitolata Annunci come pagina Archivio e la pagina intitolata S come Pagina di ricerca.

assegna le nuove pagine annunci e ricerca per GeoDirectory
Assegna le nuove pagine archivio e ricerca che GeoDirectory dovrà utilizzare

Abbiamo completato sia la nuova pagina Annunci che quella di Ricerca, e GeoDirectory sa come utilizzare questi nuovi template.

3. Design della pagina del singolo annuncio per il sito directory con Elementor

Per completare la directory, dobbiamo progettare un altro template: la pagina GD Details. Questo è il template utilizzato per mostrare i singoli annunci.

GeoDirectory ne genera uno automaticamente, ma lo sostituiremo per creare una nuova pagina.

mpdetails". Salvala come bozza.

Dobbiamo modificare le impostazioni di GeoDirectory per indicare al plugin di utilizzare questa pagina al posto della pagina GD Details predefinita.

Dalla Dashboard di WordPress, clicca su GeoDirectory > Impostazioni > Pagine.

mpdetail" come Pagina dettagli.

Ora torniamo alla pagina, apriamola e clicchiamo sul pulsante Modifica con Elementor.

Come abbiamo fatto per le pagine precedenti, clicca sull'icona Ingranaggio nell'angolo in basso a sinistra dello schermo, nascondi il titolo, imposta il layout della pagina su Elementor Full Width e clicca su Aggiorna.

modifica le impostazioni del layout della pagina dei dettagli dell'annuncio
Modifica le impostazioni del layout della pagina dei dettagli dell'annuncio

Aggiungi una sezione (Clicca il pulsante più del page builder dove è scritto Trascina il widget qui.)

In Layout > Larghezza contenuto, imposta Larghezza intera. Ora clicca il pulsante più all'interno della nuova sezione, cerca GD > Post Images e trascina il widget nella sezione appena creata.

Modifica le seguenti impostazioni:

  • Generale > Limite visualizzazione: 3
  • Design > Tipo di output: Slider

Successivamente, dobbiamo aggiungere il titolo dell'annuncio. Cerca l'elemento GD > Post Title, poi trascinalo nell'area "Trascina il widget qui".

Modifica le seguenti impostazioni:

  • Generale > Tipo di output: H1
  • Design > Dimensione font: H1

Ora dovremo aggiungere il Contenuto dell'annuncio. Aggiungi una nuova sezione (Clicca il pulsante più del page builder dove è scritto Trascina il widget qui.)

Seleziona il layout a due colonne 66/33 (con la colonna sinistra larga il doppio rispetto a quella destra)

Layout per la pagina del singolo annuncio
Layout per la pagina del singolo annuncio

Trascineremo l'elemento GD > Single Tabs nella colonna sinistra. L'unica opzione da abilitare è Contenuto > Mostra come elenco.

Visualizzerà la Descrizione, la Galleria fotografica, la Mappa e le Recensioni di ogni annuncio come un elenco.

Se non abiliti l'opzione Mostra come elenco, verrà visualizzato un gruppo di 4 schede, ciascuna con il contenuto precedentemente menzionato.

Aggiungeremo l'elemento GD > Output location nella colonna destra.

Questo elemento raggruppa diverse informazioni sull'annuncio, tra cui tag, categorie, indirizzi, informazioni di contatto e orari di apertura.

Questi dettagli sono disponibili anche come elementi singoli che possono essere utilizzati separatamente per design personalizzati.

Ad esempio, puoi utilizzare il GD > Post Address elemento per mostrare l'indirizzo in qualsiasi punto della tua pagina.

Per tutti i contenuti, è disponibile l'elemento GD > Post Meta elemento. Ogni campo personalizzato può essere visualizzato tramite questo elemento impostando di conseguenza il valore KEY.

In alternativa, puoi utilizzare l'elemento GD > Badge per mostrare praticamente qualsiasi informazione dell'inserzione come un pulsante.

Per completare la pagina della singola inserzione della directory, aggiungerò CSS personalizzato per adattare il design al tema e ottenere l'aspetto desiderato.

Preferisco tenere tutto il mio CSS in un unico posto, e scelgo di aggiungerlo in Aspetto >> Personalizza >> CSS aggiuntivo con i relativi commenti.

/* Reduce list heading font size */ 

h2.gd-tab-list-title.h3 {
font-size: 1.25rem;
}

/* Add white space between headings and content */
div#geodir-tab-content-post_content, div#geodir-tab-content-post_images, div#geodir-tab-content-post_map, div#geodir-tab-content-reviews {
    margin-top: 30px
;
}

Ecco come appare la pagina della singola inserzione dopo queste modifiche.

pagina della singola inserzione
La Pagina della Singola Inserzione

Ecco fatto. Abbiamo costruito il nostro sito directory con Elementor utilizzando Hello Theme, la versione gratuita di Elementor e GeoDirectory.

Aggiungere funzionalità premium al tuo sito directory con Elementor

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 prezzi per l'invio delle inserzioni. Per ogni fascia di prezzo, puoi abilitare/disabilitare funzionalità come: limitare il numero di immagini per le inserzioni gratuite e consentirne di più per quelle a pagamento, permettere un numero maggiore o minore di tag e categorie, abilitare o disabilitare campi personalizzati specifici, e 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 aziende di aggiungere banner in aree specifiche del tuo sito web o permettendo agli annunci di apparire come inserzioni pubblicitarie, 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 per articoli artigianali, vendere biglietti per eventi o offrire coupon sconto.

Unisciti alla nostra community di membri e dai vita alla tua idea: Crea un sito directory.

Le possibilità sono infinite.

Costruire un Sito Directory con Elementor PRO

Come accennato in precedenza, con Elementor PRO puoi realizzare design molto più sofisticati, e ti consiglio di consultare questo post del blog per scoprire tutte le potenzialità dell'integrazione di GeoDirectory con Elementor PRO:

Personalizza il design dei Template GeoDirectory con Elementor Pro

Template per Siti Directory con Elementor Pro

Per gli utenti di Elementor PRO, offriamo diversi template installabili con un solo clic che forniscono siti directory completamente funzionanti con dati di esempio.

Questi template sono gratuiti e possono essere installati in meno di un minuto.

Successivamente, sostituisci i contenuti di esempio con i tuoi contenuti reali e adatta il template al tuo brand modificando il logo, la palette dei colori del sito directory e la tipografia.

Di seguito sono riportati alcuni esempi di ciò che puoi ottenere con GeoDirectory ed Elementor PRO.

Demo installabili con un clic tramite AyeCode connect plugin, vedi questo post del blog per un tutorial

Directory Eventi (Elementor Pro)

Una directory eventi e marketplace di biglietti costruita con Elementor Pro.

Directory Lavoro (Elementor Pro)

Una directory di lavoro costruita con Elementor Pro.

Immobiliare (Elementor Pro)

Un sito immobiliare costruito con Elementor Pro.

Studi di Yoga (Elementor Pro)

Una directory di studi di yoga costruita con Elementor Pro.

Ti interessa un tutorial per creare un sito directory con Gutenberg invece di Elementor? Dai un'occhiata a questo post su come costruire un sito directory con il tema Astra.

Confrontare l'integrazione di GeoDirectory con Elementor PRO rispetto ad altri plugin directory per WordPress è uno degli esercizi più utili nella scelta dei plugin. Abbiamo trattato la questione dell'integrazione nativa dei dati dinamici in il nostro confronto con Directorist e il nostro confronto con HivePress. HivePress, in particolare, ha il supporto a Elementor come richiesta di funzionalità confermata dal 2022, come documentato nel post di confronto.

Scopri il potere di GeoDirectory!

Avvia la tua attività online adesso

Iscriviti oggi!

Newsletter - Rimani aggiornato!

Ricevi le ultime notizie, consigli e contenuti esclusivi direttamente nella tua casella di posta.

Pubblicato da Paolo

Paolo Tajani, co-fondatore e responsabile marketing di AyeCode LTD, lavora insieme al suo socio in affari Stiofan per sviluppare importanti plugin WordPress come GeoDirectory, UsersWP e GetPaid. Avendo iniziato il suo percorso con WordPress nel 2008, Paolo ha unito le forze con Stiofan O'Connor nel 2011. Insieme, hanno avuto un ruolo fondamentale nella creazione e nel marketing di una serie di temi e plugin di successo, oggi utilizzati attivamente da oltre 100.000 siti web.

Caricamento in corso...
Offerta Sconto del 20%
Affrettati! Ottieni il tuo sconto del 20% prima che scada. Ottieni il 20% di sconto