如何在 Divi 全角標題模塊中設置圖像樣式

已發表: 2022-07-25

Divi 的全角頁眉模塊包括許多圖像樣式選項，讓 Divi 用戶可以為其頁眉創建漂亮的圖像和佈局。 標題圖像可以通過多種方式設置樣式，以創建有趣的佈局和設計。 當它與各種文本和按鈕設計相結合時，它變得更加有趣。 在這篇文章中，我們將了解如何在您的 Divi 全角頁眉模塊中設置圖像樣式，並分享三個示例來幫助您設計全角頁眉模塊。

讓我們開始吧！

預習

桌面全角標題圖片示例一

桌面全角標題圖片示例一

電話全角標題圖片示例一

電話全角標題圖片示例一

桌面全角標題圖片示例二

桌面全角標題圖片示例二

電話全角標題圖片示例二

電話全角標題圖片示例二

桌面全寬頁眉圖片示例三

桌面全寬頁眉圖片示例三

電話全角標題圖片示例三

電話全角標題圖片示例三

將圖像添加到您的全角標題

這是我們將在此示例中使用的全角標題。 首先，讓我們看看如何構建它。 我們正在使用 Divi 中提供的免費花卉農場佈局包中的圖像和設計隊列。

將圖像添加到您的全角標題

要將 Divi Fullwidth Header 模塊添加到您的頁面，您需要一個具有單列行的新部分容器。 完成後，將 Fullwidth Header Module 添加到行的列中。

將圖像添加到您的全角標題

全角標題文本

接下來，添加標題、副標題、按鈕一文本、按鈕二文本和內容。

  • 標題：歡迎來到迪維花卉農場
  • 副標題：關於我們
  • 按鈕一：更多信息
  • 按鈕二：商店
  • 內容：你的文字

全角標題文本

標題圖片

向下滾動到圖像，選擇標題圖像，然後添加您的圖像。

標題圖片

背景

接下來，向下滾動到Background ，選擇 Gradient 選項卡，然後添加四個 Gradient Stops：

  • 梯度停止 1：0%，#000000
  • 停止 2：25%，rgba(0,0,0,0.8)
  • 漸變 3：75%，rgba(0,0,0,0.8)
  • 漸變 4：100%，#000000

背景

接下來，啟用Place Gradient Above Background Image 。 將其他設置保留為默認值。

  • 在背景圖像上方放置漸變：是

背景

選擇背景圖像選項卡並添加您的圖像。 接下來，我們將為 Fullwidth Header Module 設置樣式。

背景

標題文本

選擇 Design 選項卡並向下滾動到Title Text 。 選擇 H1 並選擇 Italiana 作為字體。 將對齊設置為左，並為顏色選擇白色。

  • 標題級別：H1
  • 字體：Italian
  • 對齊方式：左
  • 顏色：#ffffff

標題文本

設置桌面尺寸為80px，平板尺寸為40px，手機尺寸為32px。

  • 尺寸：80px 桌面，40px 平板，32px 手機

標題文本

主體

接下來，向下滾動到Body Text 。 將對齊設置為左，為字體選擇 Roboto，並將顏色更改為白色。

  • 對齊方式：左
  • 字體：Roboto
  • 顏色：#ffffff

主體

將桌面尺寸改為18px，平板尺寸改為16px，手機尺寸改為14px。

  • 文字大小：18px 桌面，16px 平板電腦，14px 手機

主體

字幕文字

接下來，向下滾動到Subtitle Text 。 選擇 Roboto 作為字體並將粗細設置為重。 為樣式選擇 TT，將對齊設置為左，並將顏色更改為 #b5a68f。

  • 字體：Roboto
  • 重量：重
  • 款式：TT
  • 對齊方式：左
  • 顏色：#b5a68f

字幕文字

接下來，將間距更改為 0.2em，將行高更改為 1.7em。 將字體大小保留為默認值 18 像素。

  • 間距：0.2em
  • 行高：1.7em

字幕文字

按鈕一

向下滾動到Button One並選擇Use Custom Styles for Button One 。 將字體大小設置為 14px，將文本顏色設置為 #aa6a3c，並將背景顏色設置為 #f5f3ef。

  • 為按鈕一使用自定義樣式：是
  • 字體大小：14px
  • 文字顏色：#aa6a3c
  • 背景顏色：#f5f3ef

按鈕一

將邊框顏色設置為#aa6a3c，將字母間距設置為 0.15em，將字體設置為 Roboto，將粗體設置為粗體，並將樣式設置為 TT。

  • 邊框顏色：#aa6a3c
  • 字母間距：0.15em
  • 字體：Roboto
  • 重量：粗體
  • 款式：TT

按鈕一

向下滾動到Button One Padding 。 將頂部和底部填充更改為 20 像素，將左側和右側填充更改為 30 像素。

  • 內邊距：上、下 20px、左、右 30px

按鈕一

按鈕二

接下來，向下滾動到按鈕二。 為按鈕二選擇使用自定義樣式。 將字體大小設置為 14 像素，將文本顏色設置為白色，將背景顏色設置為 rgba(255,255,255,0)。

  • 為按鈕二使用自定義樣式：是
  • 字體大小：14px
  • 文字顏色：#ffffff
  • 背景顏色：rgba(255,255,255,0)

按鈕二

將邊框顏色設置為白色，將字母間距設置為 0.15em，將字體設置為 Roboto，將粗體設置為粗體，將樣式設置為 TT。

  • 邊框顏色：#ffffff
  • 字母間距：0.15em
  • 字體：Roboto
  • 重量：粗體
  • 款式：TT

按鈕二

向下滾動到Button Two Padding並將 Top 和 Bottom Padding 設置為 20px，Left 和 Right Padding 設置為 30px。 這就是 Fullwidth Header Module 樣式。 現在，我們將看到三種設置圖像樣式的方法。

  • 內邊距：上、下 20px、左、右 30px

按鈕二

全角標題圖像樣式示例

以下是使用我們的佈局作為起點的三個示例。 我將對每個示例的佈局進行一些調整。

全角標題圖片示例一

對於我們的第一個全角標題圖像示例，我們將創建一個帶邊框的圓形頂部。 轉到“設計”選項卡並向下滾動到“圖像” 。 取消同步值並將頂部邊框更改為 400 像素。

  • 右上角和左上邊框：400px
  • 右下和左邊框：0px

全角標題圖片示例一

將邊框寬度更改為 2px，將邊框顏色更改為白色。

  • 寬度：2px
  • 顏色：#ffffff

全角標題圖片示例一

接下來，我們將調整文本和圖像的對齊方式以調整它們在屏幕上的位置。 在本例中，我們將圖像和文本保留在其當前位置，但我們將更改文本和按鈕的垂直對齊方式。 選擇全屏會在文本選項中打開垂直文本對齊選項。

首先，轉到設計選項卡。 在 Layout 下，將 Text Alignment 設置為 right 並啟用 Make Fullscreen。

  • 製作全屏：是

全角標題圖片示例一

最後，向下滾動到Text 。 您現在將看到一個標記為Text Vertical Alignment的選項。 將其設置為底部。 關閉模塊並保存您的設置。

  • 文本垂直對齊：底部

全角標題圖片示例一

全角標題圖像示例二

對於此示例，我們將使用不同的按鈕文本和圖像。 首先，將Button One 文本更改為 Information。

  • 按鈕一文本：信息

全角標題圖片示例一

接下來，向下滾動到背景並選擇不同的圖像。 該圖像將佔據屏幕寬度的 1/3 左右。 我使用與背景相同的圖像。

  • 標題圖片：大圖

全角標題圖片示例一

接下來，轉到“高級”選項卡並向下滾動到“標題圖像”字段。 添加CSS以將寬度設置為 150%，將高度設置為自動。 關閉模塊並保存您的設置。

標題圖片 CSS： 

max-width: 150%;
height: auto;

全角標題圖片示例一

現在有了圖像和按鈕文本，我們將進行調整。 我們可以調整文本和圖像的對齊方式來調整它們在屏幕上的位置。 首先，轉到設計選項卡。 在 Layout 下，將 Text Alignment 保留為 Left 並啟用Make Fullscreen 。

  • 製作全屏：是

全角標題圖片示例一

接下來，滾動到標題文本並將對齊設置為居中。

  • 標題文本對齊方式：居中

全角標題圖片示例二

接下來，向下滾動到Body Text 。 將文本對齊更改為居中。

  • 對齊方式：中心

全角標題圖片示例二

接下來，滾動到字幕文本並將對齊設置為居中。

  • 字幕文本對齊：居中

全角標題圖片示例二

向下滾動到按鈕一個邊距並將左邊距更改為台式機的 29%、平板電腦的 18% 和手機的 19%。

  • 按鈕一左邊距：29% 台式機，18% 平板電腦，19% 手機

全角標題圖片示例二

向下滾動到按鈕兩個邊距並將左邊距更改為平板電腦的 30% 和手機的 31%。

  • 按鈕二左邊距：30% 平板電腦，31% 手機

全角標題圖片示例二

向下滾動到尺寸並將手機的寬度設置為 104%。 對於窄屏幕，這將內容正確居中。

  • 寬度：104% 手機

全角標題圖片示例二

全角標題圖片示例三

首先，轉到設計選項卡。 在Layout下，將 Text Alignment 設置為 Right。 就我而言，文本是左對齊的，但如果您沒有指定對齊方式，您的文本可能會居中。

  • 文字和徽標對齊：居中

全角標題圖片示例三

向下滾動到圖像。 將邊框寬度更改為 4 像素，將邊框顏色更改為 #b5a68f。

  • 邊框寬度：4px
  • 邊框顏色：#b5a68f

全角標題圖片示例三

接下來，滾動到標題文本並將對齊更改為居中。

  • 標題文本對齊方式：居中

全角標題圖片示例三

滾動到正文並將對齊更改為居中。

  • 正文文本對齊：居中

全角標題圖片示例三

接下來，滾動到字幕文本並將對齊更改為居中。

  • 字幕文本對齊方式：居中

全角標題圖片示例三

接下來，轉到內容選項卡並將按鈕一文本更改為僅適用於手機的信息。

  • 電話的按鈕一內容：信息

全角標題圖片示例三

返回“設計”選項卡並在 Button Two 的電話選項卡中添加 5% 的右邊距。

  • 右邊距：5% 電話

全角標題圖片示例三

最後，向下滾動到Sizing並將 Content Width 設置為台式機的 52%，平板電腦和手機的 100%。 關閉模塊並保存您的設置。

  • 內容寬度：52% 台式機，100% 平板電腦和手機

全角標題圖片示例三

結果

桌面全角標題圖片示例一

桌面全角標題圖片示例一

電話全角標題圖片示例一

電話全角標題圖片示例一

桌面全角標題圖片示例二

桌面全角標題圖片示例二

電話全角標題圖片示例二

電話全角標題圖片示例二

桌面全寬頁眉圖片示例三

桌面全寬頁眉圖片示例三

電話全角標題圖片示例三

電話全角標題圖片示例三

結束的想法

這就是我們對如何設置 Divi 全角標題模塊樣式的看法。 該圖像易於設置樣式，並且可以放置在模塊內的多個位置。 該模塊的各種佈局選項為您提供了許多設計可能性。 請務必在所有屏幕尺寸上測試您的設計，以確保獲得最佳用戶體驗。

我們希望收到你的來信。 您是否在 Divi 的全角標題模塊中設置了圖像樣式？ 請在評論中告訴我們您的體驗。