专注于WordPress、Elementor、外贸建站教程与服务

Premium Addons for Elementor 高级元素扩展完整教程【更新中】

更新日期:2020-10-28

基于Elementor编辑器,出现了很多优秀的元素扩展,当你觉得Elementor自带的元素块不够用的时候,那么,元素扩展插件就能派上用场了。今天要介绍的是Premium Addons for Elementor,是我在制作《Astra主题教程:免费建外贸网站》时使用的,用它制作首页的轮播广告(slider)。它不仅提供了数十个免费的元素块(也叫widget小工具或addon,下文我统一称为元素块),还有很多一键导入即可使用的模板块。下文我会逐一介绍免费的元素快及其实例预览,而实例一部分取自插件自带的模板库,一部分由我制作。

持续更新中,还没写完,写一点发布一点~

Premium banner / 高级banner

下方是Banner元素块的实例,背景图配文字的形式,亮点是悬停时的动画效果,目前是6种。

Jenny

Strong Independent Girl

Premium Banner

Nulla vitae elit libero, a pharetra augue.

Architecture Agency

We Work at All Scales and in All Sectors

如果你想导入这个元素的模板,如下图所示操作,在用Elementor编辑页面时,点击五角星图标打开模板库。

然后选择widget/addon类型来筛选模板并导入到页面中,未标记Pro的都可以免费使用。

Premium Blog / 文章博客

Elementor Pro自带的博客元素块(post)是没有筛选、轮播功能的,但Premium addons for elementor提供的premium blog提供了这个功能,它可以让文章列表实现筛选/轮播/翻页,下方为筛选博客的实例。

你可以选择筛选的目录、配置展示的文章数量、配置文章展示的内容(评论、分类、标签、作者、日期、图片、摘要)。

内容目录Premium banner / 高级bannerPremium Blog / 文章博客Premium […]
内容目录Premium banner / 高级bannerPremium Blog / 文章博客Premium […]
下方对比的三个主机:Siteground、GreenGeeks、Chemicloud,都是适合WordPress外贸建站的主机。 其中,SiteGround和GreenGeeks套餐都提供服务端缓存,因为这对网站速度影响很大,网站速度慢会导致客户流失; 而ChemiCloud主机采用的是LiteSpeed服务器,速度本身就快,我就没选择更贵的带有服务端缓存的套餐。
内容目录Premium banner / 高级bannerPremium Blog / 文章博客Premium […]

Premium button / 按钮

相比Elementor自带的button元素的单一动效,这个按钮元素块拥有丰富的动态效果,示例如下,请将鼠标置于按钮上方预览效果。

Premium carousel / 轮播

这个元素块能够让Elementor制作的任何内容都能实现轮播(如下方示例,示例有点歪,因为我的文章右侧有侧边栏,将就看效果即可),譬如你在制作首页首屏的轮播广告时,每张轮播你都可以单独设计,发挥脑洞进行创意吧。我在《 Astra主题教程:免费建外贸网站》便使用它制作了Banner。

Premium countdown / 倒计时

这是一个倒计时元素块,时间单位可以放在数字下方,也可以放在数字右方,时间单位也可以自行翻译。国外的WordPress主机WordPress插件在做促销时会经常用到这个元素块。

Premium counter/ 计数器

计数器元素块很适合在建外贸网站时介绍公司的亮点/优势,譬如:员工数量、项目数量、工厂面积、生产线数量。Elementor也有计数器元素块(counter),但元素块内不包含图标,当然你也可以用Elementor的Icon box来实现类似的效果,只是数字不能滚动。

不过,计数器的标题(title)默认是h4,目前不能修改为p或span或其他html标签,导致我的目录导航里出现了不和谐的内容😔
0

Employees

0

Events

0

Projects

0

Followers

Premium Dual Heading / 双标题

这个双标题元素可以将标题分为两段,以便设置不同的样式效果,下方是官方提供的示例效果。

Premium Addons

不同颜色

Premium Addons

动画图片背景

Premium Addons

渐变颜色背景
Premium Addons
文字阴影
Premium Addons
标题加边框
Premium Addons
标题为块元素(会换行)

Premium Addons

图片背景

Premium Addons

动画渐变颜色

Premium Addons

纯色描边
Premium Addons
文字字体或样式不相同
Premium Addons
标题加背景颜色
标题带链接

Premium Fancy Text / 花式文案

这是 文案
这是
  • 一个花式的
  • 一个动态的
  • 一个超酷的
文案

上方示例中,动来动去的文案便是花式文案,可以设置多组文案切换,花式文案前后都可以添加一些固定不动的文案,简称前缀后后缀,文案的动画速度是可控的,也能设置文案的颜色、背景、动画效果等等。下方图片是这个元素的内容与样式设置配置。

Premium Media Grid / 媒体网格

这个媒体网格真的很棒,你可以直接在元素设置中管理图片、视频,每张图片都可以设置自定义的链接,也可以点击图片显示大图,还提供了分组筛选功能。

下面是这个元素块的部分设置,记得填写分类时,categories里添加的分类,与图片中填写的category能一一对应上。

Premium Image Button / 图片按钮

上文我们介绍过普通的动效按钮,这又来了个图片按钮,可以为按钮添加背景图片与动画效果,嗯,更酷炫了。

Premium Image scroll / 图片滚动

这个元素可以制作长图滚动预览。

你可以将鼠标放到左边的图片上查看这个元素的效果。

你可能注意到LOYSEO的网站模板栏目使用了这种长图纵向滚动预览效果,然而我是用代码+元素块组合实现的,如果早点发现这个插件的图片滚动元素,那我就不用消耗那么多脑细胞了😂。

图片滚动功能可以实现:

  • 纵向滚动,横向滚动(特别适合清明上河图这种横向长图);
  • 从上向下滚动、从下向上滚动;从左向右滚动、从右向左滚动
  • 鼠标悬停时触发滚动、手动拖拽触发滚动;
  • 可控制图片显示高度
  • 可在图片上叠加鼠标图标
  • 可在图片上叠加蒙层
  • 图片可以加链接,链接支持动态调用
  • 图片支持动态调用,譬如取用当前文章/产品的封面图

Premium Image Separator / 图片分隔

paragliding.png

图片分隔一般用于装饰,譬如你看到上方的降落伞小人,它就是个图片间隔。你除了可以选择图片,还能选择用图标或者动画来进行间隔。

相关

微信扫一扫

教程

分享知识是一种美德,当我们每一个人都在不断的分享知识给这个社会的时候,我们这个社会将会变得越来越好,所以如果您喜欢这篇文章的内容,希望您可以把它分享到您的朋友圈当中,或者给到您指定的某一个人,您关心谁,就把知识分享给他,谢谢。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Copyright © LOYSEO.COM
Do NOT follow this link or you will be banned from the site!
微信扫一扫