Creare un sito web di directory con il tema Neve e il plugin Otter
Ecco una guida passo dopo passo per costruire un sito web directory usando il tema Neve e il plugin Otter blocks:
- Installa il Neve tema
- Installa e configura GeoDirectory
- Installa il plugin Otter
- 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:
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:
- 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.
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:
- 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.
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:
- 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.
- 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.
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.
Newsletter - Rimani aggiornato!
Ricevi le ultime notizie, consigli e contenuti esclusivi direttamente nella tua casella di posta.