Stile del modulo adattivo

Scoprite 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 le serie in sequenza cronologica per comprendere, eseguire e dimostrare l'uso completo dell'esercitazione.

Informazioni sull'esercitazione

È possibile utilizzare i temi per fornire un aspetto e uno stile univoci a un modulo adattivo. È possibile applicare temi out-of-box forniti con l'editor di moduli adattivi o creare temi personalizzati. AEM Forms fornire un editor di 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 è desiderato.

Al termine dell'esercitazione, imparerete a:

  • Applicazione di un tema out-of-box a un modulo adattivo
  • Creare un tema per un modulo adattivo utilizzando l'editor di temi
  • Stile di singoli componenti
  • Sezione Bonus: Utilizzo di font Web in un tema personalizzato

Dopo aver completato l'esercitazione, il modulo avrà un aspetto simile al seguente:

Modulo con tema personalizzato

Prima di iniziare

Scaricate nel computer locale le immagini in stile di intestazione e logo riportate di seguito. L'intestazione del modulo shipping-address-add-update-form adattivo utilizza le immagini in stile di intestazione e logo. L’immagine in stile intestazione viene visualizzata sul lato destro dell’intestazione.

Ottieni file

Ottieni file

Passaggio 1: Applicare un tema al modulo adattivo

L'editor di moduli adattivi offre diversi temi out-of-the-box. Se non si intende utilizzare uno stile personalizzato per il modulo adattivo, è anche possibile pubblicare i moduli adattivi con un tema out-of-the-box. I temi sono indipendenti dai moduli adattivi. È possibile applicare lo stesso tema a più moduli adattivi. Per applicare un tema a un modulo adattivo:

  1. Aprire il modulo adattivo per la modifica.

    http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

  2. Aprire le proprietà di Contenitore modulo adattivo. Nel browser delle proprietà, passare a Base > Tema modulo adattivo. Il campo Tema modulo adattivo elenca tutti i temi predefiniti e personalizzati. Per impostazione predefinita, viene applicato il tema Canvas.

  3. Selezionare un tema dal campo Tema modulo adattivo. Ad esempio, Tema sondaggio. Toccate aem_6_3_forms_save per applicare il tema selezionato.

    Modulo adattivo con tema predefinito

    Figura:Modulo adattivo con tema predefinito

    Modulo adattivo con il tema del sondaggio

    Figura:Modulo adattivo con il tema del sondaggio

Passaggio 2: Aggiornare il modulo adattivo

La struttura visualizzata sopra richiede modifiche nel testo segnaposto e nel logo del modulo adattivo esistente. Effettuate le seguenti operazioni per apportare le modifiche richieste:

  1. Modificate il logo e il testo esistenti dell’intestazione. Per rimuovere il logo:

    1. Aprire il modulo nell'editor del modulo.

      http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

    2. Toccate l'immagine del logo nel componente header e toccate cmppr properties. Nella proprietà image, toccate X per rimuovere l'immagine del logo esistente.

    3. Toccate upload, selezionate il logo.png, quindi toccate aem_6_3_forms_save per salvare le modifiche. L'immagine è stata scaricata nella sezione Prima di iniziare.

    4. Toccate il testo dell'intestazione, We.Retail, quindi toccate aem_6_3_edit edit. Cambia il testo dell'intestazione in we retail. Applica la formattazione in grassetto solo a wein we retail.

      we-retail-logo-text

  2. Rimuovete il titolo e aggiungete il testo segnaposto:

    1. Toccate il campo ID cliente e toccate le proprietà cmppr.

    2. Copiare il contenuto del campo Titolo nel campo Testo segnaposto.

    3. Eliminate il contenuto del campo Titolo e toccate aem_6_3_forms_save.

    4. Ripetere i tre passaggi precedenti per tutte le caselle di testo, le caselle numeriche e i campi e-mail del modulo.

      aggiornato-adattivo-modulo

Passaggio 3: Creare un tema personalizzato per il modulo adattivo

È possibile utilizzare editor di temi per creare temi personalizzati. L'editor di temi è un potente editor WYSIWYG. È un metodo visivo per applicare CSS a vari componenti di un modulo adattivo. Fornisce controlli più precisi per lo stile dei componenti e dei 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 i colori di sfondo, i colori dello stato, 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 questa esercitazione verranno formattati intestazione e piè di pagina, componenti di testo e numerici, componenti allegati e pulsanti. Cominciamo con la creazione di un tema:

Creare un tema

  1. Accedete all'istanza di authoring AEM e andate a Adobe Experience Manager > Forms > Temi. L'URL predefinito è http://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themes.

  2. Toccate Crea e selezionate Tema. Viene visualizzata la pagina Create Theme con i campi necessari per creare un tema. I campi Title e Name sono obbligatori:

    • Titolo: specificate un titolo del tema. Ad esempio, Tema globale. Il titolo consente di identificare il tema dall’elenco dei temi.
    • Nome: specificate il nome del tema. Ad esempio, Tema globale. Nella directory archivio viene creato un nodo con il nome specificato. Quando si inizia a digitare un titolo, viene automaticamente generato il valore relativo al campo del nome. È possibile modificare il valore suggerito. Il campo del nome può includere solo caratteri alfanumerici, trattini e caratteri di sottolineatura. Tutti gli input non validi vengono sostituiti con un trattino.
  3. Toccate Crea. Viene creato un tema e viene visualizzata una finestra di dialogo per aprire il modulo per la modifica. Toccate 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 fornito con AEM Forms.

    Per informazioni sull'utilizzo dell'interfaccia utente dell'editor di temi, vedere Informazioni sull'editor di temi.

  4. Toccate Opzioni tema opzioni tema > Configura. Nel campo Modulo di anteprima, selezionare il modulo adattivo shipping-address-add-update-form, toccare aem_6_3_forms_save, toccare Save. Ora, l'editor di temi è configurato per utilizzare un modulo adattivo personalizzato invece del modulo adattivo predefinito. Toccate Annulla per tornare all'editor di temi.

    tema personalizzato

    Figura:Editor tema con il modulo adattivo shipping-address-add-update-form

    create-a-tema

    Figura:Modulo adattivo con il 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 le informazioni sul copyright e questi rimangono identici in più forme di un'organizzazione. Per formattare l’intestazione e il piè di pagina del modulo adattivo per l’indirizzo di spedizione-add-update-form:

  1. Spostatevi sull'opzione Header > Text nel pannello Selettori. Il pannello Selettori si trova a sinistra dell’editor di temi. Se il pannello non è visibile, toccate il pulsante per attivare/disattivare il pannello laterale.

  2. Impostate le seguenti proprietà nell'Text Accordion e toccate aem_6_3_forms_save.

    Proprietà Valore
    Famiglia font Arial
    Colore font FFFFFF
    Dimensione font 54 px
  3. Toccate il widget header e toccate Header. Le opzioni per lo stile del widget Intestazione sono visualizzate a sinistra. Espandete il pannello Dimension e posizione, impostate l'opzione Altezza su 120px e toccate aem_6_3_forms_save.

  4. Espandere la struttura Sfondo del widget di intestazione, impostare Colore di sfondo su F6921E.

    Passa il cursore del mouse su Immagine e sfumatura > + Aggiungi, tocca Immagine. Impostate le seguenti proprietà e toccate aem_6_3_forms_save.

    Proprietà Valore
    immagine Caricate il file header-style.png. L'immagine è stata scaricata nella sezione Prima di iniziare.
    Posizione A destra in basso
    Divisione in porzioni Nessuna ripetizione
  5. Nell'editor di temi, toccate il logo nell'intestazione e toccate Logo intestazione. Espandete il pannello di controllo Dimension e posizione, impostate le seguenti proprietà e toccate aem_6_3_forms_save.

    immagine Valore
    immagine
    • In alto: 1,5 rem
    • In basso: -35 px
    • A sinistra: 1rem

    Suggerimento: toccate l’icona del collegamento per fornire un valore diverso a ciascun campo.

    Altezza 4,75 rem
  6. Toccate il widget piè di pagina e toccate Piè di pagina. Espandete il Sfondo, impostate il Colore di sfondo su F6921E e toccate aem_6_3_forms_save.

Applicare uno stile al componente di acquisizione dei dati e uno sfondo al modulo adattivo

È 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, uno stile identico viene applicato alle caselle numeriche (ID cliente, CAP) e alle caselle di testo (ID cliente, Nome, Indirizzo spedizione, Stato, E-mail). Per formattare i componenti di acquisizione dati:

  1. Toccate il campo ID cliente e toccate l'opzione Widget campo. Impostate le seguenti proprietà e toccate aem_6_3_forms_save.

    Pannello a soffietto Proprietà Valore
    Bordo Colore bordo A7A9AC
    Bordo Raggio bordo
    • In alto: 7px
    • Destra: 7px
    • In basso: 7px
    • A sinistra: 7px
    Testo Famiglia font Arial
    Testo Colore font 939598
    Testo Dimensione font 18 px
    Dimension e posizione Larghezza 60%
    Dimension e posizione immagine
    • A sinistra: 10 rem
  2. Toccate l'area vuota sopra il campo ID cliente e toccate Contenitore pannello reattivo. Impostate Background > Background Color su F1F2F2. Toccate aem_6_3_forms_save.

Stile dei pulsanti

È 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 formattare i pulsanti:

  1. Toccate il pulsante Invia e toccate l'opzione Pulsante. Impostate le seguenti proprietà e toccate aem_6_3_forms_save.

    Pannello a soffietto Proprietà Valore
    Sfondo Colore di sfondo F6921E
    Bordo
    Colore bordo F6921E
    Bordo Raggio bordo
    • In alto: 7px
    • Destra: 7px
    • In basso: 7px
    • A sinistra: 7 px
    Testo
    Famiglia font Arial
    Testo Colore font FFFFFF
    Testo Dimensione font 18 px
  2. Applicare il tema personalizzato Tema globale al modulo adattivo. Se lo stile non si riflette sul modulo adattivo, cancellare la cache del browser e riprovare.

    style-data-capture-components

Passaggio 4: Stile di singoli componenti

Alcuni stili si applicano solo a un componente specifico. Tali componenti sono formattati nell’editor di moduli adattivi.

  1. Aprire il modulo adattivo per la modifica. http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

  2. Nella barra superiore, selezionare l'opzione Stile.

    style-option

  3. Toccate il pulsante Allega e toccate l'icona aem_6_3_edit. Impostare le seguenti proprietà in Dimension e Posizione Accordion:

    Proprietà Valore
    Mobile Sinistra
    Larghezza 10%
  4. Toccate l'opzione Correzione dell'indirizzo approvata dal governo e toccate l'icona aem_6_3_edit. Impostate le seguenti proprietà:

    Pannello a soffietto Proprietà Valore
    Dimensioni e posizione Mobile Sinistra
    Dimensioni e posizione Larghezza 73%
    Dimensioni e posizione Riempimento
    • A sinistra: 10 px
    Dimensioni e posizione Altezza 40 px
    Dimensioni e posizione
    immagine
    • Destra: 2rem
    • A sinistra: 10 rem
    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
  5. Toccate il pulsante Invia e toccate l'icona aem_6_3_edit. Impostate le seguenti proprietà:

    Pannello a soffietto Proprietà Valore
    Dimension e posizione Mobile Destra
    Dimension e posizione immagine
    • In alto: 5rem
    • Destra: 14 rem
    • In basso: 20 px
    • A sinistra: 20px
    Sfondo Colore di sfondo F6921E
    Bordo Colore bordo F6921E

    styled-adaptive-form-1

Passaggio 5: Sezione Bonus: Utilizzo di font Web in un tema personalizzato

È possibile utilizzare vari font per progettare un modulo adattivo. Tutti i dispositivi su cui è visualizzato il modulo adattivo potrebbero non avere i font utilizzati per progettare il modulo adattivo. È possibile utilizzare un servizio di font Web per distribuire i font richiesti al dispositivo di destinazione.

Adobe Fonts è un servizio di font Web. È possibile configurare e utilizzare il servizio con moduli adattivi. Per utilizzare Adobe Fonts in un modulo adattivo:

NOTA

typekit-to-adobe- Typekit fontsis ora chiamato Adobe Fonts ed è incluso con Creative Cloud e altre iscrizioni. Per saperne di più.

  1. Create un account Adobe Fonts, create un kit, aggiungete il font Myriad Pro al kit, pubblicate il kit e ottenete l'ID kit. È necessario utilizzare Adobe Fonts (font Web) in un modulo adattivo.

  2. Nel server AEM Forms, andate a adobeexperience emanager Adobe Experience Manager > Strumenti martello > Adobe Fonts. A questo punto, aprite una cartella di configurazione. Se una configurazione è già disponibile, fare clic sul pulsante Crea per creare una nuova istanza.

    Nella finestra di dialogo Crea configurazione, specificate un Titolo per la configurazione e fate clic su Crea. Viene nuovamente visualizzata la pagina di configurazione. Nella finestra di dialogo Modifica componente visualizzata, fornire l' ID kit e fare clic su OK.

  3. Configurate il tema per utilizzare la configurazione Adobe Fonts. Nell'istanza di creazione, aprite Tema globale nell'editor di temi. Nell'editor di temi, passare a Opzioni tema opzioni tema > Configura. Nel campo Adobe Fonts Configuration, selezionare il kit e fare clic su Save.

    I font aggiunti al Adobe Fonts sono disponibili per la selezione nel Text pannello di controllo di tutti i componenti.

In questa pagina