Skip to main content

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

Scopo

Questa

sezione
HEADER-riseact-prime.width-1000 (2).jpgdescrive
-
intervenire
sul
codice
del

template
di

Cosacampagna troviper in questa guida Riseact Prime Academy

Riseact Prime Academy ècontrollare 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:

            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 Modificavisibilità della sezione eMessaggi deidai blocchisostenitori innella essa contenuti (a sinistra, quando una sezione è selezionato): Quando clicchi su un blocco nell'areapagina di anteprima,donazione.

            Quando questousare

            Usa pannelloquesta siprocedura 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 èquando 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 blocchimessaggi aappare sinistra, individua e cliccavuota 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

                  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:

                    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.

                      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".

                      Footer.width-1000.png
                      Opzioni di modifica del footer -

                      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.

                        Dal menu principale di Riseact (quello sulla sinistra, fuori dall'editor visivo), clicca sulla voce "Navigazione". 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. Per aggiungere una nuova voce al menu, clicca su "+ Aggiungi Voce". Potrai scegliere tra pagine esistenti del tuo minisito, campagne o link esterni. 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). Eliminare una voce di menu: Clicca su "elimina" accanto alla voce che vuoi rimuovere. Dopo aver apportato tutte le modifiche, clicca su "Salva" ( in basso). 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.
                        Modalita_di_gestione_del_menu.width-1000.png
                        Modalità di gestione del menu -

                        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.

                            Nel menu principale dell'editor vai sul menu a tendina in alto e scegli " Campagna" e ‘Modello predefinito’. Utilizza l'editor visivo per definire la struttura della pagina della campagna see vuoi aggiungereevitare altridi blocchimostrare oltreun blocco privo di contenuto ai visitatori, senza rimuovere definitivamente la funzionalità.

                            Procedura

                            1. Dal pannello di amministrazione Riseact vai in Design > Modifica codice.
                            2. Seleziona il file Main Campaign.
                            3. Individua il blocco HTML relativo ai commenti (solitamente intorno alla riga 85), che ha questa struttura:

                              <hr class="my-5" />
                              <div id="comments">
                                <h2 class="text-2xl font-bold mb-5">Messaggi dai sostenitori</h2>
                                {% for comment in campaign.comments %}
                                  ...
                                {% else %}
                                  Non ci sono ancora messaggi...
                                {% endfor %}
                              </div>
                            4. Per mostrare la sezione solo se esistono messaggi, racchiudi l'intero blocco in una condizione:

                              {% if campaign.comments %}
                              <hr class="my-5" />
                              <div id="comments">
                                <h2 class="text-2xl font-bold mb-5">Messaggi dai sostenitori</h2>
                                {% for comment in campaign.comments %}
                                  ...
                                {% endfor %}
                              </div>
                              {% endif %}
                            5. Salva le modifiche e verifica la pagina della campagna.

                            Note operative

                            • Questa modifica si applica a quellotutte 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.
                            Clicca su "Pubblica". Quando creerai una nuova campagna, potrai selezionare questo template come base per avere una pagina già pronta e coerente.
                            DettagliCampagna.width-1000.png
                            Come configurare i dettagli della campagna -

                            Campagne: la differenza tra Personalizzazione del Tema e Testo delle Campagne

                            In questa guida stiamo modificando i modelli predefiniti che puoi associare automaticamente allele campagne che crei.utilizzano Puoiil anchetemplate realizzareMain modelliCampaign.

                            Se diversihai epiù associarlitemplate alalpersonalizzati tuaper campagnacampagne indiverse, faseverifica di creazione.applicare

                            la modifica al template corretto.

                            Se vuoinon maggiorihai informazioni su come creare le campagne con Riseact per le tue attivitàcompetenze di raccoltasviluppo fondiweb, consultacoinvolgi laun sezionecollaboratore deltecnico manualeo contatta il supporto Riseact.

                            Da verificare

                            • Verificare se nelle versioni future di Riseact contutteverrà leaggiunta informazioniun'opzione sullanativa creazionenel e gestione delle campagnepannello di fundraising..

                              Sezione 4: Approfondimenti Tecniciamministrazione per Espertigestire dila Webvisibilità Design

                              Questadella sezione èmessaggi 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 disenza 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 primacodice.

                            Fonti

                            • Ticket di apportareassistenza qualsiasiinterno modifica,#96293 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 direttamenterisolto 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 principale2026-05-29.
                              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.