关注VPS服务器
相关知识分享

Elementor Pro3.1版本更新:自定义代码,性能改进,代码高亮小部件及动画标题

在最新版本的Elementor Pro 3.1中添加了自定义代码新功能,改进了性能(提升页面加载速度),为最受欢迎的代码高亮小部件添加了附加功能,改进了动画标题功能。

安装国外主题前提条件

1、教程使用的国内服务器 1核1g从实际使用来看速度并不快。如果你是学习的话,选择 1核2g配置的服务器起步,用 Elementor建站使用 2核4g配置会运行流畅。
国内服务器:阿里云腾讯云(都有代金券,付款时抵用省钱) 国外服务器:点我登陆 Vultr 主机 不知道如何选择地域、配置请在页面右侧+老魏的联系方式,我们一起研究。

2、学习 Elementor建站可以不用域名,直接拿服务器IP做网站域名。 如果是用来建站,那么就要注册域名了。主要用户是老外的话(外贸网站、B2C/C2C等),建议在国外注册,不要在国内注册。
打开namesilo官网,在搜索框里输入要注册的域名,选择好之后注册,付费之前记得使用优惠码省钱。
优惠码点击国外域名商Namesilo域名注册教程获取。

3、Elementor插件 是wordpress建站工具中轻量级的一款插件,感兴趣可以点我直达 Elementor pro插件官网,容易上手,快速建站。 感兴趣可以看老魏分享的购买Elementor Pro插件和下载安装激活_WordPress页面编辑器。 更多关于Elementor插件的内容请看Elementor专题

4、建站面板。 老魏在本文中使用了宝塔面板,点我领取宝塔官方赠送 3188元优惠券礼包。新用户可享受0.99元体验1个月专业版。宝塔可视化操作界面部署网站很快。

5、Siteground虚拟主机是 wordpress官方推荐的主机,与 wordpress是天生一对。老魏在实际使用当中发现 siteground虚拟主机上面的 wordpress网站速度、稳定性都很棒,而且在国外测试评分网站的得分也很高,如果你打算长期运行外贸网站,老魏强烈建议选择 siteground虚拟主机。
如果你要做外贸网站,点我打开 siteground去注册一个新账号,开始你的外贸建站之旅吧。
关于 siteground建站:siteground专题

Elementor自定义代码

Elementor Pro 3.1新增了自定义代码功能,使得把代码添加到网站页面或区域变的非常容易。为了给用户节省时间,简化工作并减少对WordPress插件的依赖性,Elementor Pro 3.1新增了添加自定义代码和管理所有代码段的功能。

之前要在WordPress网站中添加自定义代码,需要借助WordPress插件或对主题文件进行复杂的代码调整(手动添加编辑代码,对新手不友好),比如Code Snippets插件Header Footer Code Manager插件都是可以添加自定义代码的插件。

使用新的“自定义代码”功能,用户能够在页面的各个区域中包括跟踪代码(Google Analytics,Facebook Pixel)元标记和其他外部服务,例如在head和body中添加自定义代码。所有这些自定义代码都可以在Elementor管理页面添加和管理(比如哪些代码在哪些页面上运行)。

更多详细介绍请点我直达Elementor pro官网查看

Elementor自定义代码如何工作

在WordPress仪表盘的Elementor菜单中添加和管理自定义代码。添加代码后选择位置(head页头,body start内容区域起点,body end内容区域终点)并设置优先级。比如在同一位置添加了两个脚本(例如Google Analytics for Facebook Pixel),可以设置优先级来决定哪个脚本被首先加载。如果要先加载Google Analytics脚本可以将优先级设置为1。

可以使用具有全面自动完成功能的代码编辑器去编辑代码,并像设置每个Elementor站点部件(页眉,页脚等)一样设置显示条件。完成后在网站上发布代码。你可以在“元素”选项卡下的“自定义代码”部分中添加和管理所有代码段。

加快页面加载时间

添加了一项提高加载速度的实验功能,重点是优化网站速度和评分。改进后的加载优化了前端性能,通过仅在页面上需要时才加载小部件JS代码来节省内容加载时间,这可以减少JS文件大小约100 KB。

从理论上说仅当页面上使用了特定的小部件时才会加载它们。没有Pro小部件=没有Pro小部件JS文件。

要体验这种性能改进,您需要手动激活Experiments标签中的“Improved Asset Loading experiment”。

官方计划在以后的版本中对性能进行更多改进。

更多详细介绍请点我直达Elementor pro官网查看

新的代码高亮小部件

基于许多设计师和开发人员的要求,Elementor Pro开发了新的Code Highlight小部件。

对于那些拥有开发博客或经常在内容中使用代码示例的人来说,使用代码突出显示或语法突出显示特别有用。平时这个功能是需要手动添加代码或者使用代码高亮插件来实现的。如果你正在寻找无需额外插件即可使代码更具可读性和外观与网站一致的方法,则需要使用新的代码高亮小部件。

用户可以使用新的“代码高亮小部件”执行多种操作。初学者可以选择语法(编码语言)以优化突出显示的代码。还可以单击将代码复制到剪贴板,然后自定义设计。从六个不同的设计主题中进行选择,然后找到适合的网站样式。以代码(比如CSS)显示内联颜色可视化,并突出显示要在代码中引起关注的特定行。

更多详细介绍请点我直达Elementor pro官网查看

动画标题

通过控制循环播放,定时等功能创建更多引人入胜的标题。Elementor Pro更新了现有的Animated Headline小部件,可以创建动画和突出显示的标题,从而进一步吸引访问者的注意力。

Elementor Pro3.1版本的改进:

  • 定时选项:允许设置动画持续时间和每个动画循环之间的延迟;
  • 循环选项:将小部件设置为仅播放一次,强调一条特定的消息(比如下划线效果),并保持这种状态,以便您的访问者只看到一次动画;
  • 设置选定的键入效果颜色:通过更改颜色/背景色以及混合和匹配颜色来自定义和控制键入效果,以实现更炫目的结果;
  • 旋转效果的动态内容:创建漂亮的“单个文章”模板,以动画功能显示动态消息;
  • 更多详细介绍请点我直达Elementor pro官网查看

老魏总结

这次Elementor Pro 3.1比较大的更新是添加及管理自定义代码功能了,减少了对WordPress插件的依赖性。而且少用一个插件也可以降低对系统资源的占用。加快页面加载时间是实验功能,大家要注意开启后出现什么问题就去关闭掉这个功能,等待官方更新。代码高亮小部件同样可以取代WordPress插件,对于开发者和经常用代码的用户很有用。Animated Headline小部件新增功能是对用户反馈意见的统一更新。

赞(0)
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《Elementor Pro3.1版本更新:自定义代码,性能改进,代码高亮小部件及动画标题》
文章链接:https://www.vpsss.net/24138.html
本站资源仅供个人学习交流,转载请保留出处及链接,不允许用于商业用途,否则法律问题自行承担。