Creare un sito web di directory con il tema Astra e il plugin Spectra
Qual è il modo migliore per costruire un sito web Directory con il Tema Astra?
Il modo migliore per creare un sito web directory con il Tema Astra è utilizzare il Plugin GeoDirectory e il Plugin Spectra Blocks. Un ottimo modo per realizzare una directory online potente e personalizzabile.
Ecco una guida passo passo per costruire un sito web Directory con il tema Astra e il loro Plugin Spectra Website Builder
- Installa il tema Astra
- Installa Spectra Blocks
- Installa e configura GeoDirectory
- Progetta il sito web Directory con il tema Astra e il blocco Spectra
Vediamo in dettaglio come costruire un sito web Directory con GeoDirectory e il tema Astra.
In questo tutorial vedremo come:
Installazione del tema e dei plugin.
1. Installa il Tema Astra
Prima di tutto, dovrai installare un tema e, per questo tutorial, installerai il tema Astra.
Vai su Aspetto >> Temi
Seleziona Aggiungi nuovo, Installa, e Attiva il tema Astra.
2. Installa il plugin Spectra Blocks
Ora dovrai installare il plugin Spectra Blocks. Questo plugin offre più opzioni per progettare la pagina utilizzando i blocchi di Gutenberg.
Vai su Plugin >> Aggiungi nuovo.
Cerca Spectra Blocks. Installalo e attivalo.
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.
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 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:
- 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 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. 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
In questo passaggio, installeremo UsersWP, un 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
L'ultimo passaggio nella 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 Astra
Ora che abbiamo installato il tema, i plugin e completato la configurazione preliminare di GeoDirectory, possiamo iniziare a progettare il nostro sito di Directory con Astra.
1. Design della Home Page del sito Directory con Astra
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 un nuovo business di directory web è 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.
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 o originale come vorresti che fosse.
Se il tuo progetto prende piede, potrai sempre investire nel 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.
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
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:
- Home
- Chi siamo
- Blog
- Luoghi
- Profilo
- Accedi
- Logout
Il link di accesso (dagli endpoint di UsersWP) apparirà solo per gli utenti non autenticati, mentre i link di disconnessione e al profilo appariranno solo per gli 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.
Il Contenuto
Il plugin Spectra Blocks offre molti modelli di pagina predefiniti. Puoi accedervi cliccando sul pulsante Template Kits in cima alla schermata di modifica della pagina.
Puoi utilizzare questi modelli di pagina o uno schema specifico per costruire le pagine del tuo sito.
Inizierò a costruire questa pagina da zero utilizzando il plugin Spectra Blocks.
Abbiamo bisogno di un hero header nella homepage; aggiungiamo un blocco contenitore fornito dal plugin Spectra Blocks.
Clicca sulla sezione aggiunta e seleziona Larghezza intera nell'opzione Larghezza contenuto come indicato nello screenshot qui sotto.
Successivamente, clicca su Stile dalle schede in alto. Seleziona > Immagini come Tipo di sfondo.
Per la sezione Hero, abbiamo bisogno di un'immagine, che scaricheremo gratuitamente da Pexels.com (Grazie, @Kelly).
Carica la tua immagine e seleziona Ripeti su Nessuna ripetizione e Dimensione su Copri.
L'immagine ha bisogno di una sovrapposizione, altrimenti qualsiasi testo sopra non avrà un contrasto sufficiente e sarà difficile da leggere.
Seleziona Tipo overlay: Colore, Colore: #1E293B e Opacità: 0.3
Ora che abbiamo reso l'immagine hero più scura, possiamo aggiungere del testo.
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à.
Trova il miglior ristorante a Philadelphia.
Per aggiungere la ricerca GD all'intestazione della homepage, trascina il GD > Search blocco in il contenitore hero.
Successivamente, aggiungi un'altezza minima a questo contenitore hero. Imposterò l'altezza e la larghezza a 800px, e imposterò anche la larghezza del contenitore a larghezza intera e il suo larghezza del contenuto a Boxed.
Ora l'intestazione della homepage appare così, con il titolo della pagina e dello spazio aggiuntivo.
È il momento di rimuovere il titolo della pagina e lo spazio aggiuntivo nella sezione dell'intestazione.
Fai clic sul titolo della pagina e vedrai un'icona a forma di occhio; fai clic su di essa per nascondere il titolo della pagina e rimuovere lo spazio aggiuntivo.
È il momento di aggiungere altre sezioni necessarie alla homepage. Aggiungerò ora una sezione categorie.
Sotto la sezione hero, fai clic sull'icona più per aggiungere un altro contenitore, poi aggiungi il GD > Categories blocchi lì.
Ora configureremo alcune impostazioni necessarie in questo blocco GD > categoria. Imposteremo il Tipo di design su Sfondo immagine, con 4 elementi per riga, e abiliteremo la usa immagine categoria impostazione.
Puoi assegnare un'immagine a una categoria modificandola da wp-admin -> luoghi -> Categorie luoghi.
Ogni categoria ha un'opzione per impostare un'immagine predefinita
Ora è il momento di aggiungere un po' di padding a questo nuovo contenitore. Puoi fare clic sul contenitore esterno e impostare il padding desiderato dalla sezione Stile. Sto impostando 70px di padding in alto e in basso.
Ora, velocemente, aggiungeremo altri contenitori. Aggiungerò gli annunci recenti sotto la sezione categorie usando il GD > Listings widget.
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
Aggiungiamo alcune mappe in modo che gli utenti possano filtrare gli annunci con diversi filtri e visualizzarli sulla mappa.
Usiamo GD > Mappa con le seguenti impostazioni:
Tipo di mappa: Directory Map
Opzioni mappa: Abilita tutte
Aggiungiamo un po' di stile facendo clic sulla scheda Stili e impostando la larghezza su 100% e l'altezza su 600px per garantire che sia visualizzata correttamente.
Renderemo anche il contenitore della mappa a larghezza intera per farlo sembrare più ampio e dall'aspetto gradevole.
Fai clic sul contenitore esterno della mappa e, nelle impostazioni generali, imposta Larghezza contenitore: Larghezza intera e Larghezza contenuto: Larghezza intera.
Ora aggiungiamo un altro contenitore per mostrare i post recenti. Puoi usare il Post Grid blocco contenitore fornito dal plugin Spectra Blocks.
Congratulazioni! La tua homepage è completata.
Se vuoi, puoi aggiungere altri contenitori o CTA.
2. Design della pagina annunci e ricerca del sito directory Astra
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 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.
Ora, 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 affinché l'utente possa effettuare ricerche dalla pagina archivio.
Nella colonna destra trascineremo il blocco GD > Map blocco.
Manterremo tutte le impostazioni predefinite per GD > Mappa. Impostiamo un'altezza, e ho deciso di assegnarle un'altezza di 100vh.
Ora imposta semplicemente il contenitore principale a larghezza intera seguendo le istruzioni mostrate nell'immagine.
Ora, dopo questo, la pagina Archivio annunci è pronta.
La versione gratuita di Astra ha impostazioni limitate, quindi potresti aver bisogno del seguente snippet CSS per rendere il contenuto del contenitore sinistro della stessa dimensione del contenitore della mappa a destra. Puoi incollarlo nel personalizzatore del tema da wp-admin > Aspetto > Personalizza
.geodir-archive .wp-block-geodirectory-geodir-widget-loop .geodir-loop-container .geodir-listing-posts{ overflow-y: scroll; max-height: 100vh; }
C'è un modo ancora più semplice. Se imposti la tua pagina a larghezza intera, puoi aggiungere il blocco GD > Simple Archive come spiegato nel nostro tutorial Come costruire un sito web directory con Elementor.
Per la pagina di ricerca, ripetiamo lo stesso processo.
Pagina di ricerca
Vai su Geodirectory > Impostazioni > Generali > Pagine > Clicca su modifica il template della 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 singolo Annuncio del sito web directory con Astra
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 i contenuti predefiniti e aggiungeremo un contenitore con le impostazioni Larghezza contenitore: Larghezza intera e Larghezza contenuto: Larghezza intera.
Ora aggiungiamo un carosello di immagini in cima alla pagina di dettaglio dell'Annuncio. Trascineremo il blocco GD > Post Image in questo contenitore.
Imposteremo il Limite immagini a 10 e Mostra limite a 1, in modo che venga visualizzata una sola immagine per ogni slide.
Ora aggiungiamo un altro contenitore sotto questo, dove inseriremo gli altri blocchi richiesti della pagina Geodirectory Detail.
Ora aggiungiamo qui uno per uno tutti gli shortcode richiesti della pagina GD Detail. Che includono GD > Single Taxonomies, GD > Single Tabs
È ora di aggiungere alcuni widget nella barra laterale. Andiamo su wp-admin > Aspetto > Widget.
Aggiungi il widget GD > Author Action nella barra laterale principale. Questo widget fornirà all'Autore dell'Annuncio le opzioni Modifica e 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, il nostro Pagina di dettaglio dell'inserzione è stata completata.
Aggiungere funzionalità premium al tuo sito web directory con Astra
Se lo desideri, ora puoi aggiungere funzionalità premium alla tua directory, come:
- Annunci a pagamento: Con il componente aggiuntivo GeoDirectory Listing Price Manager, puoi impostare i prezzi per la pubblicazione 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 più o meno tag e categorie, abilitare o disabilitare campi personalizzati specifici. 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 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 di articoli artigianali, vendere biglietti per eventi o vendere coupon sconto.
Sviluppa il tuo sito directory perfetto con questa risorsa completa: Creare il tuo sito web directory: Una guida completa.
Le possibilità sono infinite.
Newsletter - Rimani aggiornato!
Ricevi le ultime notizie, consigli e contenuti esclusivi direttamente nella tua casella di posta.
