Divi 推薦模塊的 6 個很棒的教程

您可以通過多種方式在頁面布局中使用 Divi 的推薦模塊。 在Elegant Themes 博客上,您會找到一些可幫助您更好地了解該模塊的推薦模塊教程。 現在,為了幫助您充分利用這些教程,我們在這篇文章中列出了它們! 這些推薦模塊教程涵蓋了一系列設置和技能,可以輕鬆深入到推薦模塊並改進您顯示推薦的方式。 它們將涵蓋布局選項、設計組合、粘性元素、動態內容、響應式內容和優雅的樣式選項。

讓我們來看看!

1. 8 元素顯示組合

6-awesome-tutorials-for-divis-testimonial-module-1 Divi 的推薦模塊的 6 個很棒的教程

我們的第一個教程展示了 8 個示例,說明了如何一起使用推薦模塊元素。 它討論了作者、職位、公司、正文內容、圖像和引用圖標元素,並展示了如何使用模塊的設置來設置它們的樣式。 然後它使用該樣式來顯示不同的組合。 這是一個很好的教程,可以了解這些元素如何協同工作,以了解如何使用它們為您的 Divi 網站創建自己的組合。

查看教程

2.如何創建推薦網格布局

6-awesome-tutorials-for-divis-testimonial-module-2 Divi 推薦模塊的 6 個很棒的教程

接下來,我們的第二個教程展示了如何使用 Divi 推薦模塊設置創建兩種不同的網格布局。 推薦卡相互接觸,網格內的每張卡都有不同的邊框顏色。 第一個網格是 3×2 布局。 第二個網格有一個寬卡和一個窄卡的交替布局。 本教程展示了如何將卡片制​​作成固定大小,而不管其內容如何。 還介紹了分步樣式選項。

查看教程

3. 將您的 Divi 推薦模塊設置為粘性

6-awesome-tutorials-for-divis-testimonial-module Divi 推薦模塊的 6 個很棒的教程

我們的第三個教程展示了如何使用 Divi 推薦模塊設置使模塊保持原位,直到它到達行的底部。 然後模塊像往常一樣隨行滾動。 該模塊用於圖像、作者、職位和公司文本。 一個單獨的文本模塊包含推薦文本。 推薦文本模塊正常滾動,而推薦模塊粘貼。 它還展示了如何設置推薦和文本模塊的樣式以獲取教程中的設計。 本教程構建了兩個推薦來展示多行如何協同工作。

查看教程

4.如何創建動態推薦模塊

6-awesome-tutorials-for-divis-testimonial-module-3 Divi 推薦模塊的 6 個很棒的教程

我們列表中的第四個教程展示了如何使用 Divi 和高級自定義欄位來創建動態推薦內容。 它逐步完成安裝 ACF 和設置將創建推薦內容的欄位組的過程。 然後它展示了如何將內容動態添加到推薦模塊。 然後,用戶只需要更改出現在頁面底部的 ACF 欄位中的內容或在 WordPress 編輯器中發布。 他們無需打開 Divi 構建器即可進行更改。

查看教程

5.如何添加響應式內容

6-awesome-tutorials-for-divis-testimonial-module-4 Divi 的推薦模塊的 6 個很棒的教程

我們的下一個教程展示了創建響應式內容的不同方法。 它不只是改變大小以適應屏幕,它顯示了兩種會改變內容本身的場景。 第一個場景顯示了桌面版的長篇推薦和手機版的短篇推薦。 第二種情況顯示了桌面版本的一個推薦,模塊更改為顯示手機版本的不同推薦。 手機版甚至改變了樣式,所以它看起來像一個完全不同的推薦模塊。

查看教程

6. 5 種方式來設計 Divi 的推薦模塊

6-awesome-tutorials-for-divis-testimonial-module-1 Divi 的推薦模塊的 6 個很棒的教程

最後,我們的第六個教程將引導您完成五種不同的推薦模塊設計的樣式,僅使用設計設置。 每一個設計都是獨一無二的,引人注目。 第一個設計將推薦放在與圖像重疊的單獨卡片上。 第二個選項在卡片的文本部分後面放置一個陰影。 第三個設計將兩個推薦書放在一個盒子里。 第四種設計為一些卡片使用漸變背景。 第五個設計將圖像放置在一個單獨的元素中,該元素具有與推薦文本重疊的漸變背景。 它還包括一個視頻,可引導您完成教程。

查看教程

結束對我們 6 個 Divi 推薦模塊教程的思考

這是我們對 Divi 推薦模塊的 6 個很棒的教程的看法,可幫助您獲得 Divi 網站的想法。 這 6 個推薦模塊教程易於遵循,涵蓋了所有推薦模塊設置。 通過這 6 個教程,任何 Divi 用戶都可以創建有趣且獨特的推薦模塊,這些模塊在任何 Divi 布局中都能脫穎而出並看起來很棒。 立即嘗試並創建您自己獨特的 Divi 推薦模塊。

我們希望收到你的來信。 您是否使用了 Divi 的這 6 個很棒的推薦模塊教程中顯示的任何方法? 請在評論中告訴我們您的體驗。

查看源代碼

相關文章