代碼模塊是一塊空白的畫布，可讓您向頁面添加代碼，例如插件簡碼或靜態HTML代碼。 如果要使用第三方插件，例如第三方滑塊插件，則只需將插件的短代碼放在標准或全角代碼模塊中即可不受限制地顯示元素。
如何向頁面添加代碼模塊
在您可以將代碼模塊添加到您的頁面之前，您必須首先訪問 Divi Builder。 一旦 Divi主題 安裝在您的 現場網站，你會注意到一個按鈕 使用Divi Builder 每次創建新頁面時，位於發布商上方。
通過單擊此按鈕，可以激活Divi Builder，這使您可以訪問所有Divi Builder模塊。 然後點擊按鈕 使用Visual Builder 以可視模式啟動發電機。
您也可以點擊按鈕 使用Visual Builder 當您瀏覽您的 現場網站 如果您已登錄 WordPress 儀表板，請在上游。
一旦輸入Visual Builder，您可以單擊灰色加號按鈕以將新模塊添加到頁面。 新模塊只能添加到行內。 如果要開始新頁面，請記住首先在頁面中添加一行。
在模塊列表中找到代碼模塊，然後單擊它以將其添加到頁面中。 模塊列表是可搜索的，這意味著您還可以輸入單詞“ code”，然後按Enter鍵以自動查找並添加代碼模塊！ 添加模塊後，將為您提供模塊選項列表。 這些選項分為三個主要組： 內容 , 概念 et 先進 .
通過添加沉悶的樣式表來為單個頁面上的內容設置動畫的用例
在此示例中，我將添加一個鏈接腳本以導入Animate.css，以將動畫效果添加到頁面上的元素。 由於Animate.css文件包含很多代碼，因此僅將其加載到我需要的頁面上是有意義的。
只需添加一個常規部分和一個全角行（1列），然後添加代碼模塊即可。
在文字方塊中 內容，新增程式碼片段。
您要做的就是添加一些CSS類，以在頁面上為CSS類頁面的任何元素設置動畫。 在此示例中，我將在頁面加載時彈跳按鈕。
在“按鈕”模塊設置的“高級”選項卡上，在CSS類文本框中輸入“動畫”和“反彈”兩個類。
現在，當頁面加載時按鈕會彈回。
提示：有時添加帶有換行符的代碼將導致代碼停止工作。 最好在文本編輯器中創建代碼並將其粘貼到代碼模塊中。
代碼內容選項
在選項卡中 內容，您將找到該模組的所有內容元素，例如文字、圖像和圖示。 控制的一切 什麼 出現在模塊中的內容將始終位於此選項卡中。
內容
在這裡，您可以將要在頁面上顯示的任何 HTML、CSS 或 JavaScript 代碼放置在當前位置。 只有編輯和管理員可以發布未經過濾的 HTML，這意味著如果作者或貢獻者使用代碼，可能會從課程中刪除。 您還可以在模塊中放置簡碼。 這些課程代碼（簡碼）將顯示在父列內，無需任何額外的 Divi 模塊包裝器。
行政標籤
這將更改發生器中的模塊標籤，以便於識別。 在Visual Builder中使用WireFrame視圖時，這些標籤將顯示在Divi Builder界面的模塊塊中。
代碼設計選項
在“設計”選項卡中，您將找到所有模塊樣式選項，例如字體，顏色，大小和間距。 此選項卡允許您修改模塊的外觀。 每個Divi模塊都有一長串的設計設置，您可以用來調整幾乎所有內容。
最大寬度
在此輸入的任何值都將代碼模塊中呈現的任何內容的寬度限制為設置值。 例如，在輸入字段中輸入50％會將代碼模塊的內容減少到包含它的列的50％。
代碼高級選項代碼
在“高級”選項卡上，您會找到經驗豐富的Web設計人員可能會有用的選項，例如自定義CSS和HTML屬性。 在這裡，您可以將自定義CSS應用於模塊的許多元素中的任何一個。 您還可以將自定義CSS類和ID應用於模塊，該模塊可用於在子主題的style.css文件中自定義模塊。
CSS ID
輸入此模塊的易於使用的CSS ID。 ID可用於創建自定義CSS樣式或鏈接到頁面的特定部分。
CSS類
輸入用於此模塊的可選 CSS 類。 CSS 類可用於創建自定義 CSS 樣式。 您可以添加多個類，以空格分隔。 這些類可以在你的 Divi主題 子級或在您新增至頁面或您的自訂 CSS 中 現場網站 使用 Divi 主題選項或 Divi Builder 頁面設定。
自定義CSS
自定義CSS也可以應用於模塊和模塊的任何內部元素。 在“自定義CSS”部分中，您將找到一個文本字段，可在其中直接將CSS添加到每個元素。 這些設置中的CSS條目已嵌入樣式標籤。 因此，您只需要輸入用分號分隔的CSS規則即可。
能見度
此選項使您可以控制模塊所在的設備。 您可以選擇分別在平板電腦，智能手機或台式機上停用模塊。 如果您想在不同的設備上使用不同的模塊，或者想通過從頁面中刪除一些元素來簡化移動設計，這將非常有用。
本教程就是這樣。