Personalizzare lo stile del modulo adattivo

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.

Informazioni sull'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 fornisce 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:

  • Applicare un tema preconfigurato a un modulo adattivo
  • Creare un tema per un modulo adattivo utilizzando l’editor di temi
  • Personalizzare lo stile dei singoli componenti
  • Sezione bonus: Utilizzare i 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

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.

Ottieni file

Ottieni file

Passaggio 1: Applica un tema al modulo adattivo

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:

  1. Apri il modulo adattivo per la modifica.

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

  2. 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.

  3. Seleziona un tema dal campo Tema modulo adattivo . Ad esempio, Tema sondaggio. Tocca 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 Survey

Figura: Forma adattiva con il tema Survey

Passaggio 2: Aggiornare il modulo adattivo

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:

  1. Modifica 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. Tocca l’immagine del logo nel componente intestazione e tocca le proprietà cmppr . Nella proprietà immagine, tocca X per rimuovere l’immagine del logo esistente.

    3. Tocca Carica, seleziona il logo.png e tocca aem_6_3_forms_save per salvare le modifiche. L'immagine è stata scaricata nella sezione Prima di iniziare .

    4. Tocca il testo dell’intestazione We.Retail e tocca 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. Rimuovere il titolo e aggiungere il testo segnaposto:

    1. Tocca il campo ID cliente e tocca le proprietà cmppr .
    2. Copia il contenuto del campo Titolo nel campo Testo segnaposto .
    3. Elimina il contenuto del campo Titolo e tocca 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-form

Passaggio 3: Crea un tema personalizzato per il modulo adattivo

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:

Creare un tema

  1. 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.

  2. 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:

    • Titolo: specifica un titolo del tema. Ad esempio, Tema globale. Il titolo ti aiuta a identificare il tema dall’elenco dei temi.
    • Nome: specifica il nome del tema. Ad esempio, Tema globale. Nel repository viene creato un nodo con il nome specificato. Quando si inizia a digitare un titolo, il valore del campo nome viene generato automaticamente. È possibile modificare il valore suggerito. Il campo name può includere solo caratteri alfanumerici, trattini e caratteri di sottolineatura. Tutti gli input non validi vengono sostituiti con un trattino.
  3. 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.

  4. Tocca Opzioni tema opzioni tema > Configura. Nel campo Anteprima modulo , seleziona il modulo adattivo shipping-address-add-update-form , tocca aem_6_3_forms_save 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.

    tema personalizzato

    Figura: Editor tema con modulo adattivo per l'indirizzo di spedizione-add-update-form

    create-a-theme

    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:

  1. 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 Attiva/disattiva pannello laterale.

  2. Imposta le seguenti proprietà nel pannello a soffietto Testo e tocca aem_6_3_forms_save.

    Proprietà Valore
    Famiglia font Arial
    Colore font FFFFFF
    Dimensione font 54 px
  3. Tocca il widget di intestazione e tocca Intestazione. 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 aem_6_3_forms_save.

  4. Espandi il pannello a soffietto Sfondo del widget di intestazione, imposta Colore di sfondo su F6921E.

    Passa il puntatore del mouse su Immagine e sfumatura > + Aggiungi, tocca Immagine. Imposta le seguenti proprietà e tocca aem_6_3_forms_save.

    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
  5. 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 aem_6_3_forms_save.

immagine Valore
immagine
  • Top: 1,5 rem
  • Inferiore: -35 px
  • Sinistra: 1rem

Suggerimento: tocca l’icona del collegamento per assegnare un valore diverso a ciascun campo.

Altezza 4,75rem
  1. 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 aem_6_3_forms_save.

Assegna uno stile al componente di acquisizione dati e applica 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, 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:

  1. Tocca il campo ID cliente e tocca l’opzione Widget campo . Imposta le seguenti proprietà e tocca aem_6_3_forms_save.
Pannello a soffietto Proprietà Valore
Bordo Colore bordo A7A9AC
Bordo Raggio bordo
  • Top: 7px
  • A destra: 7px
  • Inferiore: 7px
  • Sinistra: 7px
Testo Famiglia font Arial
Testo Colore font 939598
Testo Dimensione font 18 px
Dimension e posizione Larghezza 60%
Dimension e posizione immagine
  • Sinistra: 10rem
  1. Tocca l’area vuota sopra il campo ID cliente e tocca Contenitore pannello reattivo. Imposta Sfondo > Colore di sfondo su F1F2F2. Tocca aem_6_3_forms_save.

Personalizzare lo 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 assegnare uno stile ai pulsanti:

  1. Tocca il pulsante Invia e tocca l’opzione Pulsante . Imposta le seguenti proprietà e tocca aem_6_3_forms_save.
Pannello a soffietto Proprietà Valore
Sfondo Colore di sfondo F6921E
Bordo
Colore bordo F6921E
Bordo Raggio bordo
  • Top: 7px
  • A destra: 7px
  • Inferiore: 7px
  • Sinistra: 7 px
Testo
Famiglia font Arial
Testo Colore font FFFFFF
Testo Dimensione font 18 px
  1. 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.

    style-data-capture-components

Passaggio 4: Personalizzare lo stile dei singoli componenti

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

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

  2. Nella barra superiore, seleziona l’opzione Stile .

    stile-opzione

  3. Tocca il pulsante Allega e tocca l’icona aem_6_3_edit. Imposta le seguenti proprietà nei Dimension e nel pannello a soffietto:

    Proprietà Valore
    Mobile Sinistra
    Larghezza 10%
  4. Tocca l’opzione bozza indirizzo approvata dal governo e tocca l’icona aem_6_3_edit. Imposta le seguenti proprietà:

Pannello a soffietto Proprietà Valore
Dimensioni e posizione Mobile Sinistra
Dimensioni e posizione Larghezza 73%
Dimensioni e posizione Riempimento
  • Sinistra: 10 px
Dimensioni e posizione Altezza 40 px
Dimensioni e posizione
immagine
  • A destra: 2rem
  • Sinistra: 10rem
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
  1. Tocca il pulsante Invia e tocca l’icona aem_6_3_edit . Imposta le seguenti proprietà:
Pannello a soffietto Proprietà Valore
Dimension e posizione Mobile Destra
Dimension e posizione immagine
  • Top: 5rem
  • A destra: 14rem
  • Inferiore: 20 px
  • 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 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 Typekit è un servizio di font web. Puoi configurare e utilizzare il servizio con moduli adattivi. Per utilizzare Adobe Typekit in un modulo adattivo:

NOTA

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

  1. Crea un account Adobe Typekit, crea un kit, aggiungi il font Myriad Pro al kit, pubblica il kit e ottieni l'ID kit. È necessario utilizzare i font Adobe Typekit (font Web) in un modulo adattivo.

  2. Nel server AEM Forms, passa a adobeexperiencemanager Adobe Experience Manager > Strumenti martello > Implementazione > Cloud Services. Nella pagina Cloud Services, vai a Servizi di terze parti > Typekit e fai clic su Configura ora in Typekit. Se una configurazione è già disponibile, fai clic sul pulsante + 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.

  3. Configura il tema per utilizzare la configurazione TypeKit. Nell'istanza dell'autore, apri Tema globale nell'editor di temi. Nell'editor dei temi, vai a Opzioni tema opzioni-tema > Configura. Nel campo Configurazione Typekit, seleziona il kit e fai clic su Salva.

    I font aggiunti al Typekit sono disponibili per la selezione nel Testo a seconda di tutti i componenti.

In questa pagina

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now