如何使用 Divi 創建移動優先設計

已發表: 2019-02-22

許多網站從移動設備獲得了大量訪問者。這導致了您的設計是否針對較小的屏幕尺寸進行了充分優化的問題。借助 Divi，專為桌面體驗而打造的設計最終也能立即響應。但僅僅因為某些東西具有響應性並不意味著它也被優化了。

如果移動設備是您的主要訪問者來源，那麼從移動設備的角度而不是桌面設備的角度開始設計和構建確實會有所幫助。在這篇文章中，我們將向您展示如何做到這一點。在經歷了一些您應該記住的提示和技巧之後，我們還將從頭開始重新創建一個示例，將這些提示考慮在內。

讓我們開始吧！

預覽

如前所述，我們將首先介紹一些提示和技巧。之後，我們將從頭開始重新創建一個使用這些技巧的示例。讓我們來看看結果。

移動的

移動優先

桌面

移動優先

方法

訂閱我們的 YouTube 頻道

1. 添加新頁面後立即切換到移動視圖

添加新頁面後，您需要做的第一件事是立即切換到移動視圖。這將使您能夠創建面向移動且準確的設計。

移動優先

2. 為每個設計元素啟用響應式選項並首先修改移動值

一旦您開始設計您要進行的任何設計，您將需要為設計元素啟用響應式選項。這包括但不限於文本大小、填充和邊距。您將添加的第一個值將是移動值（而不是桌面值），以確保首先針對移動優化設計。

移動優先

3. 刪除列之間的默認空間並在需要時手動添加填充

要創建更多水平空間，還建議刪除列之間的所有默認自定義填充。如果需要，您可以隨時將填充手動添加到每個列或設計元素，並自行選擇您想要的距離。

移動優先

4. 將 2 或 3 列彼此相鄰放置以創建水平設計

Divi 中的響應式結構是垂直定向的。這意味著模塊和列出現在彼此下方。然而，這需要更多的垂直滾動。根據您所從事的設計，創建更橫向的流程確實會有所作為。

移動優先

5. 沿途或之後修改桌面和平板電腦視圖

即使您是為移動優先目的而設計的，保持其他視圖的順序也很重要。每個設計元素中包含的響應式選項將幫助您實現這一目標。您可以選擇在之後或整個設計過程中修改這些值。

讓我們開始重新創建示例！

添加新部分

打開一個新頁面，切換到移動視圖並添加一個新部分以開始使用。

移動優先

添加第 1 行

列結構

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

移動優先

將文本模塊添加到行

添加 H2 內容

在行的列中添加一個文本模塊並輸入一些 H2 標題內容。

移動優先

H2 文本設置

然後，轉到標題文本設置並更改標題的外觀。

標題 2 字體：Didact Gothic
標題 2 文本對齊：居中
標題 2 文本顏色：#333333
標題 2 文字大小：5.5vw（手機）、5vw（平板電腦）、2vw（桌面）

移動優先

將分隔模塊添加到行

能見度

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

顯示分隔線：是

移動優先

顏色

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

顏色：#333333

移動優先

漿紗

還要修改大小設置。

寬度：48%
模塊對齊：居中

移動優先

添加第 2 行

列結構

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

移動優先

背景顏色

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

背景顏色：#ffe69e

移動優先

第 2 列背景顏色

還將背景顏色添加到該行的第二列。

第 2 列背景顏色：#ffd65b

移動優先

結盟

然後，更改行對齊方式。

行對齊方式：左

移動優先

漿紗

接下來打開大小設置。在這裡，我們要刪除列之間的所有默認空間。我們還為列使用自定義寬度，以使其在桌面上看起來不錯。

使用自定義寬度：是
單位：PX
自定義寬度：700px
使用自定義裝訂線寬度：是
天溝寬度：1
均衡柱高：是

移動優先

間距

繼續轉到間距設置並手動添加一些自定義邊距和填充值。

最高利潤率：5vw
底邊距：5vw
頂部填充：0px
底部填充：0px
第 1 列頂部填充：10vw（手機）、8vw（平板電腦）、4vw（桌面）
第 1 列底部填充：10vw（手機）、8vw（平板電腦）、4vw（台式機）

移動優先

邊界

也向該行添加一些圓角。

右上角：10px
右下角：10px

移動優先

盒子陰影

並給它一個微妙的盒子陰影。

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

移動優先

自定義 CSS

最後但並非最不重要的一點是，我們將在較小的屏幕尺寸上將列彼此相鄰放置，以確保我們充分利用我們擁有的水平空間。轉到高級選項卡並向主元素添加一行 CSS 代碼。

display: flex;

移動優先

將文本模塊添加到第 1 列

添加H3內容

是時候開始添加模塊了！將標題文本模塊添加到第一列並輸入一些 H3 內容。

移動優先

H3 文本設置

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

標題 3 字體：Didact Gothic
標題 3 字體粗細：粗體
標題 3 文本對齊：居中
標題 3 文本顏色：#ee6f49
標題 3 文字大小：4vw（手機）、3vw（平板電腦）、1.5vw（桌面）

移動優先

將分頻器模塊添加到第 1 列

能見度

接下來添加一個分隔模塊。確保啟用了“顯示分隔線”選項。

顯示分隔線：是

移動優先

顏色

然後，更改分隔線的顏色。

顏色：#ffffff

移動優先

漿紗

隨著尺寸設置。

分隔線重量：4px
寬度：30%
模塊對齊：居中

移動優先

間距

也向模塊添加一些自定義上邊距。

上邊距：4vw（手機）、2vw（平板電腦）、1.5vw（手機）

移動優先

將按鈕模塊添加到第 1 列

添加副本

第一列中所需的下一個也是最後一個模塊是按鈕模塊。輸入一些副本。

移動優先

結盟

然後轉到設計選項卡並更改按鈕對齊方式。

按鈕對齊：居中

移動優先

按鈕設置

在按鈕設置中修改按鈕的外觀。

為按鈕使用自定義樣式：是
按鈕文字大小：3vw（手機）、2vw（平板電腦）、1.5vw（桌面）
按鈕文字顏色：#ffffff
按鈕背景顏色：#ee6f49
按鈕邊框寬度：0px
按鈕字體：Didact Gothic
字體粗細：粗體

移動優先

將圖像模塊添加到第 2 列

上傳圖標

我們在第 2 列中需要的唯一模塊是圖像模塊。您可以使用您選擇的任何圖像，但如果您想使用本示例中使用的完全相同的圖標，您可以轉到家具店佈局包並在文章末尾下載它們。

移動優先

結盟

然後，轉到設計選項卡並更改圖像對齊方式。

圖像對齊：居中

移動優先

克隆行 #2

完成對行的修改後，您可以繼續克隆它。

移動優先

更改行背景顏色

我們需要對這個副本進行一些更改，從行背景顏色開始。

背景顏色：#8ee5cf

移動優先

刪除第 2 列的背景顏色

繼續刪除第 2 列的背景顏色。

移動優先

添加第 1 列背景顏色

我們改為向第一列添加背景顏色。

第 1 列背景顏色：#47e5bd

移動優先

更改列中的模塊

我們還為模塊切換列。

移動優先

更改圖像模塊中的圖標

然後，更改圖像模塊中的圖標。

移動優先

將濾鏡添加到圖像模塊

並通過更改過濾器設置中的色調使其與新的行和列背景顏色匹配。

色相：65度

移動優先

更改行對齊方式

接下來更改行對齊方式。

行對齊：右

移動優先

更改行邊框

隨著圓角。

左上角：10px
左下角：10px

移動優先

更改第 2 列中文本模塊的文本顏色

我們還在第 2 列中為文本模塊使用了另一種文本顏色。

標題 3 文本顏色：#7b9710

移動優先

更改按鈕背景顏色

我們對按鈕背景使用相同的顏色。

按鈕背景顏色：#7b9710

移動優先

克隆兩行

現在我們有了行的兩邊，我們可以根據需要克隆它們，並按順序放置它們。

移動優先