!

!
!
!

Cloud Site !
!

MANUALE D’USO #1

DESIGN, TEMI E STILI

!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!

!
Temi:&modificare&un&tema&
Introduzione&su&come&modificare&un&tema.&

Un#tema#è#una#collezione#di#stili#e#impostazioni#
Puoi&modificare&gli&stili&e&le&impostazioni&associate&con&qualsiasi&tema&per&cambiare&il&suo&aspetto.&E'&anche&possibile&
creare&un&tema&da&zero.&

&

Usa&il&tasto#Sfondo#(1)&per&impostare&lo&sfondo&di&un&tema.&Poi&clicca&su&uno&stile&nel&pannello#stili#riga#(2)&per&
applicarlo&al&rigo&corrente.&Clicca&su&Modifica#Stile#Riga#(3)&per&modificare&uno&stile.&Gli&stili&possono&essere&clonati&
usando&un&bottone#sul#fondo#del#pannello#(4).&Il#bottone#stili#colonna#(5)&è&usato&per&modificare&uno&stile&colonna.&

&

&

&

&

&

&

&
Impostare#lo#sfondo#di#un#tema#

&

1#Larghezza#tema:#è&di&solito&preimpostata&a&960px.&Attenzione:&cambiare&la&larghezza&potrebbe&avere&effetti&sulla&
struttura&del&tuo&sito.&
2#Posizione#Tema:#imposterà&il&tema&a&sinistra,&al&centro&o&alla&destra&di&una&pagina.&Solitamente&è&impostato&al&
centro.&
3#Modalità#colore:&usa&uno&sfondo&a&colore&solido.&
4#Modalità#immagine:&usa&un'immagine&come&sfondo&e&ripete&opzionalmente&l'immagine&orizzontalmente&e&
verticalmente.&
5#Modalità#flessibile:&usa&un'immagine&e&la&scala&flessibilmente&in&modo&che&le&estremità&superiore&e&inferiore&restino&
intatte&e&la&porzione&al&centro&è&scalata.&
6#Gradiente#lineare:&crea&un&gradiente&a&partire&da&due&colori&specificati.&

Editor#stile#riga#

&

1:#Ogni#stile#riga&ha&stili&interni&ed&esterni.&Lo&stile&interno&è&sempre&in&fronte&allo&stile&esterno.&Lo&stile&esterno&si&
estende&fino&ai&margini&della&finestra&del&browser.&
2:#Un#colore#di#sfondo,&la&gradazione&dell'immagine&può&essere&impostata.&Se&la&riga&contiene&due&colonne,&lo&slider&
della&canaletta&può&essere&usato&per&cambiarne&lo&spessore.&
3:#Larghezza#Bordo#della#Riga,&puoi&impostare&raggio&e&colore.&Clicca&sul&riquadro&per&applicare&lo&stesso&valore&ad&
ogni&gruppo&di&slider.&Nota:&devi&scegliere&un&colore&per&rendere&il&bordo&visibile.&&
4:#Imposta#margine#e#Padding#per#la#riga.&Clicca&nel&quadro&per&applicare&lo&stesso&valore&a&allo&stesso&gruppo&di&
slider.&
5:#Impostazioni#Ombra.&Imposta&il&colore&dell'ombra&su&nero&e&poi&muovi&gli&altri&slider&per&vedere&l'ombra.&
Stili#Colonna#

&

I&pannelli&stile&colonna&funzionano&come&il&pannello&stile&riga.&

!
Struttura&della&pagina&
Scopri&com'è&fatta&una&pagina&di&Cloud&Site.&

PRIMA&DI&INIZIARE:&Struttura&della&pagina&

&

Una&pagina&Cloud&Site&si&compone&di&otto&righe.&Di&default,&4&righe&sono&sempre&visibili&(mostrate&in&grassetto&
sull'immagine)&mentre&le&altre&4&sono&nascoste.&Ogni&pagina&deve&avere&almeno&una&riga&visibile.&&

Row:&Inner&and&outer&

&

Ogni&riga&è&costituita&da&due&tipi&di&aree:&una&Interna&che&contiene&i&widget&ed&una&esterna&che&arriva&fino&alle&
estremità&della&finestra&del&browser.&

Puoi&ignorare&l'area&esterna&a&meno&che&il&tuo&design&non&richieda&un&effetto&speciale,&ad&esempio&un'ombra&che&viene&
proiettata&al&di&fuori&dell'area&coi&contenuti.&

&

&

&
Modificare&le&righe&

&

Le&righe&sono&solitamente&bloccate&in&modo&che&non&puoi&cambiarle.&Per&sbloccarle,&clicca&su&Modifica&Righe/Colonne.&

Dividere&una&riga&in&colonne&

&

Ci&sono&due&modi&per&creare&delle&colonne&in&Cloud&Site:&

1. Usando&il&menu&Layout&Riga&(1)&
2. Usando&il&widget&Layout&Colonne&(2)&

Quando&usi&il&menu&Layout&Riga,&puoi&usare&uno&stile&diverso&per&ogni&colonna.&

Colonne&create&col&menu&Layout&Riga&sono&chiamate&colonne&strutturali&perché&esse&definiscono&una&struttura&per&altri&
widget.&Puoi&dividere&una&riga&in&2&L&6&colonne&strutturali.&

Quando&crei&delle&colonne&usando&il&widget&Layout&Colonne,&le&colonne&generate&non&saranno&strutturali.&Non&puoi&
applicare&alcuno&stile&a&delle&colonne&non&strutturali.&

&

&

&

&

&

&

&
Allinea&le&colonne&usando&le&guide&visuali&

&

Se&hai&bisogno&di&allineare&colonne&in&diverse&righe,&usa&le&guide&visuali&(1).&

Trascina&una&guida&(2)&su&una&colonna&(3)&,&poi&trascina&le&altre&colonne&per&allienarle&alla&guida&(4&&&5).&

Riordinare&le&righe&

&

Clicca&sulla&maniglia&della&riga&(1)&e&trascina&verticalmente&per&cambiare&l'ordine&della&riga.&
Rinominare&le&righe&

&

Clicca&sul&nome&di&una&riga&(1)&sul&menu&della&visibilità&righe&per&cambiarne&il&nome.&

&
Cambiare(il(colore(di(un(rigo(o(di(una(colonna(
Come(cambiare(il(colore(di(sfondo(di(un(rigo(o(una(colonna(usando(gli(stili.(

Usa$gli$stili$per$impostare$i$colori$

Clicca(su(Modifica(Righe/Colonne.(

Potrai(impostare(un(colore(di(sfondo(per(il(rigo(creando(uno(stile.(

Per(creare(uno(stile,(clicca(sull'ingranaggio$(1)(accanto(al(rigo(e(poi(clicca(sul(segno(+$(2).(
 (

Dai(al(rigo(un(nome$(1)(e(clicca(su(Aggiungi$Stile$Riga$(2)(

Clicca(sul(piccolo$riquadro$colore$(1)$e(seleziona(un(colore.(Potrai(trascinare(il(cursore$colore$(2)(o(incollare(un(valore$
esadecimale$(3).$Clicca(sul(tasto(OK$(4)$per(confermare(la(selezione.((
 (

Clicca(su(Salva$Cambiamenti$(1)(

Il(colore(verrà(applicato(al(rigo(e(lo(stile(apparirà(nella(lista(Stili$Riga$(2)$e(potrà(essere(applicato(a(qualsiasi(altro(rigo.$

(
Cambiare$il$colore$di$una$colonna$

Per(suddividere(un(rigo(in(più(colonne,(usa(il(menu(Layout(Riga.(

Clicca(sul(pulsante(aggiungi(stile((1)(e(segui(la(stessa(procedura(del(rigo.(

(
Il#selettore#colore#
Introduzione#al#selettore#colore#

Il#selettore#colore#si#compone#di#quattro#parti#

1#Colore#personalizzato#
Usalo#per#scegliere#un#colore#

2#Tavolozza#colori#
Usala#per#scegliere#un#colore#dalla#tavolozza#

3#Mostra#il#colore#selezionato#
Puoi#inserire#un#valore#esadecimale#per#impostare#un#colore#

4#Colori#selezionati#in#precedenza#
Puoi#memorizzare#fino#a#15#colori#

#
Usare#il#selettore#colore#

Clicca#e#trascina#per#selezionare#un#colore#(1).#Muovi#lo#slider#(2)#per#selezionare#una#sfumatura#differente.#Puoi#
inserire#valori#esadecimali#nel#riquadro#testo#(3).#Clicca#il#bottone#+#(4)#per#memorizzare#fino#a#15#colori#nella#griglia#
(5).#Seleziona#un#colore#dalla#tavolozza#(6)#se#vuoi#che#il#colore#cambi#ogni#volta#che#cambi#la#tavolozza.#Per#impostare#
il#colore#su#trasparente#clicca#su#(7).##

Clicca#OK#(8)#per#chiudere#il#pannello#e#applicare#tutte#le#impostazioni#selezionate.#

!
Come%cambio%la%favicon?%
Puoi%sostituire%la%favicon%standard%con%un%tuo%design%personalizzato%

Favicon(FAQ(

D:(Cos'è(una(favicon?%
R:%Una%favicon%(abbreviazione%per%favorites%icon,%icona%preferita),%conosciuta%anche%come%icona%del%collegamento,%
icona%del%sito%web,%o%icona%segnalibro%è%una%icona%da%16×16%o%32×32%pixel%associata%ad%un%particolare%sito%o%pagina%
web.%Definizione%da%Wikipedia:%http://it.wikipedia.org/wiki/Favicon%

D:(Ho(troppa(fretta(per(leggere(queste(istruizioni,(quindi(userò(una(riga(di(codice(che(ho(trovato(in(rete.(
Funzionerà?%
R:%No,%non%funzionerà.%L'unico%modo%per%cambiare%la%favicon%del%tuo%sito%è%quello%mostrato%in%questo%tutorial.%

D:(Come(posso(creare(una(favicon?%
R:%Cloud%Site%la%convertirà%per%te.%Tu%dovrai%solo%caricare%l'immagine%che%preferisci.%

D:(Perché(alcuni(browser(non(mostrano(la(mia(favicon?%
R:%Alcune%versioni%di%Internet%Explorer%potrebbero%non%mostrare%la%favicon%correttamente.%Questo%non%è%un%difetto%di%
Cloud%Site.%Alcuni%problemi%possono%essere%risolti%pulendo%la%cache%del%browser.%Non%c'è%niente%che%possiamo%fare%per%
risolvere%i%problemi%con%questi%vecchi%browser.%

D:(Come(mai(alcune(volte(posso(vedere(un(rapido(flash(della(favicon(di(Cloud(Site(prima(che(quella(del(mio(account(
appaia?%
R:%Si%tratta%probabilmente%di%un%problema%di%cache%del%browser.%Non%c'è%niente%che%possiamo%fare.%%

D:(Cambierete(la(favicon(del(mio(sito(per(me?%
R:%No.%

D:(Posso(disabilitare(la(favicon?%
R:%No.%Ma%ne%puoi%creare%una%trasparente%e%usarla%ma%non%puoi%rimuovere%la%favicon.%%

%
PASSO(1.(Vai(sulla(pagina(di(gestione(del(tuo(sito(

Clicca%su%Gestisci((1)%

PASSO(2.(Seleziona(Favicon(dal(menu(a(sinistra(

Clicca%su%Favicon((1)(e%potrai%modificare%la%favicon%del%tuo%sito.%

PASSO(3.(Seleziona(una(pagina(dal(tuo(computer(

Clicca%sul%bottone%Scegli(File/Scegli(File((1)%
 %

Cerca%l'immagine%che%vuoi%usare%e%cliccaci%su((1).%

Clicca%sul%tasto(Apri((2).%

Clicca%sul%tasto%Carica/Upload((1).(

%
PASSO(4.(Pubblica(il(tuo(sito(

Clicca%sul%tasto%PUBBLICA%per%visualizzare%i%cambiamenti.%

Ecco%come%apparirà%la%tua%favicon%dopo%la%pubblicazione.%
Temi:&scegli&un&nuovo&tema&per&il&tuo&sito&
Scegliendo&un&nuovo&tema&cambierai&l'aspetto&del&tuo&sito.&

Apri%il%selettore%temi%

&

Clicca&sul&pannello%temi%(1)&per&mostrare&il&selettore&temi.&Seleziona&Tutti%i%Temi%(2)&per&vedere&tutti&i&temi&disponibili&
sul&tuo&account.&Seleziona&Temi%Modificati&per&vedere&i&temi&da&te&creati&o&modificati.&

&
Colori&del&tema&
Usando&il&pannello&Tavolozze&Colore,&puoi&impostare&i&colori&di&un&tema&

Seleziona)una)Tavolozza)Colori)per)cambiare)tutti)i)colori)del)
tema)corrente)

&

Clicca&su&bottone)Colori)Tema)(1)&e&poi&clicca&su&una&tavolozza)(2)&per&avere&un'anteprima.&Clicca&ovunque&al&di&fuori&
della&tavolozza&per&confermare&il&cambiamento.&

&

&
Stili%
Come%cambiare%gli%stili%del%tuo%sito%

Il#pannello#Font#del#Tema#

Clicca%sul%tasto%Font#Del#Tema#(1)%per%aprire%il%pannello%Stili#(2).#Clicca%su%un%qualsiasi%stile%della%lista%per%cambiarlo.%

Modificare#uno#stile#
I%Set%di%Font%ti%danno%un%modo%rapido%per%cambiare%tutti%i%font%del%tuo%sito.%Ma%se%vuoi%avere%più%controllo,%puoi%creare%
e%modificare%i%set%direttamente%dall'editor%stili.%

%
Sfondo&sito&
Come&cambiare&il&colore&o&il&pattern&dello&sfondo&

Impostare*il*colore*di*sfondo*del*sito*

&

I&cambiamenti&allo&sfondo&si&applicano&all'intero&tema.&Non&puoi&impostare&lo&sfondo&di&una&singola&pagina.&

Per&impostare&il&colore&di&sfondo,&clicca&sul&tasto&"Sfondo"*(1)&e&imposta&il&menu&Tipo&su&Colore*(2).&Clicca&sul&
rettangolino*colore*(3)*e&seleziona&un&colore.&

&
Se&selezioni&un&colore&dal&selettore*colore*(1)&il&colore&starà&fisso.&Se&invece&selezioni&un&colore&dalla*tavolozza*del*
tema*(2)&il&colore&cambierà&ogni&volta&che&cambierai&la&tavolozza*(3).&

Colori*del*Tema*

&

Una&tavolozza&è&costituita&da&una&serie&di&colori.&Puoi&usare&il&pannello&tavolozze&per&impostare&o&colori&per&un&tema.&

Imposta*un*pattern*per*lo*sfondo*

&
Per&impostare&una&texture&di&sfondo,&clicca&sul&tasto&Sfondo*(1)&e&imposta&il&menu&Tipo&su&Immagine*(2).*
Puoi&creare&facilmente&un&pattern&a&ripetizione&usando&strumenti&come&http://bgpatterns.com/&

&

Trascina&un&pattern&dal&pannello*immagini*(1)&verso&il&riquadro*immagine*(2).&Se&vuoi&che&l'immagine&si&ripeta&puoi&
selezionare&i&riquadri&ripetizione*orizzontale*e*verticale*(3).&

TRUCCO:*E'&meglio&evitare&di&usare&immagini&grandi&per&uno&sfondo,&possono&rendere&il&tuo&sito&molto&lento&da&
caricare.&

Puoi&scaricare&altri&pattern&da:&http://patterns.ava7.com/&

Gradiente*di*sfondo*

&
Per&impostare&un&gradiente,&imposta&il&menu&Tipo&su&Gradiente*Lineare*(1)&e&seleziona&due&colori&differenti&dai&
riquadri*colore*(2).&

&