Le funzionalita' descritte in questa pagina fanno riferimento ad una versione minima di Ready Pro v2025.5
Il pannello editor CSS si presenta suddiviso in due aree:
area sinistra: dove si trovano il selettore della versione che consente di creare più versioni di regole CSS per effettuare prove e testare soluzioni diverse in modo dadecidere solo dopo quale pubblicare; i pulsanti Anteprima, Salva e Pubblica e l'area di inserimento del codice CSS personalizzato.
area destra: dove si trovano i selettori della skin, le icone di scelta del dispositivo e l'area di anteprima del sito.
area sinistra: dove si trovano il selettore della versione che consente di creare più versioni di regole CSS per effettuare prove e testare soluzioni diverse in modo dadecidere solo dopo quale pubblicare; i pulsanti Anteprima, Salva e Pubblica e l'area di inserimento del codice CSS personalizzato.
area destra: dove si trovano i selettori della skin, le icone di scelta del dispositivo e l'area di anteprima del sito.
Se, ad esempio, proviamo ad inserire una semplice regola CSS per la testata, impostiamo la proprietà background con il colore verde.
Per vedere il risultato senza modificare effettivamente il sito premiamo il pulsante Anteprima.
Per vedere il risultato senza modificare effettivamente il sito premiamo il pulsante Anteprima.
Se vogliamo provare delle soluzioni diverse con più regole senza renderle visibili agli utenti, possiamo utilizzare la sezione Versioni dove abbiamo la possibilità di creare, modificare, duplicare o cancellare una versione.
Ad esempio, possiamo creare una nuova nuova versione CSS provando a duplicare quella predefinita.
Assegniamo quindi una descrizione alla nuova versione e procediamo.
Una volta creata la nuova versione, andiamo a modificarla.
In caso, il sistema ci avvisa se abbiamo in corso delle precedenti modifiche CSS non salvate e che quindi, procedendo, saremo disposti a perdere.
Adesso ci troviamo sulla versione CSS “Leggibilità migliorata” nella quale vogliamo inserire un insieme di regole per migliorare la leggibilità di alcuni elementi.
Se vogliamo identificare più facilmente un elemento da modificare, utilizziamo lo strumento Cattura elemento e ci posizionamo col puntatore sull'elemento da modificare, ad esempio, un'area web che vogliamo rendere più evidente.
Nella zona inferiore dello schermo possiamo notare l’identificativo CSS dell’elemento selezionato.
Nella zona inferiore dello schermo possiamo notare l’identificativo CSS dell’elemento selezionato.
Cliccando sull'elemento desiderato, il sistema ci chiede se vogliamo modificare solo quell’elemento o tutti quelli simili, perché in questo caso selezionando un'area web sarebbe opportuno non solo personalizzare solamente questa specifica area, ma piuttosto modificare l'aspetto di tutte le aree web.
Compare un piccolo widget, con controlli semplici per modificare dimensioni del testo, colore, ecc.
N.B. Via CSS si possono fare migliaia di modifiche: effetti, allineamenti, colori, layout, ecc. Alcune modifiche, come cambiare un colore, sono sicure; altre, invece, possono causare problemi seri: spostamenti, elementi invisibili, fino ad arrivare ad un sito non navigabile. Per questo, abbiamo limitato le modifiche possibili nel widget.
Per i professionisti, ovviamente, è possibile aggiungere manualmente altre proprietà CSS una volta identificati gli elementi.
Se desideriamo rendere più leggibili tutte le aree web: proviamo ad impostare il font in grassetto e aumentiamo la dimensione.
Ogni volta che modifichiamo un elemento CSS, viene visualizzata l'anteprima delle modifiche nell'area destra.
Una volta terminate le modifiche, occorre premere il pulsante di Conferma.
N.B. Via CSS si possono fare migliaia di modifiche: effetti, allineamenti, colori, layout, ecc. Alcune modifiche, come cambiare un colore, sono sicure; altre, invece, possono causare problemi seri: spostamenti, elementi invisibili, fino ad arrivare ad un sito non navigabile. Per questo, abbiamo limitato le modifiche possibili nel widget.
Per i professionisti, ovviamente, è possibile aggiungere manualmente altre proprietà CSS una volta identificati gli elementi.
Se desideriamo rendere più leggibili tutte le aree web: proviamo ad impostare il font in grassetto e aumentiamo la dimensione.
Ogni volta che modifichiamo un elemento CSS, viene visualizzata l'anteprima delle modifiche nell'area destra.
Una volta terminate le modifiche, occorre premere il pulsante di Conferma.
Una volta inserite le nuove regole CSS, esse saranno visibili nella relativa area.
A questo punto è possibile scegliere tra due opzioni:
- Salva: salva le modifiche CSS appena effettuate nella versione in uso senza renderle visibili (pubblicarle) sul sito
- Pubblica: salva le modifiche CSS e le rende effettive ovvero visibili sul sito ecommerce
A questo punto è possibile scegliere tra due opzioni:
- Salva: salva le modifiche CSS appena effettuate nella versione in uso senza renderle visibili (pubblicarle) sul sito
- Pubblica: salva le modifiche CSS e le rende effettive ovvero visibili sul sito ecommerce
