Cambiare l’aspetto di un elemento nel pannello Stile.
Usa il pannello Stile quando un elemento in una pagina ha bisogno del suo aspetto: una scheda colorata, un logo sbiadito, un pulsante nei colori della campagna. Vedi ogni modifica sulla pagina mentre la fai. Per un aspetto condiviso da tutte le pagine, come il colore di tutti i pulsanti, cambia invece il tuo tema. Una modifica lì aggiorna l’intero sito.
Il video segue il primo esempio pratico qui sotto: attenua il logo di un partner finché il puntatore lo raggiunge.
Prima di iniziare
- Apri la pagina in DXPR Builder; puntando a un elemento si mostra la sua barra di controllo con Altro. Nuovo del builder? Vedi La tua prima pagina.
- Salva nella finestra conserva una modifica nell’editor. Salva nella barra del builder sopra il contenuto conserva la pagina e mostra “Campo salvato”.
Le impostazioni nel pannello Stile appartengono a un elemento. Vengono salvate nel contenuto di quella pagina, non nel tuo tema. Se il colore del tuo brand cambia l’anno prossimo, ogni elemento colorato a mano conserva il vecchio colore finché non lo modifichi.
- Riusa un aspetto salvando un elemento stilizzato con Altro > Salva come modello, oppure dando agli elementi una classe condivisa sotto Classi HTML. Vedi modelli utente e ID e classi HTML.
- Scegli i colori dai campioni quando il tuo sito li mostra. Vengono dalla tavolozza colori del tuo tema. Un campione copia il colore, quindi una successiva modifica della tavolozza non lo aggiorna.
Esempio pratico: attenuare i loghi finché il puntatore li raggiunge
Una fila di loghi di partner sembra più calma quando i loghi sono attenuati. Questo esempio attenua un logo e lo riporta indietro al passaggio del mouse.
- Passa sopra un elemento Immagine che mostra un logo, fai clic su Altro, poi su Impostazioni.
- Apri il pannello Stile e trascina Opacità a 0.5. Il logo sbiadisce mentre trascini.
- Apri sotto il pannello Stile hover e trascina Opacità a 1.
- Fai clic su Salva nella finestra, poi su Salva nella barra.
- Apri il menu vista (l’icona dell’occhio) nella barra del builder, scegli Anteprima e punta al logo. Passa a piena intensità e si attenua di nuovo quando il puntatore esce.
Ripeti i passi per ogni logo della fila.
Esempio pratico: un pulsante nei colori della campagna
Il tuo tema dà ai pulsanti un colore hover. Uno Sfondo impostato da te sostituisce anche quel colore hover, quindi impostali entrambi.
- Passa sopra l’elemento Pulsante, fai clic su Altro, poi su Impostazioni.
- Nel pannello Stile, scegli uno Sfondo e un Colore del carattere. Fai clic su un campione, oppure digita il tuo codice colore, come #e4002b, nel campo colore.
- Nel pannello Stile hover, scegli uno Sfondo più scuro.
- Fai clic su Salva nella finestra, poi su Salva nella barra.
- Scegli Anteprima nel menu vista e punta al pulsante. Diventa del colore più scuro.
Cosa vedi
Mentre la finestra è aperta, l’elemento mostra ogni modifica. In Anteprima, il logo attenuato passa a piena intensità sotto il puntatore, e il pulsante della campagna diventa del suo colore più scuro. Entrambi gli aspetti restano dopo un ricaricamento della pagina, perché Salva nella barra li ha conservati.
Cosa accetta ogni controllo
| Controllo | Intervallo | Unità |
|---|---|---|
| Colore del carattere, Colore del bordo, Sfondo | qualsiasi colore, con trasparenza | colore |
| Immagine di sfondo | un’immagine dalla libreria multimediale, o un URL | |
| Stile di sfondo, Posizione dello sfondo, Stile del bordo | un elenco che inizia con Predefiniti del tema | |
| Dimensione del carattere | da 0 a 100 | px |
| Raggio del bordo | da 0 a 100 | px |
| Opacità | da 0 a 1, in passi di 0,01 | |
| Ombra | livelli da 0 a 5 | |
| Modello box Margine | da -200 a 200 | PX o % |
| Modello box Padding | da 0 a 200 | PX o % |
| Modello box Bordo | da 0 a 50 | px |
| larghezza × altezza del modello box | da 0 a 2000 | PX o % |
Un valore digitato fuori intervallo viene tagliato al limite più vicino. Il modello box e i suoi lucchetti sono spiegati nella pagina spaziatura.
Come si comportano le impostazioni
Predefiniti del tema
Un colore vuoto, un cursore a 0, un elenco su Predefiniti del tema e un lato del modello box che mostra “-” significano tutti la stessa cosa. DXPR Builder non scrive niente, e decide il tuo tema. Così Opacità 0 non nasconde un elemento, e Dimensione del carattere 0 conserva la dimensione del tema. Per tornare all’aspetto del tema, fai clic su Azzera nel selettore colore, sposta il cursore a 0 oppure scegli di nuovo Predefiniti del tema.
Dove finiscono le impostazioni
Ogni impostazione Stile tranne Ombra viene salvata come stile in linea sull’elemento. Gli stili in linea battono il CSS ordinario del tema. Due cose li battono comunque: le regole del tema marcate !important, e le classi di utilità Bootstrap sotto Classi HTML, che portano anch’esse !important.
Su alcuni elementi le impostazioni vanno su una parte interna. Su un Pulsante stilizzano il pulsante stesso, su un’Immagine l’immagine, su un Link il link e su una Mappa il riquadro della mappa.
Ogni dimensione di schermo
Le impostazioni di stile non hanno breakpoint. 64 px di padding sono 64 px anche su un telefono. I valori in percentuale crescono e calano con la larghezza della pagina. Per valori diversi per dimensione di schermo, usa classi responsive, come mostrato nella pagina ID e classi HTML.
L’opacità sbiadisce tutto ciò che sta dentro
Opacità agisce sull’intero elemento. Sbiadisce il riquadro, il bordo, il testo e ogni elemento dentro di esso. Per un riquadro trasparente dietro un testo pieno, lascia Opacità a 0. Scegli invece un colore di Sfondo con un po’ di trasparenza: il selettore colore ha un suo cursore di opacità per questo.
Stile hover
Stile hover è un pannello separato sotto Stile. Ha gli stessi controlli, modello box incluso. I suoi valori si applicano mentre il puntatore sta sopra l’elemento. A differenza dei valori Stile, sono marcati !important essi stessi, così battono i tuoi valori Stile, le classi di utilità sotto Classi HTML e quasi tutte le regole del tema.
Solo l’Ombra sfuma dentro, in 0,15 secondi. Le altre modifiche hover scattano subito, a meno che il tuo tema le animi. I pulsanti Bootstrap sfumano i colori in 0,15 secondi.
Telefoni e tablet non hanno puntatore. I visitatori lì vedono un aspetto hover solo dopo un tocco, quindi non metterci mai informazioni che servono loro.
Elementi con impostazioni proprie
Alcuni elementi hanno una propria impostazione per lo stesso lavoro. Vince la loro, e il controllo Stile non fa niente.
| Elemento | Ignora in Stile | Usa invece |
|---|---|---|
| Contatore circolare | Sfondo, Dimensione del carattere, larghezza × altezza | Colore di sfondo e Dimensione in Generale, Dimensione del carattere in Contenuto del cerchio |
| Barra di avanzamento | Sfondo, larghezza × altezza | Colore di fondo, Colore frontale e Altezza della barra in Generale |
| Divisore | Sfondo, larghezza | Colore e Lunghezza in Generale |
| Contatore numerico | Dimensione del carattere | Dimensione del carattere in Generale |
| Immagine | larghezza × altezza | Larghezza immagine e Altezza immagine in Generale |
| Mappa | larghezza × altezza | Larghezza mappa e Altezza mappa in Generale |
| Marquee | larghezza × altezza | Larghezza immagine e Altezza in Generale |
| Video, Video locale | larghezza | Larghezza video in Generale |
| Livelli posizionati | larghezza × altezza | Larghezza e Altezza in Generale |
Se non vedi la modifica
- La modifica è sparita quando si è chiusa la finestra. L’hai chiusa con Annulla, l’icona di chiusura o il tasto Esc, che hanno ripristinato le vecchie impostazioni. Rifai la modifica e fai clic su Salva nella finestra.
- La modifica non c’è più dopo un ricaricamento della pagina. Salva nella finestra conserva una modifica solo nell’editor. Fai clic su Salva nella barra prima di lasciare la pagina.
- Resta l’aspetto del tema. Vince una classe di utilità Bootstrap sotto Classi HTML oppure una regola del tema con
!important. Apri il pannello Generale e rimuovi il chip della classe, per esempio Sfondo primario, oppure chiedi al tuo webmaster della regola del tema. - Un controllo non fa proprio niente. Alcuni elementi hanno una propria impostazione per lo stesso lavoro. Vedi Elementi con impostazioni proprie.
- Il pulsante non cambia più colore al passaggio del mouse. Il tuo Sfondo sostituisce il colore hover del tema. Imposta uno Sfondo anche nel pannello Stile hover.
- Il testo è diventato pallido insieme al riquadro. Opacità sbiadisce l’intero elemento. Riportalo a 0 e usa un colore di Sfondo con trasparenza.
- Opacità 0 non nasconde l’elemento. 0 significa Predefiniti del tema. Aggiungi invece la classe Nascondi elemento (d-none) sotto Classi HTML.
Passi successivi
- Sfondi: metti una foto dietro un titolo e mantieni il titolo leggibile.