如何使用 Divi 在移動設備上精美展示服務（免費下載！）

如果您專注於移動優先設計，這篇文章可能會對您有所幫助。 我們創建了兩個漂亮的服務展示示​​例，它們在較小的屏幕尺寸上看起來很棒。 更重要的是，它們專門設計為在移動設備上看起來最好，同時在桌面上仍然保持良好的設計。 在這篇文章中，我們將逐步向您展示如何從頭開始重新創建它們。 我們希望本教程能夠激發您在為您構建的任何網站設計服務部分時發揮您的創造力。 在本教程結束時，您還可以下載這兩個部分的 JSON 文件。

讓我們開始吧！

預覽

在我們深入學習本教程之前，讓我們快速瀏覽一下我們將重新創建的兩個移動示例。

示例#1

示例#2

讓我們開始重新創建示例 #1

訂閱我們的 YouTube 頻道

添加新部分

漸變背景

創建一個新頁面並向其添加常規部分。 打開部分設置並添加漸變背景。

• 顏色 1：#ff0f83
• 顏色 2：rgba(255,255,255,0)
• 漸變類型：徑向
• 徑向：左
• 起始位置：20%
• 結束位置：20%

添加第 1 行

列結構

繼續使用以下列結構向該部分添加新行：

添加文本模塊 #1

添加內容

我們需要的第一個模塊是文本模塊。 向內容框中添加一些內容。

文字設置

然後，轉到設計選項卡並修改文本設置。

• 文字字體： Poppins
• 文字字體粗細：重
• 文字顏色：#ffffff
• 文字大小：20vw
• 文本行高：1em

• 文字陰影模糊強度：0.95em
• 文字陰影顏色：rgba(0,0,0,0.13)
• 文字方向：居中

添加文本模塊 #2

添加 H2 內容

在上一個文本模塊的正下方添加另一個文本模塊。 輸入您選擇的一些 H2 含量。

H2 文本設置

然後，轉到設計選項卡並修改 H2 文本設置。

• 標題 2 字體：Poppins
• 標題 2 字體粗細：粗體
• 標題 2 文本對齊：居中
• 標題 2 文本顏色：#000000
• 標題 2 文字大小：10vw（手機和平板電腦），10vw（桌面）

間距

使用一些負上邊距在兩個文本模塊之間創建重疊。

• 最高邊距：-12vw（手機）、-10vw（平板電腦）、-8vw（桌面）

添加第 2 行

列結構

繼續使用以下列結構添加另一行：

漸變背景

尚未添加任何模塊，打開行設置並添加漸變背景。

• 顏色 1：#3239ff
• 顏色 2：rgba(255,255,255,0)
• 漸變類型：徑向
• 徑向：右
• 起始位置：30%
• 結束位置：30%

漿紗

接下來轉到大小設置並允許行佔據屏幕的整個寬度。

• 使這一行全寬：是
• 使用自定義裝訂線寬度：是
• 天溝寬度：1

間距

也添加一些間距值。 這些值將確保所有屏幕尺寸的一切看起來都很好。

• 左填充：0vw（手機和平板電腦），15vw（桌面）
• 右填充：0vw（手機和平板電腦），15vw（桌面）

自定義 CSS

我們還通過在高級選項卡中添加一行 CSS 代碼將兩列彼此並排放置。

display: flex;

將文本模塊添加到第 1 列

添加 H3 和鏈接內容

現在我們可以開始添加模塊了！ 將文本模塊添加到帶有一些 H3 副本和鏈接的第一列。

背景顏色

然後，轉到模塊的背景設置並添加背景顏色。

• 背景顏色：rgba(255,255,255,0.95)

文字設置

繼續在模塊的文本設置中更改文本方向。

• 文字方向：居中

鏈接文字設置

還要修改鏈接文本設置。

• 鏈接字體： Poppins
• Linke 字體粗細：粗體
• 鏈接字體樣式：下劃線
• 鏈接下劃線顏色：#000000
• 鏈接文字顏色：#000000
• 鏈接文字大小：3vw（手機）、2vw（平板電腦）、1vw（桌面）

H3 文本設置

隨著 H3 文本設置。

• 標題 3 字體：Poppins
• 標題 3 字體粗細：超輕
• 標題 3 文本顏色：#000000
• 標題 3 文字大小：4vw（手機）、3vw（平板電腦）、2vw（桌面）
• 標題 3 文本行高：圓形為 1.9em，橢圓形為 3em

間距

要使用此模塊創建形狀，我們將在間距設置中添加一些自定義邊距和填充值。

• 左邊距：5vw
• 右邊距：-5vw
• 頂部填充：17vw（手機）、20vw（平板電腦）、15vw（桌面）
• 底部填充：17vw（手機）、20vw（平板電腦）、15vw（桌面）

邊界

我們通過在每個角上添加“100vw”，使用圓角將正方形變成圓形。

盒子陰影

為了創造一些深度，我們將添加一個微妙的框陰影。

• 框陰影模糊強度：100px
• 陰影顏色：rgba(0,0,0,0.12)

克隆文本模塊 4 次

現在我們已經完成了對第一個文本模塊的修改，我們可以繼續克隆它四次。 將兩個重複項放在第二列中。

修改重複 #1

間距

繼續修改第一個副本的間距設置。

• 最高利潤率：20vw
• 左邊距：-5vw
• 右邊距：5vw

修改重複 #2

背景顏色

接下來打開第二個副本並更改背景顏色。

• 背景顏色：rgba(255,248,209,0.92)

間距

也修改間距設置。

• 最高利潤率：-5vw

修改重複 #3

背景顏色

然後，打開第三個副本並更改背景顏色。

• 背景顏色：rgba(219,255,223,0.95)

間距

接下來修改間距設置。

• 最高利潤率：-5vw
• 左邊距：-5vw
• 右邊距：5vw

修改重複 #4

間距

也打開最後一個副本並添加一些負上邊距以完成設計。

• 最高利潤率：-5vw

讓我們開始重新創建示例 #2

添加新部分

進入第二個例子！ 向您的頁面添加一個新部分。

添加第 1 行

列結構

繼續使用以下列結構添加新行：

添加文本模塊

添加 H2 內容

我們需要的第一個模塊是文本模塊。 輸入您選擇的一些 H2 含量。

H2 文本設置

然後，轉到設計選項卡並修改 H2 文本設置。

• 標題 2 字體：Poppins
• 標題 2 文本對齊：居中
• 標題 2 文本顏色：#333333
• 標題 2 文字大小：7vw（手機和平板電腦），4vw（桌面）

添加分頻器模塊

能見度

在文本模塊正下方添加一個分隔線模塊。 確保啟用了“顯示分隔線”選項。

顏色

然後，轉到設計選項卡並修改分隔線顏色。

• 顏色：#333333

漿紗

也可以調整大小設置。

• 分隔線重量：5px
• 寬度：12%
• 模塊對齊：居中

添加第 2 行

列結構

繼續使用以下列結構向該部分添加新行：

背景顏色

尚未添加任何模塊，打開行設置並添加白色背景色。

• 背景顏色：#ffffff

漿紗

接下來轉到大小設置並允許行佔據屏幕的整個寬度。

• 使這一行全寬：是
• 使用自定義裝訂線寬度：是
• 天溝寬度：1

間距

添加一些自定義邊距和填充值，以優化所有屏幕尺寸的設計。

• 最高利潤率：2vw
• 底邊距：2vw
• 頂部填充：10vw（手機和平板電腦），5vw（桌面）
• 底部填充：10vw（手機和平板電腦），5vw（桌面）
• 左填充：2vw（手機和平板電腦），20vw（桌面）
• 右填充：2vw（手機和平板電腦），20vw（桌面）

盒子陰影

我們也使用了一個微妙的盒子陰影。

• 框陰影模糊強度：50px
• 陰影顏色：rgba(0,0,0,0.07)

自定義 CSS

最後但並非最不重要的一點是，通過向高級選項卡中的主要元素添加一個 CSS 代碼行，將兩列彼此相鄰。

display: flex;

將 Blurb 模塊添加到第 1 列

選擇圖標

我們現在可以開始添加模塊了！ 我們在第 1 列中唯一需要的模塊是 Blurb 模塊。 選擇您選擇的圖標。

漸變背景

然後，添加漸變背景。

• 顏色 1：#7b28ef
• 顏色 2：#29b6e5
• 梯度方向：142度

圖標設置

接下來修改圖標設置。

• 圖標顏色：#ffffff
• 圖標位置：頂部
• 使用圖標字體大小：是
• 圖標字體大小：5vw（手機和平板電腦），4vw（桌面）

漿紗

並更改大小設置。

• 寬度：48%（手機和平板電腦），78%（桌面）

間距

我們還添加了一些自定義邊距和填充值，以優化所有屏幕尺寸的設計。

• 最高利潤率：2vw（電話）
• 頂部填充：8.5vw（手機）、9vw（平板電腦）、6vw（桌面）
• 底部填充：3vw（手機）、5vw（平板電腦）、4vw（桌面）

邊界

接下來通過將“100vw”添加到邊框設置中的每個角將模塊變成一個圓圈。

盒子陰影

我們也添加了一個框陰影。

• 框陰影垂直位置：10px
• 框陰影傳播強度：5px
• 陰影顏色：rgba(2,185,252,0.35)

將文本模塊 #1 添加到第 2 列

添加H3內容

進入第二列！ 我們需要的第一個模塊是標題文本模塊。 添加一些H3內容。

H3 文本設置

然後，轉到設計選項卡並修改 H3 文本設置。

• 標題 3 字體：Poppins
• 標題 3 文字大小：4vw（手機）、3vw（平板電腦）、2vw（桌面）

間距

接下來添加一些自定義間距值。

• 上邊距：0vw（手機），3vw（平板電腦和台式機）
• 左邊距：-20vw（手機和平板電腦），0vw（桌面）
• 右邊距：0vw
• 底部填充：2vw（手機和平板電腦），1vw（桌面）
• 左填充：5vw（手機和平板電腦），2vw（桌面）

邊界

隨著左邊框。

• 左邊框寬度：5px
• 左邊框顏色：#f4f4f4
• 左邊框樣式：雙

將分隔模塊添加到第 2 列

顯示分隔線

我們需要的第二個模塊是分頻器模塊。 確保啟用了“顯示分隔線”選項。

• 顯示分隔線：是

顏色

然後，轉到設計選項卡並更改分隔線顏色。

• 顏色：#f4f4f4

樣式

接下來在樣式設置中更改分隔線樣式。

• 分隔線樣式：雙

漿紗

繼續修改大小設置中的不同選項。

• 分隔線重量：5px
• 高度：0px

間距

也可以使用間距值。

• 左邊距：-20vw（手機和平板電腦），0vw（桌面）

將文本模塊 #2 添加到第 2 列

添加內容

我們在第二列中需要的下一個模塊是另一個文本模塊。 添加一些選擇的正文內容。

文字設置

然後，轉到設計選項卡並修改文本設置。

• 文字大小：2vw（手機）、1.7vw（平板電腦）、0.8vw（桌面）
• 文本方向：左

間距

也可以使用間距值。

• 最高利潤率：0vw
• 左邊距：-20vw（手機和平板電腦），0vw（桌面）
• 右邊距：0vw
• 頂部填充：3vw（手機和平板電腦），2vw（桌面）
• 左填充：5vw（手機和平板電腦），2vw（桌面）

邊界

並添加左邊框。

• 左邊框寬度：5px
• 左邊框顏色：#f4f4f4
• 左邊框樣式：雙

將按鈕模塊添加到第 2 列

添加副本

第二列中我們需要的下一個也是最後一個模塊是按鈕模塊。 添加一些副本。

按鈕設置

然後，轉到設計選項卡並更改按鈕設置。

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：2.5vw（手機）、2vw（平板電腦）、1vw（桌面）
• 按鈕文字顏色：#4f77e8
• 按鈕邊框寬度：1px
• 按鈕邊框顏色：#4f77e8

• 按鈕邊框半徑：1px
• 按鈕字體： Poppins

間距

還要修改間距值。

• 上邊距：4vw（手機和平板電腦），2vw（桌面）
• 左邊距：-20vw（手機和平板電腦），0vw（桌面）

克隆行兩次

現在我們已經完成了對行及其所有模塊的修改，我們可以克隆它兩次。

更改圖標

確保更改了兩個 Blurb 模塊的圖標。

更改漸變背景

還要修改漸變背景。

• 顏色 1：#ff2885
• 顏色 2：#d6ac24

• 顏色 1：#70ff1e
• 顏色 2：#2699ff

更改框陰影顏色

將框陰影顏色與新的漸變背景相匹配。

• 陰影顏色：rgba(255,208,2,0.37)

• 陰影顏色：rgba(42,255,0,0.37)

更改按鈕邊框和文本顏色

並通過更改按鈕邊框和文本顏色來完成設計。

• 按鈕文字顏色：#e96c54
• 按鈕邊框顏色：#e96c54

• 按鈕文字顏色：#4dcb93
• 按鈕邊框顏色：#4dcb93

免費下載流動服務部分

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

下載文件

免費下載

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

下載

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

預覽

現在我們已經完成了所有步驟，讓我們最後看看這兩個示例的移動結果。

示例#1

示例#2

最後的想法

在這篇文章中，我們向您展示瞭如何僅使用 Divi 的內置選項在移動設備上展示服務的兩種創造性方法。 我們希望這種移動優先的方法也能激發您的創造力。 如果您有任何問題或建議，請務必在下方評論區留言！