如何使用旋轉副本最大化 Divi 的移動視口

在設計網站時，您在一開始就需要做出一個重要的選擇：“我首先要為什麼設備設計？” 通常，答案是台式機。 但僅僅因為您首先為桌面設計，並不意味著您的移動設計不能那麼徹底。 例如，通過使用旋轉副本，您可以最大化 Divi 的移動視口並將更多內容放入移動視口中，而不會給您的訪問者或您的設計增加負擔。 在本教程中，我們將向您展示如何在 Divi 中執行此操作。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

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

免費下載最大化移動視口佈局

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

下載文件

免費下載

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

下載

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

讓我們開始重建吧！

添加新部分

間距

首先向您正在處理的頁面添加一個新部分。 打開部分設置並刪除所有默認的頂部和底部填充。

• 頂部填充：0px
• 底部填充：0px

添加第 1 行

列結構

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

漿紗

在不添加任何模塊的情況下，打開行設置並修改大小設置如下：

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 均衡柱高：是
• 寬度：100%
• 最大寬度：50%（桌面）、100%（平板電腦和手機）
• 行對齊方式：左

間距

接下來刪除所有默認的頂部和底部填充。

• 頂部填充：0px
• 底部填充：0px

主要元素 CSS

為了確保所有列保持彼此相鄰，我們還將向行的主要元素添加一行 CSS 代碼。

display: flex;

第 1 列設置

動畫片

然後，我們將打開第 1 列設置並添加以下動畫：

• 動畫風格：淡入淡出

主要元素 CSS

通過將以下 CSS 代碼行添加到列的主要元素，我們將在較小的屏幕尺寸上保持列的大小：

width: 40% !important;

第 2 列設置

動畫片

接下來，我們將打開第 2 列設置並應用以下動畫：

• 動畫風格：淡入淡出
• 動畫延遲：200ms

主要元素 CSS

我們通過添加以下 CSS 代碼行將列的大小保持在較小的屏幕尺寸上：

width: 60% !important;

將圖像模塊添加到第 2 列

上傳圖片

是時候添加模塊了。 將圖像模塊添加到第 2 列並上傳您選擇的肖像圖像。

漿紗

移至模塊的設計選項卡並在模塊上強制全角。

• 強制全角：是

將文本模塊添加到第 1 列

添加 H2 內容

在第 1 列中，我們需要的第一個模塊是包含 H2 內容的文本模塊。

H2 文本設置

轉到模塊的設計選項卡並按如下方式修改 H2 文本設置：

• 標題 2 字體：蒙特塞拉特
• 標題 2 字體粗細：輕
• 標題 2 文本對齊：居中（僅限平板電腦和手機）
• 標題 2 文本顏色：#000000
• 標題 2 文字大小：3vw（桌面）、50px（平板電腦）、40px（手機）
• 標題 2 字母間距：-3px

漿紗

接下來，我們將在大小設置中修改寬度。

• 寬度：89%（桌面），150%（平板和手機）

變換旋轉

要在較小的屏幕尺寸上旋轉我們的模塊，我們將使用變換旋轉設置。

• 左：270 度（僅限平板電腦和手機）

位置

我們還在不同的屏幕尺寸上以不同的方式重新定位模塊。

• 位置：絕對
• 位置：底部中心（桌面），中心（平板電腦和手機）
• 垂直偏移：50px

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

能見度

我們在第 1 列中需要的下一個也是最後一個模塊是分頻器模塊。 確保啟用了“顯示分隔線”選項。

• 顯示分隔線：是

線

移至模塊的設計選項卡並更改線條顏色。

• 線條顏色：#000000

漿紗

也修改大小設置。

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

位置

並通過相應地重新定位模塊來完成模塊設置：

• 位置：絕對
• 位置：中右

添加第 2 行

列結構

在下一行，使用以下列結構：

漿紗

在不添加任何模塊的情況下，打開行設置並修改大小設置如下：

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 均衡柱高：是
• 寬度：100%
• 最大寬度：50%（桌面）、100%（平板電腦和手機）
• 行對齊：右

間距

接下來刪除所有默認的頂部和底部填充。

• 頂部填充：0px
• 底部填充：0px

主要元素 CSS

為了確保兩列在較小的屏幕尺寸上保持相鄰，我們將向行的主要元素添加一行 CSS 代碼。

display: flex;

第 1 列設置

漸變背景

接下來，我們將打開第 1 列設置，我們將應用漸變背景。

• 顏色 1：#1a9970
• 顏色 2：#000000
• 漸變類型：線性
• 梯度方向：153deg

動畫片

我們也在這個專欄上使用了延遲動畫。

• 動畫風格：淡入淡出
• 動畫延遲：400ms

主要元素 CSS

然後，我們將通過將以下 CSS 代碼行添加到列的主要元素來確保在較小的屏幕尺寸上保持列的大小：

width: 25% !important;

能見度

最後但並非最不重要的一點是，我們將隱藏列的溢出以確保沒有任何內容超出容器。

• 水平溢出：隱藏
• 垂直溢出：隱藏

第 2 列設置

背景顏色

進入第 2 列設置。 使用以下背景顏色：

• 背景顏色：#f4f4f4

動畫片

也應用延遲動畫。

• 動畫風格：淡入淡出
• 動畫延遲：600ms

主要元素 CSS

並通過向列的主要元素添加一行 CSS 代碼來完成列設置。 這將確保列在較小的屏幕尺寸上保持其大小。

width: 75% !important;

將文本模塊添加到第 2 列

添加內容

是時候添加模塊了。 將文本模塊添加到第 2 列，其中包含您選擇的一些描述內容。

文字設置

轉到模塊的設計選項卡並相應地更改文本設置：

• 文字字體：Open Sans
• 文字大小：15px（桌面）、14px（平板電腦）、13px（手機）
• 文本行高：2.4em

漿紗

然後，我們將更改大小設置。

• 寬度：80%
• 模塊對齊：居中

間距

我們將通過向間距設置添加一些自定義填充值來完成模塊設置。

• 頂部填充：15%
• 底部填充：15%

將按鈕模塊添加到第 2 列

添加副本

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

結盟

轉到模塊的設計選項卡並更改按鈕對齊方式。

• 按鈕對齊：居中

按鈕設置

接下來設置按鈕樣式。

• 為按鈕使用自定義樣式：是
• 按鈕文字顏色：#000000
• 按鈕背景顏色：#ffffff
• 按鈕邊框寬度：0px
• 按鈕邊框半徑：0px

• 按鈕字體：蒙特塞拉特
• 顯示按鈕圖標：是
• 按鈕圖標位置：左
• 僅在懸停按鈕時顯示圖標：否

間距

並通過在間距設置中添加一些自定義填充值來完成模塊設置。

• 頂部填充：2%
• 底部填充：2%
• 左填充：10%
• 右填充：10%

將文本模塊添加到第 1 列

添加內容

在第 1 列中，我們唯一需要的模塊是文本模塊。 將以下內容添加到內容框中：'— 01'。

文字設置

轉到模塊的設計選項卡並相應地更改文本設置：

• 文字字體：蒙特塞拉特
• 文字字體粗細：細
• 文字顏色：#ffffff
• 文字大小：50 像素（桌面）、40 像素（平板電腦）、35 像素（手機）
• 文本對齊：居中

漿紗

接下來增加模塊的寬度。

• 寬度：150%

轉換 翻譯

然後，轉到轉換設置並通過修改轉換轉換設置來重新定位模塊：

• 底部：-50%（僅限平板電腦和手機）

變換旋轉

我們也在較小的屏幕尺寸上旋轉模塊。

• 左：270 度（僅限平板電腦和手機）

位置

我們將通過在高級選項卡中重新定位模塊來完成模塊設置。

• 位置：絕對
• 地點：中心

重用克隆部分

完成第一部分後，您可以根據需要多次克隆它。

更改所有副本和鏈接

確保更改所有副本和鏈接。

更改圖像

隨著肖像圖像，你就完成了！

預覽

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

最後的想法

在這篇文章中，我們向您展示瞭如何在 Divi 中最大化您的移動視口。 更具體地說，我們使用旋轉副本在視口中容納更多內容，而不會產生壓倒性的設計體驗。 您也可以免費下載 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。