如何通過“Winning Spin”滾動效果提升您的 CTA

贏得獎品總是很有趣。 這就是公司通過贈送免費東西來在線營銷他們的產品和服務的原因。 它可以是您第一次訂購時的免費甜點優惠券，或訂閱電子郵件列表時的免費電子書。 但有時，即使是免費贈品也會在網絡上被忽略。 添加優雅的“獲勝旋轉”滾動效果可能是一種很好的方式，可以讓您的 CTA 獲得應有的關注，同時為訪問者創建引人入勝的互動。

在本教程中，我們將向您展示如何在 Divi 中使用“獲勝旋轉”滾動效果來提升您的 CTA。 當用戶向下滾動頁面時，中獎的獎品會旋轉進入視野，以獨特的方式顯示免費優惠。 您可以使用它來推廣您能想到的幾乎所有免費優惠。

讓我們開始吧。

搶先看

這是我們將在本教程中構建的設計的快速瀏覽。

免費下載佈局

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

下載文件

免費下載

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

下載

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

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

單擊導入按鈕。

在可移植性彈出窗口中，選擇導入選項卡並從您的計算機中選擇下載文件。

然後點擊導入按鈕。

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

讓我們進入教程，好嗎？

你需要什麼開始

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

1. 如果您還沒有安裝並激活 Divi 主題。
2. 在WordPress中新建一個頁面，在前端使用Divi Builder編輯頁面（visual builder）。
3. 選擇“選擇預製佈局”選項。
   
4. 選擇 Bakery Homepage Layout 並單擊以使用該佈局。
   

之後，您就可以開始在 Divi 中創建具有“獲勝旋轉”滾動效果的 CTA。

第 1 部分：創建“Winning Spin”滾動效果

首先，從 Divi Builder 中的底部設置菜單部署圖層視圖。 這將有助於更好地管理我們的設計元素。

添加節、行和列

預製佈局帶有多個內容部分。 我們將向希望 CTA 所在的頁面添加一個新部分。 在本教程中，直接在標有“服務”的部分下添加一個新的常規部分。

在該部分內，添加一個兩列的行。

行設置

在添加任何模塊之前，打開行設置，並更新以下內容：

• 天溝寬度：1
• 寬度：94%
• 填充：頂部 10 像素，底部 10 像素
• 邊框寬度：1px
• 邊框顏色：rgba(0,0,0,0.12)

在高級選項卡下，將以下自定義 CSS 添加到主元素：

display:flex;
align-items: center;

第 1 列邊框

完成行設置後，打開第 1 列的設置並添加右邊框，如下所示：

• 右邊框寬度：1px
• 右邊框顏色：rgba(0,0,0,0.12)

使用模糊模塊創建微調箭頭和文本

接下來，我們將創建微調箭頭和文本，作為指向獲勝選擇的箭頭。

添加模糊模塊

向左列添加一個新的模糊模塊。

模糊內容

然後使用新標題和圖標更新簡介內容。

• 標題：你贏了
• 圖標：右箭頭（見截圖）

模糊設計

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

• 圖標顏色：#a06d51
• 圖像/圖標放置：左
• 圖標字體大小：80px（桌面）、50px（平板電腦）、40px（手機）
• 標題字體：Patua One
• 標題字體粗細：粗體
• 標題文字大小：40 像素（桌面）、25 像素（平板電腦）、20 像素（手機）
• 標題字母間距：1px
• 標題行高度：2em

模糊自定義 CSS

接下來，通過將以下自定義 CSS 添加到主元素，切換模糊內容的順序，使箭頭在右側而不是左側：

direction: rtl !important;

然後通過將這個自定義 CSS 添加到 Blurb Title 中，去掉 Blurb 標題下的默認填充：

padding-bottom: 0px

使用多個 Blurb 創建獎品選擇

在右欄中，我們將添加我們的獎品選擇，這些獎品將旋轉並最終確定獲勝者。 為此，我們將創建並放置 4 個帶有標題和圖像的模糊模塊。

創建模糊 1

要在第 2 列中創建我們的第一個簡介，請複制第 1 列的簡介並將其拖到第 2 列中。

打開第 2 列中重複模糊的設置，取出主元素的自定義 CSS：

這將使我們的圖標回到左側。

更新標題和圖片

然後更新標題和圖片如下：

• 標題：免費餅乾！
• 圖片：上傳圖片（大約 100 像素 x 100 像素）

模糊 1 設計

然後更新設計設置如下：

• 圖片寬度：80px（桌面）、50px（平板）、40px（手機）
• 內容寬度：92%
• 寬度：100%

變換原點

我們將使用變換旋轉選項旋轉宣傳語，因此選擇一個對宣傳語應該旋轉的方式有意義的變換原點很重要。 我們不會輪換第一個，但這將作為一個很好的模板。

更新模糊的變換原點，如下所示：

• 變換原點：右中

您也應該取出圖像/圖標動畫。

絕對位置

在高級選項卡下，給出模糊和絕對位置如下：

• 位置：絕對
• 位置：右中

創建模糊 2

要創建第二個簡介，請複制簡介 1。

旋轉模糊 2

然後添加一個變換旋轉如下：

• 變換旋轉 Z 軸：25deg

您將看到簡介現在已旋轉到行的查看區域之外。

創建和旋轉 Blurb 3

要創建第三個模糊，請複制模糊 2。然後按如下方式更新變換旋轉：

• 變換旋轉 Z 軸：50 度

創建和旋轉 Blurb 4

要創建第四個模糊，請複制模糊 3。然後按如下方式更新變換旋轉：

• 變換旋轉 Z 軸：75 度

更新 Blurb 標題和圖像

完成添加 4 個簡介後，返回並根據需要更新每個簡介的標題和圖像。

列滾動旋轉

為了添加滾動效果，我們將旋轉包含 4 個旋轉模糊的整個列。

打開第 2 列的設置並更新以下內容：

• 變換原點：右中

在高級選項卡下，打開旋轉滾動效果選項卡並更新以下內容：

• 啟用旋轉：是
• 起始輪換：-75%（在 15% 時）

然後將運動效果觸發器更新為“元素頂部”。

使用隱藏溢出更新行

現在返回行設置並通過更新以下行設置來隱藏內容的溢出：

• 水平溢出：隱藏
• 垂直溢出：隱藏

第 2 部分：創建獎品 CTA

對於本教程的最後一部分，我們將創建一個 CTA 來顯示有關獎品和按鈕的信息。 並且，我們將添加滾動效果以在“獲勝旋轉”動畫完成後顯示 CTA。 這將模仿一種驚喜類型的效果。

添加行

首先，在我們剛剛創建的行的正下方添加一個單列行。

添加文本模塊

要添加 CTA 的內容，我們將從頁面上的預製佈局中復制一個文本模塊。 找到並複制標題為“Shop Online”的文本模塊。

然後將其粘貼到您剛剛創建的行中。

文字設計

更新文字設計如下：

• 文字字體：PT Sans
• 文字字體粗細：粗體
• 文字文字大小：16px
• 文本行高：2em
• 文本對齊：居中

添加 CTA 按鈕

接下來找到預製佈局頂部的按鈕並複制它。

然後直接粘貼到文本模塊下。

行滾動效果

要在“獲勝旋轉”選擇獎品後顯示 CTA，請打開行設置並更新以下滾動效果：

在淡入淡出選項卡下...

• 啟用淡入淡出：是
• 起始不透明度：0%（50%）
• 中等不透明度：100%（55%）

最後結果

最後的想法

希望這種“獲勝旋轉”滾動效果為您提供了一些關於如何在您自己的網站上設計更具吸引力的 CTA 的新想法。 使用 Divi 的變換選項和滾動效果來構建它需要一些技巧。 但是一旦完成，佈局真的很容易用您自己的獨特內容進行更新。

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

乾杯!