如何创建像优雅主题这样的“扩展”号召性用语

已发表: 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。

我期待在下面的评论中收到您的来信。

干杯!