如何在 Divi 中為標題創建緊湊的推薦滑塊

已發表: 2021-07-16

向您的網站添加推薦是提高您的企業（或品牌）信譽並與訪問者建立信任的有效方法。 推薦滑塊是一種方便的工具，用於在一個地方展示所有推薦。 考慮到這一點，在您的標題中添加一個緊湊的推薦滑塊是有意義的，因此這些推薦是用戶訪問您的網站時首先看到的內容之一。

在本教程中，我們將向您展示如何創建一個緊湊的推薦滑塊，用於在您的網站標題中展示簡短的推薦。 為此，我們將以一種有趣且獨特的方式修改 Divi 的滑塊模塊。

讓我們開始吧！

搶先看

這是我們將使用 Divi 滑塊模塊構建的緊湊型推薦滑塊。

這是添加到全局標題的相同推薦滑塊。

這是它在移動設備上的樣子。

免費下載佈局和模板

要了解本教程中的設計，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件
免費下載

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

將佈局導入到 Divi 庫

要將部分佈局導入您的 Divi 庫，請導航到 Divi 庫。

單擊導入按鈕。

在可移植性彈出窗口中，選擇導入選項卡並從您的計算機中選擇下載文件。 它將是名為“divi-short-testimonial-slider-module-layout.json”的 JSON 文件。

然後點擊導入按鈕。

divi 緊湊型推薦滑塊

完成後，分區佈局將在 Divi Builder 中可用。

將標題模板導入 Divi Theme Builder

如果要導入帶有添加到標題的緊湊推薦滑塊的標題模板，則需要導航 Divi > Theme Builder。

然後使用頁面右上角的可移植性圖標導入 JSON 文件。 它將是名為“divi-short-testimonial-slider-header-template.json”的文件。

divi 緊湊型推薦滑塊

讓我們進入教程，好嗎？

你需要什麼開始

擴展角標籤

首先，您需要執行以下操作：

  1. 如果您還沒有安裝並激活 Divi 主題。
  2. 在WordPress中新建一個頁面，在前端使用Divi Builder編輯頁面（visual builder）。
  3. 選擇“從頭開始構建”選項。

之後，您將有一個空白畫布開始在 Divi 中進行設計。

如何在 Divi 中創建一個緊湊的推薦滑塊

添加新的行和滑塊模塊

首先，向該部分添加一列行。

divi 緊湊型推薦滑塊

然後向該行添加一個滑塊模塊。

divi 緊湊型推薦滑塊

編輯幻燈片

在滑塊設置下，刪除內容選項卡下的第二張默認幻燈片，然後單擊 編輯剩餘幻燈片的設置。

divi 緊湊型推薦滑塊

幻燈片內容

在幻燈片設置的內容選項卡下，更新以下內容：

  • 標題：“Donec sollicitudin Molestiemalesuada。 Vivamus suscipit totortor eget。”
  • 按鈕文本：閱讀全部
  • 身體：——塔蒂亞娜·蓋格曼

divi 緊湊型推薦滑塊

完成後，保存幻燈片設置。

更新滑塊設置

複製滑動和隱藏控件

用內容更新第一張幻燈片後，複製該幻燈片以創建一個或多個附加幻燈片。

然後，在 Elements 選項組下，通過更新以下內容來隱藏滑塊控件：

  • 顯示控制：否

divi 緊湊型推薦滑塊

更新所有幻燈片的背景

接下來，我們將添加一個將用於所有幻燈片的背景。 此背景將包括背景漸變和背景圖像樣式（用於何時/如果您將作者背景圖像添加到單個幻燈片）。

要添加背景，請更新以下內容：

  • 背景漸變左顏色：#000000
  • 背景漸變右顏色：#000000
  • 背景圖片尺寸：適合
  • 背景圖像位置：左中
  • 背景圖像混合：亮度

divi 緊湊型推薦滑塊

需要注意的是，我們沒有在此處添加背景圖像。 我們只為單個幻燈片將使用的圖像添加大小、位置和混合模式。 在此處添加它更容易，而不必分別向每張幻燈片添加相同的樣式。 稍後，我們將向您展示如何將圖像添加到各個幻燈片。

滑塊設計設置

在設計選項卡下，更新以下內容：

覆蓋
  • 使用背景疊加：是
  • 背景疊加顏色：rgba(0,0,0,0.7)

divi 緊湊型推薦滑塊

標題文字
  • 標題標題級別：H4
  • 標題字體： Josefin Sans
  • 標題字體粗細：中等
  • 標題文本對齊方式：左
  • 標題文字大小：16px（桌面和平板電腦），14px（手機）
  • 標題行高度：1.5em

divi 緊湊型推薦滑塊

文章主體
  • 正文字體： Josefin Sans
  • 正文對齊方式：左
  • 正文顏色：#aaaaaa
  • 正文字母間距：0.05em

divi 緊湊型推薦滑塊

按鈕
  • 為按鈕使用自定義樣式：是
  • 按鈕文字大小：1em
  • 按鈕文本顏色：默認（桌面），#000（懸停）
  • 按鈕背景顏色（桌面）：rgba(255,255,255,0.19)
  • 按鈕背景顏色（懸停）：#ffffff
  • 按鈕邊框寬度：0px
  • 按鈕字母間距：0.05em
  • 按鈕字體： Josefin Sans
  • 按鈕邊距：0px 頂部，0px 底部
  • 按鈕填充：頂部 0px，底部 0px，左 0.6em，右 0.6em

divi 緊湊型推薦滑塊

填充和自動動畫

然後更新滑塊的間距，使其緊湊，並為滑塊設置所需的自動動畫速度。

  • 邊距：0px 頂部，0px 底部
  • 填充：頂部 1em，底部 1em，左 5%，右 5%
  • 自動動畫：開
  • 自動動畫速度：3500

divi 緊湊型推薦滑塊

自定義 CSS

在高級選項卡下，添加以下自定義 CSS 以更新每個滑塊元素（標題、按鈕和箭頭）的樣式

幻燈片標題

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

這將確保幻燈片標題不會在較小的屏幕上創建換行符。

滑動按鈕

position:absolute;
bottom: 1em;
right: 6%;

這為按鈕提供了一個絕對位置，以便它很好地位於標題下方和幻燈片的右側，使滑塊更加緊湊。

滑動箭頭

font-size: 30px;
margin-top: -15px;

這只是使滑塊導航箭頭更小以適應緊湊的滑塊尺寸。

divi 緊湊型推薦滑塊

提示：為列添加相同的背景顏色以獲得更平滑的幻燈片過渡

目前，每張幻燈片的動畫都會隨幻燈片內容一起設置背景顏色的動畫，為了防止背景顯示此動畫，我們可以為列提供相同的背景顏色，以便過渡更平滑。

為此，請打開滑塊父列的設置並添加以下背景顏色：

  • 背景顏色：#000000

divi 緊湊型推薦滑塊

將作者背景圖像添加到幻燈片

如果要為幻燈片添加作者背景圖像，可以通過向每張幻燈片添加背景圖像來實現。

將背景圖像添加到幻燈片後，背景圖像將繼承滑塊（而非幻燈片）設置下已有的樣式。

divi 緊湊型推薦滑塊

結果

查看最終結果。

將緊湊的推薦滑塊添加到標題模板

將模塊保存到 Divi 庫

在我們將緊湊的推薦滑塊添加到全局標題之前，我們必須首先將模塊保存到 Divi 庫。 您可以通過將鼠標懸停在滑塊模塊上並單擊“保存到庫”圖標來執行此操作。 然後為佈局命名並單擊“保存到庫”按鈕。

divi 緊湊型推薦滑塊

將緊湊的推薦模塊佈局添加到標題模板

編輯自定義標題

將新的推薦滑塊模塊保存到庫中後，我們就可以將其添加到自定義標題中。

導航到 Divi > Theme Builder，然後單擊以編輯模板的自定義標題。

divi 緊湊型推薦滑塊

從庫中插入保存的推薦滑塊模塊佈局

在標題佈局編輯器中，單擊以在您希望顯示的位置添加緊湊的推薦滑塊模塊。

在“插入模塊”模式中，選擇“從庫中添加”選項卡。 找到您之前保存到庫中的緊湊推薦滑塊並選擇它。

divi 緊湊型推薦滑塊

加載後，保存更改。

最後結果

這是添加到全局標題的相同推薦滑塊。

這是沒有作者背景圖像的相同推薦滑塊。

這是它在移動設備上的樣子。

最後的想法

緊湊的推薦滑塊可以成為任何希望在其網站最顯眼位置提高其服務可信度的網站標題的新補充。 您還可以使用它來將訪問者重定向到推薦頁面或銷售頁面以增加轉化率。 希望它對你有用。

我期待在評論中收到您的來信。

乾杯!