Come personalizzare il design delle tue pagine di raccolta fondi (e il minisito Riseact)
Cosa trovi in questa guida Riseact Prime Academy
Riseact Prime Academy è la serie di guide passo per passo che aiuta le organizzazioni del terzo settore e non profit a ottimizzare le attività di fundraising. In particolare, abbiamo creato questa pagina per aiutarti a personalizzare le pagine delle tue campagne di raccolta fondi e il minisito che Riseact ti mette a disposizione.
Benvenuto in Riseact Prime Academy, la tua guida passo passo per ottimizzare le attività di fundraising. Questa pagina ti accompagnerà nella personalizzazione del tuo minisito di raccolta fondi, uno strumento potente e intuitivo che ti permetterà di creare spazi web unici per le tue iniziative.
Che tu voglia lanciare una campagna, presentare un progetto di crowdfunding o semplicemente condividere informazioni cruciali, un minisito personalizzato è la chiave per raggiungere il tuo pubblico in modo efficace, senza bisogno di competenze tecniche o di codice.
Quando crei la tua prima campagna di fundraising con Riseact, la piattaforma genera automaticamente un URL per la landing page. Il dominio di base sarà quello che hai scelto in fase di creazione dell'account della tua organizzazione (es. tuonomeorganizzazione.riseact.site), ma puoi sempre personalizzarlo per renderlo ancora più affine alla tua comunicazione.
Questa guida è pensata per accompagnarti passo dopo passo attraverso il processo di personalizzazione, per avere un minisito di raccolta fondi funzionante ed efficace.
Inizieremo dalle basi, esplorando l'interfaccia e le opzioni più semplici, per poi addentrarci in funzionalità più avanzate, adatte a chi desidera un controllo più completo sull'aspetto e sul comportamento del proprio minisito.
In particolare vedremo:
- Personalizzazione delle informazioni base del sito e del tema
- Un'introduzione all'editor visivo (come funziona per modelli e blocchi)
- L'identità visiva globale del minisito: Header, Logo, Colori primari, Favicon e Footer
- Menu di navigazione
- Costruire e personalizzare le tue pagine principali: Homepage e Pagine Campagna
- Approfondimenti tecnici per utenti esperti (modifica codice CSS e JavaScript)
Hai bisogno di aiuto?
Se vuoi un supporto per la realizzazione del tuo mini-sito puoi anche acquistare un customer success pack e avere a disposizione il tempo e le conoscenze del team di esperti di Riseact.
Scopri i customer success pack per avere persone esperte al tuo fianco passo per passo.
Sezione 1: Primi Passi nella Personalizzazione
Iniziamo dalle fondamenta! Qui scoprirai come dare al tuo minisito un nome, una descrizione e renderlo visibile al mondo.
1.1 Accedere all'Area di Personalizzazione
Per iniziare a personalizzare il tuo minisito, segui questi semplici passaggi:
- Accedi al tuo account Riseact.
- Da qui nella parte centrale dello schermo si aprirà una schermata di personalizzazione delle preferenze.
La prima volta che accedi
Se è la prima volta che usi questa funzione, vedrai un banner giallo che ti guiderà nelle modifiche di base. Cliccaci sopra per: i) Dare un nome al tuo minisito (ad esempio, "Il Minisito di [Nome Organizzazione]"), ii) Aggiungere una descrizione utile anche per l'ottimizzazione per i motori di ricerca (SEO): descrivi brevemente cosa fa la tua organizzazione o il minisito, iii) Rendere il minisito visibile al pubblico, togliendo la protezione con la password. Ricorda di farlo per andare live!
3. Il dominio del tuo sito sarà nomedellatuaorganizzazione.riseact.site. Se desideri un dominio che si armonizzi meglio con il sito ufficiale della tua organizzazione (per esempio dona.nomedelsitodellatuaorganizzazione.it), segui la procedura di modifica del dominio. Per maggiori dettagli su come personalizzare il dominio, consulta la guida dedicata.
1.2 La Scelta del Tema: Temi Gratuiti e Duplicazione
Il tema è l'insieme di file che definiscono l'aspetto visivo predefinito del tuo minisito: colori, font, layout e stile generale. Riseact ti offre due modi principali per iniziare la personalizzazione:
- Lancia un tema gratuito: Riseact mette a disposizione una libreria di temi gratuiti, pronti all'uso e pensati per diverse esigenze. Scegliere un tema gratuito è il modo più semplice e veloce per avere una base di partenza professionale e personalizzabile.
- Duplica il tema in uso: Se hai già un tema attivo sul tuo minisito o desideri apportare modifiche significative senza rischiare di compromettere il sito live, puoi duplicare il tema. Questa opzione crea una copia esatta del tuo tema corrente, permettendoti di sperimentare liberamente con le modifiche in un ambiente sicuro.
- Carica il tuo tema: se lavori con un web designer puoi sempre caricare un tema.
In questa guida, vedremo come ottimizzare il tema gratuito, che è il punto di partenza consigliato per la maggior parte delle organizzazioni.
Per duplicare un tema:
- Nella pagina "Temi", individua il tema attualmente attivo.
- Clicca sui tre puntini verticali (o un'icona simile) che compaiono al passaggio del mouse sul tema.
- Seleziona l'opzione "Duplica".
Assegna un nome alla copia del tema (ad esempio, "Tema in Lavorazione" o "Copia di Backup").
1.3 L'Editor Visivo: Un'Introduzione
Una volta selezionato o duplicato il tema e cliccato su "Personalizza", verrai automaticamente reindirizzato all'Editor Visivo. Questa è l'interfaccia principale che utilizzerai per costruire e personalizzare le pagine del tuo minisito senza dover scrivere codice.
L'editor visivo è composto da diverse aree chiave:
Sezione 2: Personalizzare l'Aspetto Globale del Tuo Minisito
Questa sezione è dedicata alla personalizzazione degli elementi che definiscono l'identità visiva globale del tuo minisito. Sono elementi che appaiono su quasi tutte le pagine e sono fondamentali per il tuo brand.
2.1 L'Header: la tua Identità Visiva Immediata
L'header è la sezione superiore del tuo minisito e svolge un ruolo cruciale nell'identificare la tua organizzazione e facilitare la navigazione.
Questa sezione viene replicata in tutte le pagine del tuo minisito, comprese le landing page delle campagne (se usi il modello predefinito).
Per personalizzare l'header:
- Nell'editor visivo, assicurati di essere nella sezione "Homepage".
- Nella colonna dei blocchi a sinistra, individua e clicca sulla sezione "Header" per espanderne le opzioni.
- Modifica Logo: Clicca sull'opzione per caricare il logo della tua organizzazione. Scegli un file in formato PNG o SVG per garantire la massima qualità, trasparenza e scalabilità del tuo logo su qualsiasi dispositivo.
- Menu: Dal menu a tendina "Menu", seleziona il menu che desideri visualizzare nell'header. Per il momento, seleziona il "Main Menu". Approfondiremo la creazione e la gestione dei menu nella prossima sezione: "Gestione dei Menu di Navigazione".
- Impostazioni del tema: Espandi le opzioni di stile per personalizzare l'aspetto dell'header:
- Colore di sfondo: Clicca sul selettore di colore e inserisci il codice colore esadecimale del tuo colore istituzionale, oppure scegli dal palette.
- Colore del testo: Scegli un colore per il testo del menu che abbia un buon contrasto con il colore di sfondo per garantire la leggibilità.
Dopo aver apportato le modifiche, clicca sul pulsante "Pubblica" per salvare e rendere visibili le tue modifiche.
2.2 La Favicon: il tuo Marchio nella Scheda del Browser
La favicon è quella piccola icona che vedi nella scheda del browser accanto al titolo della pagina (spesso il logo del sito). Caricare la tua favicon personalizzata aiuta a rafforzare la brand identity della tua organizzazione e rende il tuo minisito più professionale e riconoscibile.
Per personalizzare la favicon:
- Nella colonna dei blocchi a sinistra, scorri verso il basso e individua la sezione "Brand"
- Clicca sull'opzione per caricare la tua Favicon. Ti consigliamo un'immagine quadrata, preferibilmente in formato .png o .svg, con dimensioni di 32x32 pixel o superiori.
- Clicca su "Pubblica" per salvare.
2.3 Il Footer: Informazioni Utili e Coerenza
Per personalizzare il footer:
- Nell'editor visivo sempre nella sezione home page, scorri fino alla fine delle sezioni e individua la sezione "Footer" nella colonna dei blocchi a sinistra. Clicca per espanderla.
- Aggiungi Blocco: Clicca su "+ Aggiungi Blocco" all'interno della sezione Footer.
- Seleziona un blocco "Testo" o "Info" per aggiungere i dati logistici della tua organizzazione (indirizzo, telefono, email, codice fiscale, partita IVA, ecc.). Personalizza il contenuto del blocco con le informazioni desiderate.
- Puoi anche aggiungere blocchi per i link ai social media o altre informazioni rilevanti.
4. Clicca su "Pubblica".
Sezione 3: Costruire e Personalizzare le Pagine
Ora che hai impostato l'aspetto globale, è il momento di dare vita alle pagine principali del tuo minisito.
3.1 Gestione dei Menu di Navigazione
3.2 La Home Page: Il Tuo Biglietto da Visita
La Home Page è la prima impressione che i visitatori avranno del tuo minisito. Costruiscila aggiungendo e personalizzando i blocchi disponibili nell'editor visivo (colonna a sinistra).
Ecco alcuni blocchi utili per un minisito dedicato alle donazioni:
- Banner con immagine: Un'immagine di grande impatto con un titolo accattivante e un pulsante "Dona Ora" ben visibile.
- Testo Introduttivo (rich text): Un breve paragrafo che presenta la tua organizzazione e spiega l'importanza del sostegno.
- Come Aiutare: Una sezione che illustra le diverse modalità di donazione (donazione singola, continuativa, bonifico, ecc.) con icone e brevi descrizioni.
- Testimonials: Racconti di come le donazioni fanno la differenza nella vita delle persone aiutate.
- Video (embed html=: Elementi visivi che mostrano le attività della tua organizzazione.
- Le Nostre Campagne Attuali (campagne di progetto): Un elenco delle campagne di raccolta fondi in corso con un breve riassunto e un link alla pagina dedicata.
- Modulo di Donazione Rapida: Un modulo integrato direttamente nella home page per donazioni veloci.
- Informazioni di Contatto e Social Media: Recapiti e link ai tuoi profili social.
Per aggiungere un blocco: Aggiungi Sezione il blocco desiderato e trascinalo in alto o in basso lungo la struttura dei blocchi perchè si collochi nella sezione corretta della pagina. Per modificare un blocco: Clicca sul blocco nella colonna dei blocchi. Le opzioni di personalizzazione specifiche per quel blocco appariranno nella colonna di sinistra. Modifica testi, immagini e altre impostazioni. Ricorda di cliccare su "Pubblica" dopo ogni modifica significativa.
3.3 Personalizzare le Pagine delle Campagne
I template per le campagne ti permettono di definire una struttura predefinita per tutte le tue pagine di raccolta fondi, garantendo coerenza e risparmiando tempo.
Campagne: la differenza tra Personalizzazione del Tema e Testo delle Campagne
In questa guida stiamo modificando i modelli predefiniti che puoi associare automaticamente alle campagne che crei. Puoi anche realizzare modelli diversi e associarli alal tua campagna in fase di creazione.
Se vuoi maggiori informazioni su come creare le campagne con Riseact per le tue attività di raccolta fondi consulta la sezione del manuale di Riseact contutte le informazioni sulla creazione e gestione delle campagne di fundraising..
Sezione 4: Approfondimenti Tecnici per Esperti di Web Design
Questa sezione è dedicata alle persone con competenze tecniche che desiderano un controllo più profondo sul design del minisito, andando oltre le opzioni dell'editor visivo.
Backup prima di modificare il codice!
La modifica diretta del codice del tema richiede competenze tecniche in HTML, CSS e/o JavaScript. Fai sempre un backup del tema prima di apportare qualsiasi modifica, per poter ripristinare facilmente la versione precedente in caso di errori.
4.1 Comprendere la Struttura del Tema (Editor del Codice)
Per un controllo più avanzato, Riseact ti permette di accedere e modificare direttamente il codice del tema. Per accedere all'editor del codice, cerca un'opzione come "Modifica Codice" o un'icona simile nella sezione "Personalizza" del tuo tema.
L'editor è organizzato in diverse cartelle, ognuna con una funzione specifica:
- Layout: Contiene i file .html che definiscono la struttura generale del tuo sito. Il file theme.html è il layout principale
- Modelli: Contiene file .json che definiscono la struttura predefinita delle diverse tipologie di pagine (es. homepage.json, campaign.json). Questi file indicano quali sezioni e in quale ordine vengono caricate per una specifica pagina. Potresti trovare anche file .html specifici per alcune funzionalità complesse
- Sezioni: Contiene i file .html che definiscono la struttura e il comportamento di ciascun blocco modulare che vedi nell'editor visivo (es. banner.html, footer.html). Modificando questi file, puoi personalizzare profondamente l'HTML di un blocco.
- Snippets: Frammenti di codice riutilizzabili che possono essere inclusi in diverse sezioni o modelli.
- Configurazione: File per impostazioni globali del tema e variabili.
- Risorse: Cartella fondamentale per immagini, file CSS (.css) per lo stile e JavaScript (.js) per le funzionalità interattive.
4.2 Modificare il CSS per Stili Personalizzati
Per personalizzare l'aspetto del tuo minisito oltre le opzioni dell'editor visivo (ad esempio, per un font specifico, margini precisi o animazioni), puoi modificare i file CSS (fogli di stile) presenti nella cartella "Risorse" del tema.
- Accedi all'editor del codice come descritto sopra.
- Naviga nella cartella "Risorse" e cerca i file .css (solitamente style.css o un nome simile, o fogli di stile specifici per componenti).
- Modifica il codice CSS esistente o aggiungi nuove regole per cambiare font, colori, spaziature, dimensioni degli elementi e altri aspetti grafici. Ricorda di testare sempre le modifiche su un tema duplicato!
4.3 Aggiungere JavaScript per Funzionalità Avanzate
Se hai bisogno di funzionalità interattive più complesse, puoi aggiungere codice JavaScript ai file .js nella cartella "Risorse" del tema. Questo ti permette di implementare comportamenti personalizzati, animazioni dinamiche o integrazioni con servizi esterni che non sono disponibili tramite i blocchi predefiniti.
- Accedi all'editor del codice.
- Naviga nella cartella "Risorse" e cerca i file .js (o creane uno nuovo se necessario).
- Inserisci il tuo codice JavaScript. Assicurati che sia ben commentato e che non crei conflitti con lo script esistente del tema.