如何創建像優雅主題這樣的“擴展”號召性用語

已發表: 2017-05-14

Elegant Themes 最近改變了他們網站的設計，加入了一些值得模仿的功能。 在之前的帖子中，我寫瞭如何實現優雅主題博客設計和復制主菜單。 但是，對於這篇文章，我將向您展示如何復制優雅主題號召性用語 (CTA)。 此 CTA 位於 Elegant Themes 網站頁腳附近的底部。 這個 CTA 的特別之處在於添加的功能，一旦用戶滾動到元素就會觸發動畫。

今天，我將向您展示如何復制此 CTA 的樣式以及動畫功能。 這是通過使用帶有一些自定義 CSS 和幾行 JavaScript 的 Divi 代碼模塊來完成的。 但是，您可以輕鬆地在任何 Divi 模塊上擴展相同的動畫功能。

讓我們開始吧。

使用 Divi 實現設計

使用代碼模塊構建號召性用語

使用 Visual Builder，添加一個帶有全角行列的新常規部分。

接下來將代碼模塊添加到您的行中。

在 General Code Settings 下，將以下 html 添加到 content 部分。 

<div class="cta-info">

<h3>401,632 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web</h3>

<p>We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!</p>

<a href="ENTER URL HERE" id="sign">Sign Up Today</a>

</div>

此 html 將用作您的 CTA 的內容。 您會注意到主要的 CTA 標題包含在 h3 標籤中。 副標題包含在標準的 p 標籤中。 並且鏈接（即將成為按鈕）有一個名為“sign”的 CSS ID。

還有一個帶有“cta-info”類的 div 被包裹在內容周圍。 這對於以後的樣式設計很重要。

保存更改

現在我們需要向您的新部分添加一個新的 CSS ID。 單擊分區設置圖標以打開分區設置。

在部分設置的 CSS 選項卡下，添加 CSS ID“cta-section”並保存更改。

接下來，我們需要向您的行添加一個 CSS ID。 單擊行設置圖標。

在 CSS 選項卡下，使用名為“cta-row”的新 CSS ID 更新行設置。

保存更改

這就是 CTA 佈局所需的全部內容。 有了我們的內容和 CSS ID，我們就可以添加一些自定義 CSS。

添加自定義 CSS

轉到 Divi → Theme Customizer → Additional CSS（或者您可以直接更新子主題的 style.css 文件）。 在代碼框中，添加以下 CSS： 

/* Animated Call To Action */

/*** style CTA section and row when waypoint is not triggered ***/
#cta-section {
    padding: 0 80px;
    transition: all .8s ease;
    -moz-transition: all .8s ease;
    -webkit-transition: all .8s ease;
}
#cta-row {
    margin: 80px auto 0 auto;
    padding: 80px 0;
    max-width: 100%;
    background-color: #6c17dc;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    box-shadow: 0px 10px 50px #939fa9;
    transition: all .8s ease;
    -moz-transition: all .8s ease;
    -webkit-transition: all .8s ease;

}
/*** Style CTA section and row once waypoint toggles animate-cta class ***/
#cta-section.animate-cta {
    padding: 46px 0 66px 0;
    overflow: hidden;
}
.animate-cta #cta-row {
    margin: 0 auto 0 auto;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    background-color: #4843d2;
    width: inherit;
}
/*** style button ***/

#sign {
    display: inline-block;
    width: 246px;   
    color: #fff;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;
    background-color: #f92c8b;
    padding: 20px 40px;
    margin-top: 30px;
    border-radius: 60px;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    transition: all .8s ease;
    -webkit-transition: all .8s ease;
    -webkit-transition: all .8s ease;
    box-shadow: 0px 5px 20px #231f92;
    -moz-box-shadow: 0px 5px 20px #231f92;
    -webkit-box-shadow: 0px 10px 50px #231f92;
}
#sign:hover {
    background-color: #2cc2e6;
    box-shadow: 0px 20px 80px #1b1867;
    -moz-box-shadow: 0px 20px 80px #1b1867;
    -webkit-box-shadow: 0px 20px 80px #1b1867;
}

/*** style content within the code module ***/

.cta-info{
    color: #fff;
    text-align: center;
    margin: 0 auto !important;
    max-width: 1080px;
    padding: 50px;
}
.cta-info h3 {
    color: #fff;
    font-size: 35px;
    line-height: 1.3em;
}

現在您的 CTA 開始發揮作用了。 我們剩下要做的就是添加一個簡短的腳本，以便在滾動時 CTA 在瀏覽器視口中可見時為 CTA 提供引人注目的動畫效果。

添加航點腳本以在滾動到元素時為 CTA 設置動畫

當您滾動到頁面上的元素時觸發功能的最簡單方法之一是使用名為 Waypoints 的 JavaScript 庫。 由於 Divi 已經安裝了 Waypoints（是的！），我們需要做的就是包含一個利用該庫的腳本。

轉到 Divi → 主題選項 → 集成並將以下腳本粘貼到“將代碼添加到博客標題”部分中。

<script>
jQuery(document).ready(function(){
	jQuery('#cta-section').waypoint(function() {
		jQuery('#cta-section').toggleClass('animate-cta');
	}, {offset: '80%'});
});
</script>

該腳本添加了一個函數，當您滾動到 CTA 部分（CSS ID 為“cta-section”）時，該函數將切換一個名為“animate-cta”的類。 請注意將偏移指定為 80% 的代碼部分。 這意味著當 CTA 部分的頂部距離瀏覽器窗口頂部 80% 時，將觸發該功能。 如果您想在 CTA 到達頁面中間時延遲函數觸發，您可以將偏移值更改為 50% 之類的值。 但是，如果您的 CTA 將位於頁面的最底部，您應該堅持使用接近 80% – 90% 的值。 這是因為您的 CTA 在滾動時可能永遠不會到達瀏覽器窗口的中間，因此不會被觸發。

就是這樣！

現在讓我們來看看完成的項目。

將 CTA 功能添加到其他模塊

如果您想將此 CTA 功能添加到 Divi Builder 中的其他模塊，這很容易做到。 以下是幫助您入門的步驟：

  1. 創建具有全角（單列）行的標準部分。
  2. 在部分設置中，在 CSS 下，添加 CSS ID“cta-section”。
  3. 在行設置中，在 CSS 下，添加 CSS ID“cta-row”並添加列 CSS 類“cta-column”。
  4. 插入以下自定義 CSS：
    5.  .cta-column.et_pb_column:last-child {
 margin: 0 auto;
 margin-right: auto !important;
 max-width: 1080px;
 float: none;
}
  5. 將您想要的任何模塊添加到該行（即調用操作模塊）並相應地設置樣式。 您可能希望為模塊添加透明背景，以便它不會與 CTA 的部分背景顏色重疊。

重要提示：每頁不能使用此功能添加多個 CTA。

最後的想法

複製優雅主題的 CTA 是一個有用的功能，可以添加到任何未來的項目中。 它吸引了讀者的注意力，而不會過於霸道。 使用代碼模塊可以讓開發人員更靈活地在 CTA 中添加自定義 html。 而且，航點動畫功能不限於代碼模塊。 您還可以將必要的 CSS ID 添加到任何部分、行和列，以使用 Divi Builder 使用任何模塊創建 CTA。

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

乾杯!