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