大家好，这里是关于[使用Elementor添加小工具栏（常规主题的侧边栏小工具之类）]，[Crocoblock JetPlugins – 很全面的Elementor附加组件]问题的解答，希望对您有所帮助。如果你还想了解更多这方面的信息，请关注本站其他相关内容，共同学习吧！

使用Elementor添加小工具栏（常规主题的侧边栏小工具之类）

教程大全Elementor,侧边栏,小工具

教程总目录：菜鸟建站进阶篇–使用Elementor设计wordpress网站页面

hello主题默认没有侧边栏，其他主题大部分都带。所以说这个教程基本都是给使用hello主题使用的。

关于侧边栏的更多文章可以查看：

https://codex.wordpress.org/Widgetizing_Themes

有时候我们可能感觉Elementor提供的功能不够丰富，我们可以在页面上添加调用wordpress和插件小工具的区块。

下面说下如何添加小工具区块。

1.在主题文件中添加代码

if (function_exists(\"register_sidebar\")) {

register_sidebar();

}

将上面的代码添加到你正在使用主题的functions.php文件尾部。

可以重复添加，比如你添加一次。就可以使用1块小工具区块。添加2次，就可以用两个小工具区块。

本文中示例是2个。

下图可以看到我添加了两次，添加后记得保存。

2.在模板中调用小工具区块

本文示例在文章页面模板右侧添加一个小工具区域，然后底部添加一个小工具区域。

添加到底部这里可能会排版比较丑，本文仅是举例。大家实际可以将小工具区块放到任何位置。你放到顶部导航模板里也没问题！

编辑我们的文章页面模板

将侧边栏小工具添加到我们要放置小工具的区域

然后会出现让你选择侧边栏的选项

可以看到是有两个侧边栏，这就是我们上边一步添加了两次的效果。

这里我选择侧边栏1

然后文章底部再添加一个小工具区块。

这个底部的就选择侧边栏2

然后我们保存更新一下文章的模板。不更新怎么去看效果，

下面去后台添加小工具看看效果。

3.后台添加小工具

后台–外观–小工具

这里面可以看到两个小工具区域。边栏1和边栏2

这里作为演示，我就加个文字小工具

查看效果

底部小工具

显示效果

Crocoblock JetPlugins – 很全面的Elementor附加组件

JetPlugins是什么

Crocoblock出品的JetPlugins是十数个针对Elementor编辑器提供的扩展插件，每个插件既可以单独购买，也可以一次性打包获取所有插件。

这些插件的功能覆盖：Elementor小部件/元素块、大型菜单、Tab选项卡、博客、评论、woocommerce的elementor小部件和模板构建器、视觉效果、弹窗、产品相册、筛选过滤、搜索等等。

我当初先单独买的JETSMARTFILTERS插件来实现筛选功能，然后又用上了JETSEARCH实现搜索功能（本站header里的搜索功能便是它）、用JETPRODUCTGALLERY实现了产品相册功能（即便是非woocommerce的自定义产品类型，也能使用它实现产品相册功能），继而是JETELEMENTS，最后，我索性就买了包含所有插件的顶配套餐，终生可用。

JetPlugins的功能

JetEngine:用于自定义新类型的文章、文章分类，也可以自定义内容、字段到指定类型的文章中，并且可以用Elementor构建这些文章或分类的模板页。

JetElements：40多个Elementor的小部件。（我在用）

JetStyleManager：针对jetplugins提供的古腾堡块，提供块的样式配置功能；针对jetplugins提供的Elementor小部件，能保存并管理小部件的样式，以便用于他处。这个插件是免费的，但如果你不用Jteplugins的其他插件，它别无用处，虽然官方说它的样式配置功能可以用于任何古腾堡的块，但目前测试下来并不行。

JetSearch：为Elementor编辑器提供了一个Ajax搜索小部件。（我在用）

JetSmartfilters：为任何类型的文章(包括产品）提供可以自定义的筛选功能。（我在用）

JetGridBuilder：能让文章/产品等以格子的形式在页面上随便摆放，我没有使用它的场景，它是免费的（看来不是大众需要的，插件包的版本号也比较小，小众需求实锤了）。

JetBlock：提供了页头的常用元素，譬如菜单、logo、搜索，但依赖于JetThmecore插件，如果不装它，你就没法制作全局页头。

JetMenu：可以基于Elementor制作大型菜单。

Jettabs：可以基于Elementor制作tabs（选项卡）、toggles（切换）、accordion（手风琴）。

JetWooBuilder：可以基于Elementor制作WooCommerce的各种页面，譬如商店首页、产品列表、产品详情、购物车、结账、账户。

JetProductGallery：为woocommerce的产品图片/相册提供丰富的展示形式，也适合非产品类的文章或自定义内容的图片展示。

JetPopup：可以基于Elementor制作弹窗，譬如订阅弹窗、询盘弹窗，侧边筛选栏等。

JetBlog：提供了多种基于Elementor的文章小部件。

JetTricks：基于Elementor，提供了一些视觉效果，譬如：小提示、热点、折叠内容后提供查看更多按钮、视差滚动效果。

JetAppointment：基于Elementor和古腾堡提供预约功能，譬如约私教。

JetBooking：基于Elementor和古腾堡提供预定功能，譬如订车、订房。

JetCompare&Wishlist：基于Elementor提供产品比较和心愿清单的小部件。

Jetreviews：提供评论设计、评论管理以及Elementor评论小部件。

JetFormbuilder：基于古腾堡，提供表单编辑器。

JetPlugins的优点和缺点

从我个人用的几款插件来看：

优点是小功能做的比较周全细致，像Elementor Pro提供的product gallery元素，可配置的内容很少，而JETPRODUCTGALLERY的配置项就很丰富。

缺点是没有做好CSS\\JS的使用/未使用的分离处理，没分离的坏处是对速度略有拖累，但问题不大，因为我们一般在速度优化时，通常主机的缓存插件（譬如我在用的Cloudways主机的Breeze）或第三方缓存插件（譬如我在用的WP Rocket）都会提供Gzip压缩、html、css、js的压缩。

压缩后的css、js都很小了，他们的合计大小有时候还比不过一张图片的大小，此外，Elementor本身的CSS\\JS比这款插件的大多了（在1M左右），所以你如果担心他们影响网站速度，不如把重心放在优化图片。

关于这个瑕不掩瑜的小缺点，我以JetElements为例说明一下，如果未使用它的页面，是不会出现它的css、js文件的。而使用了它的页面，针对所用的元素块，并没有区分css、js，而是把它们整合在了一起，如下图所示，我在一个页面上，不论是添加一个元素，还是10个元素，都有三百多K的CSS和JS。即便你从JetElements的设置中，将不用的元素块禁用，也依旧不会影响CSS\\JS的大小。

我的测试页面放在Cloudways主机，在使用Breeze压缩后，我用GTmetrix进行测试，这个页面在使用了Elementor+JetElements的情况下，css被压缩到了70多K。所以我说它瑕不掩瑜。