填寫 Divi 表單時如何為元素添加 CSS 焦點狀態樣式

大多數網站的主要目標之一是表單提交。 這是公司獲得銷售線索、電子郵件訂閱者等的方式。 有效的網頁設計可以使表單提交對訪問者更具吸引力，而提高參與度的一種方法是在“填寫”過程中為表單添加額外的樣式。 為此，我們可以利用 CSS 中焦點狀態的力量。 事實上，Divi 為 Divi 的表單模塊（Contact、Email Optin 等）內置的表單字段提供了焦點樣式選項，因此您不必依賴外部 CSS 來設置焦點狀態下的這些表單字段的樣式。

在本教程中，我們將介紹一種令人興奮的方法，當訪問者單擊 Divi 表單上的字段時，可以更改多個元素的樣式。 您不僅可以為特定的焦點字段添加 Divi 的內置焦點樣式，還可以更改該字段周圍元素的樣式。 這將允許您通過微妙的動畫和設計改進表單提交的 UI。

讓我們開始吧！

搶先看

這是我們將在本教程中構建的設計的快速瀏覽。

免費下載佈局

要了解本教程中的設計，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

要將部分佈局導入您的 Divi 庫，請導航到 Divi 庫。

單擊導入按鈕。

在可移植性彈出窗口中，選擇導入選項卡並從您的計算機中選擇下載文件。

然後點擊導入按鈕。

完成後，分區佈局將在 Divi Builder 中可用。

讓我們進入教程，好嗎？

你需要什麼開始

首先，您需要執行以下操作：

1. 如果您還沒有安裝並激活 Divi 主題。
2. 在WordPress中新建一個頁面，在前端使用Divi Builder編輯頁面（visual builder）。
3. 選擇“從頭開始構建”選項。

之後，您將有一個空白畫布開始在 Divi 中進行設計。

使用 :focus-within CSS 偽類

由於 Divi 已經具有用於在焦點狀態下設置表單字段樣式的內置選項，因此本教程還將將該焦點樣式擴展到其他元素。 為了實現額外的焦點狀態樣式，我們將使用 Divi Builder 和一些使用:focus偽類的自定義 CSS 片段。

別擔心，它並不像看起來那麼複雜。

:focus 和 :focus-within 之間的區別

：重點

與:hover類似，CSS 中的:focus偽類用於在元素處於焦點狀態時為其應用樣式。 焦點狀態通常通過單擊表單上的輸入字段等元素來觸發。 例如，一旦用戶在表單域內單擊，它就會激活該域的焦點狀態。 這允許您使用:focus偽類來定位 CSS 中該字段的樣式。

:焦點內

:focus偽類目標（或代表）處於焦點狀態的元素的樣式。 然而， :focus-within偽類更進一步。 :focus-within偽類的目標是焦點元素的樣式，以及包含焦點元素的任何元素。 這意味著您可以定位處於焦點的元素的任何父元素，並在該元素處於焦點時應用這些樣式。 換句話說，我可以在表單域內部單擊並更改表單域背景顏色（使用:focus ），同時使用更改表單域的父部分背景顏色（使用:focus-within ）。

填寫 Divi 表單時向元素添加焦點狀態樣式

現在我們對:focus和:focus 的工作原理有了一定的了解，讓我們通過在本教程中添加一些焦點狀態樣式來測試它。

添加預製佈局

首先，添加 Travel Blog Contact 頁面預製佈局以啟動本教程的設計，並準備好可用作我們示例的聯繫表單。 為此，請單擊構建器設置菜單中的從庫加載圖標。 在預製佈局選項卡下，單擊旅遊博客佈局包，然後選擇聯繫頁面佈局。 然後單擊“使用此佈局”按鈕。

更新聯繫表單設置

在聯繫頁面佈局上，打開聯繫表單模塊的設置並使用文本“Get in Touch”更新標題。

場焦點樣式

在設計選項卡下，更新字段焦點樣式如下：

• 字段焦點背景顏色：rgba(255,107,90,0.15)
• 字段焦點文本顏色：#000000

這將為實際字段的焦點狀態設置樣式（Divi Builder 設置中的一個方便的原生選項）。

聯繫表單 CSS 類

接下來，在高級選項卡下的聯繫表單中添加自定義 CSS，如下所示：

• CSS 類：divi-form-focus

這將是我們用來在表單字段聚焦時定位表單樣式的類。

更新列設置

接下來，打開聯繫表單的父列的設置。

填充

• 填充：頂部 5%，底部 5%，左側 3%，右側 3%

列 CSS 類

在高級選項卡下，為該列提供以下 CSS 類：

• CSS 類：divi-column-focus

當表單字段（子元素）聚焦時，這將是我們用來定位列樣式的類。

添加部分 CSS 類

為了在表單字段（也是該部分的子元素）聚焦時使用 CSS 來定位部分樣式，請打開包含聯繫表單的部分的設置並添加以下 CSS 類：

• CSS 類：divi-section-focus

使用代碼模塊添加自定義 CSS

如前所述，當表單字段被聚焦時，我們將使用:focus CSS 偽類來設置其他 Divi 元素的樣式。 我們將要設置樣式的元素（表單、列和部分）已經被賦予了一個自定義類，我們可以使用它在我們的 CSS 中定位它們（“divi-form-focus”、“divi-column-focus” ，“分部焦點”）。

現在，我們需要做的就是添加我們的 CSS 代碼。 為此，請在聯繫表單模塊下添加一個代碼模塊。

然後在代碼內容區粘貼以下代碼：

確保使用必要的樣式標籤包裝代碼。

  /*add smooth transitions for focus state styles*/
  .divi-form-focus, .divi-column-focus, .divi-section-focus, .divi-form-focus h2 {
    transition: all 300ms
  }
  
  /*style form module h2 heading in form focus state*/
  .divi-form-focus:focus-within h2 {
    font-size: 14px !important;
    color: #888888;
  }
  
  /*style parent column in form focus state*/
  .divi-column-focus:focus-within {
		background: #ffffff;
    transform: scale(1.2);
    box-shadow: 0 0 30px rgba(0,0,0,0.2);
  }
  
  /*style parent section in form focus state*/
  .divi-section-focus:focus-within {
    background: rgba(255,107,90,0.15);
  }
 

請注意，每個具有元素的 CSS 類（即“divi-column-form”）的 CSS 片段都具有:focus-within偽類，以便在表單字段獲得焦點時表示該元素類的樣式。 一個片段在表單的焦點狀態中設置表單的 h2（或標題）的樣式。 一個片段在表單的焦點狀態中設置父列的樣式。 一個片段在表單的焦點狀態中設置父部分的樣式。

最後結果

這是最終結果。 請注意填寫表單時不同元素如何更改樣式。

最後的想法

在 Divi 中填寫表單時為元素添加 CSS 焦點樣式可以真正提升用戶提交表單的體驗。 關鍵是使用:focus-within偽類以及在表單處於焦點狀態時添加到要設置樣式的元素的自定義類。 這可以通過向頁面添加最少的自定義 CSS 來完成，如果您熟悉添加自己的自定義 CSS，則可能性是巨大的。

我期待在評論中收到您的來信。

乾杯!