如何使用 Divi Theme Builder 創建食譜卡模板

美食博主和食譜創作者知道對他們發布的食譜保持一致的看法是多麼重要。 一個常見的解決方案是使用配方卡插件，但這有設計限制。 現在，使用 Divi Theme Builder，您可以創建自己的食譜卡模板，以在整個網站和博客中使用。 在高級自定義字段 (ACF) 插件的幫助下，設計獨特且可重複使用的食譜卡比以往任何時候都容易。

在這篇文章中，我們將向您展示如何創建具有動態內容的食譜卡模板。 通過使用 Divi Theme Builder 設置，可以通過選擇特定類別將設計應用於包含食譜的博客文章。 我們希望本教程能激發您使用自己的自定義字段創建自己風格的食譜卡。

讓我們來看看設計在不同屏幕尺寸下的外觀。

食譜卡模板預覽

讓我們來看看設計在不同屏幕尺寸下的外觀。

桌面

藥片

移動的

1. 下載並安裝高級自定義字段插件

搜索和安裝

通過在插件搜索欄中搜索“高級自定義字段”來找到 ACF 插件，安裝並激活它。

添加新字段組

單擊 ACF 選項卡並選擇“添加新的”。 將組命名為“食譜卡”。 通過“添加字段”按鈕一一添加自定義字段。

添加自定義字段

對於每個自定義字段，單擊“添加字段”按鈕。 每個都可以針對不同類型的內容進行定制。 下面的列表指定了每個字段的標籤和類型。 在每個字段標籤的開頭添加“配方”一詞，以便在構建模塊時很容易找到。 添加標籤後，字段名稱將自動填充。

食譜標題

從食譜標題開始。

• 字段標籤：配方標題
• 字段類型：文本
• 需要嗎？：是
• 佔位符文本：食譜標題
• 字符限制：30

食譜作者

然後，為作者創建一個字段。

• 字段標籤：配方作者
• 字段類型：文本
• 需要嗎？：是
• 佔位符文本：作者

食譜準備時間

跟著準備時間。

• 字段標籤：配方准備時間
• 字段類型：數字
• 需要嗎？：是
• 佔位符文本：##
• 準備： 準備時間：
• 附加：分鐘。

食譜份量

然後，上菜。

• 字段標籤：食譜份量
• 字段類型：數字
• 需要嗎？：是
• 佔位符文本：##
• 準備： 服務：

食譜風味小貼士

添加風味提示字段。

• 字段標籤：配方風味提示
• 字段類型：文本
• 需要嗎？：是
• 前置：風味提示：
• 字符限制：40

食譜圖片

現在，添加圖像字段。

• 字段標籤：食譜圖片
• 字段類型：圖像
• 需要嗎？：是

配方成分標題

然後，成分標題。

• 字段標籤：配方成分標題
• 字段類型：文本
• 說明：只需編寫與占位符文本相同的內容即可。
• 需要嗎？：是
• 佔位符文本：成分

配方成分錶

按照成分錶進行操作。

• 字段標籤：配方成分列表
• 字段類型：文本區域
• 說明：在每個項目後添加一個空格
• 需要嗎？：是
• 行數：8
• 新行：自動添加 <br>

配方准備標題

緊隨其後的是準備標題。

• 字段標籤：配方准備標題
• 字段類型：文本
• 說明：只需編寫與占位符文本相同的內容即可。
• 需要嗎？：是
• 佔位符文本：準備

配方准備清單

最後，準備清單。

• 字段標籤：配方准備清單
• 字段類型：文本區域
• 說明：在每個項目後添加一個空格
• 需要嗎？：是
• 行數：10
• 新行：自動添加 <br>

發布字段組

發布字段組。 您的字段組窗口應如下面的屏幕截圖所示。

如何在 Divi Builder 中訪問食譜卡模板的 ACF 插件內容

通過單擊動態內容圖標，可以將高級自定義字段添加到 Divi 模塊。 此圖標位於內容框的右上角。 這是它的樣子：

2. 使用 Divi Builder 創建新的食譜卡模板

Divi 主題生成器步驟

1. 創建食譜類別

您需要一個名為“食譜”的類別，以便您可以為其分配模板。 通過儀表板將其添加到類別選項卡中。

2.打開Divi Theme Builder並添加新模板

打開 Divi 主題構建器並添加一個新模板。

3. 添加全局主體

單擊“添加全局主體”並將模板分配給特定類別 > 食譜中的帖子。 然後，單擊“創建模板”按鈕。

4. 建立自定義身體

單擊“添加全局主體”並選擇“添加自定義主體”。

3. 使用動態內容重新創建食譜卡設計

添加新部分

現在，我們可以開始設計食譜卡模板。 當 Divi 構建器打開時，選擇“從頭開始構建”。 首先添加一個新部分。

背景

在部分設置中，添加背景顏色。

• 背景顏色：淺灰色#ededed

漿紗

此外，在設計選項卡中調整大小。

• 寬度：100%
• 最大寬度：100%

添加第一行

列結構

添加一個包含一列的新行。

漿紗

在添加模塊之前，調整行的大小設置。

• 最大寬度：90%

列設置

背景

自定義行內的列設置。 首先，添加背景顏色。

• 背景顏色：白色#ffffff

邊界

然後，修改邊框樣式。

• 圓角：1vw 所有四個角
• 邊框樣式：所有四個邊
• 寬度：5px
• 顏色：深灰色#333333

添加具有動態內容的文本模塊

內容

完成行和列設置後，就可以添加模塊了。 首先添加一個文本模塊。 在內容窗口中，為配方標題選擇動態內容。 選擇後，單擊齒輪圖標並輸入 H1 片段。

• 正文：食譜標題
• 機身設置：
  • 之前：<H1>
  • 之後：</H1>

標題文字

然後，相應地設置 H1 文本設置的樣式：

• 標題級別：H1
• 字體：東方
• 重量：粗體
• 對齊方式：居中
• 顏色：深灰色#3d3d3d
• 尺寸：
  • 台式機：3vw
  • 平板電腦：4vw
  • 電話：5vw
• 字母間距：3px
• 線高：1.5em

間距

也修改間距值。

• 底部邊距：
  • 桌面：-1vw
  • 平板電腦：-2vw
  • 電話：-5vw
• 頂部填充：
  • 台式機 + 平板電腦：1vw
  • 電話：2vw
• 底部填充：0vw
• 左 + 右填充：
  • 台式機 + 平板電腦：3vw
  • 電話：4vw

添加具有動態內容的第二個文本模塊

內容

添加第二個文本模塊並為配方作者選擇動態內容。

• 正文：食譜作者

文本

然後，設置文本樣式。

• 字體：編碼 Sans
• 顏色：深灰色#3d3d3d
• 尺寸：
  • 台式機：1.4vw
  • 平板電腦：2.4vw
  • 電話：3vw
• 對齊方式：居中

間距

然後，調整間距。

• 最高利潤率：1.5vw
• 頂部填充：
  • 台式機 + 平板電腦：0vw
  • 電話：2vw
• 底部填充：2vw
• 左 + 右填充：
  • 台式機：2vw
  • 平板+手機：3vw

添加第二行

列結構

現在，使用以下列結構添加第二行：

漿紗

打開行設置並相應地調整大小設置：

• 天溝寬度：2
• 寬度：90%
• 最大寬度：100%
• 行對齊方式：左

間距

然後，間距。

• 頂部 + 底部填充：0.5vw
• 左填充：10vw

能見度

最後，在高級選項卡中，調整可見性。

• 水平溢出：可見
• 垂直溢出：可見

列 1 + 2 + 3 設置

邊界

以相同的方式設置所有三列的樣式。 首先，轉到邊框設置並進行一些更改。 對所有三列重複。

• 圓角：1vw 所有四個角
• 邊框樣式：所有四個邊
• 寬度：5px
• 顏色：深灰色#333333

轉變

要使設計具有懸停效果，請按如下方式調整變換設置。 對所有三列重複。

• 懸停時變換比例：105% x 105%

將文本模塊添加到第 1 列

內容

添加一個文本模塊並暫時將內容窗口留空。 我們稍後會添加。

背景

為模塊添加背景顏色。

• 背景顏色：檸檬綠#b1e88d

標題文字

接下來設置 H5 文本設置的樣式。

• 標題級別：H5
• H5 字體：東方
• H5 顏色：深灰色 #3d3d3d
• H5尺寸：
  • 台式機：1vw
  • 平板電腦：2.3vw
  • 電話：3.3vw
• 對齊方式：居中

間距

最後，按如下方式調整間距值。

• 頂部填充：
  • 台式機：1vw
  • 平板電腦：1.5vw
  • 電話：3.5vw
• 底部填充：
  • 台式機：0.5vw
  • 平板+手機：1.5vw
• 左 + 右填充：
  • 台式機：2vw
  • 平板+手機：3vw

從第 1 列複製文本模塊兩次並移至第 2 和第 3 列

在線框視圖中，複製第一列中的文本模塊。 然後，將重複項移至第 2 列和第 3 列。

將動態內容添加到第 1 列中的文本模塊

添加準備時間的動態內容並調整設置。

• 身體：食譜準備時間
• 機身設置：
  • 之前：<H5>準備時間：
  • 之後：分鐘</H5>

將動態內容添加到第 2 列中的文本模塊

添加食譜服務的動態內容並調整設置。

• 身體：食譜服務
• 機身設置：
  • 之前：<H5>份量：
  • 之後：</H5>

將動態內容添加到第 3 列中的文本模塊

添加風味提示的動態內容並調整設置。

• 正文：配方風味提示
• 機身設置：
  • 之前：<H5>風味提示：
  • 之後：</H5>

添加第三行

列結構

現在使用以下列結構添加第三行：

漿紗

在添加任何模塊之前，調整行的大小。

• 自定義天溝寬度：2
• 寬度：80%
• 最大寬度：100%

間距

另外，擦除默認的上邊距。

• 最高利潤率：0vw

能見度

最後，在高級選項卡中調整可見性。

• 水平溢出：可見
• 垂直溢出：可見

列 1 + 2 + 3 設置

邊界

從邊框設置開始，以相同的方式設置所有三列的樣式。 重複第 2 列和第 3 列。

• 圓角：1vw 所有四個角
• 邊框樣式：所有四個邊
• 寬度：5px
• 顏色：深灰色#333333

轉變

繼續在設計選項卡中添加懸停變換。 重複第 2 列和第 3 列。

• 懸停時變換比例：105% x 105%

將具有動態內容的圖像模塊添加到第 1 列

內容

為配方圖像添加具有動態內容的圖像模塊。

• 圖片：食譜圖片

將具有動態內容的文本模塊添加到第 2 列

內容

現在，為成分標題添加一個具有動態內容的文本模塊。 單擊齒輪圖標並輸入 H3 片段，如下所示。

• 正文：配方成分標題
• 機身設置：
  • 之前：<H3>
  • 之後：</H3>

標題文字

然後，設置標題文本的樣式。

• 標題級別：H3
• H3Font：東方
• H3 顏色：深灰色 #3d3d3d
• H3尺寸：
  • 台式機：1.6vw
  • 平板電腦：2vw
  • 電話：5.5vw
• 對齊方式：居中

間距

通過調整間距完成模塊。

• 底部邊距：0vw
• 頂部填充：
  • 台式機：2vw
  • 平板電腦：3vw
  • 電話：4vw
• 左 + 右填充：
  • 台式機：2vw
  • 平板+手機：3vw

將分隔模塊添加到第 2 列

線

添加一個分隔模塊並按如下方式設置樣式。

• 顏色：檸檬綠#b1e88d

漿紗

然後調整大小值。

• 重量：5px
• 寬度：40%
• 對齊方式：左

間距

最後，調整間距。

• 最高利潤率：0vw

將具有動態內容的文本模塊添加到第 2 列

內容

為成分列表添加具有動態內容的文本模塊。 單擊動態內容選項卡中的齒輪圖標並啟用原始 HTML。

• 正文：配方成分列表
• 正文設置：啟用原始 HTML

文本

然後，按如下方式設置文本樣式。

• 字體：編碼 Sans
• 顏色：深灰色#333333
• 尺寸：
  • 台式機：0.9vw
  • 平板電腦：2vw
  • 電話：3vw

間距

另外，調整間距。

• 最高保證金：
  • 桌面：-1vw
  • 平板電腦：-3vw
  • 電話：-5vw
• 頂部填充：
  • 台式機 + 平板電腦：0vw
• 底部填充：
  • 台式機：3vw
  • 平板電腦 + 手機：4vw
• 左 + 右填充：
  • 台式機：3vw
  • 平板電腦：4vw
  • 電話：5vw

複製第 2 列上的所有模塊並移至第 3 列

在線框視圖中，複製第二列中的所有模塊。 以相同的順序將復制的模塊移至第三列。

在第 3 列的第一個文本模塊中添加動態內容

為準備標題添加動態內容。

• 正文：配方准備標題

在第 3 列的第二個文本模塊中添加動態內容

此外，將準備列表的動態內容添加到該列的最後一個文本模塊。

• 正文：配方准備清單

添加第 4 行

列結構

為了完成模板，我們需要一個帖子內容模塊。 使用以下列結構添加新行：

漿紗

在添加模塊之前，調整行的大小。

• 自定義天溝寬度：2
• 寬度：100%
• 最大寬度：80%

間距

• 左 + 右填充：0vw

第 1 列設置

背景

為列設置樣式以匹配上面的食譜卡。 首先，添加背景。

• 背景顏色：白色#ffffff

間距

另外，調整間距。

• 左填充：0vw

邊界

最後但並非最不重要的是，修改邊框設置。

• 圓角：1vw 所有四個角
• 邊框樣式：所有四個邊
• 寬度：5px
• 顏色：深灰色#333333

將第 2 列留空。

將帖子內容模塊添加到第 1 列

文本

將帖子內容模塊添加到第一列並設置文本樣式以匹配食譜卡模板。

• 字體：編碼 Sans
• 顏色：深灰色#333333
• 尺寸：
  • 台式機：0.9vw
  • 平板電腦：2vw
  • 電話：3vw
• 線高：2em

標題 1 文本

• 字體：東方
• 顏色：深灰色#333333
• 尺寸：
  • 台式機：2vw
  • 平板電腦：5vw
  • 電話：6vw

標題 2 文字

• 字體：東方
• 顏色：深灰色#333333
• 尺寸：
  • 台式機：1.8vw
  • 平板電腦：4.5vw
  • 電話：5.5vw

標題 3 文本

• 字體：東方
• 顏色：深灰色#333333
• 尺寸：
  • 台式機：1.6vw
  • 平板電腦：4.5vw
  • 電話：5vw

間距

要匹配食譜卡的樣式，請調整間距值。

• 頂部 + 底部填充：2vw
• 左 + 右填充：
  • 台式機：4vw
  • 平板+手機：6vw

如果要更改塊引用行的顏色或鏈接顏色，可以在主題定制器中的強調色下進行。

4. 使用 ACF 插件設置和食譜卡模板編輯/創建帖子

輸入自定義字段

打開或添加帖子。 在內容區域下方，您將找到配方卡模板的所有自定義字段。 為了重新創建此鱷梨吐司設計，請按如下方式填寫字段。

食譜標題：

• 超綠純素鱷梨吐司

食譜作者：

• Magdalena Swifter – www.veganchef.com

食譜準備時間：

• 15

食譜份量：

• 3

食譜風味提示：

• 使用海鹽片和特級初榨油

食譜圖片：

• 鱷梨吐司圖片

配方成分標題：

• 原料

配方成分錶：

• 3 片全麥麵包片
• 1 成熟鱷梨
• 100克。 煮熟的蠶豆
• 10克。 綠豆芽
• 1 蔥花
• 30克。 碎羊乳酪
• 1個檸檬切成兩半
• 少許橄欖油
• 撒上海鹽

配方准備標題：

• 準備

配方准備清單：

• 1. 根據自己的喜好烤麵包片。
• 2. 將牛油果打開，取出果肉，用叉子搗碎。
• 3. 將檸檬汁擠在鱷梨上，加鹽調味。
• 4. 將鱷梨泥塗抹在吐司上。
• 5. 撒上蠶豆、豆芽和蔥花。
• 6. 加鹽調味。
• 7. 加入碎菲達奶酪。
• 8. 最後塗上橄欖油。

給帖子一個標題

標題

不要忘記為您的帖子添加標題。

• 鱷梨吐司食譜

添加內容、選擇類別並添加特色圖片

將博客文章的內容寫入或插入到常規編輯器中。 選擇食譜類別並添加特色圖片。

食譜卡模板預覽

再一次，讓我們再看看帶有食譜卡模板的完成後的帖子在不同屏幕上的樣子。

桌面

藥片

移動的

這是一個包裹！

讓我們快速回顧一下我們為實現此食譜卡模板設計而採取的步驟。

1. 安裝 ACF 插件。
2. 設置配方卡字段組。
3. 添加自定義字段。
4. 創建一個新模板並將其分配給“食譜”類別下的博客文章。
5. 使用模塊中 ACF 字段的動態內容。
6. 通過填寫字段創建或編輯博客文章。
7. 添加博客文章內容。

由於此設計是作為具有動態內容的模板創建的，因此它將在所有使用 ACF 插件自定義字段的食譜博客文章中保持一致。 我們希望此食譜卡模板設計能夠為您的與食品相關的博客提供各種新穎和創新的食譜模板。 在評論中讓我們知道您的想法。