如何使用 Divi 的轉換選項添加圖像標記

圖像標記是展示產品特殊功能的好方法。 在這篇文章中，我們將向您展示如何使用文本模塊和垂直分隔線創建圖像標記。 由於列內的轉換設置，圖像標記可以放置在您需要的任何位置。 為了向您展示這種技術的通用性，我們將向您展示兩個不同的設計示例。 您也可以免費下載 JSON 文件！

讓我們開始吧！

預覽

在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。

示例#1

桌面

移動的

示例#2

桌面

移動的

免費下載圖像標記佈局

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

下載文件

免費下載

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

下載

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

訂閱我們的 YouTube 頻道

重新創建示例 #1

讓我們開始重新創建第一個設計示例！

添加新部分

向您正在處理的頁面添加一個新部分。 在添加行之前，請先調整部分設置。

背景

添加漸變，然後添加具有屏幕混合模式的圖像。

• 背景：漸變+圖像
• 漸變色 1：白色 #ffffff
• 漸變色 2：中灰色 #666666
• 漸變起始位置：22%
• 背景圖像混合：屏幕

間距

刪除下一個部分的默認頂部和底部填充。

• 頂部和底部填充：0vw

能見度

通過隱藏部分的溢出來完成部分設置。

• 垂直和水平溢出：隱藏

添加第 1 行

現在，添加一個包含三列的新行。

在添加任何模塊之前調整行設置。

漿紗

首先，調整行的大小。

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 寬度：100%
• 最大寬度：100%

自定義 CSS

接下來，向該行的主要元素添加一行 CSS 代碼。 這也將允許列在較小的屏幕尺寸上彼此相鄰顯示。

• 主要元素 CSS: display: flex;

display: flex;

第 1 欄

轉換 翻譯

將自定義變換轉換效果應用於第一列以重新定位該列。 一旦您稍後在帖子中添加圖像標記模塊，此步驟將有意義。 如果您在另一個設計中使用此技術，則需要相應地更改這些值。

• Transform Translate：x軸2vw，y軸16vw

Z索引

向可見性選項卡添加更高的 z 索引值。

• Z指數：10

第 2 欄

轉換 翻譯

將變換平移效果應用於第二列。

• Transform Translate：x軸-11vw，y軸6vw

Z索引

增加 z 索引值。

• Z指數：10

第 3 欄

轉換 翻譯

修改第三列的轉換轉換值。

• Transform Translate：x軸-11vw，y軸8vw

Z索引

並更改 z 索引值。

• Z指數：10

添加第 2 行

在向第一行添加任何模塊之前，添加一個新的單列行。 在添加圖像標記之前執行此操作，以便您可以在設計時查看屏幕上發生的情況。

漿紗

更改行的大小設置。

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 寬度：100%
• 最大寬度：100%

添加圖像模塊

接下來添加一個圖像模塊。

漿紗

在圖像模塊上強制全寬以確保設計在所有屏幕尺寸上保持響應。

• 強制全角：是

間距

然後，添加一些左右填充以使圖像更小。

• 左右填充：10vw

添加 3 個文本模塊

現在，返回第一個 3 列行並添加 3 個文本模塊。

使用線框視圖更容易訪問。

將文本模塊添加到第一列，將其克隆兩次並將重複項拖到其他列。

開始修改第 1 列中的文本模塊。輸入您選擇的一些內容並更改設置如下。

背景

添加黑色背景。

• 背景顏色：黑色#000000

文本

為文本設置樣式。

• 文字字體：奧爾德里奇
• 文字顏色：白色#ffffff
• 文本對齊：居中
• 字體大小：
  • 台式機：1.2vw
  • 平板電腦：2vw
  • 電話：2.4vw
• 標題字體粗細：粗體

漿紗

調整文本模塊的大小。

• 寬度：
  • 台式機：17vw
  • 平板電腦：23vw
  • 電話：30vw
• 模塊對齊：居中

間距

添加頂部和底部填充。

• 頂部和底部填充：0.9vw

邊界

更改邊框設置。

• 圓角：所有角均為 14px
• 底部樣式：底部邊框
• 底部邊框寬度：4px
• 底部邊框顏色：紅色#E02B20

盒子陰影

應用框陰影。

• 框陰影：第三個選項

擴展文本樣式

為了節省時間，請使用擴展樣式選項為該部分中的其他文本模塊設置樣式。

• 首先，單擊文本模塊右邊緣的三個點，然後選擇“擴展文本樣式”。
• 然後，在彈出框中，單擊“Throughout”並在菜單下拉時選擇“This Section”。
• 更改每個文本模塊中的內容。

添加 3 個分頻器模塊

在第 1 列中的文本模塊下方添加一個分隔符。然後將其克隆兩次並將重複項拖到其他列。

打開第 1 列中的分隔器模塊並進行一些更改。

線

使分隔線變黑。

• 線條顏色：黑色#000000

漿紗

調整隔板的厚度。

• 分隔線重量：3px
• 寬度：20vw
• 模塊對齊：居中

間距

調整上邊距。

• 最高利潤率：7vw

轉變

添加變換旋轉效果，使分隔線垂直。

• 變換旋轉：90 度時的第一個選項

展開分隔線設置

節省時間並使用擴展樣式選項。

• 首先，單擊分隔模塊右側的三個點，然後選擇“擴展分隔樣式”。
• 然後，在彈出框中，單擊“Throughout”並在下拉菜單中選擇“This Section”。

設計現在應該是這樣的：

添加第 3 行

使用以下列結構向該部分添加第三行：

現在，在添加任何模塊之前，相應地調整行設置。

漿紗

更改大小設置。

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 寬度：100%
• 最大寬度：100%

第 1 欄

轉變

將變換平移效果應用於第一列。

• 變換平移：y軸-8vw

Z索引

也調整 z 索引值。

• Z指數：10

第 2 欄

轉變

使用一些自定義轉換轉換設置重新定位第二列。

• Transform 平移：x 軸 -17vw，y 軸 -14vw

Z索引

調整 z 索引值。

• Z指數：10

添加 2 個分隔線

添加兩個分隔線，每列一個。

擴展分隔線樣式

添加分隔符後，使用以前的分隔符將樣式擴展到新的樣式。

• 首先，單擊上方第一行分隔模塊中的三個點，然後選擇“擴展分隔樣式”。
• 然後，在彈出窗口中，選擇“整個頁面”。

現在，我們將對第三行第一列中的分隔符進行一些更改。

漿紗

去除邊距。

• 上邊距：默認

Z索引

也更改 z 索引。

• Z指數：-2

添加 2 個文本模塊

為每列添加一個文本模塊。

擴展文本樣式

添加新的文本模塊後，從第一行的文本模塊擴展文本樣式。

• 首先，單擊頂行第一個文本模塊中的三個點，然後選擇“擴展文本樣式”。
• 然後，在彈出窗口中，選擇“整個頁面”。

現在，更改文本以匹配設計。 此外，為第三行的兩個文本模塊添加一些上邊距。

間距

• 最高利潤率：7vw

重新創建示例 #2

繼續下一個例子！

添加新部分

向您正在處理的頁面添加一個新部分。 在添加行之前，調整部分設置。

能見度

在可見性設置中隱藏該部分的溢出。

• 水平和垂直溢出：隱藏

添加第 1 行

現在，添加一個包含五列的行。 在添加任何模塊之前，請按如下方式調整行設置。

漿紗

首先，修改大小設置。

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 寬度：100%
• 最大寬度：100%

間距

然後調整間距。

• 左右填充：19.5vw

自定義 CSS

通過向行的主要元素添加一行 CSS 代碼，允許列彼此相鄰顯示。

• 主要元素 CSS: display: flex;

display: flex;

所有列設置

然後，對每一列進行一些更改。

自定義 CSS

• 主要元素：寬度：20% !important;

width: 20% !important;

Z索引

也調整 z 索引值。

• Z指數：10

添加 5 個文本模塊

為每列添加一個文本模塊。

在內容框中添加一些相關內容，然後繼續修改第 1 列中文本模塊的文本模塊設置。

背景

添加背景顏色。

• 背景顏色：綠色 #2f7713

文本

樣式內容如下。

• 文字字體：Allerta
• 文本對齊：居中
• 文字顏色：白色#ffffff
• 字體大小：
  • 台式機：1.3vw
  • 平板電腦：2vw
  • 電話：2.4vw
• 文本行高：2.9em

漿紗

調整大小。

• 寬度：
  • 台式機：6vw
  • 平板電腦：8vw
  • 電話：9vw
• 模塊對齊：居中

間距

調整間距，將模塊變成正方形。

• 底部邊距：-2vw
• 頂部和底部填充：1vw
• 左右填充：1vw

邊界

在邊框設置中將文本模塊變成一個圓圈。

• 圓角：四邊50vw

盒子陰影

也選擇一個框陰影。

• 框陰影：第三個選項

擴展文本樣式

使用擴展樣式選項調整行中所有文本模塊的設置。

• 首先，單擊文本模塊右側的點，然後選擇“擴展文本樣式”。
• 然後，在彈出窗口中，單擊“整個”並選擇“此頁面”。
• 最後，更改每個模塊內容框中的文本。

設計現在應該是這樣的。

文本模塊 2

使第二個圓圈變黃。

• 背景顏色：黃色#f2e200

文本模塊 3

使第三個圓圈變成橙色。

• 背景顏色：橙色#f2b100

文本模塊 4

使第四個圓圈呈橙紅色。

• 背景顏色：橙紅色

文本模塊 5

將第五個模塊設為紫色。

• 背景顏色：紫色 #8e008c

添加 5 個分頻器模塊

現在，在每個文本模塊下方，添加一個分隔模塊。

相應地調整第一個分頻器的設置。

線

給分隔線一個顏色。

• 線條顏色：綠色 #2f7713

漿紗

調整寬度。

• 分隔線寬度：4px
• 寬度：13vw

間距

添加上邊距值。

• 最高保證金：
  • 台式機：7vw
  • 平板電腦 + 手機：5vw

轉變

旋轉分隔器使其垂直。

• 變換旋轉：第一個選項中的 90 度

擴展分隔設置

使用擴展樣式選項來設置其他分隔線的樣式。

• 首先，單擊分隔模塊右側的點，然後選擇“擴展分隔樣式”。
• 然後，在彈出窗口中，單擊“Throughout”並選擇“This Section”。

匹配顏色

分隔線 2

使第二個分隔線變黃。

• 線條顏色：黃色#f2e200

分隔線 3

使第三個分隔線變成橙色。

• 線條顏色：橙色#f2b100

分隔線 4

使第四個分隔線橙紅色。

• 線條顏色：橙紅色#ef4a21

分隔線 5

將第五個分隔線設為紫色。

• 線條顏色：紫色 #8e008c

添加第 2 行

添加一個新的單列行。

添加圖像模塊之前，請調整行設置。

漿紗

首先，調整大小。

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 寬度：100%
• 最大寬度：100%

能見度

然後，可見性。

• 水平和垂直溢出：可見

添加圖像模塊

添加圖像模塊並上傳果汁圖像。

漿紗

在圖像上強制全角。

• 強制全角：是

行間距

是時候進行最後的接觸了。 再次打開第 1 行設置並添加一些頂部和底部邊距。

• 最高利潤率：7vw
• 底部邊距：
  • 台式機：-24vw
  • 平板電腦：-31vw
  • 電話：-35vw

預覽

現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。

示例#1

桌面

移動的

示例#2

桌面

移動的

這是一個包裝！

在這篇文章中，我們向您展示瞭如何創建兩種不同的圖像標記設計。 我們使用列選項將文本列和分隔線保持在一起。 我們希望這些設計能激發您創建自己的圖像標記設計。 請記住在列內使用變換轉換選項以更好地控制每個圖像標記。 如果您有任何疑問，請隨時在下面的評論部分發表評論！