Creare un sito web di directory con il tema Kadence
Qual è il modo migliore per creare un sito web di directory con Kadence?
Creare un sito web di directory con Kadence richiede l'utilizzo del tema Kadence, di Kadence Blocks e del miglior plugin di directory per Kadence.
Il tema Kadence è un tema WordPress versatile e altamente personalizzabile che fornisce una solida base per il tuo sito di directory.
Kadence Blocks, d'altra parte, è una libreria di blocchi Gutenberg che ti consente di creare layout personalizzati e aggiungere varie funzionalità al tuo sito web.
Infine, il plugin GeoDirectory è di gran lunga il miglior plugin di directory per il tema Kadence: uno strumento potente che ti permette di aggiungere funzionalità da directory al tuo sito, come inserzioni di attività commerciali, recensioni degli utenti e funzionalità di ricerca avanzata.
Insieme, questi strumenti offrono una soluzione completa per creare un sito web di directory robusto e ricco di funzionalità.
Sito web di directory con Kadence usando solo un tema gratuito e plugin gratuiti
In questo tutorial, ti guideremo attraverso il processo di creazione di un sito web di directory completo utilizzando risorse WordPress gratuite, come il tema Kadence gratuito, il plugin Kadence Blocks e il plugin GeoDirectory gratuito.
Il sito web di directory includerà:
- Inserzioni illimitate con campi personalizzati illimitati.
- Funzionalità di ricerca per prossimità.
- Recensioni degli utenti.
- Un modulo di invio front-end, che consente agli utenti di inviare, modificare e/o eliminare le proprie inserzioni.
Supponiamo che tu abbia già un'installazione WordPress con un provider di hosting. Per questo tutorial, creeremo una directory di attività commerciali per la città di Philadelphia.
Ecco cosa tratteremo in questo tutorial:
- Installa e configura il tema e i plugin
- Procedura guidata di installazione di GeoDirectory
- Progetta il sito web di directory con Kadence
- Il design della pagina delle inserzioni e della ricerca
- Il design della pagina della singola inserzione
- Aggiungere funzionalità premium al tuo sito web directory con Kadence
- Template per siti web directory di Kadence Blocks
Al termine di questo tutorial, avrai un sito web directory completamente funzionante e pronto per andare online. Cominciamo!
Installa e configura il tema e i plugin di Kadence
1. Installa il tema Kadence
Per iniziare, installeremo un tema. Per questo tutorial, utilizzeremo il tema Kadence.
Vai su Aspetto >> Temi
Seleziona Aggiungi nuovo, Installa, e Attiva il tema Hello.
2. Installa il plugin Kadence Blocks
Ora dovrai installare il plugin Kadence Blocksì.
Vai su Plugin >> Aggiungi nuovo.
Cerca Kadence. Installalo e attivalo.
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.
- Creare o selezionare un progetto esistente.
- Abilitare le chiavi.
- 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)
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.
Clicca sul pulsante Genera chiave e segui i passaggi di questo guida per generare una chiave API valida.
I passaggi essenziali sono:
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 il nostro plugin 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 sito web di directory con Kadence
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 la suite di strumenti di Kadence.
1. Design della home page della directory con Kadence
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.
Ora clicca sull'icona delle impostazioni della pagina nella sezione in alto a destra dello schermo.
Applica le seguenti modifiche:
- Titolo pagina: Disabilita
- Layout pagina: Larghezza intera
- Stile contenuto: Non riquadrato
Lascia il resto invariato. Successivamente, vai a Aspetto > Personalizza > Impostazioni Homepage e seleziona la pagina sopra indicata come Home.
Selezioneremo la pagina dei Post in seguito.
Prima di creare il contenuto della Home Page, dobbiamo lavorare sull'intestazione.
Torneremo a progettare il contenuto della Home Page dopo.
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 spuntare 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 otto link:
- Home
- Chi siamo
- Blog
- Luoghi
- Aggiungi Luoghi
- Profilo
- Accedi
- Logout
Il link Login (dagli Endpoint di UsersWP) apparirà solo per gli utenti non connessi, mentre i link di logout e profilo appariranno solo per gli 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.
Se hai usato la pagina di esempio, elimina il testo. Se hai creato una nuova pagina, aggiungi un nuovo blocco Row Layout.
Digita /Row dove è scritto Digita / per scegliere un blocco e seleziona un Kadence Row Layout Block. Poi seleziona la riga singola (1ª opzione)
Nell'opzione Larghezza massima contenuto inserisci 800.
Successivamente, fai clic su Stile dalle schede superiori del blocco. Fai clic su Seleziona immagine nell'opzione Immagine di sfondo
Per la sezione Hero, utilizzeremo questa immagine gratuita di Philadelphia da Pexels.com (Grazie, @Kelly).
Carica la tua immagine e seleziona l'opzione Fissa per l'allegato dell'immagine di sfondo, quindi aggiorna.
Ora puoi vedere solo una striscia della nostra immagine, ma i passaggi successivi la faranno apparire come necessario.
L'immagine ha bisogno di una sovrapposizione, altrimenti qualsiasi testo sopra non avrà un contrasto sufficiente e sarà difficile da leggere.
Seleziona le impostazioni di sovrapposizione dello sfondo, imposta l'Opacità overlay a 45 e il Colore overlay a 000000 (nero).
Ora clicca sulla scheda Avanzate e aggiungiamo un po' di padding. Per la precisione, 4 em di padding in alto e in basso. Per farlo, clicca sull'icona Imposta dimensione personalizzata, inserisci 4 nei campi di input superiore e inferiore, e seleziona EM come unità di misura.
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.
Clicca di nuovo al centro dell'immagine e aggiungi un blocco Testo (Avanz.).
My Philadelphia Directory
Nella sezione Generale del blocco seleziona H1 come Tag HTML. Allineamento testo al centro.
Clicca sulla scheda Stile e seleziona il colore FFFFFF (bianco).
Nella sezione DIMENSIONE FONT, clicca sull'icona Imposta dimensione personalizzata e imposta 40 come dimensione del carattere.
Infine, in Impostazioni tipografia avanzate > PESO DEL FONT seleziona Grassetto 700.
A questo punto, possiamo aggiungere il modulo di ricerca alla sezione hero del nostro sito directory Kadence.
Clicca sul pulsante + nell'angolo in basso a destra della sezione Titolo per aggiungere una nuova sezione.
Cerca e seleziona un altro blocco Sezione, clicca sul pulsante più al centro della nuova sezione e aggiungi un blocco GD > Ricerca.
A questo punto abbiamo completato la sezione Hero della home page: ecco come appare.
È il momento di aggiungere altre sezioni necessarie alla home page; ora aggiungerò una sezione con gli annunci recenti.
Sotto la sezione hero, aggiungi un Row Layout blocco cliccando sull'icona più e aggiungi un Sezione blocco al suo interno.
Ora aggiungeremo un blocco titolo e imposteremo la Tipografia su
Dimensione: Grande
Stile maiuscolo/minuscolo: Ab
Testo: Annunci aziendali recenti
Per mostrare gli annunci più recenti, aggiungiamo il blocco GD > Listings qui sotto con le seguenti impostazioni.
Ordina per: Più recenti
Layout: Visualizzazione a griglia (4 colonne)
Ora aggiungiamo un Row Layout blocco cliccando sull'icona più e aggiungendo un Sezione blocco al suo interno.
Nel Tipografia impostazione del blocco intestazione
Dimensione: Grande
Stile maiuscolo/minuscolo: Ab
Testo: Sfoglia i più popolari nella tua città
Ora aggiungi il GD>Category blocco al suo interno per visualizzare tutte le categorie.
Nello stile aggiungi le seguenti impostazioni
Elementi per riga: 4
Tipo di design: Sfondo immagine
Ora aggiungeremo un'altra sezione per Come funziona. aggiungiamo un Row Layout blocco facendo clic sull'icona più e selezionando il layout a 4 colonne.
Ora aggiungi il Info box blocco in tutti i contenitori.
Nel contenuto larghezza massima: eredita la larghezza massima dal tema.
Ora imposteremo l'icona per ogni contenitore. Fai clic su qualsiasi Info Box e nelle impostazioni del blocco Stile > Impostazioni media
Tipo di media: Icona
Ora impostiamo il colore delle icone
Colore icona: #FFFFFF
Sfondo icona: #FF6616
Padding media: 20px
Raggio bordo icona: 15px
Ora aggiungiamo un altro Row Layout
aggiungeremo una CTA al suo interno.
Aggiungi un'intestazione e nel Tipografia impostazione del blocco intestazione
Dimensione: Grande
Stile maiuscolo/minuscolo: Ab
aggiungeremo il blocco pulsante singolo e nelle impostazioni di stile di questo blocco imposta
Colore: #FFFFF
Colore di sfondo: #FF6A00
Raggio del bordo: 10px
Ora configureremo il Footer.
Vai su Aspetto > Personalizza > Footer
Aggiungeremo qui alcuni widget del menu footer e Kadence fornisce un blocco Social. Puoi aggiungerlo nella parte superiore della sezione Footer.
Quando fai clic sull'icona delle impostazioni del widget social, si aprirà una schermata in cui potrai configurare le opzioni Social.
Congratulazioni, la tua Homepage è ora pronta.
Design della pagina degli annunci e della pagina di ricerca del sito directory con Kadence
Ora dobbiamo progettare due pagine fondamentali 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.
Ho deciso che il layout della pagina degli annunci avrà gli annunci sulla sinistra e, sulla 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.
Aggiungi un layout a riga con
Imposta un rapporto 60 – 40 trascinando il punto indicato nell'immagine qui sotto.
Ora nella sezione sinistra aggiungeremo tutti i blocchi necessari per la GD Archive pagina. Ad esempio GD > Loop Action, GD > Loop, GD > Loop Pagination, e GD > Search
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.
Nel contenitore riga padre del blocco mappa, aggiungeremo una classe CSS kt-inside-inner-col
e aggiungeremo il seguente CSS nel personalizzatore del tema tramite Aspetto > Personalizza > CSS aggiuntivo
body.archive .kt-inside-inner-col { position: sticky; top: 0; }
Infine, imposteremo la pagina a larghezza intera cliccando sull'icona Kadence in alto a destra e impostando il Layout di pagina su Larghezza intera.
e imposteremo anche il seguente stile per il layout della riga principale.
Larghezza massima: 100%
Margine colonna: SW
Margine riga: Nessuno
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.
Un'altra opzione per creare facilmente questo template è utilizzare un template di pagina a larghezza intera e il GD > Simple Archive blocco.
Design della pagina di dettaglio di un singolo annuncio del sito directory con Kadence
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 Row Layout con: Larghezza contenuto: 100%
Aggiungi una classe (single-header-image) a questo layout di riga da Avanzate > Classe CSS aggiuntiva
Ora aggiungeremo un Row Layout contenitore.
Nel contenitore di sinistra, aggiungeremo il blocco GD > Post Badge per definire alcuni badge e nel contenitore di destra aggiungeremo il blocco GD > Post Favorite blocco.
All'interno del Layout di riga padre di questo contenitore, aggiungeremo una classe personalizzata (header-position-feature).
Sotto di questo, aggiungeremo uno slider di immagini e per farlo trascineremo il blocco GD > Post Image blocco.
selezioneremo le seguenti impostazioni
Tipo di output: Slider
Avvio automatico: Attiva
Animazione: Slide
Ora aggiungeremo un Row Layout Contenitore.
All'interno del contenitore di sinistra, aggiungeremo i blocchi necessari per la pagina di dettaglio GD, che include GD > Single Taxonomies, GD > Single Tabs, GD > Single Next Prev.
Con le seguenti impostazioni
Larghezza massima: 1200px
Margine colonna: SW
Margine riga: Nessuno
Nel contenitore di destra, utilizzeremo i blocchi GD > Output Location e GD > Author Actions blocco.
aggiungeremo un design extra al layout della pagina di dettaglio GD con il CSS qui sotto.
Aggiungi il seguente CSS in Aspetto > Personalizza > CSS aggiuntivo
.single-header-image { max-height: 400px !important; overflow: hidden; } .geodir-page-single .entry-header { display: none; } .geodir-page-single .content-area { margin: 0px; } .geodir-page-single .content-container { padding: 0px; max-width: 100%; } @media (min-width: 576px) { .bsui .row.row-cols-md-0 .card .embed-responsive { max-width: 100% !important; display: inline-block; } } .geodir-page-single .entry-content-wrap { padding: 0px !important; } .geodir-page-single .entry-content { margin-top: 0px; } .single-header-image { max-height: 400px !important; overflow: hidden; } .single-feature { padding: 10px !important; } .header-position-feature { position: absolute !important; width: 100%; } .kb-row-layout-id15_c06314-2b > .kt-row-column-wrap { z-index: 1; position: relative; padding:0px !important; }
Ora la nostra pagina di dettaglio GD è pronta.
Aggiungere funzionalità premium al tuo sito web directory con Kadence
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.
Segui il processo di creazione con facilità grazie a questa guida: Una guida passo dopo passo per creare un sito web directory.
Le possibilità sono illimitate.
Crea un sito web directory con Kadence Blocks
Il tema Kadence offre molti blocchi estesi. Puoi trovare questi blocchi all'interno di Kadence Blocks elenco e puoi trovarli anche negli elenchi di blocchi di Gutenberg per utilizzarli.
All'interno di ogni pagina, hai un pulsante Libreria Design in alto. Puoi cliccarci sopra e utilizzare tutti i layout di blocchi predefiniti da lì.
Template per siti web directory di Kadence Blocks
GeoDirectory ha molte demo predefinite disponibili con il tema Kadence. Puoi trovare tutte queste bellissime demo qui.
Puoi importare questi template nel tuo sito web. Hai bisogno del Ayecode si connette plugin, scarica e attiva questo plugin se non è già installato.
Dopo aver attivato questo plugin, devi collegare il tuo abbonamento.
Puoi importare la demo cliccando sul pulsante visualizza accanto alla demo di Kadence.
Esempi sono il Tema per Directory Immobiliare, il Tema per Directory di Ristoranti, il Tema per Job Board e il Tema per Directory di Yoga e Saloni design per il tema Kadence.
Newsletter - Rimani aggiornato!
Ricevi le ultime notizie, consigli e contenuti esclusivi direttamente nella tua casella di posta.