Come personalizzare il design delle tue pagine di raccolta fondi (e il minisito Riseact)

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)

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:

1. Accedi al tuo account Riseact.
2. Da qui nella parte centrale dello schermo si aprirà una schermata di personalizzazione delle preferenze.

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:

1. Nella pagina "Temi", individua il tema attualmente attivo.
2. Clicca sui tre puntini verticali (o un'icona simile) che compaiono al passaggio del mouse sul tema.
3. 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:

• Menu Superiore: Ti permette di navigare tra le diverse sezioni del tuo minisito (come Homepage e le pagine delle Campagne) e di accedere ad altre impostazioni generali.
• Colonna delle sezioni (a sinistra): Contiene un elenco di sezioni predefinitr che puoi trascinare e rilasciare nell'area di anteprima per costruire le tue pagine. Le sezioni sono contenitori che organizzano i blocchi di contenuto (testo, immagini, bottoni, moduli, ecc.).
• Pannello di Modifica della sezione e dei blocchi in essa contenuti (a sinistra, quando una sezione è selezionato): Quando clicchi su un blocco nell'area di anteprima, questo pannello si aggiorna con le opzioni specifiche per personalizzare quel blocco (testo, immagini, colori, layout, ecc.).
• Area di Anteprima (al centro): Mostra un'anteprima in tempo reale di come apparirà la pagina del tuo minisito mentre la modifichi.

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:

1. Nell'editor visivo, assicurati di essere nella sezione "Homepage".
2. Nella colonna dei blocchi a sinistra, individua e clicca sulla sezione "Header" per espanderne le opzioni.
3. 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.
4. 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".
5. 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:

1. Nella colonna dei blocchi a sinistra, scorri verso il basso e individua la sezione "Brand"
2. 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.
3. Clicca su "Pubblica" per salvare.

2.3 Il Footer: Informazioni Utili e Coerenza

Il footer è la sezione inferiore del tuo minisito, ideale per includere informazioni di contatto, link utili e mantenere la coerenza con il sito principale della tua organizzazione.

Per personalizzare il footer:

1. 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.
2. 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.

3. Menu: Per una maggiore pulizia iniziale, puoi eliminare il menu predefinito nel footer (se presente) cliccando sull'icona a forma di cestino accanto al blocco "Menu". Potrai configurare un menu specifico per il footer in un secondo momento, se necessario.

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

Il menu di navigazione permette ai visitatori di esplorare facilmente le diverse sezioni del tuo minisito.

Per gestire i menu devi tornare alla tua dashboard generale di Riseact e uscire dall'editor visivo.

1. Dal menu principale di Riseact (quello sulla sinistra, fuori dall'editor visivo), clicca sulla voce "Navigazione".
2. Qui vedrai un elenco dei menu già esistenti. Seleziona "Main Menu" (o il menu che stai usando nell'Header) per modificarlo, oppure clicca su "+ Aggiungi nuovo menu" per crearne uno da zero.
3. Per aggiungere una nuova voce al menu, clicca su "+ Aggiungi Voce". Potrai scegliere tra pagine esistenti del tuo minisito, campagne o link esterni.
4. Per modificare una voce esistente, clicca su "modifica" per cambiare testo, link o riordinare gli elementi. (ti apparirà una finestra laterale per inserire le nuove informazioni).
5. Eliminare una voce di menu: Clicca su "elimina" accanto alla voce che vuoi rimuovere.
6. Dopo aver apportato tutte le modifiche, clicca su "Salva" ( in basso).
7. Per visualizzare le modifiche sul tuo minisito, dovrai poi tornare alla sezione "Sito Web" > "Temi", selezionare il tuo tema e cliccare su "Personalizza". All'interno dell'editor visivo, nella sezione "Header", potrai assicurarti che il menu corretto sia selezionato dal menu a tendina.

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.

1. Nel menu principale dell'editor vai sul menu a tendina in alto e scegli " Campagna" e ‘Modello predefinito’.
2. Utilizza l'editor visivo per definire la struttura della pagina della campagna se vuoi aggiungere altri blocchi oltre a quello del testo (Che si popola automaticamente quando crei la campagna dall'apposita sezione).
   
   Da qui per esempio puoi scegliere se sul modello predefinito delle tue campagne vuoi visualizzare il totale raccolto e i nomi dei donatori. Questo lo potrai fare in particolare dalla sezione campaign details.
   
3. Clicca su "Pubblica". Quando creerai una nuova campagna, potrai selezionare questo template come base per avere una pagina già pronta e coerente.

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.

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.

1. Accedi all'editor del codice come descritto sopra.
2. Naviga nella cartella "Risorse" e cerca i file .css (solitamente style.css o un nome simile, o fogli di stile specifici per componenti).
3. 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.

1. Accedi all'editor del codice.
2. Naviga nella cartella "Risorse" e cerca i file .js (o creane uno nuovo se necessario).
3. Inserisci il tuo codice JavaScript. Assicurati che sia ben commentato e che non crei conflitti con lo script esistente del tema.