Fai reagire gli elementi al passaggio del mouse.

Impara DXPR BuilderCrea le pagineDai stile agli elementiGuide di design

Fai cambiare un elemento quando un visitatore lo indica: un riquadro che si solleva, un pulsante che si scurisce, un’immagine che si schiarisce. Imposti l’aspetto a riposo nel pannello Style e l’aspetto hover nel suo gemello, il pannello Hover style. L’esempio costruisce un riquadro di testo grigio che si solleva al passaggio del mouse.

Il video dà a un riquadro di testo sfondo, padding e un’ombra che si intensifica al passaggio del mouse.

Costruisci il riquadro di testo

  1. Fai clic su + nell’area di contenuto e scegli Section nella scheda Layout.
  2. Fai clic su + sulla sezione e scegli Row.
  3. Fai clic sull’icona griglia sulla riga, scegli il riquadro con tre colonne uguali e fai clic su Save.
  4. Fai clic su + nella prima colonna e scegli Text nella scheda Content.
  5. Digita "Open day", impostalo a Titolo 3 e aggiungi una riga sotto di esso.

Imposta lo stile a riposo

  1. Nella stessa finestra delle impostazioni, apri il pannello Style.
  2. Scegli un Background grigio chiaro.
  3. Nel modello di riquadro, imposta i lati superiore, sinistro e inferiore di Padding a 24.
  4. Imposta Border radius a 8.
  5. Imposta Drop shadow a 1.

Imposta lo stile hover

  1. Apri il pannello Hover style.
  2. Imposta Drop shadow a 4.
  3. Fai clic su Save.
  4. Fai clic su Save nella barra di DXPR Builder.
  5. Apri il menu vista, l’icona occhio sulla barra, e scegli Preview.
  6. Sposta il puntatore sul riquadro di testo.

Cosa vedrai

A riposo il riquadro di testo è grigio con angoli arrotondati e un’ombra leggera. Quando il puntatore lo raggiunge, l’ombra si intensifica e il riquadro sembra sollevarsi; quando il puntatore va via, torna giù. Il cambio d’ombra è animato. Altri cambi hover, come un nuovo colore, scattano subito.

Impostazioni

Il pannello Hover style contiene gli stessi campi del pannello Style. Un campo lasciato vuoto mantiene il valore a riposo.

Campo Uso al passaggio del mouse
Margin, Border, Padding (modello di riquadro) Sposta, incornicia o ingrandisci l’elemento
Font color Evidenzia il testo
Border color Enfatizza il bordo
Background Cambia il riempimento
Background image, Background style, Background position Scambia o sposta l’immagine
Border style Mostra un bordo
Font size Ingrandisci il testo
Border radius Arrotonda gli angoli
Opacity Rivela o attenua l’elemento
Drop shadow Aggiungi profondità, da 1 a 5

Schemi comuni

  • Sollevamento card: Drop shadow 1 in Style, 4 in Hover style.
  • Rivelazione immagine: Opacity 0.7 in Style, 1 in Hover style.
  • Cambio colore pulsante: un Background più scuro in Hover style.
  • Evidenziazione bordo: Border style Solid con un Border color chiaro in Style, un Border color d’accento in Hover style.

Se non vedi l’effetto

  • Il riquadro di testo non cambia quando lo indichi. Il valore hover è uguale a quello a riposo, oppure lo hai impostato per sbaglio nel pannello Style. Apri More > Settings e alza Drop shadow nel pannello Hover style.
  • È difficile valutare l’effetto mentre modifichi. In modalità di modifica l’elemento mostra anche barra di controllo e contorno quando lo indichi. Scegli Preview nel menu vista e indicalo di nuovo.
  • Opacity, Font size o Border radius a 0 non hanno effetto. Un valore 0 conta come non impostato per questi tre campi. Per sfumare un elemento quasi del tutto, usa un Opacity di 0.01.

Prossimi passi