如何自定義您的 Divi 滑塊以更改每張幻燈片的特定元素

我們都知道滑塊非常適合最大化您網站的首屏部分。 他們都是偉大的！ 用戶受到多個 CTA 和重要功能的歡迎，這些功能無需向下滾動頁面即可滑入視圖。 但是，有時從幻燈片到幻燈片的設計和內容變化過多會分散訪問者的注意力或使訪問者不知所措。 這就是為什麼在本教程中，我將向您展示如何自定義您的 Divi 滑塊以僅更改每個幻燈片過渡的特定元素。 這使您可以保持滑塊的核心內容和設計組件一致，而您只更改每張幻燈片的特定元素（如單個單詞或按鈕）。 訪問者將能夠輕鬆處理更改並清楚地了解您的號召性用語。

讓我們潛入吧！

Divi 滑塊先睹為快

聽聽我們將在今天的教程中構建的 Divi 滑塊的設計和功能的先睹為快。

請注意這如何僅更改每張幻燈片正文中的一個單詞。

請注意在此示例中，正文文字以及按鈕和句點的顏色如何隨每張幻燈片而變化。

基本概念解釋

默認情況下，Divi 滑塊將在每次過渡到新幻燈片時為描述文本設置動畫，該幻燈片淡入並稍微向上移動內容到位。

但是，通過一行簡單的自定義 CSS，我們可以禁用文本的向上動畫。 而且，如果我們複製幻燈片，去掉背景，只更改一個元素（如正文中的一個詞），您將看到每張幻燈片只更改一個詞。

您可以使用此概念僅更改特定的特定文本、按鈕或顏色，同時保持其他設計元素與每張幻燈片一起使用。

入門

訂閱我們的 YouTube 頻道

對於本教程，您只需要安裝並激活 Divi 主題即可。 我們將使用前端的 Divi 構建器從頭開始構建我們的 Divi 滑塊。

首先，創建一個新頁面並為您​​的頁面命名。 然後單擊以使用 Divi Builder 並選擇“從頭開始構建”選項。 然後單擊按鈕“在前端構建”。

現在您已準備好開始設計。

設置 Divi 滑塊內容

對於本示例，我將使用全角滑塊模塊，但本教程也適用於常規滑塊模塊。 讓我們首先向您的頁面添加一個帶有全角滑塊模塊的全角部分。

為了讓我們可以看到滑塊的內容變化，讓我們先臨時為全角部分添加深色背景色。 打開部分設置並為其設置黑色背景色 (#222222)。

您將無法看到這一點，因為默認滑塊背景顏色覆蓋了它。 我們將在後面的教程中回過頭來完成部分背景設計。

現在讓我們進入 Fullwidth Slider 設置並刪除其中一張默認幻燈片，只留下一張。 然後打開幻燈片設置。

更新幻燈片設置如下：

標題：“為您提供更多……的網站”
按鈕文字：“開始”

在內容下添加以下 html：

Business<span style="color: #EE164D;">.</span>

（這會為單詞後面的點（或句點）添加自定義顏色。）

背景顏色：rgba(255,255,255,0)

保存設置。

現在將幻燈片複製兩次，以便您總共擁有三張幻燈片。

打開第二張幻燈片設置。 在 Content 下，僅將“Business”一詞替換為“Money”，保持 html、標題和按鈕文本的其餘部分相同。 我們只想在每張幻燈片上更改這個詞。 然後保存設置。

然後打開第三張幻燈片設置。 在“內容”下，將“業務”一詞替換為“成功”並保存設置。

全部完成！ 這會處理我們的滑塊內容。

優化描述文本動畫

在我們的滑塊內容到位後，我們需要禁用我們的動畫，以便我們的文本不會隨著每張幻燈片跳動。 為此，請轉到全角滑塊設置並在幻燈片說明下添加以下自定義 CSS：

animation-name: none;

對於這個例子，讓我們的滑塊動畫自動並提高動畫速度是有意義的，這樣用戶可以更快地看到每張幻燈片中的單詞變化。 為此，請轉到設計選項卡並更新以下內容：

自動動畫：開
自動動畫速度（以毫秒為單位）：3000

現在檢查到目前為止的結果。 您應該只看到每個滑塊內容中的一個單詞發生變化，而沒有向上動畫。

設計滑塊

隨著我們的內容和功能到位，我們可以開始用漂亮優雅的設計來設計我們的滑塊。

打開全角滑塊設置並更新以下內容：

文字方向：左
標題字體：Lato
標題字體粗細：輕
標題文字大小：32px
標題文字陰影：見截圖
Title Text Shadow Blur Strength: 0em（這個基本上去掉了默認的文字陰影）

正文字體：Lato
正文大小：5vw（桌面）、50px（平板電腦）、40px（智能手機）
車身線高：1.6em
正文文本陰影：見截圖
Body Text Shadow Blur Strength: 0em（這個基本上去掉了默認的文本陰影）

按鈕文字大小：16px
按鈕背景顏色：#ee164d
按鈕邊框寬度：8px
按鈕邊框顏色：#ee164d
按鈕邊框半徑：0px
按鈕字母間距：1px
按鈕字體：Lato
按鈕對齊：右

寬度：70%（桌面）、100%（平板電腦）、100%（智能手機）
模塊對齊：居中

自定義填充（桌面）：19vw 頂部，8vw 底部
自定義填充（平板電腦）：19vw 頂部，4vw 底部。 左 0px，右 0px
自定義填充（智能手機）：30vw 頂部，4vw 底部，0px 左，0px 右

盒子陰影：見截圖
框陰影水平位置：-190px
框陰影垂直位置：60px
框陰影顏色：rgba(0,16,17,0.7)

最後一步，讓我們禁用我們的滑塊元素，這樣我們就看不到滑塊箭頭或控件。

這照顧了我們的 Divi 滑塊設計！

自定義剖面樣式

其餘的設計將添加到我們的部分，包括我們的背景圖像，它將作為我們所有幻燈片的靜態背景。 將背景圖像添加到該部分更適合這種用法，因為您不會看到從一個圖像到另一個圖像的任何輕微過渡，就像將背景圖像添加到滑塊模塊一樣。

打開部分設置並更新以下內容：

背景圖片：[插入大約 1920 像素 x 800 像素的圖片]
背景漸變左顏色：rgba(0,16,17,0.45)
背景漸變正確顏色：rgba(0,16,17,0.92)
起始位置：34%
結束位置：0%
將漸變放在背景圖像上方：是

接下來，為您的部分提供右邊框，如下所示：

右邊框寬度：5vw
右邊框顏色：#001011

最後，給你一個方框陰影部分，以幫助平衡設計的框架。

盒子陰影：見截圖
框陰影水平位置：-200px
框陰影垂直位置：-150px
框陰影顏色：rgba(0,16,17,0.74)

就是這樣！

Divi 滑塊的最終設計

這是自定義 Divi 滑塊的最終設計。

這是幻燈片的功能。 注意每張幻燈片中只有一個詞是如何變化的。

移動端最終設計

藥片

手機

嘗試更改其他元素

您可以嘗試在每張幻燈片中更改其他元素，以獲得更具創意的設計和功能。 例如，您可以為每張幻燈片的每個幻燈片按鈕指定不同的顏色，以及將句點的顏色與每張幻燈片上的新按鈕顏色相匹配。

這就是它的樣子。

您甚至可以探索更改幻燈片框陰影顏色或其他一些設計元素。 有無數種可能！

最後的想法

這種定制的 Divi 滑塊設計和功能為那些傳統滑塊提供了一個很好的替代方案。 設計的核心不會改變，這進一步突出了 CTA 的重要方面，它會隨著每張幻燈片而改變。 似乎這可能是您可以測試的東西，看看它是否可以提高轉化率！

在下面的評論中告訴我你的想法。

乾杯!