Elementor制作侧边栏小工具教程

在调整博客站点时,侧边栏似乎永远是一个纠结的地方,虽然说有很多的侧边栏小工具插件供我们选择,但是使用插件往往有很多缺点,比如很难找到非常适合主题的插件、安装太多插件管理起来很麻烦

那么我们要如何制作自己的侧边栏呢?

今天我将为大家介绍Elementor的另一个用途—制作侧边栏小工具

为什么要使用Elementor做侧边栏小工具呢?

  1. 可视化编辑,完全可以自己定制
  2. 无需其他插件,方便、轻量
  3. Elementor的元素都很漂亮

综合以上,Elementor是非常适合制作侧边栏小工具的,接下来就教大家如何使用Elementor装饰自己的侧边栏

 

制作侧边栏小工具

首先,我们需要打开 Elementor编辑器,你可以随便新建一个文章或者页面(不需要保存,后续可以删除)

1589199075-52d3eb0c450f85a 1589199077-4819e512670c33c

 

然后点击 + 号新建一个Section,选择结构时,我们选择最后一个,用来模拟侧边栏

选择好列结构之后,你可以调整一下宽度使其和自己的侧边栏宽度相同

接下来我们就可以在里面进行设计了,过程这里就不再细说,和在平常使用Elementor编辑页面是同样的操作

1589199079-06be6a95dfeb5e4

这里我已经制作了好一个Tab标签,感觉已经可以上线了

点击 + 号,再新建一个 Section,这次选择第一个列结构-单列,把刚刚设计好的Tab标签拖动到这里

1589199080-3f8c518944f3e0c

然后在图上的箭头处点击 右键 – 另存为模版,保存为一个好记的名字

1589199081-795dafa85c74196

这样,我们的侧边栏小工具就制作完毕了,接下来教大家如何调用Elementor小工具

 

侧边栏调用Elementor模版

进入外观 – 小工具,可以看到这里面有一个名为 Elementor Library 的小工具,把它拖动到侧边栏区域

1589199082-b5ef85191806ebe 1589199083-d661cda24688c3a

然后编辑Elementor Library,选择我们刚刚制作的Tab标签小工具,完成之后记得点击保存

最终的效果如下图,可以看到刚刚创建的小工具已经被调用了

1589199085-757d955a9bb0a2e

 

免责申明:
1. 本站所有教程、文章或资源分享目的仅供大家学习和交流,可进群讨论!
2. 如有无法查看或链接失效,烦请报告联系管理员处理!
3. 本站无法保证资源或其时效性,恕不接受任何提问。
4. 欢迎大家帮助本站出力,赞助费用仅维持本站的日常运营所需!故不接受任何形式的退款。
5. 搜5G网无法保证文章教程或资源的完善与安全,请自行检测解决。
6. 在本站下载的源码严禁杜绝任何形式的正式商业用途,请去程序官方购买。
本站资源素材仅提供学习的平台,所有资料均来自于网络,版权归原创者所有!本站不提供任何保证,并不承担任何法律责任,如果对您的版权或者利益造成损害,请提供相应的资质证明,我们将于3个工作日内予以删除。本作品采用BY-NC-SA 4.0 《国际知识共享署名许可协议4.0》 进行许可 。
本站所有图片素材均享自由版权下创作共用CC0协议。
搜5G资源网,5G资源网 » Elementor制作侧边栏小工具教程

发表评论

搜5G网永久会员限时优惠中,不限下载,免费更新

立即查看 了解详情