Come creare un sito web di directory con il tema Avada
Ecco una guida facile da seguire su come sviluppare un sito web directory utilizzando il tema Avada e il plugin Avada Builder :
- Installa il tema Avada
- Installa e configura GeoDirectory
- Progetta il sito web directory con Avada Builder
Il tema Avada, utilizzato insieme al plugin GeoDirectory e al plugin Avada Builder, è un ottimo modo per creare una directory online flessibile.
Questa combinazione consente di aggiungere facilmente funzionalità basate sulla posizione geografica, personalizzare il layout e includere contenuti dinamici per un'esperienza intuitiva per l'utente.
Permette a sviluppatori web e designer di realizzare un sito web directory di alta qualità, su misura per specifici settori o per esigenze più ampie della comunità.
Approfondiamo i dettagli su come raggiungere questo obiettivo.
In questo tutorial vedremo come:
Installazione del tema e dei plugin.
1. Installa il tema Avada
Avada è un tema WordPress versatile e popolare, noto per la sua flessibilità e le sue potenti funzionalità.
È un tema multifunzione personalizzabile per creare un'ampia gamma di siti web, dotato di un intuitivo builder drag-and-drop che permette agli utenti di progettare e personalizzare il proprio sito senza bisogno di scrivere codice.
Per acquistare il tema Avada e scoprire tutte le sue numerose funzionalità, puoi visitare il marketplace ufficiale ThemeForest: Link per l'acquisto del tema Avada.
Puoi seguire questo video per configurare il tema Avada.
2. Installa GeoDirectory
Infine, devi installare GeoDirectory.
Vai su Plugin >> Aggiungi nuovo, cerca GeoDirectory. Installalo e attivalo. Abbiamo completato l'installazione dei plugin.
3. Procedura guidata di installazione di GeoDirectory
Per il plugin GeoDirectory, dovresti completare la Procedura guidata di configurazione per impostare la chiave API di Google Maps e importare alcuni annunci di esempio.
Scelta del sistema di mappe (Google Maps o OpenStreetMap)
Puoi scegliere tra due sistemi di mappe nel primo passaggio della procedura guidata: Google Maps e OpenStreetMaps (che non richiede una chiave API).
In questo tutorial selezioniamo OpenStreetMaps.
Se desideri selezionare Google Maps, segui questi passaggi aggiuntivi.
Clicca sul pulsante Genera chiave e segui i passaggi di questo guida per generare una chiave API valida.
I passaggi essenziali sono:
- Abilitare le chiavi.
- Creare o selezionare un progetto esistente.
- Ottenere la chiave.
- Attivare un account di fatturazione.
- Limitare la chiave API (in modo che possa essere utilizzata solo dall'URL del tuo sito web)
Riguardo al punto quattro: è un requisito obbligatorio. Tuttavia, ti verrà addebitato un costo solo se superi la soglia di $200/mese.
Questo credito gratuito è più che sufficiente per il 99% delle directory.
Impostazione della città predefinita
Successivamente, imposterai la posizione predefinita. Questa è la città per cui viene creata la directory.
Imposteremo Philadelphia come città predefinita.
Puoi usare qualsiasi posizione di cui hai bisogno.
Se hai bisogno di aggiungere annunci in più città, avrai bisogno del componente aggiuntivo Location Manager.
Aggiunta di funzionalità extra
In questo passaggio installeremo UsersWP, un plugin per la registrazione e il login degli utenti che consente agli utenti di registrarsi e accedere al tuo sito web.
È necessario per consentire agli utenti di aggiungere e modificare le proprie inserzioni. Creerà inoltre profili utente dove potranno trovare le proprie inserzioni, recensioni e molto altro.
Installeremo anche Ninja Forms in modo che tutte le inserzioni abbiano un modulo di contatto che invia email direttamente ai proprietari delle inserzioni.
AyeCode Connect non è obbligatorio per questo tutorial. È principalmente necessario se desideri aggiungere componenti aggiuntivi premium di GeoDirectory e installarli direttamente dalla dashboard di WordPress.
Aggiunta di dati di esempio
L'ultimo passaggio per completare la procedura guidata di installazione è l'aggiunta di alcune inserzioni di esempio. Verranno aggiunte anche categorie di inserzioni che potrai modificare in seguito in base alle tue esigenze.
Non aggiungerai widget nella barra laterale e voci di menu adesso; lo faremo più avanti.
Progetta il Avada Sito web Directory
Ora che abbiamo installato il tema e i plugin e completato la configurazione preliminare di GeoDirectory, possiamo iniziare a progettare il nostro sito Directory con Avada Suite di strumenti.
1. Progetta il logo del sito web
Prima di tutto: avremo bisogno di un logo per il nostro sito web.
Non devi investire in un designer per abbozzare la prima versione del tuo logo.
Uno degli errori più grandi che puoi commettere quando avvii una nuova directory è investire troppo tempo e denaro prima di testare la compatibilità del prodotto con il mercato.
Puoi creare un logo in cinque minuti con un'app come Canva, economica e sorprendentemente efficace.
Per un MVP (minimum viable product), un logo realizzato con Canva sarà più che sufficiente.
Ci sono diversi modelli di logo tra cui scegliere, e non importa se il tuo logo iniziale non è così perfetto e originale come pensi dovrebbe essere.
Se il tuo progetto prende piede, potrai sempre investire per migliorarlo o cambiarlo radicalmente in seguito.
Un logo mediocre non è mai la causa principale del fallimento di un progetto.
2. Avada Design della pagina Home della Directory
Puoi creare una nuova pagina o utilizzarne una che WordPress crea per impostazione predefinita, come la Pagina di esempio.
Vai su Pagine, modifica la Pagina di esempio e rinominala Home, oppure crea una nuova pagina a questo scopo.
Successivamente, vai su Aspetto > Personalizza > Impostazioni Homepage e seleziona la tua Home.
Il Menu di navigazione
Dopo aver creato e aggiunto il logo, vai su Aspetto > Menu e crea il tuo menu.
Aggiungi i collegamenti necessari (dalla colonna sinistra a quella destra) e salva.
Nel Impostazioni Menu > Visualizza posizione sezione, puoi controllare laPrincipale Navigazione».
Se vuoi, puoi fare in modo che lo stesso menu appaia nel footer oppure creare un altro menu da visualizzare lì.
In questo esempio, avremo solo il menu di navigazione nell'intestazione.
Abbiamo aggiunto sette link di navigazione principali e alcuni link di sotto-navigazione:
- Home
- Chi siamo
- Blog
- Luoghi e aggiungi luoghi
- Profilo
- Accedi
- Logout
Il link di accesso (dagli endpoint di UsersWP) verrà visualizzato solo per gli utenti non connessi, mentre i link di disconnessione, account e profilo appariranno solo per gli utenti connessi.
Crea layout Header
Ora creiamo un layout per l'header del sito utilizzando Avada builder.
Quindi andremo su Avada > Layout e selezioneremo l'header da Layout globale.
Fai clic su Crea nuovo layout pulsante.
Ora facciamo clic sul pulsante Live Builder.
Si aprirà la Avada Builder Library davanti a noi.
Vedrai molti template predefiniti per le diverse sezioni.
In questo esempio, selezioneremo un layout Header predefinito dalla sezione studio .
Ora sostituiremo il nostro logo facendo clic sulla sezione logo dell'Header predefinito.
Imposteremo la Larghezza massima immagine su 150px dalle impostazioni del logo.
Dal menu dell'header, selezioneremo o cambieremo il menu che vogliamo mostrare nell'header del sito.
apporteremo alcune modifiche allo stile e all'allineamento come indicato nello screenshot qui sotto.
Il nostro Header è pronto. Concentriamoci ora sul contenuto della homepage.
Il Contenuto
Modificheremo la Home pagina nel Live Builder.
Aggiungiamo un contenitore vuoto con le seguenti impostazioni
Larghezza contenuto interno: 100%
Altezza: Altezza minima
Altezza minima: 500
Allineamento riga: Estendi
Allineamento colonna: Centra
Giustificazione colonna: Centra
Dall'impostazione Sfondo, aggiungeremo un'immagine.
Posizione sfondo: Centro Centro
Ripetizione sfondo: Nessuna ripetizione
Dimensione sfondo: Centra
Pattern: Punto
Colore pattern: rgba(0,0,0,0.41)
Ora aggiungiamo un tag titolo Header sopra l'immagine con
Testo: Find The Best Restaurant In Philadelphia
Tipografia:
Famiglia di font: Inter
Variante: Bolt 700
Dimensione font: 42px
Colore font: #ffffff
Ora aggiungiamo il GD > Search blocco e mantienilo con le impostazioni predefinite.
Ora aggiungiamo un contenitore vuoto con il GD > Category blocco all'interno.
Tipo di design: Icona a sinistra
Elementi per riga: 4
Ora aggiungiamo un altro contenitore vuoto con il GD > Listing blocco al suo interno con le seguenti impostazioni.
Ordinamento: recente
Griglia: 4
Post da mostrare: 8
Ora aggiungiamo un contenitore vuoto con le seguenti impostazioni.
Larghezza contenuto interno: Larghezza 100%
Altezza: Auto
Spaziatura contenuto: Sinistra, Destra 0px
Ora aggiungeremo un GD > Map al suo interno.
Infine, è il momento di aggiungere una sezione CTA. Aggiungeremo un contenitore vuoto.
aggiungeremo un tag Heading.
Con le seguenti impostazioni
Allineamento: Sinistra
Tag HTML Heading: H3
Ora aggiungiamo un blocco pulsante con un link alla pagina Aggiungi inserzione pagina.
Crea layout Footer
Infine, creeremo un layout footer globale, in modo simile a quanto fatto per la sezione header.
In questo esempio, utilizzeremo un layout di Footer predefinito.
Puoi apportare modifiche a questo layout di footer. Per ora, lo lascio come predefinito.
Dopo quest'ultimo passaggio, la nostra homepage è pronta.
3. Avada Design delle pagine Annunci e Ricerca del sito Directory
Ora devi progettare due pagine essenziali per qualsiasi directory.
La pagina degli annunci (archivio generale, categorie, tag) e la pagina dei risultati di ricerca.
GeoDirectory le crea automaticamente con un layout generale. In questo tutorial, creeremo e personalizzeremo il layout di queste pagine utilizzando Avada Builder.
Le pagine degli annunci e di ricerca sono quasi identiche, quindi la creiamo una volta sola e copiamo il layout sull'altra pagina.
Abbiamo deciso che il layout della pagina degli annunci avrebbe avuto gli annunci a sinistra e, a destra, una mappa fissa che mostra la posizione precisa degli annunci.
È molto semplice.
Pagina degli annunci
Vai su Geodirectory > Settings > General > Pages > Clicca su modifica del template di pagina GD Archive
Rimuovi tutto il contenuto da questo GD Archive template di pagina.
Ora modifica la pagina utilizzando il Live Builder.
Aggiungeremo un contenitore vuoto con padding del contenuto 0 in alto e in basso.
Aggiungiamo ora una colonna al suo interno e trascineremo GD > Page title al suo interno.
Impostiamo
colore di sfondo: #f6f6f9
Padding: 50px 0px 50px 0px
Colore link del contenitore: #efefef
Aggiungiamo ora un contenitore a due colonne.
Poi, nel contenitore di sinistra, aggiungeremo i blocchi relativi alla pagina GD Archive come GD > Loop Action, GD > Loop, GD > Loop Pagination, e GD > Search in cima, in modo che l'utente possa effettuare ricerche dalla pagina di archivio.
Nella colonna destra trascineremo il blocco GD > Map blocco.
Impostiamo la mappa
Altezza: 150vh
Padding: 30px 0px 30px 0px
e lasciamo le impostazioni ai valori predefiniti.
aggiungeremo la gd-loop-column classe alla colonna di sinistra.
aggiungeremo il seguente snippet CSS nel personalizzatore del tema.
.gd-loop-column .fusion-column-wrapper{ overflow-y: scroll; padding-right: 17px; max-height: 960px; }
La nostra pagina Archive è pronta.
Per creare il layout della pagina di ricerca.
Assegneremo l'intestazione e il footer globali a questo layout.
andremo su Avada > Layouts
aggiungeremo questo layout e lo assegneremo alla pagina di ricerca.
Nella pagina di ricerca crea ora un template di contenuto per la ricerca
e copia tutte le sezioni dalla pagina GD > Archive in questa pagina di ricerca.
Dopo questa operazione, il nostro template della pagina di ricerca è pronto.
4. Design della pagina di dettaglio del singolo annuncio del sito directory Avada
È ora di creare il template della pagina di dettaglio. Andremo a modificare il GD Detail template di pagina in Avada Builder.
Aggiungeremo un contenitore vuoto con
Larghezza contenuto interno: Larghezza 100%
Aggiungeremo al suo interno il blocco GD > Post images con le seguenti impostazioni.
Limite immagini: 10
Limite visualizzazione: 3
Tipo di output: Slider
Avvio automatico: Attiva
Nel GD Details nella pagina assicurati di disabilitare Show first featured image.
Ora aggiungeremo di nuovo un contenitore con un layout a due colonne come mostrato di seguito.
Ora aggiungiamo singolarmente tutti i blocchi richiesti della pagina GD Detail nella colonna di sinistra.
Che include GD > post Title, GD > Single Taxonomies, GD > Single Tabs, e GD > Single Next Prev.
Aggiungeremo il GD > Author Action e GD > Output Location blocco nella colonna di destra.
Al termine, la nostra pagina di dettaglio dell'annuncio è completa.
Aggiungere funzionalità Premium al tuo Avada Sito web Directory
Se lo desideri, ora puoi aggiungere funzionalità premium alla tua directory, come:
- 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.
- 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.
- Pubblicità: vendita di spazi pubblicitari è un'altra forma di monetizzazione di una directory online. Se hai molto traffico, puoi utilizzare reti pubblicitarie. In alternativa, puoi vendere spazi pubblicitari direttamente, consentendo alle attività di aggiungere banner in aree specifiche del tuo sito web oppure permettendo alle inserzioni di apparire come annunci, ad esempio, in cima ai risultati di ricerca organici.
Questi sono solo tre esempi. Tuttavia, un sito directory offre molti modi per guadagnare online.
Puoi creare un marketplace globale di articoli artigianali, vendere biglietti per eventi o vendere coupon sconto.
Nuovi utenti, iniziate il vostro percorso da qui: Creare un sito web directory: guida per principianti.
Questo tutorial generico può essere adattato a qualsiasi tema o page builder.
Le possibilità sono infinite.
Newsletter - Rimani aggiornato!
Ricevi le ultime notizie, consigli e contenuti esclusivi direttamente nella tua casella di posta.