創建一個“入門”號召性用語，顯示懸停時的多個選項

已發表: 2019-06-26

許多公司會在主頁上包含“入門”CTA。它通常是頁面上的主要號召性用語，因為它將引導用戶完成某種預期的過程。它可以是一個簡單的“立即開始”按鈕，鏈接到另一個頁面。或者它可以是頁面的一部分，其中包括“入門”說明和/或用戶可以採取的不同選項來啟動公司預期的流程。

在本教程中，我們將向您展示如何創建一個“入門”CTA，它將在懸停時顯示多個“入門”選項。使用 Divi，我們將設計一個顯示為大按鈕的部分。然後，當鼠標懸停在按鈕上時，選項會像垂直滑塊顯示下一張幻燈片一樣出現。

設計優雅，功能在很多方面都很有用。

讓我們開始吧。

搶先看

這是我們將在本教程中構建的“入門”CTA 的快速瀏覽。

在 divi 中開始 cta

免費下載“入門”CTA Divi 佈局

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

下載文件

免費下載

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

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

要將佈局導入您的頁面，只需提取 zip 文件並將 json 文件拖到 Divi Builder 中。

讓我們進入教程好嗎？

你需要什麼開始

首先，您需要具備以下條件：

已安裝並激活 Divi 主題
在前端從頭開始構建的新頁面（可視化構建器）
用於模擬內容的圖像

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

在 Divi 中實現“從這裡開始”CTA 設計

此設計背後的基本思想是將鼠標懸停在該部分上時向上移動該部分的內容。為此，我們需要確保我們的部分具有固定的高度並隱藏溢出。這將在懸停狀態之前隱藏 CTA 選項。然後我們可以使用邊距來定位我們的模塊和頂部填充以在懸停時將內容移動到視圖中。

讓我們從部分開始。

創建部分

首先，創建一個帶有一列行的常規部分。然後在我們添加任何模塊之前，讓我們更新部分設置。

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

背景顏色：#2b87da
寬度：90%
最大寬度：1100px
截面對齊：居中
邊距：6vw 頂部，6vw 底部（只是給它一點呼吸的空間）
填充（桌面）：頂部 300 像素，底部 0 像素
填充（平板電腦）：頂部 0px，底部 15%

在 divi 中開始 cta

然後添加一些圓角。每當我們為該部分提供最大高度時，這將創建我們的按鈕式設計。

圓角：140px（桌面）、20px（懸停）、10px（平板）

然後給它一個盒子陰影（見截圖）。

在 divi 中開始 cta

此時我們不會添加最終設計所需的所有設置。我們需要回來給它一個固定的高度和懸停效果。但是現在讓我們添加內容。

創建第一行內容

打開您創建的一列行的設置並更新以下內容：

寬度：100%
填充：頂部 0px，底部 0px，左 5%，右 5%

在 divi 中開始 cta

在一列行內，添加一個文本模塊。

在 divi 中開始 cta

然後將以下 h2 標題添加到正文內容中。

<h2>Get Started Here...</h2>

在 divi 中開始 cta

更新設計設置如下：

標題 2 字體：Nunito
標題 2 字體粗細：粗體
標題 2 文本顏色：#ffffff
標題 2 文字大小：78px（桌面和平板電腦），46px（手機）
最大寬度：500px
高度：300px（桌面），自動（平板電腦和手機）
邊距：-300px 頂部（桌面），0px 頂部（平板電腦和手機）
填充物：7% 頂部