Scopri come creare un tema personalizzato, personalizzare lo stile dei singoli componenti e utilizzare i font web in un tema
Questa esercitazione è un passaggio nel Creare il primo modulo adattivo serie. 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 fornire editor a tema 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. Intestazione del shipping-address-add-update-form
Il modulo adattivo utilizza le immagini in stile intestazione e 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 proprietà di Contenitore Modulo adattivo. Nel browser delle proprietà, passa a Base > Tema modulo adattivo. La Tema modulo adattivo elenca tutti i temi predefiniti e personalizzati. Per impostazione predefinita, viene applicato il tema Area di lavoro.
Seleziona un tema dal Tema modulo adattivo campo . Ad esempio: Tema del sondaggio. Tocca per applicare il tema selezionato.
Figura: Modulo adattivo con tema predefinito
Figura: Modulo adattivo 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 nella header componente e tocco proprietà. In immagine tocca X per rimuovere l'immagine del logo esistente.
Tocca caricare, seleziona il logo.png e tocca per salvare le modifiche. L'immagine è stata scaricata nel Prima di iniziare sezione .
Tocca il testo dell’intestazione, We.Retail
, e tocca modifica. Cambia testo 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 proprietà.
Copia il contenuto del Titolo al campo Testo segnaposto campo .
Elimina il contenuto del Titolo campo e tocco .
Ripetere i tre passaggi precedenti per tutte le caselle di testo, le caselle numeriche e i campi e-mail del modulo.
È possibile utilizzare editor a tema 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. La Crea tema viene visualizzata una pagina con i campi necessari per creare un tema. La Titolo e Nome i campi 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 preconfigurato 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. In Anteprima modulo selezionare il campo modulo di aggiornamento-indirizzo-spedizione modulo adattivo, tocca
, 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 di temi con modulo adattivo per 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 alla 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à in Testo a soffietto .
Proprietà | Valore |
---|---|
Famiglia font | Arial |
Colore font | FFFFFF |
Dimensione font | 54px |
Tocca header widget e toccare Intestazione. Le opzioni di stile del widget Intestazione vengono visualizzate a sinistra. Espandi la Dimension e posizione a soffietto, impostare Altezza a 120px
, e tocca .
Espandi la Sfondo a seconda del widget di intestazione, imposta il Colore di sfondo a F6921E.
Passa il cursore Immagine e sfumatura > + Aggiungi, tocca Immagine. Imposta le seguenti proprietà e tocca .
Proprietà | Valore |
---|---|
immagine | Carica header-style.png. L'immagine è stata scaricata nel Prima di iniziare sezione . |
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 |
Altezza | 4.75rem |
Tocca il widget piè di pagina e tocca Piè di pagina. Espandi la Sfondo a soffietto, impostare Colore di sfondo a 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 ID cliente e tocca Widget campo opzione . 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 | 18px |
Dimension e posizione | Larghezza | 60% |
Dimension e posizione | immagine |
|
Toccare l’area vuota sopra la ID cliente campo e tocco Contenitore pannello reattivo. Imposta la Sfondo > Colore di sfondo a 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 Invia e tocca Pulsante opzione . Imposta le seguenti proprietà e tocca .
Pannello a soffietto | Proprietà | Valore |
Informazioni di base | Colore sfondo | F6921E |
Bordo |
Colore bordo | F6921E |
Bordo | Raggio bordo |
|
Testo |
Famiglia font | Arial |
Testo | Colore font | FFFFFF |
Testo | Dimensione font | 18px |
Applicare il tema personalizzato, Tema globale, nel 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 la Stile opzione .
Tocca Allega e tocca icona. Imposta le seguenti proprietà in Dimension e posizione fisarmonica:
Proprietà | Valore |
---|---|
Mobile | Sinistra |
Larghezza | 10% |
Tocca Documento d'indirizzo approvato dal governo e tocca 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 | 40px |
Dimensioni e posizione |
immagine |
|
Informazioni di base | Colore sfondo | FFFFFF |
Bordo | Spessore bordo | 1px |
Bordo | Stile bordo | Uniforme |
Bordo | Colore bordo | A7A9AC |
Bordo | Raggio bordo | 7px |
Testo | Famiglia font | Arial |
Testo | Colore font | BCBEC0 |
Testo | Dimensione font | 18px |
Testo | Altezza riga | 2 |
Tocca Invia e tocca icona. Imposta le seguenti proprietà:
Pannello a soffietto | Proprietà | Valore |
Dimension e posizione | Mobile | Destra |
Dimension e posizione | immagine |
|
Informazioni di base | Colore 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 è ora denominato Adobe Fonts ed è incluso con Creative Cloud e altri abbonamenti. Per saperne di più.
Crea un Adobe Fonts creare un kit, aggiungere il font Myriad Pro al kit, pubblicare il kit e ottenere l'ID kit. È necessario utilizzare Adobe Fonts (Font web) in un modulo adattivo.
Nel AEM Forms server, 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. In Modifica componente finestra di dialogo visualizzata, fornisci ID kit e fai clic su OK.
Configura il tema per utilizzare la Adobe Fonts configurazione. Nell’istanza dell’autore, apri Tema globale nell’editor tematico. Nell’editor di temi, passa a Opzioni tema > Configura. In Configurazione Adobe Fonts selezionare il kit e fare clic su Salva.
I font aggiunti al Adobe Fonts sono disponibili per la selezione in Testo tutti i componenti.