Scopri come creare un tema personalizzato, personalizzare lo stile dei singoli componenti e utilizzare i font web in un tema
Questa esercitazione è un passaggio della serie Crea il tuo primo modulo adattivo . Si consiglia di seguire la serie in sequenza cronologica per comprendere, eseguire e illustrare il caso d’uso completo dell’esercitazione.
È possibile utilizzare i temi per fornire un aspetto e uno stile unici a un modulo adattivo. Puoi applicare i temi predefiniti forniti con l’editor di moduli adattivi o creare temi personalizzati. AEM Forms fornisci un editor di temi per creare temi personalizzati. Un singolo tema può dare un aspetto diverso allo stesso modulo adattivo aperto su dispositivi mobili, tablet o desktop. Qualsiasi conoscenza precedente di CSS o LESS non è necessaria per utilizzare l'editor di temi, ma è desiderato.
Al termine dell’esercitazione, imparerai a:
Dopo aver completato l’esercitazione, il modulo avrà un aspetto simile al seguente:
Scarica le immagini in stile intestazione e logo, riportate di seguito, sul computer locale. L’intestazione del modulo adattivo shipping-address-add-update-form
utilizza lo stile dell’intestazione e le immagini del logo. L’immagine in stile intestazione viene visualizzata sul lato destro dell’intestazione.
L’editor di moduli adattivi offre diversi temi predefiniti. Se si intende non utilizzare uno stile personalizzato per il modulo adattivo, è anche possibile pubblicare i moduli adattivi con un tema preconfigurato. I temi sono indipendenti dai moduli adattivi. È possibile applicare lo stesso tema a più moduli adattivi. Per applicare un tema a un modulo adattivo:
Apri il modulo adattivo per la modifica.
http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html
Apri le proprietà del contenitore Modulo adattivo. Nel browser delle proprietà, passa a Base > Tema modulo adattivo. Il campo Tema modulo adattivo elenca tutti i temi predefiniti e personalizzati. Per impostazione predefinita, viene applicato il tema Area di lavoro.
Seleziona un tema dal campo Tema modulo adattivo . Ad esempio, Tema sondaggio. Tocca per applicare il tema selezionato.
Figura: Modulo adattivo con tema predefinito
Figura: Forma adattiva con il tema Survey
La struttura visualizzata sopra richiede modifiche nel testo segnaposto e nel logo del modulo adattivo esistente. Esegui le seguenti operazioni per apportare le modifiche richieste:
Modifica il logo e il testo esistenti dell’intestazione. Per rimuovere il logo:
Aprire il modulo nell’editor del modulo.
http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html
Tocca l’immagine del logo nel componente header e tocca properties. Nella proprietà image , tocca X per rimuovere l’immagine del logo esistente.
Tocca carica, seleziona il logo.png e tocca per salvare le modifiche. L'immagine è stata scaricata nella sezione Prima di iniziare .
Tocca il testo dell’intestazione We.Retail
e tocca edit. Cambia il testo dell’intestazione in
we retail
. Applica la formattazione in grassetto solo a we
in we retail
.
Rimuovere il titolo e aggiungere il testo segnaposto:
Tocca il campo ID cliente e tocca le proprietà .
Copia il contenuto del campo Titolo nel campo Testo segnaposto .
Elimina il contenuto del campo Titolo e tocca .
Ripetere i tre passaggi precedenti per tutte le caselle di testo, le caselle numeriche e i campi e-mail del modulo.
Puoi utilizzare editor di temi per creare temi personalizzati. L'editor a tema è un potente editor WYSIWYG. È un metodo visivo per applicare CSS a vari componenti di un modulo adattivo. Fornisce controlli più precisi per assegnare uno stile ai componenti e ai pannelli di un modulo adattivo.
Un tema è un’entità separata come i moduli adattivi. Contiene stili (CSS) per i componenti e i pannelli di un modulo adattivo. Gli stili includono proprietà CSS quali colori di sfondo, colori dello stato, trasparenza, allineamento e dimensioni. Quando si applica un tema, lo stile specificato viene applicato ai componenti corrispondenti di un modulo adattivo.
In questa esercitazione verranno formattati intestazione e piè di pagina, componenti di testo e numerici, componenti di allegato e pulsanti. Cominciamo con la creazione di un tema:
Accedi all'istanza di authoring AEM e passa a Adobe Experience Manager > Forms > Temi. L'URL predefinito è http://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themes.
Tocca Crea e seleziona Tema. Viene visualizzata la pagina Crea tema con i campi necessari per creare un tema. I campi Titolo e Nome sono obbligatori:
Tocca Crea. Viene creato un tema e viene visualizzata una finestra di dialogo per aprire il modulo per la modifica. Tocca Apri per aprire il tema appena creato in una nuova scheda. Il tema si apre nell’editor di temi. Per lo stile, l’editor di temi utilizza un modulo adattivo predefinito fornito con AEM Forms.
Per informazioni sull'utilizzo dell'interfaccia utente dell'editor di temi, consulta Informazioni sull'editor di temi.
Tocca Opzioni tema > Configura. Nel campo Anteprima modulo , seleziona il modulo adattivo shipping-address-add-update-form , tocca
e tocca Salva. Ora, l’editor di temi è configurato per utilizzare il proprio modulo adattivo invece del modulo adattivo predefinito. Tocca Annulla per tornare all’editor di temi.
Figura: Editor tema con modulo adattivo per l'indirizzo di spedizione-add-update-form
Figura: Modulo adattivo con il modulo predefinito
Le intestazioni e i piè di pagina forniscono un aspetto coerente e distintivo a un modulo adattivo. In genere, l’intestazione contiene il logo e il nome dell’organizzazione, il piè di pagina contiene informazioni sul copyright e queste rimangono identiche in più forme di un’organizzazione. Per assegnare uno stile a intestazione e piè di pagina del modulo adattivo per l’indirizzo di spedizione-add-update-form:
Passa all’opzione Intestazione > Testo nel pannello Selettori. Il pannello Selettori si trova a sinistra dell’editor di temi. Se il pannello non è visibile, tocca Attiva/disattiva pannello laterale.
Imposta le seguenti proprietà nel pannello a soffietto Testo e tocca .
Proprietà | Valore |
---|---|
Famiglia font | Arial |
Colore font | FFFFFF |
Dimensione font | 54 px |
Tocca il widget header e tocca Header. Le opzioni di stile del widget Intestazione vengono visualizzate a sinistra. Espandi il pannello a soffietto Dimension e posizione, imposta Altezza su 120px
e tocca .
Espandi il Sfondo a soffietto del widget di intestazione, imposta il Colore di sfondo su F6921E.
Passa il puntatore del mouse su Immagine e sfumatura > + Aggiungi, tocca Immagine. Imposta le seguenti proprietà e tocca .
Proprietà | Valore |
---|---|
immagine | Carica header-style.png. L'immagine è stata scaricata nella sezione Prima di iniziare . |
Posizione | A destra in basso |
Divisione in porzioni | Nessuna ripetizione |
Nell’editor di temi, tocca il logo nell’intestazione e tocca Logo intestazione. Espandi il pannello a soffietto Dimension e posizione, imposta le seguenti proprietà e tocca .
immagine | Valore |
immagine |
Suggerimento: tocca l’icona del |
Altezza | 4,75rem |
Tocca il widget piè di pagina e tocca Piè di pagina. Espandi il pannello a soffietto Sfondo, imposta il Colore di sfondo su F6921E
e tocca .
È possibile utilizzare più componenti in un modulo adattivo per acquisire i dati. Ad esempio, casella di testo e casella numerica. È possibile fornire uno stile identico a tutti i componenti di acquisizione dati o uno stile separato per ciascun componente. In questa esercitazione, alle caselle numeriche (ID cliente, CAP) e alle caselle di testo (ID cliente, Nome, Indirizzo di spedizione, Stato, E-mail) viene applicato uno stile identico. Per assegnare uno stile ai componenti di acquisizione dati:
Tocca il campo ID cliente e tocca l’opzione Widget del campo . Imposta le seguenti proprietà e tocca .
Pannello a soffietto | Proprietà | Valore |
Bordo | Colore bordo | A7A9AC |
Bordo | Raggio bordo |
|
Testo | Famiglia font | Arial |
Testo | Colore font | 939598 |
Testo | Dimensione font | 18 px |
Dimension e posizione | Larghezza | 60% |
Dimension e posizione | immagine |
|
Tocca l’area vuota sopra il campo ID cliente e tocca Contenitore pannello reattivo. Imposta Sfondo > Colore di sfondo su F1F2F2. Tocca .
È possibile utilizzare un tema personalizzato per applicare uno stile identico a tutti i pulsanti del modulo adattivo e stile in linea per applicare uno stile a un pulsante specifico. Per assegnare uno stile ai pulsanti:
Tocca il pulsante Invia e tocca l’opzione Pulsante . Imposta le seguenti proprietà e tocca .
Pannello a soffietto | Proprietà | Valore |
Sfondo | Colore di sfondo | F6921E |
Bordo |
Colore bordo | F6921E |
Bordo | Raggio bordo |
|
Testo |
Famiglia font | Arial |
Testo | Colore font | FFFFFF |
Testo | Dimensione font | 18 px |
Applica il tema personalizzato Tema globale al modulo adattivo. Se lo stile non si riflette sul modulo adattivo, svuota la cache del browser e riprova.
Alcuni stili si applicano solo a un componente specifico. Tali componenti sono formattati nell’editor di moduli adattivi.
Apri il modulo adattivo per la modifica. http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html
Nella barra superiore, seleziona l’opzione Stile .
Tocca il pulsante Allega e tocca l’icona . Imposta le seguenti proprietà nei Dimension e nel pannello a soffietto:
Proprietà | Valore |
---|---|
Mobile | Sinistra |
Larghezza | 10% |
Tocca l’opzione bozza indirizzo approvata dal governo e tocca l’icona . Imposta le seguenti proprietà:
Pannello a soffietto | Proprietà | Valore |
Dimensioni e posizione | Mobile | Sinistra |
Dimensioni e posizione | Larghezza | 73% |
Dimensioni e posizione | Riempimento |
|
Dimensioni e posizione | Altezza | 40 px |
Dimensioni e posizione |
immagine |
|
Sfondo | Colore di sfondo | FFFFFF |
Bordo | Spessore bordo | 1 px |
Bordo | Stile bordo | Uniforme |
Bordo | Colore bordo | A7A9AC |
Bordo | Raggio bordo | 7 px |
Testo | Famiglia font | Arial |
Testo | Colore font | BCBEC0 |
Testo | Dimensione font | 18 px |
Testo | Altezza riga | 2 |
Tocca il pulsante Invia e tocca l’icona . Imposta le seguenti proprietà:
Pannello a soffietto | Proprietà | Valore |
Dimension e posizione | Mobile | Destra |
Dimension e posizione | immagine |
|
Sfondo | Colore di sfondo | F6921E |
Bordo | Colore bordo | F6921E |
È possibile utilizzare vari font per progettare un modulo adattivo. Tutti i dispositivi su cui viene visualizzato il modulo adattivo potrebbero non avere i font utilizzati per progettare il modulo adattivo. È possibile utilizzare un servizio di font Web per fornire i font richiesti al dispositivo di destinazione.
Adobe Fonts è un servizio di font web. Puoi configurare e utilizzare il servizio con moduli adattivi. Per utilizzare Adobe Fonts in un modulo adattivo:
Typekit fontsis ora chiamato Adobe Fonts ed è incluso con Creative Cloud e altri abbonamenti. Per saperne di più.
Crea un account Adobe Fonts, crea un kit, aggiungi il font Myriad Pro al kit, pubblica il kit e ottieni l'ID kit. È necessario utilizzare Adobe Fonts (font Web) in un modulo adattivo.
Nel server AEM Forms , passa a Adobe Experience Manager > Strumenti
> Adobe Fonts. Ora apri una cartella di configurazione. Se una configurazione è già disponibile, fai clic sul pulsante Crea per creare una nuova istanza.
Nella finestra di dialogo Crea configurazione, specifica un Titolo per la configurazione e fai clic su Crea. Verrai reindirizzato alla pagina di configurazione. Nella finestra di dialogo Modifica componente visualizzata, fornisci il tuo ID kit e fai clic su OK.
Configura il tema per utilizzare la configurazione Adobe Fonts. Nell'istanza dell'autore, apri Tema globale nell'editor di temi. Nell'editor dei temi, passa a Opzioni tema > Configura. Nel campo Configurazione Adobe Fonts, seleziona il kit e fai clic su Salva.
I font aggiunti a Adobe Fonts sono disponibili per la selezione nel pannello Testo di tutti i componenti.