Ecco una guida facile da capire su come creare un sito web Directory utilizzando il plugin Breakdance Website Builder:
- Installa il plugin Breakdance
- Installa e configura GeoDirectory
- Progetta il sito web Directory usando il Breakdance plugin
Il Breakdance Plugin, utilizzato insieme al plugin GeoDirectory, è un modo eccellente per creare una directory online flessibile. Con questa combinazione, puoi aggiungere facilmente funzionalità basate sulla posizione, 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 e configurazione dei Plugin.
1. Installa il Breakdance Plugin
Puoi acquistare il plugin Breakdance dal sito breakdance.com. Riceverai un file zip del plugin. Per installarlo, vai su Plugin >> Aggiungi nuovo >> Clicca su Carica plugin
Ora, dopo l'installazione, disabiliteremo il tema WordPress dalle Breakdance >> impostazioni >> Tema >> Disabilita tema
2. Installa GeoDirectory
Infine, devi installare GeoDirectory.
Vai su Plugin >> Aggiungi nuovo, cerca GeoDirectory. Installalo e attivalo. Abbiamo completato l'installazione dei plugin.
3. 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 di gestione 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 Breakdance Sito web Directory
Ora che abbiamo installato i plugin e completato la configurazione preliminare di GeoDirectory, possiamo iniziare a progettare il nostro sito web Directory con il Breakdance 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. Breakdance 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.
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
Impostiamo le impostazioni tipografiche globali dal Breakdance >> impostazioni >> Stili globali >> Avvia Breakdance
le seguenti sono le impostazioni tipografiche
Font dei titoli: Poppins
Font del corpo: Poppins
Dimensione base: 16px
Proporzione: 1.2
Configura l'intestazione
Impostiamo l'intestazione del sito: per farlo andiamo su Breakdance >> Header e clicca Aggiungi intestazione.
qui daremo un titolo all'intestazione e selezioneremo
Posizione: Ovunque
Priorità: 1
Ora clicca il pulsante Aggiungi nuovo in alto a sinistra. Puoi creare un'intestazione usando gli elementi blocco disponibili, oppure puoi cliccare Libreria e utilizzare modelli di intestazione già pronti.
Sto usando uno dei modelli di intestazione esistenti dalla libreria e ho caricato il Logo e selezionato un menu lì.
Ora che la nostra intestazione è pronta, passiamo al contenuto della homepage.
Il Contenuto
Inizierò a costruire questa pagina da zero utilizzando il Breakdance plugin.
Per questo abbiamo bisogno di un hero header nella homepage.
Prima di tutto modifichiamo la Homepage in Breakdance facendo clic su Edit in Breakdance pulsante.
trascineremo una sezione vuota facendo clic sul Add pulsante in alto a sinistra.
Dalla scheda stile sezione imposta
Allineamento: Centra
Tipo di sfondo: Immagine
Dimensione immagine: Intera
Dimensione: Copri
Ripeti: no-repeat
Posizione: Centra
Allegato: Scorri
Rimuovi immagine a: Desktop
Altezza: Personalizzata
Altezza personalizzata: 400px
Ora trasciniamo un elemento Heading con le seguenti impostazioni.
Testo: Find The Best Restaurant In Philadelphia
Colore: #FFFFFFFF
Dimensione font: 48
Peso font: 600
aggiungeremo un blocco shortcode con il [gd_search] shortcode qui sotto.
Ora aggiungiamo un altro contenitore vuoto sotto di esso con il seguente shortcode per visualizzare l'elenco delle categorie.
[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" rounded="rounded"]
aggiungeremo un padding di 50px in alto e in basso.
Ora abbiamo bisogno di una sezione con gli annunci recenti. Aggiungeremo un elemento shortcode con il seguente shortcode.
[gd_listings post_type="gd_place" post_limit="6" add_location_filter="1" sort_by="latest" title_tag="h3" layout="3" view_all_link="1" bottom_pagination="1" slide_interval="5" mb="3" rounded="rounded"]
Aggiungiamo ora un altro shortcode per visualizzare la mappa degli annunci.
[gd_map map_type="auto" post_settings="1" width="100%" height="425px" maptype="ROADMAP" zoom="0"]
Infine, abbiamo bisogno di una CTA per questo utilizzo un template CTA già esistente.
Configurazione del Footer
Per concludere, configuriamo il Footer del sito e andiamo su Breakdance >> Footer e clicca Add Footer.
possiamo creare un Footer da zero oppure utilizzarne uno già esistente. Io utilizzo un template Footer già pronto. Possiamo personalizzare facilmente i menu del Footer in base alle nostre esigenze.
Per ora lo lascio così com'è.
Congratulazioni! La tua homepage è completata.
2. Breakdance Design delle pagine Annunci e Ricerca del sito Directory
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 per impostazione predefinita con un layout generico. In questo tutorial creeremo e personalizzeremo il layout di queste pagine usando Breakdance Builder.
Andiamo su Breakdance >> Template >> Aggiungi template
Nell'opzione successiva selezioneremo le impostazioni seguenti e cliccheremo su Aggiungi template pulsante.
Posizione: Archivio/Archivio tipo di post
Condizione: Tipo di post = Places
Nel template aggiungeremo una sezione vuota e inseriremo le seguenti impostazioni per il blocco sezione.
Layout
Allineamento: Centro
Allineamento verticale: Centro
Sfondo:
Colore: F5F8FFFF
Tipo: Gradiente
Ora aggiungiamo il blocco Titolo archivio al suo interno.
Ora hai due opzioni e te le mostreremo entrambe:
Il modo più semplice è utilizzare una singola colonna e lo shortcode: [gd_simple_archive layout=
2) Se vuoi avere il pieno controllo del design, dovremo aggiungere un blocco colonna con un layout a due colonne.
Nelle impostazioni utilizzeremo Larghezza: Intera
Ora trascineremo il contenitore shortcode e utilizzeremo al suo interno lo shortcode richiesto.
Nel contenitore di sinistra utilizzeremo i widget correlati alla pagina di 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.
[gd_search mb="3"] [gd_loop_actions] [gd_loop layout='2'] [gd_loop_paging]
Nella colonna di destra, utilizza il blocco GD > Mappa, e lasceremo tutte le impostazioni ai valori predefiniti. Tuttavia, imposteremo l'altezza del blocco GD > Mappa a 100vh.
[gd_map map_type="auto" post_settings="1" scrollwheel="1" width="100%" height="100vh" maptype="ROADMAP" zoom="0"]
Ora aggiungeremo la seguente gd-archive-left-container classe alla sezione di sinistra.
Nella colonna di sinistra aggiungeremo la seguente classe gd-archive-left-column.
Per dare un tocco finale aggiungeremo il seguente CSS nel personalizzatore del tema da Aspetto => Personalizza => Aggiungi CSS
.geodir-archive .gd-archive-left-container{ overflow-Y: scroll; max-height: 100%; height:100vh; padding-right:15px; } .gd-archive-left-column{ overflow:hidden; }
Fatto questo, la pagina Archivio inserzioni è ora pronta.
Pagina di ricerca
Ora creeremo un template per la pagina di ricerca di GeoDirectory, quindi andiamo su Breakdance >> Template >> Aggiungi template >> Risultati di ricerca
Ora copieremo tutto il contenuto del template GD Archive nel template GD Search template.
I nostri template per le pagine di ricerca e archivio GD sono ora pronti.
4. Breakdance Design della pagina di inserzione singola del sito web di directory
Andiamo su Breakdance >> Template >> Aggiungi template
Nell'opzione successiva selezioneremo le impostazioni seguenti e cliccheremo su Aggiungi template pulsante.
Posizione: Single/Places
Condizione: Tipo di post = Places
Aggiungeremo una sezione vuota con padding 0 da tutti i lati.
aggiungeremo il seguente shortcode per mostrare uno slider di immagini.
[gd_post_images ajax_load="1" limit="10" limit_show="3" type="slider" slideshow="1" controlnav="1" animation="slide"]
Ora aggiungiamo un'altra sezione e un layout a due colonne al suo interno.
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.
[gd_single_taxonomies taxonomy='' prefix='' link_style='' link_color='' link_color_custom='' link_icon='false' mt='' mr='' mb='2' ml='' pt='' pr='' pb='' pl='' ] [gd_single_tabs heading_font_size="0" heading_text_color="primary" heading_text_color_custom="#000000" mt_lg="3" border_type="border"] [gd_single_next_prev bg='' mt='4' mr='' mb='3' ml='' pt='' pr='' pb='' pl='' border='' rounded='' rounded_size='' shadow='' ]
Nella colonna di destra, aggiungeremo GD > Author Action e GD > Output Location blocco.
[gd_author_actions hide_edit='false' hide_delete='false' author_page_only='false' display='' size='' alignment='' color='primary' text_color='white' btn_mt='1' btn_mr='' btn_mb='1' btn_ml='' bg='' mt='' mr='' mb='' ml='' pt='' pr='' pb='' pl='' border='' rounded='' rounded_size='' shadow='' ] [gd_output_location location="detail" list_style="wrap"]
Aggiungere funzionalità Premium al tuo Breakdance 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 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.
Scopri gli aspetti fondamentali con questa guida essenziale: Le basi per creare un sito web di directory.
Le possibilità sono infinite.