如何使您的 Divi 全寬標題模塊全屏

無論訪問者的屏幕大小如何，全屏標題佔據整個屏幕。 這對於吸引用戶的注意力非常有用。 這也非常適合將他們引導到您的號召性用語。 幸運的是，使用 Divi 的全寬標題模塊很容易製作全屏標題。 在這篇文章中，我們將向您展示如何構建全角標題、將其變為全屏並設置樣式。 您可以使用這種方法為您的頁面構建任何全屏英雄部分！

讓我們開始吧。

預覽全屏標題

讓我們預覽一下我們將在本教程中構建的內容。

桌面

藥片

電話

為什麼要使用 Divi 的全寬標題模塊製作全屏標題？

在我們討論如何製作全屏標題之前，讓我們先談談為什麼 Divi 用戶可能想要一個。

全屏標題顯示包含部分中的特定元素。 本節以簡潔的佈局呈現這些元素，吸引註意力並執行多項任務。

首先，這可以用來顯示一個號召性用語，可以引導訪問者進入您的銷售渠道。 這是提及特定產品或服務的好地方。

其次，它可以向用戶展示一個有趣的設計，讓他們留在網站上。 網站只有幾秒鐘的時間來吸引訪問者的注意力。

創建全屏標題時要記住以下幾點：

• 遵循顏色和字體的常見設計實踐。 確保它們清晰易讀並符合您網站的主題。
• 保持設計簡潔乾淨。 不要使用太多的圖像、鏈接或按鈕。 專注於幾件事。 少即是多。
• 確保全屏標題是響應式的。 全屏標題必須看起來很棒並且在所有屏幕尺寸上都能正常工作。

如何使您的 Divi 全角標題成為全屏標題

首先向您正在處理的頁面添加全角部分。 然後，將Fullwidth Header Module添加到 fullwidth 部分。

模塊的設置將打開。 選擇設計選項卡。 啟用名為Make Fullscreen的選項。

我們現在有一個全屏標題。 就是這麼簡單。

啟用全屏頁眉向下滾動圖標

我們還可以添加一個按鈕，指示用戶向下滾動。 但是，我們必須啟用它。 此按鈕始終在全屏選項中顯示。 全屏標題選項始終與訪問者的屏幕高度匹配。

在模塊的設置中，我們將在 Layout 選項下看到一個名為 Scroll Down Icon 的部分。 單擊按鈕以啟用顯示向下滾動按鈕。

Divi 全角標題全屏標題示例

既然我們已經討論了為什麼要使 Fullwidth Header 全屏顯示並了解如何完成任務，讓我們看一個示例。 我將使用 Divi 佈局的 hero 部分創建一個全角標題。

對於此示例，我使用 Divi 中提供的免費攝影工作室佈局包主頁中的英雄部分。 我將使用佈局中的字體和顏色自定義此英雄部分，以創建一個獨特的全角標題。

全屏標題模塊設置

以下是全屏標題模塊中每個設置部分的步驟。

文本

首先，添加將在全角標題中可見的文本。 這包括標題、副標題、內容（我將為此使用 Divi 的內置虛擬文本）和按鈕文本。

• 名稱：Divi攝影工作室
• 副標題：攝影
• 按鈕 1：項目簡介
• 按鈕 2：項目規劃
• 正文：內容

圖片

接下來，添加圖像。 這顯示在全角標題的右側，將文本向左移動。

• 標題圖片：您的選擇

背景

向下滾動到背景並將顏色設置為#f6f5ee。

• 顏色：#f6f5ee

佈局

接下來，轉到“設計”選項卡。 啟用製作全屏。

• 製作全屏：是

向下滾動圖標

接下來，啟用Scroll Down Icon 。 將台式機和平板電腦的顏色更改為黑色，將手機的顏色更改為白色。 使用我選擇的圖像，圖標將出現在手機底部的圖像上，這使得它可以與圖像的顏色一起顯示。 將圖標大小更改為台式機的 70 像素、平板電腦的 60 像素和手機的 50 像素。

• 顯示向下滾動按鈕：是
• 圖標顏色：#000000 台式機和平板電腦，#ffffff 電話
• 尺寸：70px 桌面，60px 平板，50px 手機

標題文本

接下來，我們將調整Title Text 。 將文本設置為 H1 並選擇 Inter 作為字體。 將粗體設置為粗體，將對齊設置為居中，將顏色設置為黑色。

• 標題：H1
• 字體：國米
• 重量：粗體
• 對齊方式：中心
• 顏色：#000000

我們將使用三種字體大小：台式機 75px、平板電腦 40ps 和手機 24px。 將行高更改為 1.2em。

• 尺寸：75px 桌面，40px 平板，24px 手機
• 行高：1.2em

主體

接下來，向下滾動到Body Text 。 為字體選擇 Open Sans。 將對齊設置為向左，顏色設置為黑色。

• 字體：Open Sans
• 對齊方式：左
• 顏色：#000000

將桌面的字體大小設置為 16 像素，平板電腦設置為 15 像素，手機設置為 14 像素。 將行高更改為 1.8em。

• 尺寸：16px 桌面，15px 平板，14px 手機
• 行高：1.8em

字幕文字

接下來，向下滾動到Subtitle Text 。 將字體更改為 Inter。 將粗體設置為粗體，將樣式設置為 TT，將對齊設置為居中，並將顏色設置為#ff5a17。

• 字體：國米
• 重量：粗體
• 款式：TT
• 對齊方式：中心
• 顏色：#ff5a17

將所有三種屏幕尺寸的尺寸更改為 14 像素。 將字母間距更改為 1px，將行高更改為 1.4em。

• 尺寸：14 像素
• 字母間距 1px
• 行高：1.8em

按鈕一

接下來，向下滾動到Button One並選擇Use Custom Styles for Button 。 將文本顏色更改為黑色。

• 為按鈕使用自定義樣式：是
• 尺寸：20px 桌面，18px 平板，16px 手機
• 文字顏色：#000000

將背景顏色更改為白色，並將邊框寬度和半徑設置為 0px。

• 背景顏色：#ffffff
• 按鈕一邊框寬度：0px
• 按鈕一邊框半徑：0px

將字體更改為 Inter 並將粗體更改為粗體。

• 字體：國米
• 重量：粗體

接下來，選擇您喜歡的圖標，將顏色更改為黑色，將按鈕位置設置在左側，並禁用僅在懸停時顯示按鈕一的圖標。

• 圖標：您的選擇
• 圖標顏色：#000000
• 按鈕一圖標位置：左
• 僅在按鈕一的懸停時顯示圖標：否

最後，向下滾動到 Button One 的填充選項。 我們將為每個屏幕尺寸使用不同的填充。 對於桌面，頂部和底部使用 20 像素，左右使用 40 像素。 對於平板電腦，將頂部和底部填充更改為 16 像素。 在手機上，將頂部和底部填充更改為 12 像素。 為所有三個保留左側和右側填充相同。

• 桌面內邊距：上下 20px，左右 40px
• 平板電腦內邊距：上下 16 像素，左右 40 像素
• 手機內邊距：上下 12px，左右 40px

按鈕二

最後，向下滾動到Button Two 。 為 Button 選擇使用自定義樣式。 將台式機的字體大小設置為 20 像素，平板電腦設置為 19 像素，手機設置為 16 像素。 將文本顏色更改為白色。

• 為按鈕使用自定義樣式：是
• 尺寸：20px 桌面，18px 平板，16px 手機
• 文字顏色：#ffffff

將背景顏色更改為#ff5a17。 將邊框寬度和半徑設置為 0px。

• 背景顏色：#ff5a17
• 按鈕二邊框寬度：0px
• 按鈕二邊框半徑：0px

接下來，將字體更改為 Inter，將粗體更改為粗體。

• 字體：國米
• 重量：粗體

選擇您喜歡的圖標。 將顏色更改為黑色，將按鈕位置設置在左側，並禁用“僅在懸停時顯示按鈕二的圖標”。

• 圖標：您的選擇
• 圖標顏色：#000000
• 按鈕二圖標位置：左
• 僅在按鈕二的懸停上顯示圖標：否

最後，向下滾動到 Button Two 的Padding選項。 對於桌面，頂部和底部使用 20 像素，左右使用 40 像素。 在平板電腦上，將頂部和底部填充更改為 16 像素。 對於手機，將頂部和底部填充更改為 12 像素。 關閉模塊並保存您的工作。

• 桌面內邊距：上下 20px，左右 40px
• 平板電腦內邊距：上下 16 像素，左右 40 像素
• 手機內邊距：上下 12px，左右 40px

全屏標題結果

這是我們的全角標題在台式機、平板電腦和手機上的外觀。

桌面

藥片

電話

結束使用 Divi 的全寬頁眉模塊創建全屏頁眉的想法

這就是我們如何使用 Divi 全寬頁眉模塊製作全屏頁眉的看法。 這個過程很簡單，在任何設備上看起來都很棒。 添加向下滾動按鈕是一種出色的視覺效果，向用戶表明他們可以滾動。 設計全屏標題類似於設計英雄部分。 遵循一些簡單的指南可以幫助您使用 Divi 的全屏標題模塊創建令人驚嘆的全屏標題。

我們希望收到你的來信。 您是否已將 Divi Fullwidth Header 全屏顯示？ 在評論中讓我們知道。