Come creare un sito web di directory eccezionale con Bricks Builder
Come costruire un sito web directory con Bricks Builder?
🚨 Nuovo Template Bricks Disponibile! 🚨
Abbiamo appena rilasciato uno straordinario template per Bricks Builder per rendere la creazione del tuo sito directory basato su GeoDirectory 100 volte più facile e veloce!
🎯 Demo live: Scoprilo qui
📥 Download e Tutorial: Scarica il template Bricks Directory
💬 Partecipa alla conversazione: Discutine nel nostro forum della community
Provalo e dicci cosa ne pensi!
Se invece vuoi progettare il tuo template personalizzato, ecco una guida introduttiva per costruire un sito directory usando Bricks builder e il plugin GeoDirectory:
- Installa il tema Bricks
- Installa e configura GeoDirectory
- Progetta il sito directory con Bricks Builder
Utilizzare Bricks Builder insieme al plugin GeoDirectory ti permette di creare una directory online straordinariamente sofisticata.
Questa combinazione consente di integrare facilmente funzionalità basate sulla posizione geografica, personalizzare l'estetica e inserire blocchi di contenuto dinamico, dando vita a un'esperienza utente intuitiva e coinvolgente.
In questo tutorial, tuttavia, ci concentreremo sulla semplicità e sulla facilità d'uso.
Utilizzeremo Bricks builder principalmente con gli shortcode di GeoDirectory.
Nelle prossime settimane, approfondiremo l'argomento e pubblicheremo tutorial dettagliati su come progettare ogni template GD principalmente con gli elementi Bricks e i query loop (dati dinamici).
In questo tutorial vedremo come:
Installazione del tema e dei plugin.
1. Installa il Bricks Tema
Prima di tutto, scarica il tema e il tema figlio dal sito Bricks ufficiale.
Installa il tema nel tuo sito WordPress da WP-Admin >> Aspetto >> Temi
Attiva la licenza del tema.
2. Installa GeoDirectory
Infine, devi installare GeoDirectory.
Vai su Plugin >> Aggiungi nuovo, cerca GeoDirectory. Installalo e attivalo, e avremo completato l'installazione dei plugin.
3. 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 OpenStreetMaps.
Per questa guida, scegliamo OpenStreetMaps.
Se invece vuoi usare Google Maps, dovrai fare alcune operazioni aggiuntive:
- Clicca sul pulsante "Genera chiave" e segui le istruzioni in questa guida per creare una chiave API valida.
- Ecco i passaggi più importanti:
- Attiva le chiavi.
- Crea un nuovo progetto o selezionane uno esistente.
- Ottenere la chiave.
- Configura un account di fatturazione.
- Limita la chiave API (in modo che funzioni solo dall'URL del tuo sito).
Il quarto punto è obbligatorio, ma paghi solo se superi i 200 $ al mese.
Questo credito gratuito è più che sufficiente per il 99% delle directory.
Impostazione della città predefinita
Successivamente, sceglierai la posizione predefinita, ovvero la città a cui è dedicata la directory.
Noi sceglieremo Philadelphia come città predefinita, ma puoi selezionare qualsiasi luogo tu voglia.
Se stai creando una directory per più 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.
Non è necessario usare AyeCode Connect per questo tutorial. È indispensabile solo se vuoi 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 consiste nell'inserire alcuni annunci di esempio. Questo configura anche le categorie per gli annunci, che potrai modificare in seguito come preferisci.
Per ora, non aggiungeremo widget nella barra laterale né voci di menu. Ce ne occuperemo più avanti.
Progetta il Bricks Sito web Directory
Ora che abbiamo installato il tema e i plugin e completato la configurazione iniziale di GeoDirectory, possiamo iniziare a progettare il nostro sito directory.
1. Il Logo
Prima di tutto, abbiamo bisogno di un logo per il nostro sito web.
Non è necessario assumere un designer per creare la prima versione del tuo logo.
Uno degli errori più grandi che puoi commettere quando avvii una nuova directory è spendere troppo tempo e denaro prima di verificare se le persone ne hanno effettivamente bisogno.
Puoi creare un logo in soli cinque minuti usando un'app come Canva, che è economica e davvero valida.
Per una versione base del tuo prodotto (chiamata MVP, ovvero minimum viable product), un logo realizzato con Canva andrà benissimo.
Ci sono tantissimi template di logo tra cui scegliere, e va bene se il tuo primo logo non è perfetto o super originale.
Se il tuo progetto inizia ad andare bene, potrai sempre lavorare per migliorare o cambiare completamente il logo in un secondo momento.
Di solito, un logo ordinario non è il motivo per cui un progetto fallisce. Useremo questo logo quando creeremo l'intestazione del sito.
1. Bricks 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.
Dovrai impostare questa pagina come homepage del sito; per farlo, vai su wp-admin >> Impostazioni >> Lettura
Ora configuriamo prima il menu di navigazione del sito.
Il Menu di navigazione
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'opzioneMenu dell'intestazione – Utente connesso e Menu dell'intestazione – Utente non connesso" opzioni.
Se vuoi, puoi far apparire lo stesso menu anche su mobile oppure crearne uno diverso da mostrare 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
- Luoghi e aggiungi luoghi
- Cerca
- Blog
- Account
- Pagine di registrazione e accesso
L'Header
Per impostare l'intestazione del sito, vai su wp-admin >> Bricks >> Template >> Aggiungi nuovo
Crea un template Bricks per l'intestazione.
selezioneremo un layout a due colonne con rapporto 30::70.
Nella colonna sinistra trascina il blocco Logo e carica il logo del sito al suo interno.
Impostiamo la larghezza: 200px
Nella colonna destra trascina il Menu di navigazione nella colonna destra.
con impostazioni come
Allinea asse principale: center
Allinea asse secondario: Destra
Tipografia
Trasformazione testo: Poppins 500
Il Contenuto
Ora progettiamo la homepage. Modificheremo la homepage facendo clic sul pulsante Modifica con Bricks.
Aggiungeremo un contenitore vuoto con le seguenti impostazioni
Allineamento autonomo: Centra
Allinea assi principali: Centra
Allinea asse secondario: Centra
Nel Stile scheda della sezione
Padding: 50px (in alto) 50px (in basso)
Altezza minima: 500
Carica immagine di sfondo
Posizione sfondo: Centro Centro
Ripetizione sfondo: Ripeti
Ora aggiungiamo un tag di intestazione sopra questo contenitore.
Testo: Find The Best Restaurant In Philadelphia
Ora nella scheda stile del tag di intestazione aggiungi le seguenti impostazioni.
Tipografia:
Dimensione carattere: 48px
Allineamento testo: Centra
Trasformazione testo: Prima lettera maiuscola
Font: Poppins
Ora aggiungi un blocco shortcode sotto di esso e inserisci il [gd_search mb=”3″] shortcode al suo interno.
Ora aggiungiamo un altro contenitore vuoto e inseriamo un blocco shortcode con il seguente shortcode.
[gd_categories post_type="0" max_level="1" max_count="all" max_count_child="all" sort_by="az" design_type="image" row_items="4" card_shadow="small" use_image="1" image_size="large" cat_text_color_custom="#000000" cat_font_size="0" badge_text_color_custom="#000000" badge_color="light" badge_font_size="0" title_tag="h4" mb="3"]
Nella scheda stile del contenitore delle categorie, vai su Layout > Margine
Padding superiore: 50px
Padding inferiore: 50px
Padding sinistro: 50px
Padding destro: 50px
Ora aggiungeremo una sezione per mostrare le attività recenti.
aggiungiamo un'altra sezione vuota con un tag intestazione e
Testo: Annunci recenti
con le seguenti caratteristiche tipografiche come
Dimensione font: 32px
Ora sotto di esso aggiungiamo il seguente shortcode
[gd_listings post_type="gd_place" post_limit="8" add_location_filter="1" sort_by="latest" title_tag="h3" layout="4" view_all_link="1" bottom_pagination="1" slide_interval="5" mb="3"]
Ora sotto di esso vogliamo aggiungere una mappa che elenca tutte le attività.
Per farlo, aggiungeremo un contenitore vuoto e un blocco shortcode al suo interno con il seguente shortcode.
con il seguente stile per il contenitore.
Padding superiore: 50px
Padding inferiore: 50px
[gd_map map_type="auto" post_settings="1" width="100%" height="425px" maptype="ROADMAP" zoom="0"]
Ora vogliamo aggiungere una CTA, per la quale utilizzeremo un layout a due colonne.
Con le seguenti impostazioni
Direzione: Orizzontale (riga)
Allineamento autonomo: Centra
Allinea asse secondario: Centra
Spazio tra colonne: 20
Spazio tra righe: 20
Nella colonna sinistra trascineremo un'immagine, mentre nella colonna destra aggiungeremo del testo e un pulsante per accedere alla pagina degli annunci.
Il Footer
Ora, per progettare e creare un footer, vai su wp-admin >> Bricks >> Template >> Aggiungi nuovo
e seleziona il tag template come Footer e modifica il template con Bricks.
Ora aggiungiamo un contenitore vuoto con il Colore di sfondo: #072027
Aggiungi il blocco di testo base con del testo e uno stile Allineamento testo: Centra
Dopo questo, la nostra homepage è pronta.
2. Bricks Design delle pagine Annunci e Ricerca del sito Directory
Per una directory devi creare due pagine importanti: una per gli annunci (che include archivio, categorie e tag) e un'altra per i risultati di ricerca.
GeoDirectory le configura automaticamente con un design di base. Questa guida ti aiuterà a perfezionare un po' l'aspetto di queste pagine.
Poiché la pagina degli annunci e quella di ricerca sono molto simili, le progetteremo una sola volta e utilizzeremo lo stesso layout per entrambe.
La nostra scelta per il design della pagina degli annunci è di avere i risultati a sinistra e una mappa fissa a destra, che mostra la posizione di ciascun annuncio.
È 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 della pagina e modificalo con Bricks Builder.
Ora aggiungeremo una sezione vuota e al suo interno trascineremo il Titolo del post blocco.
Dalle impostazioni di stile della sezione, imposta
Colore di sfondo: #072027
Padding: 30px 10px 30px 10px
Per il blocco del titolo del post, imposta la tipografia su
Font: Poppins
Colore: #fffff
Ora aggiungiamo una sezione vuota e al suo interno un contenitore a due colonne (50::50).
Nel contenitore di sinistra aggiungeremo blocchi shortcode con gli shortcode relativi alla pagina archivio di GD, come GD > Loop Action, GD > Loop, GD > Loop Pagination e GD > Search in cima, così l'utente potrà effettuare ricerche dalla pagina archivio.
[gd_search bg='' mt='' mr='' mb='3' ml='' pt='' pr='' pb='' pl='' border='' rounded='' rounded_size='' shadow='' ] [gd_loop_actions bg='' mt='' mr='' mb='3' ml='' pt='' pr='' pb='' pl='' border='' rounded='' rounded_size='' shadow='' ] [gd_loop layout='2' row_gap='' column_gap='' card_border='' card_shadow='' bg='' mt='' mr='' mb='' ml='' pt='' pr='' pb='' pl='' border='' rounded='' rounded_size='' shadow='' ] [gd_loop_paging show_advanced='' bg='' mt='' mr='' mb='3' ml='' pt='' pr='' pb='' pl='' border='' rounded='' rounded_size='' shadow='' ]
Nella colonna destra aggiungeremo un blocco Shortcode con lo shortcode GD > Map con le seguenti impostazioni.
[gd_map map_type="auto" post_settings="1" width="100%" height="100vh" maptype="ROADMAP" zoom="0"]
Aggiungeremo anche una classe scrolling-gd-loop alla colonna sinistra per lo scorrimento touch. Puoi verificare l'opzione indicata nello screenshot qui sotto.
Aggiungiamo il seguente stile al personalizzatore del tema.
.scrolling-gd-loop{ overflow-y: scroll !important; max-height: 1000px; }
Ora, dopo questo passaggio, la nostra pagina Archivio è pronta.
Per creare il layout della pagina di ricerca.
Creeremo il GD Search template della pagina da Bricks >> Template >> Aggiungi nuovo. Assicurati di selezionare Seleziona il tipo di template: GD Search Results
Copia tutto il contenuto del GD Archive template Bricks e incollalo nel GD Search template Bricks della pagina.
Per farlo, nella pagina Archivio GD, fai clic sull'icona Copia (tutto) nella colonna destra di Bricks Builder (Struttura)
Vai alla pagina di ricerca. Puoi trovare la pagina di ricerca da Geodirectory > Impostazioni > Generale > Pagine.
Modificala con Bricks. Fai clic sull'icona Rimuovi (tutto) nella colonna destra di Bricks Builder:
Infine, fai clic sull'icona Incolla (tutto) nella colonna destra di Bricks Builder:
Questo renderà la pagina di ricerca e la pagina Archivio identiche, a larghezza intera, con i risultati nella colonna sinistra e la mappa fissa nella colonna destra.
Per la pagina di ricerca, dobbiamo anche indicare a Bricks di mostrare questo template sulla pagina singola.
Per farlo, dobbiamo fare clic su Icona ingranaggio > Impostazioni template > Condizioni > Individuale > Pagina di Ricerca (Titolo della tua pagina di ricerca).
3. Design della pagina del singolo annuncio del sito directory con Bricks
È ora di creare il template della pagina di dettaglio. Andremo a modificare il GD Detail template di pagina in Bricks.
Puoi andare a 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 lo modificheremo usando Bricks.
Aggiungiamo una sezione vuota e inseriamo al suo interno un blocco shortcode.
Usiamo il seguente shortcode per mostrare il carosello di immagini.
[gd_post_images ajax_load="1" limit="10" limit_show="3" type="slider" slideshow="1" controlnav="1" animation="slide" image_size="large"]
Ora, all'interno di una sezione vuota, aggiungiamo un contenitore a due colonne.
Nel contenitore di sinistra aggiungeremo i seguenti shortcode.
Che include GD > Post Title, GD > Single Taxonomies, e GD > Single Schede.
[gd_page_title tag='h1' no_wrap='false' title_container='1' strip_html='] [gd_single_taxonomies taxonomy='' prefix='' link_style='' link_color='' link_color_custom='' link_icon='false'] [gd_single_tabs heading_font_size="0" heading_text_color_custom="#000000" mt_lg="3" border_type="border"]
Nella colonna di destra aggiungeremo il
GD > Author Action, e GD > Output Location blocco.
[gd_author_actions hide_edit='false' hide_delete='false' author_page_only='false'] [gd_output_location location="detail" list_style="wrap"]
Al termine, la nostra pagina di dettaglio dell'annuncio è completa.
Aggiungere funzionalità Premium al tuo Bricks 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 decidere quanto far costare l'aggiunta di un annuncio. Per i diversi livelli di prezzo, puoi scegliere quali funzionalità includere o escludere. Ad esempio, potresti consentire più immagini per gli annunci a pagamento e limitarle per quelli gratuiti. Puoi anche decidere se determinati campi personalizzati sono disponibili o meno, e se le descrizioni possono essere più lunghe o più corte.
- Claim Listings: Questa funzionalità è davvero importante per una directory. Ecco come funziona: l'amministratore configura il database e poi invita i titolari delle attività a gestire i loro annunci gratuiti. Quando un titolare vuole prendere il controllo di un annuncio, potrebbe dover prima passare a un annuncio a pagamento.
- Pubblicità: vendita di spazi pubblicitari è un'altra forma di monetizzazione di una directory online. Se il tuo sito riceve molti visitatori, puoi usare reti pubblicitarie. In caso contrario, puoi vendere spazi pubblicitari direttamente. Ciò significa che le aziende possono pagare per inserire banner in determinate aree del tuo sito, oppure i loro annunci possono apparire come pubblicità, ad esempio in cima ai risultati di ricerca.
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.
Per chi si appresta al suo primo progetto, ecco la tua guida: Costruire il tuo 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.