Creare un sito web di directory con Beaver Builder
Ecco una guida semplice e chiara su come creare un sito web directory utilizzando il tema Beaver Builder e il plugin Beaver Builder:
- Installa il tema Beaver Builder
- Installa e configura GeoDirectory
- Installa il plugin Beaver Builder & Beaver Themer
- Progetta il sito web Directory usando il plugin Beaver Builder
Il Beaver Builder Theme, utilizzato insieme al plugin GeoDirectory e al plugin Beaver Builder, è un ottimo modo per creare una directory online flessibile. Con questa combinazione, puoi aggiungere facilmente funzionalità basate sulla posizione geografica, personalizzare il layout e includere contenuti dinamici per un'esperienza intuitiva.
Questo sistema consente a sviluppatori e designer web di costruire un sito web directory di alta qualità per settori specifici o per esigenze più ampie della comunità.
Vediamo nel dettaglio come farlo.
In questo tutorial vedremo come:
Installazione del tema e dei plugin.
1. Installa il tema Beaver Builder
Dobbiamo installare un tema e, per questo tutorial, installerai il Beaver Builder Tema.
Vai su https://www.wpbeaverbuilder.com e acquista il Beaver Builder Pro Plugin, inclusi i temi Beaver e Beaver Themer plugin.
Scarica questi prodotti dalla sezione Il mio account pagina.
Vai su Aspetto >> Temi.
Seleziona Aggiungi nuovo, installa il tema Beaver e il tema figlio, e attiva il Child Beaver Tema.
2. Installa il Beaver Builder Pro & Beaver Themer plugin
Beaver Builder Pro e Beaver Themer sono potenti plugin WordPress progettati per migliorare l'esperienza di creazione e personalizzazione del sito web.
Vai su Plugin >> Aggiungi nuovo >> Clicca su Carica plugin
Carica il file zip del plugin e attiva entrambi i plugin uno alla volta.
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. Abbiamo completato l'installazione dei plugin.
4. 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 Beaver Builder 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 Beaver Builder 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. Beaver Builder 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.
Ora imposta il logo da Aspetto >> Personalizza >> Intestazione >> Logo intestazione
impostato. Tipo di logo: Intestazione e carica l'immagine del logo.
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 > 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 > Generale > Layout e configureremo le seguenti impostazioni
Larghezza: Larghezza intera
Larghezza contenuto: 1200
andremo su Aspetto > Personalizza > Generale > Testo.
Famiglia di font: Outfit
Peso font: Light
Dimensione font: 18
Interlinea: 1.45
Il Contenuto
Inizierò a costruire questa pagina da zero utilizzando il Beaver Builder plugin.
Per questo abbiamo bisogno di un hero header nella homepage.
Prima di tutto, modifichiamo la homepage in Beaver Builder facendo clic su Avvia Beaver Builder.
Ora trascina un contenitore di riga facendo clic sull'icona più in alto a destra.
Dalla scheda Stile riga imposta
Larghezza: Larghezza intera
Larghezza contenuto: Fisso
Altezza minima: 600px
Tipo di sfondo: Foto
Sorgente foto di sfondo: Libreria multimediale
Posizione: Centra
Scala: Riempi
Trasciniamo ora un'intestazione e il GD > Seach Block sopra questa riga.
Aggiungiamo ora un contenitore di riga vuoto e aggiungeremo un GD > Categories block al suo interno.
Imposta il GD > Categories block con le seguenti impostazioni
Tipo di design: Sfondo immagine
Elementi per riga: 4
Attiva il Usa immagine categoria opzione
Puoi impostare l'immagine per una categoria modificando la categoria da wp-admin -> places -> Place Categories.
Ogni categoria ha un'opzione per impostare un'immagine predefinita
Ora aggiungeremo una riga vuota con layout a 1 colonna.
con le seguenti impostazioni
Colore: rgba(234,240,255,0.64)
Larghezza: Larghezza intera
Larghezza contenuto: Fisso
Ora aggiungeremo un elemento intestazione
Testo: Annunci recenti
Dimensione: 42
Allineamento: Centra
Successivamente, modificheremo alcune impostazioni in questo GD > Listings block.
Imposteremo: Ordinamento: recente
Griglia: 4
Aggiungeremo un contenitore di riga con le seguenti impostazioni.
Larghezza: Larghezza intera
Larghezza contenuto: Larghezza intera
Aggiungi il GD > Map block al suo interno e lasceremo le impostazioni predefinite.
Ora, infine, abbiamo bisogno di una CTA in fondo.
Aggiungeremo una riga vuota con un layout a due colonne e le seguenti impostazioni.
Larghezza: Larghezza intera
Larghezza contenuto: Fisso
Aggiungiamo ora un'intestazione e del contenuto nella colonna sinistra, mentre nella colonna destra aggiungeremo un pulsante per indirizzare gli utenti alla pagina di aggiunta annuncio.
Congratulazioni! La tua homepage è completata.
3. Beaver Builder 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 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 gli annunci a sinistra e, a destra, una mappa fissa che mostra la posizione precisa degli annunci.
È molto semplice.
Pagina degli annunci
Vai su Beaver Builder > Themer Layout > Aggiungi nuovo e seleziona
Titolo: GD Archive
Tipo: Themer Layout
Layout: Archivio
Fai clic su Aggiungi layout tema pulsante
Nella pagina successiva, seleziona Posizione: Archivio luoghi.
Dopo aver salvato queste impostazioni, clicca su Launch Beaver Builder. Aggiungeremo una riga vuota con layout a 1 colonna.
Larghezza: Larghezza intera
Colore di sfondo: #577196
Aggiungeremo un titolo di archivio.
Ora aggiungiamo una riga con un layout a due colonne.
Larghezza: Larghezza intera
Larghezza contenuto: Larghezza intera
Successivamente, 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 destra trascineremo il blocco GD > Map blocco.
Lasceremo tutte le impostazioni predefinite per GD > Map. Impostiamo un'altezza: ho deciso di assegnarle un'altezza di 100vh.
Aggiungi il seguente stile nel personalizzatore del tema da Aspetto => Personalizza => Aggiungi CSS.
.geodir-archive .geodir-listings .geodir_location_listing{ overflow-y: scroll; max-height: 100vh; padding-right: 15px; }
Dopodiché, la pagina Archivio annunci è pronta.
Un'altra opzione è utilizzare il block GD > Simple Archive, come spiegato in questo tutorial sulla creazione di un Directory Website with Elementor.
Per la pagina di ricerca, ripetiamo lo stesso processo.
Pagina di ricerca
Vai su Beaver Builder > Themer Layout > Aggiungi nuovo e seleziona
Titolo: GD Search
Tipo: Themer Layout
Clicca su Aggiungi Theme Layout pulsante
Copia tutto il contenuto del GD Archive template Themer Layout e incollalo nel GD Search Template di layout Themer.
Ora vai su Geodirectory > Impostazioni > Generale > Pagine e nel campo Layout Themer pagina di ricerca seleziona GD Search
Ora le nostre pagine GD Search e Archivio sono pronte.
4. Beaver Builder Design della pagina di inserzione singola del sito web di directory
Vai su Beaver Builder > Themer Layout > Aggiungi nuovo e seleziona
Titolo: GD Details
Tipo: Themer Layout
Layout: Singolare
Fai clic su Aggiungi layout Themer pulsante.
Nella pagina successiva, seleziona Posizione: Tutti i luoghi
Dopo aver salvato queste impostazioni, clicca su Launch Beaver Builder. Aggiungeremo una riga vuota con layout a 1 colonna.
Larghezza: Larghezza intera
Larghezza contenuto: Larghezza intera
Padding: 0
Prima di tutto, aggiungi uno slider di immagini nella parte superiore della pagina Dettaglio inserzione.
Trascineremo il blocco 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 aggiungiamo una riga con un layout a due colonne.
Ora, aggiungiamo individualmente tutti gli shortcode della pagina GD Detail richiesti nella colonna di sinistra.
Che include GD > post Title, GD > Single Taxonomies, GD > Single Tabs, e GD > Single Next Prev.
Aggiungeremo GD > Author Action e GD > Output Location blocco nella colonna di destra.
Dopo averlo fatto, la nostra pagina Dettaglio inserzione è completa.
Aggiungere funzionalità Premium al tuo Beaver Builder 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.
Segui questo tutorial per un approccio passo dopo passo: Tutorial: Come creare un sito directory.
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.