Editor Studio Two: lavorare con il pannello Ispezione

Modifica le proprietà di qualsiasi elemento, sezione o pagina dal pannello Ispezione. Imposta il ridimensionamento degli elementi nei diversi punti di interruzione, regola il design, aggiungi movimento e collega i contenuti a un'origine dati, tutto da un unico posto.

Controlla l'aspetto e il comportamento di un elemento nei diversi punti di interruzione dalla scheda Design. È la prima scheda che vedi nel pannello Ispezione e include tutte le opzioni, dalle dimensioni e dalla spaziatura fino ai colori, alla tipografia e al CSS personalizzato.

Clicca sulle icone nella parte superiore della scheda per allineare l'elemento selezionato all'interno dell'elemento principale. Sotto queste icone, le sezioni disponibili dipendono dall'elemento selezionato:

• Dimensioni: imposta la larghezza e l'altezza dell'elemento e scegli come ridimensionarlo sui diversi schermi.
• Design dell'elemento: imposta l'aspetto dell'elemento, inclusi colori, bordi, angoli, ombre e tipografia. Se gli elementi sono composti da più parti (es. un menu) o hanno stati specifici al passaggio del mouse o quando sono disabilitati (es. un tasto), scegli prima la parte o lo stato di cui vuoi definire lo stile.
• Layout (contenitori e sezioni): regola la disposizione degli elementi all'interno dell'elemento principale. Scegli un layout a griglia, imposta la spaziatura interna e decidi cosa accade ai contenuti che fuoriescono. Se modifichi Spaziatura verticale da Automatica a Manuale, puoi impostare una spaziatura diversa tra gli elementi per ciascun punto di interruzione.
• Posizione: scegli un tipo di posizione (es. adesivo o fisso) e imposta i margini e l'aggancio per assicurarti che l'elemento rimanga in posizione quando cambiano le dimensioni dello schermo.
• Aspetto: imposta l'opacità e la rotazione dell'elemento.
• Cursore: aggiungi un cursore personalizzato a un elemento, una sezione o una pagina.
• Ancora: aggiungi un'ancora per creare un link diretto all'elemento e copia il relativo URL.
• CSS personalizzato: scrivi il tuo codice CSS per l'elemento selezionato.

Aggiungi movimento a elementi e sezioni dalla scheda Movimento. Puoi applicare diversi tipi di animazioni allo stesso elemento. Ad esempio, un elemento può apparire in dissolvenza durante il caricamento, reagire al cursore del visitatore e spostarsi durante lo scorrimento.

Scegli il tipo di movimento che vuoi aggiungere:

• Entrata: anima l'elemento al primo caricamento. Ad esempio, puoi farlo espandere, apparire in dissolvenza o inclinare ad angolo

• Loop: anima l'elemento in un loop continuo, senza che venga attivato da un'azione specifica

• Scorrimento: anima l'elemento mentre il visitatore scorre la pagina verso l'alto e verso il basso

• Effetti mouse: fai reagire l'elemento al movimento del cursore con un'animazione

• Clic: anima l'elemento quando un visitatore ci clicca sopra

• Passaggio del mouse: anima l'elemento quando un visitatore ci passa sopra con il mouse.
  Nota: alcuni elementi, come tasti e menu, offrono uno stato al passaggio del mouse integrato, quindi non vedrai l'opzione per aggiungere un'altra animazione al passaggio del mouse. Per personalizzare questo stato, vai alla scheda Design e seleziona Passaggio del mouse sotto Stato

Configura i comportamenti avanzati per l'elemento scelto dalla scheda Impostazioni

• Fonti dati: collega una pagina, una sezione o un contenitore a una fonte dati. Gli elementi al suo interno possono quindi utilizzare i dati, le azioni e le funzionalità di tale fonte. Clicca su Collega fonte per cominciare

• Proprietà: modifica il contenuto e il comportamento dell'elemento selezionato. Le opzioni dipendono dall'elemento: quando selezioni un tasto, ad esempio, puoi personalizzarne il testo e il link oppure disabilitarlo. Clicca sull'icona Connetti ai dati accanto a un campo per collegarlo a una fonte dati anziché inserire manualmente un valore oppure clicca su Configura con l'AI per ricevere assistenza da Aria

• Accessibilità: rendi l'elemento più accessibile con le tecnologie assistive. A seconda dell'elemento, puoi impostarne il ruolo, contrassegnarlo come decorativo, aggiungere un nome accessibile e scegliere come gli screen reader annunciano gli aggiornamenti

• Avanzato:

  • Condizione di visibilità: nascondi l'elemento quando una condizione di una fonte dati è vera o falsa

  • Gestori eventi: esegui una funzione quando si verifica un evento relativo all'elemento, come un clic o il passaggio del mouse. I gestori eventi sono disponibili per determinati elementi, come i tasti

Clicca su una domanda qui sotto per scoprire di più