首先看一下最终效果：
想要在主题中实现上面的效果，就需要一点点的CSS知识。不过不要怕，我已经帮你写好了，只需要按照我下面的步骤一步步的做，你也可以拥有这种跟别人不同的效果，让你的首页看上去更个性。而且这种效果你还可以应用到页面设计的其他地方，相信悟性高的同学们已经知道了。
注意：下面的步骤是按照Enfold主题作为示范，其他的主题原理是相同的。
准备工作：
需要两个插件，一个是Option Forms (免费，用来添加你的邮件订阅表单，如上图)， 另外一个是Custom CSS（这个是@颜sir推荐给我的，可以自定义CSS）
Step1: 设置Option Forms插件，安装好之后在左边的主面板可以找到选项，点击进入，设置如下：
选择自己用的订阅服务，我用的是icontact, 因为服务不同，具体设置也不同，这里就不赘述。
Form Placement 这里要注意一下，设置为不自动显示在post 和 page上，因为我们后面使用shortcode的方法让他显示在color section里，如下图：
样式可以自定义，按照自己的喜好设置完成后就是下图这个样子：
Step2: 编辑首页，在最下方添加第一个Color Section，选择高度自定义为200px, no padding, 背景颜色设置为红色：#8e331c，其他默认。
在这个color section里再添加一个text block, 点击进入编辑页面，把short code（[optinform]）粘贴进去并保存，完成后如下图：
Step3: 在刚添加的color section下面再添加第二个color section, 这里的高度自定义为：150px, 这里的背景颜色设置为与你的footer的背景颜色相同，设置完成后如下图：
以上三个步骤设置完成，update之后页面 显示如下：
同学们注意到了现在红色区域还没有重叠到下面的灰色区域，并且每个color section之间以及第二个color section与footer之间都还有1px的空隙，不要着急，第四部的代码设置，就是见证奇迹的时刻！
Step4: 自定义代码，安装好插件后，可以在左侧主面板找到custom css的设置，点击进入后，如下图：
接下来我们就可以在把代码写进这个输入框内，实现我们想要效果了。
代码如下：
div#av_section_数字{bottom: -90px; padding: 16px 32px 8px; max-width: 720px!important; margin-left: auto; margin-right: auto; float: none; position: relative;}
div#footer{border-top-width: 0px;}
非常重要：
在代码的开头”div#av_section_数字“， 这里的数字我们要用1,2,3,4....来替代。具体用数字几呢？判断方法很简单，就是在你的首页点击edit，然后从上到下数，看我们按照上述步骤第一个添加的color section(包含short code的那个)是排在第几位。比如在你进行本教程之前，你已经添加过2个color section，那么我们step2中添加的color section的顺序就是3，相应的你开头代码就是：“div#av_section_3”
替换完之后，我们就把代码直接粘贴进去，并保存就可以了。完成后如下图：
好了，至此你就完成了化平庸为神奇的过程，赶快update并刷新一下看看吧！
添加表情
分享至微信
