Flex Editor
Ultima modifica: 12-04-2024Il Flex Editor è una funzione che consente di personalizzare molti elementi della piattaforma. Ad esempio modificare l'ordine degli elementi, la regolazione dei colori, la scelta di una variante diversa di un elemento esistente, nascondere specifiche parti del sito e l'aggiunta di nuove funzionalità alle pagine.
Sommario Flex editor
1. Impostazioni generali
Se il Flex Editor è attivo, per utilizzarlo basterà accedere alla piattaforma. Se avete effettuato il login come amministratore del sito e andate sulla homepage, vedrete un cursore sulla sinistra. Questo aprirà il Flex Editor:
La barra mostra tutti i componenti personalizzabili. A seconda della configurazione del sito, possono esserci più o meno componenti da personalizzare (come Header, Descrizione, ecc.).
Quando si passa il mouse su un componente, di solito si possono scegliere fino a tre opzioni:
- Titolo del componente
Per modificare un componente, è sufficiente fare clic con il mouse sul titolo del componente. In questo modo si accede a tutte le opzioni disponibili per quel particolare componente. - Freccia
Facendo clic con il mouse sulla freccia e tenendola premuta, è possibile modificare l'ordine dei componenti trascinandoli verso l'alto o verso il basso. - Tre puntini
Sotto i tre puntini si trova l'opzione per rendere invisibile un componente. Per i componenti personalizzati, sotto i tre puntini si trova anche l'opzione per eliminare il componente.
Le modifiche apportate vedranno cambiamenti immediati nella posizione in cui si sta lavorando. Solo dopo averle pubblicate saranno anche salvate e convalidate.
Avete difficoltà a trovare qual è il componente di vostro interesse nel Flex Editor? Allora potete anche andare sul componente che volete modificare direttamente dalla pagina. Quando si sposta il mouse sul componente, appare una cornice attorno al componente e una matita. Facendo clic su di essa, è possibile modificare il componente.
2. Impostazioni del tema
Dobbiamo fare una distinzione tra le impostazioni che riguardano l'intero tema e le impostazioni di ogni singolo componente. Le impostazioni del tema possono essere considerate come impostazioni globali. Qui si impostano i colori generali, il font e i colori dei pulsanti. Per regolare le impostazioni del tema, andate sull'icona del mappamondo in alto a destra del Flex Editor, accanto al logo.
All'interno delle impostazioni del tema, è possibile personalizzare i colori, i principali pulsanti Call-to-action e il font del sito web. A tutti e tre si applica l'ereditarietà. Le modifiche apportate ad esempio a livello di sito web si rifletteranno a livello di mini-sito, di campagna, e così via. Tali modifiche possono tuttavia poi essere cambiate per ogni singolo ivello.
È inoltre possibile sovrascrivere le impostazioni del tema Colore e pulsanti Call-to-action a livello di componente.
Colori del tema
Qui si ha la possibilità di regolare il colore di base e di contrasto, nonché di assegnare il colore ad alcuni elementi specifici, come lo sfondo della pagina, il titolo, il testo e il collegamento ipertestuale.
Inoltre, è possibile aggiungere fino a sette colori supplementari che fungono da tema per il sito web. I colori aggiunti possono essere scelti anche ai livelli successivi e all'interno dei componenti.
Di conseguenza, la brand idendity della vostra organizzazione viene impostata con semplicità sulla piattaforma, senza . In caso di modifiche alla vostra brand identity, potrete regolare tutto in un attimo da un'unico punto della vostra piattaforma
Pulsanti call to action (CTA)
Qui è possibile personalizzare i colori e il carattere dei pulsanti per la donazione, l'avvio dell'azione e l'avvio del progetto.
Font
Qui si cambia il font per l'intero sito, mini sito o campagna, a seconda del livello in cui si effettua la modifica. Se si desidera scegliere un font diverso, si vedrà immediatamente un'anteprima del font.
3. Pulsanti standard all'interno dei componenti
Quando si personalizzano i componenti, si possono avere diverse schede. La scheda "Opzioni" è sempre presente. Inoltre (a seconda del componente), si possono avere le schede "Layout" e "Contenuto".
Layout
L'opzione di layout indica il posizionamento e la presenza di elementi all'interno del componente. Nel banner, ad esempio, si può scegliere se attivare o disattivare il pulsante Dona, crea pagina di raccolta o crea progetto. Per le metriche (il componente con il numero di pagine, di squadre, ecc.) si può scegliere se mostrare o quelle a "0" e per i pulsanti di condivisione si può scegliere la posizione, la vista e i margini e l'allineamento. Questi sono esempi di opzioni aggiuntive che si hanno con il contenuto del componente.
Opzioni
La scheda Opzioni consente di impostare il design del componente. Qui è possibile, ad esempio, regolare il colore, lo sfondo, lo spazio tra i componenti e gli elementi all'interno del componente. In generale, qui si trovano impostazioni che rientrano nella categoria globale. Queste si riferiscono all'intero componente. Inoltre, si trovano i titoli 'Contenuto' o 'Scheda'. Questi si riferiscono a parti più piccole di un componente. Ad esempio, all'interno del componente 'Campagne in primo piano' si trova anche un menu a tendina chiamato 'Scheda'. Si noterà che la regolazione avrà effetto solo sulle campagne evidenziate. In questo caso, si tratta di 'Schede
Infine, si possono trovare menu a discesa all'interno di un componente con un nome unico. Un ottimo esempio è "social" all'interno del componente footer. Come si può notare, sono molto intuitivi in termini di personalizzazione.
Qui si può vedere la differenza tra Globale e Scheda. In questo esempio, la parte verde è il globale (che riguarda l'intero componente). La scheda riguarda i singoli componenti.
Pulsanti e funzioni standard.
Ci sono alcune opzioni predefinite che appaiono in molti punti del Flex Editor.
Sfondo
Qui è possibile aggiungere uno sfondo per il componente (parte del componente) che si sta personalizzando. Se l'immagine ha una dimensione diversa dal componente stesso, viene creato un ritaglio al centro. Nelle opzioni avanzate si può scegliere se mantenerlo o mostrare una parte diversa dell'immagine. È anche possibile scegliere di ripetere una parte dell'immagine e impostare le dimensioni. Esistono quindi molte opzioni di design per l'impostazione dello sfondo.
Parallasse
Con l'impostazione Parallasse, l'immagine rimane sullo sfondo quando i visitatori scorrono verso il basso. Questo si sincronizza anche con più componenti che si trovano uno sotto l'altro e che hanno lo stesso parallasse:
In questo modo, è possibile rendere parallattica una parte della pagina (più componenti contemporaneamente). Questo dà maggiore profondità al sito web e l'illusione che gli elementi si muovano l'uno sull'altro.
Opacità
La regolazione dell'opacità dell'immagine la rende più trasparente e consente di renderla più sottile o appropriata. Con una maggiore trasparenza, lo sfondo diventa sempre più visibile. Quando si sceglie un colore, si può anche scegliere di renderlo trasparente (parzialmente o meno).
Padding
Il padding consente di impostare lo spazio vuoto intorno al testo all'interno di un componente. Questi valori possono essere impostati separatamente per tutte e quattro le direzioni. Quindi in alto, in basso, a sinistra e a destra. Facendo clic sulla graffetta è possibile mantenere queste proporzioni e regolarle tutte insieme.
4. Aggiunta di componenti
È possibile aggiungere un componente tramite il pulsante "Aggiungi componente" in basso. Questo apparirà in basso e sarà possibile trascinarlo nella posizione desiderata. È anche possibile fare clic sul segno più nella struttura stessa (vedere la schermata). In questo modo si aggiunge il componente direttamente in quella posizione.
È possibile scegliere tra i seguenti componenti:
Dopo aver fatto clic su un componente, questo viene creato ed è possibile modificarne il contenuto. Utilizzando la scheda Contenuto, si aggiungono immagini e blocchi di testo (se presenti).
5. L'ereditarietà
Il Flex Editor funziona anche con l'ereditarietà. I colori impostati a un livello superiore vengono applicati anche ai livelli inferiori. Ed è possibile sovrascriverli al livello inferiore. Il livello inferiore si riferisce, ad esempio, al mini sito o alla campagna.
Le eccezioni sono i componenti personalizzati aggiunti dall'utente. Questi non vengono ereditati automaticamente a livello sottostante. I componenti personalizzati sono specifici della pagina in cui vengono aggiunti.
6. Come si fa a personalizzarlo su un sito web attivo?
Inizialmente è possibile attivare la modalità di anteprima su un sito web già attivo. È quindi possibile fare clic sul pulsante di anteprima dalla dashboard come amministratore del sito:
Poi si va al frontend e si vede il Flex Editor. È possibile apportare e salvare tutti i tipi di modifiche e tutti i cambiamenti sono visibili solo agli amministratori del sito. Nel momento in cui siete pronti, possiamo cambiare il template in Flexplate (il nostro nome per il template Flex Editor) e le modifiche del Flex Editor saranno visibili anche ai visitatori. In questo modo, potrete configurare tutto completamente prima di renderlo operativo.
A volte capita che si vogliano già apportare alcune modifiche, ma non ancora mostrarle ai visitatori. È quindi possibile aggiungere i componenti, modellarli a proprio piacimento, renderli invisibili e salvarli.
Ora siete pronti a mostrarli al mondo? Allora impostateli come visibili e salvate di nuovo.
7. Quali pagine si possono personalizzare?
È possibile effettuare le regolazioni nelle pagine seguenti:
- Homepage
- Pagine dei mini siti
- Pagine delle campagne
- Pagine dei contenuti
Le pagine di contenuto includono le pagine di menu, che comprendono anche i contatti e i suggerimenti. Non è possibile modificare il contenuto dei suggerimenti, ma una possibile soluzione consiste nel non mostrare la pagina dei suggerimenti (renderla invisibile) e aggiungere un blocco personalizzato contenente i propri.
8. Quali opzioni non sono (ancora) presenti nell'editor Flex?
Non è ancora possibile
- Eseguire le modifiche a livello di pagina di raccolta, squadra o azienda. Inoltre, non è possibile apportare modifiche al processo di iscrizione, al flusso di donazione e alle pagine di riepilogo.
- Selezionare gli stili da utilizzare
- Pubblicare automaticamente un componente ad un orario pre-impostato (si tratta comunque di un'operazione manuale)
- Utilizzare il controllo di versione, che consente di tornare facilmente ad una versione precedente di quanto impostato
- Aggiungere componenti propri
- Creare versioni diverse per device diversi
- Test A/B (non funziona ancora con l'editor Flex)
Tutto ciò potrebbe cambiare in futuro.