使用 Divi & Slick 將您的博客模塊變成高級可拖動/滑動輪播
已發表: 2020-05-13對於許多網站而言，博客已成為其 SEO 策略的重要組成部分。 但除了創建高質量的內容之外，為訪問者簡化帖子導航過程也很重要。 這樣，他們就可以從一個帖子跳到另一個帖子，並花更多時間在您的網站上閱讀您發布的內容。 在 Divi 中，有一個博客模塊，您可以使用它來動態顯示您的博客文章並為其設置樣式。 如果您正在尋找一種方法將帖子搜索體驗提升到一個新的水平，那麼您會喜歡這篇文章的。 我們將向您展示如何使用 Divi 的內置元素和免費的 slick js 庫將內置的 Divi 博客模塊變成一個高級的可拖動/滑動輪播。 您也可以免費下載 JSON 文件！
讓我們開始吧。
預覽
在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。
桌面
移動的
免費下載博客模塊可拖動滑動輪播佈局
要使用免費的博客模塊可拖動滑動輪播佈局，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。
免費下載
加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。
您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！
1. 創建博客頁面
添加新頁面
首先向您正在處理的網站添加一個新頁面。 為您的頁面命名，發布頁面並切換到 Visual Builder。
上傳室內設計公司博客頁面佈局
在本用例教程中，我們將使用 Interior Design Company 博客佈局，但您可以自由使用您選擇的任何其他佈局。
2. 使用 Blurb 模塊創建上一個和下一個箭頭設計
將新行添加到部分頂部
列結構
進入博客頁面後，我們可以開始構建高級可拖動滑動輪播。 第一部分致力於設計我們需要允許訪問者在帖子之間來回走動的箭頭。 箭頭不會是訪問者在輪播中導航的唯一選項。 他們將能夠在桌面上拖動輪播並在移動設備上滑動。 為了設計箭頭，我們將使用 Divi 的內置 Blurb 模塊，但您可以自由使用您選擇的任何其他模塊。 使用以下列結構在博客部分的頂部添加一個新行：
漿紗
在不添加任何模塊的情況下，打開行設置並通過如下更改大小設置允許行接觸部分的左側和右側：
- 寬度：100%
- 最大寬度：100%
添加模糊模塊
添加標題
然後，添加一個 Blurb 模塊並插入一個標題。
選擇圖標
接下來選擇一個圖標。
圖標設置
轉到設計選項卡並按如下方式更改圖標設置：
- 圖標顏色：#000000
- 圓形圖標：是
- 圓圈顏色：#f2f2f2
- 圖像/圖標放置：頂部
- 圖像/圖標對齊方式：居中
標題文字設置
然後，修改標題文本設置。
- 標題字體：Muli
- 標題字體粗細：半粗體
- 標題文本對齊：居中
- 標題文字顏色：#000000
漿紗
接下來，我們將在不同的屏幕尺寸上更改模塊的尺寸設置。
- 寬度：10%（桌面）、20%（平板）、30%（手機）
- 模塊對齊：右
CSS 類
我們還將添加一個 CSS 類。 這個 CSS 類將幫助我們在教程稍後點擊時觸發輪播操作。
- CSS 類：後退按鈕
主要元素 CSS
最後但並非最不重要的一點是，我們還將向模塊的主元素添加一行 CSS 代碼，以將光標更改為指針。
cursor: pointer;
克隆行並放置在部分底部
完成第一個箭頭後，您可以克隆整個行容器並將重複的行放在博客部分的末尾。
更改標題
打開重複行中的 Blurb 模塊並更改標題。
更改圖標
隨著圖標。
更改 CSS 類
並修改 CSS 類。
- CSS 類：下一個按鈕
3. 準備博客模塊
包含博客模塊的開放行
漿紗
一旦箭頭就位，就可以開始調整博客模塊，從它所在的行開始。打開行設置並相應地修改大小設置：
- 寬度：100%
- 最大寬度：100%
能見度
然後，將行的溢出設置為隱藏。 這將有助於確保輪播不會導致任何水平滾動條出現在我們的頁面中。
- 水平溢出：隱藏
- 垂直溢出：隱藏
修改博客模塊
隱藏分頁
行設置到位後，打開博客模塊設置。 確保在元素設置中禁用分頁。
- 顯示分頁：否
佈局
然後，轉到設計選項卡並將佈局更改為全角。
- 佈局：全寬
覆蓋
我們也在添加一個疊加層。
- 特色圖像疊加：開啟
- 疊加圖標顏色：#ffffff
- 疊加背景顏色：rgba(1,0,66,0.33)
CSS 類
接下來，我們將向我們的博客添加一個 CSS 類，這將幫助我們在本教程後面啟用輪播。
- CSS 類：博客模塊
發布元 CSS
我們將通過在高級選項卡中為 post meta CSS 元素添加一些底部邊距，在 post meta 和摘錄之間生成一些空間。
margin-bottom: 50px;
4. 添加 Slick JS 功能
在博客模塊下方添加代碼模塊
一旦所有的 Divi 設置就位，就該添加流暢的 js 功能了！ 在博客模塊正下方（或頁面上的任何其他位置）添加代碼模塊。
添加 Slick JS 腳本標籤
然後，在腳本標籤中添加流暢的 js 庫（如下面的打印屏幕所示）。 您也可以在 Divi 主題設置中自由地將這些添加到您網站的頭部。
src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js
添加幻燈片 CSS 代碼
我們將使用一些 CSS 代碼在單獨的級別上對每篇博文稍作修改。 確保將代碼放置在樣式標籤之間，如下面的打印屏幕所示。
.slick-slide {
float: left;
margin: 2vw;
}
添加 JQuery 代碼
最後但並非最不重要的是，我們將添加一些 JQuery 代碼以允許高級可拖動滑動輪播採用其形式。 在下面的代碼中，我們還將為輪播功能添加我們設計的按鈕。 確保將代碼放在腳本標籤中，如下面的打印屏幕所示。
jQuery(function($){
var backButton = $('.back-button');
var nextButton = $('.next-button');
var postContainer = $('.blog-module .et_pb_ajax_pagination_container');
postContainer.addClass('slider');
postContainer.addClass('blog-carousel');
$('.blog-carousel').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
centerMode: true,
centerPadding: '10%',
swipe: true,
prevArrow: backButton,
nextArrow: nextButton,
responsive: [{
breakpoint: 1079, settings: {
slidesToShow: 1
}
}]
});
});
5. 保存頁面並退出 Visual Builder 以查看結果
在 Visual Builder 中，您不會看到結果。 因此，一旦完成，請保存您的頁面，退出 Visual Builder 並在您的網站上查看結果！
預覽
現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。
桌面
移動的
最後的想法
在這篇文章中，我們向您展示瞭如何將您的博客模塊設計提升到一個新的水平。 更具體地說，我們已經向您展示瞭如何使用免費的 slick js 庫將 Divi 的內置博客模塊變成一個高級的可拖動滑動輪播。 我們還免費提供了 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。
如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。