WP站点

2663

原始创世纪教程和5000多个保证代码

片段

内联滑块的2列小部件&创世纪电子邮件订阅表格

下面的屏幕截图显示了安装后代码的确切生成。

如果您想在电子邮件订阅选项框旁边放置一个滑块，那’正是本教程的全部内容。只要你’重新使用在创世纪上运行的子主题。

滑块选择形式

滑块图像： 礼貌优雅的主题

该代码内联产生2个小部件。

  1. 左列窗口小部件的宽度为66％，并装有一个滑块。
  2. 右列小部件的宽度为33％，并填充有Genesis eNews小部件。

代码安装

  1. 从Gist标记的functions.php复制PHP代码，然后使用文本编辑器将其粘贴在子主题functions.php文件的末尾。
  2. 在Gist中标记为style.css的CSS在您的媒体查询之前接近样式表的末尾。

替代方法

这里’编写此解决方案的另一种方法：

注册以获得完全访问权限

小部件

该代码生成2个小部件。

  1. 左列窗口小部件填充了超快速加载 自滑滑条.
  2. 右列窗口小部件填充了 创世纪eNews插件小部件.

用图像替换背景色

.slider-email-box {
    background-image: url(images/image.png);
}

和这里’s the result:

图片背景

滑块配置

滑块设置

您还可以使用本教程将图像或视频放置在电子邮件订阅表单旁边，并在文本小部件上使用任何Aweber，MailChimp或任何其他表单代码。

代码可以在所有主题中使用吗？

我还在Enterprise Pro主题上测试了完全相同的代码，这是在不进行CSS调整的情况下得到的结果。

用于其他主题

显然，您可以使用CSS删除2行，并添加一些padding-bottom。

这表明您需要根据使用此代码的主题来做一些工作。

相关教程

读者互动

评论

  1. 请问这将在外展临工作，我是否需要获得其他插件，我想是的！我已经将代码添加到我的网站了。我确实看到了新的小部件区域！！！

    • 我还在Enterprise Pro主题上测试了完全相同的代码，这是在不进行CSS调整的情况下得到的结果。

      用于其他主题

      显然，您可以使用CSS删除2行，并添加一些padding / margin-bottom。

  3. 我也得到一个“1”当我输入文本小部件时出现。另外，如何在两个图像之间获得从左到右笔直穿过的背景图像？

    • 感谢您让我知道1的出现。

      修复此错误后，我将立即更新代码。

      那里’s一个类，涵盖了由PHP代码生成的整个包装：

      您r CSS would look something like this:

      .slider-email-box {
    background-image: url(images/your-image.png);
    color: #FFFFFF;
    height: 350px;
}

      您’将需要修改颜色，图像和高度的值。

  4. 嗨，布拉德，

    非常感谢您非常有用的教程。我已经多次提到他们。

    在这种情况下，我没有使用滑块，而是在“左列”中有一个文本小部件。一种“1”出现在两个小部件之间。如果我从“左列”中删除文本小部件，“1”消失了。有任何想法吗？

    谢谢！

  5. 粉色吸引了我的布拉德，然后我停下来阅读代码。

    如果代码是诗歌，那么您就是一位出色的词匠。

    感谢您提供另一个编码宝。

发表评论