Scopri come creare un tema personalizzato, assegnare uno stile ai singoli componenti e utilizzare i Web Fonts in un tema.
Questo tutorial è un passaggio del Creare il primo modulo adattivo serie. L’Adobe consiglia di seguire la serie in sequenza cronologica per comprendere, eseguire e dimostrare il caso di utilizzo completo dell’esercitazione.
Puoi 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 temi per creare temi personalizzati. Un singolo tema può fornire 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 è preferibile.
Al termine dell’esercitazione, dovresti essere in grado di effettuare le seguenti operazioni:
Dopo aver completato l’esercitazione, il modulo dovrebbe avere un aspetto simile al seguente:
Scarica sul computer locale le immagini con lo stile dell’intestazione e il logo forniti di seguito. L’intestazione del shipping-address-add-update-form
il modulo adattivo utilizza le immagini con stile di intestazione e logo. L'immagine in stile intestazione viene visualizzata sul lato destro dell'intestazione.
L’editor di moduli adattivi fornisce più temi predefiniti. Se prevedi di non utilizzare uno stile personalizzato per il modulo adattivo, puoi pubblicare i moduli adattivi anche con un tema predefinito. I temi sono indipendenti dai moduli adattivi. Puoi applicare lo stesso tema a più moduli adattivi.
Per applicare un tema al 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 di moduli adattivi. Nel browser delle proprietà, passa a Base > Tema modulo adattivo. Il Tema modulo adattivo elenca tutti i temi predefiniti e personalizzati. Per impostazione predefinita, viene applicato il tema Area di lavoro.
Seleziona un tema da Tema modulo adattivo campo. Ad esempio: Tema del sondaggio. Seleziona quindi puoi applicare il tema selezionato.
Figura: Modulo adattivo con tema predefinito
Figura: Modulo adattivo con tema sondaggio
La progettazione mostrata sopra richiede modifiche nel testo segnaposto e nel logo del modulo adattivo esistente.
Per aggiornare il modulo adattivo:
Modifica il logo e il testo esistenti dell’intestazione. Per rimuovere il logo:
Apri il modulo nell’editor moduli.
http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html
Selezionare l'immagine del logo nella intestazione componente e seleziona proprietà. In immagine , selezionare X per rimuovere l'immagine del logo esistente.
Seleziona caricare, selezionare logo.png e quindi fare clic su per salvare le modifiche. L'immagine è stata scaricata in Prima di iniziare sezione.
Seleziona il testo dell’intestazione, We.Retail
, e seleziona modifica. Cambia il testo dell'intestazione in
we retail
. Applica il formato grassetto solo a we
in we retail
.
Rimuovi titolo e aggiungi testo segnaposto:
Seleziona il campo ID cliente e seleziona proprietà.
Copia il contenuto del Titolo campo al Testo segnaposto campo.
Elimina il contenuto del Titolo e seleziona .
Ripetere i tre passaggi precedenti per tutte le caselle di testo, la casella numerica e il campo e-mail del modulo.
È possibile utilizzare editor temi per creare temi personalizzati. L’editor del tema è un potente editor WYSIWYG. È un metodo visivo per applicare CSS a vari componenti di un modulo adattivo. Fornisce controlli più precisi per formattare i componenti e i 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 come i colori di sfondo, i colori degli stati, la trasparenza, l’allineamento e le dimensioni. Quando si applica un tema, lo stile specificato viene applicato ai componenti corrispondenti di un modulo adattivo.
In questo tutorial potrai applicare stili a intestazione e piè di pagina, componenti di testo e numerici, componenti di allegati e pulsanti. Iniziamo con la creazione di un tema:
Accedi all’istanza di authoring dell’AEM e passa a Adobe Experience Manager > Forms > Temi. L’URL predefinito è http://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themes.
Seleziona Crea e seleziona Tema. Il Crea tema viene visualizzata una pagina con i campi necessari per creare un tema. Il Titolo e Nome I campi sono obbligatori:
Seleziona Crea. Viene creato un tema e viene visualizzata una finestra di dialogo per aprire il modulo per la modifica. Seleziona Apri per aprire il tema appena creato in una nuova scheda. Il tema viene aperto nell’editor temi. Per lo stile, l’editor temi utilizza un modulo adattivo fornito con l’AEM Forms.
Per informazioni sull’utilizzo dell’interfaccia utente dell’editor temi, consulta Informazioni sull’editor temi.
Seleziona Opzioni tema > Configura. In Anteprima modulo , selezionare il campo shipping-address-add-update-form modulo adattivo, seleziona
, seleziona Salva. Ora l’editor temi è configurato per utilizzare un modulo adattivo personalizzato invece del modulo adattivo predefinito. Seleziona Annulla per tornare all’editor temi.
Figura: Editor temi con il modulo adattivo shipping-address-add-update-form
Figura: Modulo adattivo con modulo predefinito
Intestazione e 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, che rimangono identiche in più forme di un’organizzazione. Per assegnare uno stile all’intestazione e al piè di pagina del modulo adattivo shipping-address-add-update-form:
Navigare nel Intestazione > Testo selettori. Il pannello Selettori si trova a sinistra dell’editor temi. Se il pannello non è visibile, seleziona Attiva/Disattiva pannello laterale.
Imposta le seguenti proprietà in Testo Pannello a soffietto e selezione .
Proprietà | Valore |
---|---|
Famiglia font | Arial® |
Colore font | FFFFFF |
Dimensione font | 54 px |
Seleziona la intestazione widget e seleziona Intestazione. Le opzioni per assegnare uno stile al widget Intestazione vengono visualizzate a sinistra. Espandi Dimension e posizione Pannello a soffietto, imposta Altezza a 120px
, e seleziona .
Espandi Sfondo pannello a soffietto del widget intestazione, imposta Colore di sfondo a F6921E.
Passa il cursore sopra Immagine e sfumatura > + Aggiungi, seleziona Immagine. Imposta le seguenti proprietà e seleziona .
Proprietà | Valore |
---|---|
immagine | Carica l’header-style.png. L'immagine è stata scaricata in Prima di iniziare sezione. |
Posizione | A destra in basso |
Divisione in porzioni | Nessuna ripetizione |
Nell’editor del tema, seleziona il logo nell’intestazione e fai clic su Logo intestazione. Espandi il pannello a soffietto Dimension e posizione, imposta le seguenti proprietà e seleziona .
Margine | Valore |
Margine |
Suggerimento Seleziona la |
Altezza | 4,75 rem |
Selezionate il widget piè di pagina e selezionate Piè di pagina. Espandi Sfondo Pannello a soffietto, imposta Colore di sfondo a F6921E
, e seleziona .
Per acquisire i dati, in un modulo adattivo puoi utilizzare più componenti. Casella di testo e casella numerica. Puoi fornire uno stile identico a tutti i componenti di acquisizione dati o uno stile separato per ciascun componente. In questa esercitazione, viene applicato uno stile identico alle caselle numeriche (ID cliente, CAP) e alle caselle di testo (ID cliente, Nome, Indirizzo di spedizione, Stato, E-mail). Per assegnare uno stile ai componenti di acquisizione dati:
Seleziona la ID cliente e selezionare il Widget campo opzione. Imposta le seguenti proprietà e seleziona .
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 | Margine |
|
Seleziona l’area vuota sopra il ID cliente e seleziona Contenitore pannello responsivo. Imposta il Sfondo > Colore di sfondo F1F2F2. Seleziona .
È 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:
Seleziona la Invia e selezionare il pulsante Pulsante opzione. Imposta le seguenti proprietà e seleziona .
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 | 18 px |
Applicare il tema personalizzato, tema globale, al tuo modulo adattivo. Se lo stile non riflette il modulo adattivo, pulisci la cache del browser e riprova.
Alcuni stili sono applicabili 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.
Seleziona la Allega e selezionare il pulsante icona. Imposta le seguenti proprietà in Dimension e posizione Pannello a soffietto:
Proprietà | Valore |
---|---|
Mobile | A sinistra |
Larghezza | 10% |
Seleziona la Bozza indirizzo approvato dal governo e selezionare il icona. Imposta le seguenti proprietà:
Pannello a soffietto | Proprietà | Valore |
Dimensioni e posizione | Mobile | A sinistra |
Dimensioni e posizione | Larghezza | 73% |
Dimensioni e posizione | Riempimento |
|
Dimensioni e posizione | Altezza | 40 px |
Dimension e posizione |
Margine |
|
Informazioni di base | Colore 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 |
Seleziona la Invia e selezionare il pulsante icona. Imposta le seguenti proprietà:
Pannello a soffietto | Proprietà | Valore |
Dimension e posizione | Mobile | A destra |
Dimension e posizione | Margine |
|
Informazioni di base | Colore sfondo | F6921E |
Bordo | Colore bordo | F6921E |
Puoi utilizzare vari font per progettare un modulo adattivo. È possibile che in tutti i dispositivi su cui viene visualizzato il modulo adattivo non siano presenti i font utilizzati per progettarlo. È possibile utilizzare un servizio di caratteri Web per fornire i caratteri richiesti al dispositivo di destinazione.
Adobe Fonts è un servizio di Web Fonts. Puoi configurare e utilizzare il servizio con i moduli adattivi. Da utilizzare Adobe Fonts in un modulo adattivo:
Typekit ora si chiama Adobe Fonts ed è incluso in Creative Cloud e altri abbonamenti. Ulteriori informazioni.
Creare un Adobe Fonts creare un kit, aggiungere il carattere Myriad Pro al kit, pubblicare il kit e ottenere l'ID del kit. È necessario utilizzare Adobe Fonts (Web Fonts) in un modulo adattivo.
Nell'AEM Forms Server, passa a Adobe Experience Manager > Strumenti
> Adobe Fonts. Ora, apri una cartella di configurazione. Se una configurazione è già disponibile, fai clic su Crea per creare un’istanza.
Nella finestra di dialogo Crea configurazione, specifica un Titolo per la configurazione, quindi fai clic su Crea. Ti reindirizzano alla pagina di configurazione. In Modifica componente che viene visualizzata, fornisci ID kit e fai clic su OK.
Configurare il tema per l’utilizzo di Adobe Fonts configurazione. Nell’istanza di authoring, apri Tema globale nell’editor temi. Nell’editor 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 Pannello a soffietto di tutti i componenti.