瞭解如何建立自訂主題、設定個別元件的樣式,以及在主題中使用網頁字型
本教程是建立第一個自適應表單系列中的一個步驟。 建議依序依序依序排列,以瞭解、執行和展示完整的教學課程使用案例。
您可以使用主題為最適化表單提供獨特的外觀和樣式。 您可以套用隨附於最適化表單編輯器的方塊外主題,或建立您自己的自訂主題。 AEM Forms提供主題編輯器以建立自訂主題。 單一主題可針對在行動裝置、平板電腦或桌上型電腦上開啟的相同最適化表單提供不同的外觀。 使用主題編輯器時,不需具備任何CSS或LESS的先前知識,但需要它。
在教學課程結束時,您將學習:
在您完成教學課程後,表單看起來會類似下列:
在您的本機電腦上下載標題樣式和標誌影像,如下所示。 shipping-address-add-update-form
最適化表單的頁首使用頁首樣式和標誌影像。 標題樣式影像會出現在標題的右側。
最適化表單編輯器提供多種現成可用的主題。 如果您打算不針對最適化表單使用自訂樣式,也可以使用現成可用的主題來發佈最適化表單。 主題與最適化表單無關。 您可以將相同的主題套用至多個調適性表單。 若要將主題套用至最適化表單:
開啟最適化表單以進行編輯。
http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html
最適化表單容器的開啟屬性。 在屬性瀏覽器中,導覽至Basic > 最適化表單主題。 最適化表單主題欄位會列出所有現成可用的主題和自訂主題。 依預設,會套用「畫布」主題。
從最適化表單主題欄位中選取主題。 例如,調查主題。 點選以套用選取的主題。
圖:具有 預設主題的最適化表單
圖:具 有調查主題的最適化表單
上述設計需要變更現有最適化表單的預留位置文字和標誌。 執行下列步驟以進行必要的變更:
變更標題的現有標誌和文字。 若要移除標誌:
在表單編輯器中開啟表單。
http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html
在header元件中點選標誌影像,然後點選屬性。 在image屬性中,點選X以移除現有的標誌影像。
點選upload,選取logo.png,然後點選以儲存變更。 影像已下載於開始區段中。
點選標題文字、We.Retail
,然後點選 edit。 將標題文字變更為
we retail
。 僅對we retail
中的we
應用粗體格式。
移除標題並新增預留位置文字:
點選「Customer ID(客戶ID)」欄位並點選「屬性」。
將Title欄位的內容複製到預留位置文字欄位。
刪除Title欄位的內容,然後點選。
對表單中的所有文字方塊、數值方塊和電子郵件欄位重複上述三個步驟。
您可以使用主題編輯器來建立自訂主題。 主題編輯器是功能強大的WYSIWYG編輯器。 它是將CSS套用至自適應表單各元件的視覺化方法。 它提供更精細的控制項,讓元件和面板在最適化表單中變樣。
主題是個別的實體,如最適化表單。 它包含最適化表單的元件和面板樣式(CSS)。 樣式包括CSS屬性,例如背景顏色、狀態顏色、透明度、對齊方式和大小。 應用主題時,指定的樣式將應用於自適應表單的相應元件。
在本教學課程中,您將設定頁首和頁尾、文字和數值元件、附件元件和按鈕的樣式。 讓我們從建立主題開始:
登入AEM作者例項,並導覽至Adobe Experience Manager > Forms > Themes。 預設URL為http://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themes。
點選「建立」並選取「主題」。 此時會出現建立主題頁面,其中包含建立主題所需的欄位。 Title和Name欄位為必填欄位:
點選Create。 將建立一個主題,並出現一個用於開啟表單進行編輯的對話框。 點選「開啟」,在新標籤中開啟新建立的主題。 主題在主題編輯器中開啟。 對於樣式,主題編輯器使用隨附於AEM Forms的現成可用最適化表單。
有關使用主題編輯器UI的資訊,請參閱關於主題編輯器。
點選「主題選項 > 設定」。 在預覽表單欄位中,選取shipping-address-add-update-form最適化表單,點選
,點選Save。 現在,主題編輯器已設定為使用您自己的最適化表單,而非預設的最適化表單。 點選「取消」以返回主題編輯器。
圖:具 有shipping-add-update-form最適化表單的主題編輯器
圖:具 有預設窗體的自適應窗體
頁首和頁尾為最適化表單提供一致且獨特的外觀。 一般而言,頁首包含組織的標誌和名稱,頁尾包含版權資訊,而且這些資訊在組織的多種形式上都相同。 要設定發運地址添加更新表單自適應表單的頁眉和頁腳的樣式,請執行以下操作:
導覽「選擇器」面板中的「標題 > 文字」選項。 「選擇器」面板位於主題編輯器的左側。 如果面板不可見,請點選「切換側面板」。
在Text accordion中設定下列屬性,然後點選。
屬性 | 值 |
---|---|
字型系列 | Arial |
字型色彩 | FFFFFF |
字型大小 | 54px |
點選標題介面工具集,點選標題。 標題介面工具集樣式的選項會顯示在左側。 展開Dimensions & Position accordion,將Height設為120px
,然後點選。
展開標題Widget的Background accordion,將Background Color設為F6921E.
將滑鼠指標暫留在「影像與漸層」上,點選「影像」。 設定下列屬性,然後點選。
屬性 | 值 |
---|---|
影像 | 上傳header-style.png。 影像已下載於開始區段中。 |
位置 | 右下 |
並排顯示 | 不重複 |
在主題編輯器中,點選頁首中的標誌,然後點選「頁首標誌」。 展開「維度與位置」accordion,設定下列屬性,然後點選。
邊距 | 值 |
邊距 |
提示:點 選連結 |
高度 | 4.75rem |
點選頁尾Widget並點選頁尾。 展開Background accordion,將Background Color設為F6921E
,然後點選。
您可以在最適化表單中使用多個元件來擷取資料。 例如,文字方塊和數值方塊。 您可以提供與所有資料擷取元件相同的樣式,或為每個元件提供個別的樣式。 在本教學課程中,相同的樣式會套用至數值方塊(客戶ID、郵遞區號)和文字方塊(客戶ID、名稱、送貨地址、狀態、電子郵件)。 要設定資料捕獲元件的樣式:
點選「客戶ID」欄位,然後點選「欄位介面工具集」選項。 設定下列屬性,然後點選。
折疊式面板 | 屬性 | 值 |
邊框 | 邊框顏色 | A7A9AC |
邊框 | 邊框半徑 |
|
文字 | 字型系列 | Arial |
文字 | 字型色彩 | 939598 |
文字 | 字型大小 | 18px |
尺寸和位置 | 寬度 | 60% |
尺寸和位置 | 邊距 |
|
點選客戶ID欄位上方的空白區域,然後點選回應式面板容器。 將背景 > 背景顏色設定為F1F2F2。 點選。
您可以使用自訂主題將相同樣式套用至最適化表單的所有按鈕,而內嵌樣式則可將樣式套用至特定按鈕。 要設定按鈕的樣式,請執行以下操作:
點選Submit按鈕,點選Button選項。 設定下列屬性,然後點選。
折疊式面板 | 屬性 | 值 |
背景 | 背景色彩 | F6921E |
邊框 |
邊框顏色 | F6921E |
邊框 | 邊框半徑 |
|
文字 |
字型系列 | Arial |
文字 | 字型色彩 | FFFFFF |
文字 | 字型大小 | 18px |
將自訂主題「全域主題」套用至最適化表單。如果樣式未反映在最適化表單上,請清除瀏覽器快取,然後再試一次。
有些樣式只適用於特定元件。 這些元件是在最適化表單編輯器中建立樣式的。
開啟最適化表單以進行編輯。 http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html
在頂欄上,選擇Style選項。
點選「Attach」按鈕,然後點選「」圖示。 在Dimensions and Position accordion中設定以下屬性:
屬性 | 值 |
---|---|
浮點 | 左 |
寬度 | 10% |
點選「政府機關核准的位址證明」選項,點選「」圖示。 設定下列屬性:
折疊式面板 | 屬性 | 值 |
尺寸及位置 | 浮點 | 左 |
尺寸及位置 | 寬度 | 73% |
尺寸及位置 | 邊距 |
|
尺寸及位置 | 高度 | 40px |
尺寸及位置 |
邊距 |
|
背景 | 背景色彩 | FFFFFF |
邊框 | 邊框寬度 | 1px |
邊框 | 邊框樣式 | 堅固 |
邊框 | 邊框顏色 | A7A9AC |
邊框 | 邊框半徑 | 7px |
文字 | 字型系列 | Arial |
文字 | 字型色彩 | BCBEC0 |
文字 | 字型大小 | 18px |
文字 | 行高 | 2 |
點選Submit按鈕,點選圖示。 設定下列屬性:
折疊式面板 | 屬性 | 值 |
尺寸和位置 | 浮點 | 右 |
尺寸和位置 | 邊距 |
|
背景 | 背景色彩 | F6921E |
邊框 | 邊框顏色 | F6921E |
您可以使用各種字型來設計最適化表單。 在檢視最適化表單的所有裝置上,可能沒有用於設計最適化表單的字型。 您可以使用網頁字型服務,將必要的字型傳送至目標裝置。
Adobe Fonts 是網頁字型服務。您可以設定並使用具有最適化表單的服務。 要在自適應形式中使用Adobe Fonts:
Typekit fontsis現在稱為Adobe Fonts,並隨附於Creative Cloud和其他訂閱。了解更多.
建立Adobe Fonts帳戶、建立套件、將Myriad Pro字型加入套件、發佈套件並取得套件ID。 必須在最適化表單中使用Adobe Fonts(Web字型)。
在AEM Forms伺服器中,導覽至 Adobe Experience Manager > 工具 hammer](assets/hammer.png) > Adobe Fonts。 ![現在,開啟配置資料夾。 如果配置已可用,請按一下建立按鈕以建立新實例。
在「建立配置」對話框中,為配置指定Title ,然後按一下「建立」。 ][系統會將您重新導向至設定頁面。 在出現的編輯元件對話框中,提供套件ID並按一下確定。
設定您的主題以使用Adobe Fonts組態。 在作者實例上,在主題編輯器中開啟全局主題。 在主題編輯器中,導覽至「主題選項 > 設定」。 在Adobe Fonts Configuration欄位中,選取套件,然後按一下Save。
新增至Adobe Fonts的字型可供所有元件的Text accordion中選取。