Stile in linea dei componenti per modulo adattivo

È possibile definire l'aspetto e lo stile generali di un modulo adattivo specificando gli stili utilizzando l'editor di temi editor di temi. Inoltre, potete applicare stili CSS in linea a singoli componenti di moduli adattivi e visualizzare rapidamente l'anteprima delle modifiche. Gli stili in linea sostituiscono lo stile fornito nel tema.

Applica proprietà CSS in linea

Per aggiungere stili in linea a un componente:

1. Aprire il modulo nell'editor del modulo e passare alla modalità di stile. Per modificare la modalità di formattazione, nella barra degli strumenti della pagina, toccate > Style.

2. Selezionate un componente nella pagina e toccate il pulsante di modifica . Le proprietà di stile vengono aperte nella barra laterale.

   È inoltre possibile selezionare componenti dalla struttura gerarchica del modulo nella barra laterale. La struttura gerarchica del modulo è disponibile come oggetti modulo nella barra laterale.

   Potete anche selezionare un componente dalla barra laterale. In modalità Stile è possibile visualizzare i componenti elencati in Oggetti modulo. Tuttavia, gli oggetti modulo elencati nella barra laterale elencano componenti quali campi e pannelli. I campi e i pannelli sono componenti generici che possono contenere componenti quali caselle di testo e pulsanti di scelta.

   Quando selezionate un componente dalla barra laterale, vengono elencati tutti i componenti secondari e le proprietà del componente selezionato. È possibile selezionare uno specifico sottocomponente e formattarlo.

3. Fate clic su una scheda nella barra laterale per specificare le proprietà CSS. È possibile specificare proprietà quali:

   • Dimension e posizione (impostazione visualizzazione, spaziatura, altezza, larghezza, margine, posizione, indice z, float, cancellazione, overflow)
   • Testo (famiglia di font, spessore, colore, dimensione, altezza e allineamento)
   • Sfondo (immagine e sfumatura, colore di sfondo)
   • Bordo (larghezza, stile, colore, raggio)
   • Effetti (Ombra, Opacità)
   • Avanzate (consente di scrivere CSS personalizzato per il componente)

4. Allo stesso modo, potete applicare stili ad altre parti di un componente, ad esempio Widget, Didascalia e Aiuto.

5. Toccate Fine per confermare le modifiche oppure Annulla per annullare le modifiche.

Esempio: stili in linea per un componente campo

Le immagini seguenti rappresentano un campo di testo prima e dopo l’applicazione degli stili in linea.

Componente casella di testo prima dell'applicazione delle proprietà di stile in linea

Osservate la modifica nello stile della casella di testo come illustrato nell'immagine seguente dopo l'applicazione delle seguenti proprietà CSS.

Componente casella di testo dopo l'applicazione delle proprietà di stile in linea

Seguendo i passaggi descritti qui sopra, è possibile selezionare e formattare altri componenti, ad esempio pannelli, pulsanti di invio e pulsanti di scelta.