小Q的博客

  • 首页
  • net编程
    • 产品和框架
    • 开发实例
    • 经验技巧
    • 开源组件
  • wp独立站
  • 自媒体
  • 日记本
  • 工具箱
每个程序员,都应该有一个自己的博客站
  1. 首页
  2. wp独立站
  3. 正文

WordPress中Elementor教程 专业版元素示例

2023年4月1日 383点热度 0人点赞 0条评论

上一篇讲的是WordPress中Elementor插件里,基本面板里的元素讲解。今天这篇博客继续讲解专业版里面的元素,专业面板里的元素讲解。提供的功能更强大

目录

  • 1-2、Loop元素
  • 3-4、Post元素
  • 5、Gallery元素
  • 6、Form元素
  • 7、Login
  • 8、Slides
  • 9、Nav Menu
  • 10、Animated Headline
  • 11、Hotspot
  • 12、PirceList
  • 13、PriceTable
  • 14、FlipBox
  • 15、Call To Action
  • 16、Media Carousel
  • 17、Testimonial Carousel
  • 18、Reviews
  • 19、Table Of Conents
  • 20、Countdown
  • 21、Share Buttons
  • 22、BlockQuote
  • 23-24-25-26、Facebook
  • 27、Template
  • 28、Lottie
  • 29、Code Highlight
  • 30、Video Playlist
  • 31、PayPal Button
  • 32、Stripe Button
  • 33、Progress Tracker

1-2、Loop元素


这两个元素一起说比较方便,因为他们的设置基本样,只是展示方式有所不同。这两个元素相当于Winform中自定义控件,就是我们需要预先设置好一个模板,然后在这两个控件里展示出来。虽然可以自定义模板,但数据源只有2种,分别是产品列表和博客列表。


拖拽到页面里,会让你创建一个模板(模板可以保存重复使用)。模板编辑页面里,我们可以看到能使用的元素很多,和普通页面差多。
看下最终设计的效果图

3-4、Post元素


这两个元素相当于Loop元素的进一步封装,只加载了博客部分。看下效果图就一目了然了。另外,Portfolio也可以理解为作品图集

5、Gallery元素


这个元素相当于Winform中的ListView大图标控件,就是浏览图片时使用。里面有个Type参数,选项包括Single和Multiple。选择Multiple的话,是可以分组加载图片

6、Form元素


这个就是表单元素,新增后内置3个input,分别是Name、EMail和Message,以前一直好奇数据是如何提交的?直到用了这个插件。原来不是调用WebAPI的,而是提交至EMail邮箱。

7、Login


一个简单的登录页面,如下图所示。

翻了下它的属性,好奇在哪里验证录入的是否正确呢?但它提供了登入或登出成功后的跳转地址。

8、Slides


这个就是轮播图片,一般在网站的首页Header部分使用

9、Nav Menu


就是网站的主菜单

10、Animated Headline


这个元素的作用简单总结就一句话:博眼球。效果就是页面打开后,画圈里的部分闪了下。增加了网站的互动吧。

11、Hotspot


这个元素相当于在一张图片上设置一个Tips点,点击就出来提示信息(或者一个链接),看效果图一目了然。

12、PirceList


名字起的非常好,就是这个意思,显示价格列表。

13、PriceTable


这个元素相比PriceList,更适合制作海报。

14、FlipBox


这个元素的功能是实现图片的翻转,也算为网站增加一些动画效果吧。

15、Call To Action


这个元素可以用在促销的产品图片上,右上角再展示下促销信息

16、Media Carousel


其实就是轮播控件,和Slides类似,但特效要比这个更多。最主要的,这个支持视频轮播,如果带宽没问题的话,可以尝试下。效果图是CoverFlow的特效

17、Testimonial Carousel


这个元素也算轮播控件,但它轮播的是评语。看了下它的属性设置,数据只能写死,不能动态读取。

18、Reviews


这个元素也是轮播评语的控件,和上面不同的就是展示效果。喜欢哪个用哪个

19、Table Of Conents


这个相当于生成博客的浏览目录,比如这篇博客里,就是用到了Table Of Contents的类似插件。再细说的话,就是根据H2、H3、H4这种标签生成的

20、Countdown


这是一些倒计时的元素,适用于做活动。比如某个产品促销,到xxx时间结束。

21、Share Buttons


用于分享页面,本身提供了3个平台,包括:Facebook、Twitter、LinkedIn。如果不够,还可以自己加按钮和图标

22、BlockQuote


这个元素有点意思,简单说就是能够引用其他网站的内容而不被判为抄袭。比如你的网站里引用了某大站中某个网页的文字,这样你的网站就会被认为抄袭或引用了某大站的内容,谷歌认为这很不厚道,你的网站权重也会降低。但用了这个元素后就没问题了。

 

23-24-25-26、Facebook


很明显这4个都是和Facebook有关的元素,但要让它们有作用,还要申请Facebook的开放平台并创建App,并且App还要正式上线,然后在网站后台配置下AppId。

所以,看看是什么效果就行了,没必要太在意这个元素。

 

27、Template


就是我们之前制作的模板,用这个元素可能直接加载。

 

28、Lottie


这个元素挺有意思,简单说就是生成类似gif活跃画面的一种动态效果,增加网站的趣味性吧。

 

29、Code Highlight


展示某编程语言的源码,支持目前比较流行的开发语言

 

30、Video Playlist


视频播放列表,来源可以是油罐,也可以是自己服务器上

 

31、PayPal Button


这个按钮直接关联的是Paypal的帐号,点击直接购买。

 

32、Stripe Button


这个按钮和Paypal类似,实现的也是快速购买。

 

33、Progress Tracker


就是一个进度条,下面就是效果图

 

相关阅读

WordPress中Elementor教程 基本面板元素部分

WordPress中Elementor教程 开篇+制作网站Header

标签: BlockQuote Call To Action Elementor教程 FlipBox Payal Button WordPress教程 专业面板元素
最后更新:2023年4月3日

小Q

80后中年不油腻大叔,喜欢编写代码、打羽毛球、做木制玩具。目前定居浙江杭州

打赏 点赞
< 上一篇
下一篇 >

文章评论

razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
取消回复

COPYRIGHT © 2022 小Q的博客. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang

浙ICP备2022019157号-2