Divi 標題類型、教程和免費贈品概述

已發表: 2020-11-20

自從 Divi 主題生成器問世以來,我們創建 Divi 標題的方式已經發生了最好的變化。 我們可以添加我們想要的任何元素,使用 Divi 的內置設計選項對其進行樣式設置,並創建無縫響應的體驗。 在過去的幾個月中,我們一直在關注如何通過教程和免費贈品幫助您充分利用頁眉設計。 在某些時候,瀏覽所有這些不同的標題類型、教程和免費贈品可能會變得有點混亂,這就是我們設置這篇文章的原因,您可以隨時返回。 這篇文章將介紹您可以創建的不同標題類型,其中也包括一個免費下載文件。 除了免費下載,您還可以獲得分步教程,幫助您了解您正在創建的內容以及如何調整內容以滿足您自己的需求。

這篇文章的第二部分重點介紹了 Divi 社區中經常被問到的一些技巧和竅門,我們向您展示瞭如何解決某個問題或實現設計而不必浪費時間試圖自己弄明白。 最後但並非最不重要的一點是,我們列出了您可以立即下載和使用的所有標題免費贈品。

發現標題類型
發現標題提示和技巧
發現標題免費贈品

標題類型

1. 常規標題

divi 標題教程

Divi Theme Builder 發佈時在博客上出現的第一個標題類型教程是常規標題。 本教程側重於熟悉 Divi Theme Builder 環境並構建全局標題。 我們添加了帶有徽標、社交關注圖標和按鈕的頂部欄。 導航欄動態顯示可以在 WordPress 網站後端設置的菜單項。

訪問教程

2. 粘性標題

divi 標題教程

如果您也想設置一個具有粘性的標題,您需要熟悉這篇文章。 除了向您展示如何設置適當的標題結構(包括頂部欄)外,本教程還向您展示瞭如何使用 Divi 的內置粘性選項將標​​題變為粘性。 標題中元素的樣式也會隨著滾動而改變,這使標題具有全新的外觀和感覺。

訪問教程

3.全屏標題

divi 標題教程

當然,頂部標題欄並不是允許在您的網站上導航的唯一方法,因此接下來我們有一個全屏標題。 在本教程中,我們將向您展示如何使用 Divi 構建整個自定義全屏標題。 菜單中的所有項目都是模塊,單擊功能由教程和下載文件中包含的一些 JQuery 代碼啟用。 使用這種類似方法的一些免費贈品是:

  1. 公關公司頁眉和頁腳模板模板
  2. 意大利餐廳頁眉和頁腳模板
  3. 自由作家頁眉和頁腳模板
  4. 財務顧問頁眉和頁腳模板

訪問教程

4. 滑入式標題

divi 標題教程

接下來,我們有一個從右側滑入的標題。 本教程也是基於 Divi 的內置元素。 您可以在滑入式菜單中放置任何您想要的內容,並使用響應式選項創建一個完全響應式的環境。 單擊功能通過教程中包含的一些自定義 JQuery 代碼以及免費贈品模板 JSON 文件形成。

訪問教程

5. 向下滑動推頭

divi 標題教程

我們列表中的另一種很酷的標題類型是滑下推標題。 單擊漢堡圖標時,頁眉從頂部向下滑動並將頁面內容向下推。 這為所有屏幕尺寸提供了有趣而美麗的效果。

訪問教程

6. 垂直導航

divi 標題教程

另一種為訪問者提供輕鬆導航的方法是使用垂直導航欄。 如果您正在尋找一種在 Divi Theme Builder 中執行此操作的方法,請務必查看本教程。 垂直導航在瀏覽器中佔據了自己的空間,從而縮小了頁面內容的寬度並創建了一個漂亮的並排頁面結構。

訪問教程

7.透明浮動標題

divi 標題教程

如果您想在頁面頂部添加標題或發佈內容,本教程非常適合您! 我們使用具有三個不同元素的透明標題; 徽標、菜單和按鈕。 這三個元素通過一個絕對的 CSS 位置放置在頁面內容的頂部。 結果也是高度響應,並在您的網站上提供了很好的凝聚力。

訪問教程

8.透明粘性標題

divi 標題教程

本教程與上一教程略有相似,但有一個很大的不同; 一旦訪問者向下滾動頁面或發布他們所在的頁面,導航欄就會變得粘滯並改變樣式。 這使您可以充分利用頁面頂部的英雄部分設計,同時在訪問者向下滾動時保持輕鬆導航。

訪問教程

9. 旋轉標題

divi 標題教程

如果您正在為您的網站尋找更開箱即用的設計,您可能需要考慮使用旋轉的透明標題。 此標題類型放置在您網站的一側,並在訪問者訪問您的網頁的整個過程中跟踪他們。 它為您的桌面設計提供了更精緻的外觀和感覺,同時在較小的屏幕尺寸上保持輕鬆的頂部欄體驗。

訪問教程

10. 自定義電子商務下拉菜單

divi 標題教程

您的網站越大,就越難找到一種列出網站上所有頁面的好方法。 這就是大型菜單派上用場的地方。 儘管您始終可以使用 Divi 的內置大型菜單,但如果您正在尋找一個更由 Divi 構建的環境,您可以在其中添加任意數量的模塊,這就是適合您的教程。 特別是對於電子商務網站,它可以派上用場,以有吸引力和高度可視化的方式展示不同的產品類別。 雖然本教程是一種更“高級”的資源類型,但已經為您設置了代碼基礎,它可以讓您在設計中獲得任意創意。 請確保即使在本教程中使用模板 JSON 文件時,您也可以通過幾個步驟來使這個超級菜單栩栩如生。

訪問教程

11.自定義優雅主題的下拉菜單

divi 標題教程

自從Divi Theme Builder問世以來,人們一直在想如何創建優雅主題的無縫導航下拉菜單。 本教程重點向您展示如何在 Divi Theme Builder 中復制優雅的主題下拉菜單。 更重要的是,它允許您添加所需的任何類型的模塊並創建自己獨特的菜單變體。

訪問教程

提示與技巧

在概述帖子的這一部分中,我們將以教程形式分享不同的提示和技巧。 這些帖子中的每一篇都包含 A 到 Z 的體驗。 這意味著我們不僅會向您展示如何實現這一技巧,還會指導您完成整個頭文件構建過程,從而為您提供選擇; 您想將整個設計用於您自己的目的,還是只專注於特定的技巧和竅門。

1.在滾動上顯示和隱藏標題

divi 標題教程

訪問教程

2. 移動折疊嵌套菜單

divi 標題教程

訪問教程

3. 動畫你的全局標題

divi 標題教程

訪問教程

4. 在您​​的標題中添加內聯登錄表單

divi 標題教程

訪問教程

5. 在標題中添加兩個並排的按鈕

divi 標題教程

訪問教程

6. 自動將頁眉置於每個頁面的第一部分下方

divi 標題教程

訪問教程

7. 在您的標題中添加下拉聯繫表

divi 標題教程

訪問教程

8. 在滾動時交換標題

divi 標題教程

訪問教程

9. 優化 Divi 的菜單模塊,提供 5 個全局預設

divi 標題教程

訪問教程

10. 在標題內的菜單項中添加角標籤

divi 標題教程

訪問教程

11.在標題中添加和動畫你的SVG標誌

divi 標題教程

訪問教程

12. 將您的頁眉和頁面與 Divi 部分分隔線混合

divi 標題教程

訪問教程

13. 在標題中添加動態網站標題和標語

divi 標題教程

訪問教程

14. 使用全局預設優化您的 Divi 站點的徽標

divi 標題教程

訪問教程

15.在標題中添加固定的“最新劇集”音頻欄

divi 標題教程

訪問教程

16. 在你的標題 CTA 中添加延遲按鈕動畫

divi 標題教程

訪問教程

17. 更改滾動條上的粘性徽標

divi 標題教程

訪問教程

標題免費贈品

最後但並非最不重要的一點是,我們還列出了您可以在 Elegant Themes 博客上找到的不同標題免費贈品。 標題免費贈品設計計劃始於我們在 2019 年 12 月分享的第一個主題構建器包,但這還不止於此。 我們一直並將繼續分享與 Divi 佈局包匹配的免費頁眉和頁腳免費贈品。 儘管該樣式主要基於所討論的佈局包,但它們也可以輕鬆用於其他網站。

1. 主題生成器包

主題生成器包 #1

divi 標題教程

訪問教程

主題生成器包 #2

divi 標題教程

訪問教程

主題生成器包 #3

divi 標題教程

訪問教程

主題生成器包 #4

divi 標題教程

訪問教程

主題生成器包 #5

divi 標題教程

訪問教程

主題生成器包 #6

divi 標題教程

訪問教程

2. 佈局包頁眉和頁腳免費贈品

意大利餐廳佈局包

訪問教程

虛擬助手佈局包

訪問教程

聯合辦公空間佈局包

訪問教程

窗戶清潔佈局包

訪問教程

塔羅牌佈局包

訪問教程

畫家佈局包

divi 標題教程

訪問教程

寵物用品佈局包

訪問教程

美容產品佈​​局包

訪問教程

烹飪學校佈局包

訪問教程

香水佈局包

訪問教程

壽司餐廳佈局包

訪問教程

草藥療法佈局包

訪問教程

裝修佈局包

訪問教程

機器人佈局包

訪問教程

整體治療師佈局包

訪問教程

香料店佈局包

訪問教程

室內裝潢佈局包

訪問教程

公關公司佈局包

訪問教程

健身教練佈局包

訪問教程

婚禮攝影師佈局包

訪問教程

營養師佈局包

訪問教程

自由作家佈局包

訪問教程

解釋器佈局包

訪問教程

財務顧問佈局包

訪問教程

美甲沙龍佈局包

訪問教程

影響者佈局包

訪問教程

皮革公司佈局包

訪問教程

針灸佈局包

divi 標題教程

訪問教程

3. 其他

最小的頁眉和頁腳組合

訪問教程

在我們的博客上搜索新標題

我們會定期在我們的博客上發布新的標題免費贈品和教程。 我們會一直更新這篇文章,但如果您想了解最新內容,請隨時使用“標題”和“菜單”等關鍵字搜索博客搜索欄!

最後的想法

在這篇文章中,我們清楚地概述了您可以在我們的博客上找到的 Divi 標頭類型、教程和免費贈品! 這篇文章希望能幫助您在開始新項目之前設置標題的基礎。 您可以決定要創建的標頭類型,轉到向您展示如何操作的博客文章或下載 JSON 文件以準備好所有內容! 我們還分享了一些適用於您的標題的技巧和竅門,希望它們能幫助您快速解決問題並專注於真正重要的事情:擁有一個您心目中的均衡網站。 如果您有任何問題或建議,請隨時在下面的評論部分發表評論。

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