Elementor 3.0带来了一种全新的网站构建方式。准备使用特殊的三合一版本,其中包括:设计系统功能,新主题构建器和显著的性能改进。
每个功能版本都使Elementor向前发展,但是主要功能版本为我们的工作流程带来了实质性的飞跃。
2016年的Elementor 1.0为WordPress视觉设计带来了全新的方法。2018年的Elementor 2.0包括一个革命性的主题生成器。
现在,2020年,我欣喜若狂地介绍Elementor 3.0,它不是一个,而是三个不同的突破性功能:设计系统功能,新主题构建器和显著的性能改进。
开发者花了几个月的时间,对Elementor的基础架构进行了全面的重建,辛勤的工作却获得了回报。Elementor 3.0包括核心和Pro版本改进,以及构建网站的全新方法。请继续阅读,以了解此版本将如何革新您的工作流程,并允许您创建比以往更快、更一致的网站。
设计系统功能
在一个地方管理网站的设计系统
Spotify、Apple或Nike等大品牌如何在所有平台上提供一致的成功体验?
无论您看到的是哪个着陆页、网站页面、横幅或资产,它们都保持相同的外观。这要归功于称为设计系统的东西。
但是,如果我告诉您像您这样的网络创建者现在可以为你的客户提供相同的大品牌一致性呢?
介绍设计系统功能。实施设计系统,彻底改变您的工作流程,并使整个团队围绕一种设计语言保持一致。
革新您的工作流程,并创建更快、更一致的网站。
什么是设计系统?
对于不熟悉该术语的人来说,设计系统是真理的唯一来源,它构成了团队设计网站的基础。
假设您正在构建一个包含多个页面、着录页面和博客文章的网站。您如何确保所有这些页面和帖子的所有颜色、字体和布局都与一种语言保持一致?这就是设计系统的作用。
实施设计系统功能使您可以快速设计和编辑新网站和现有网站,缩短工作流程并缩短产品上市时间,同时保持品牌和视觉一致性。
您具有内置的所有网站设计组件,因此整个团队都可以保持同步,并且您的网站始终保持100%一致。
Elementor的设计系统功能包括:
- “新网站设置”面板 – 包括网站标识、灯箱设置、主题样式等
- 全局颜色
- 全局字体
让我们探索这些功能中的每一个,看看它们如何帮助您建立更专业的网站。
设计系统功能1
网站设定
定义网站的基本设置可能会非常耗时。
挣扎在主题代码、Customizer定制器、functions.php…忘了它们吧。
Elementor添加了一个新的“站点设置 Site Settings”面板,其中显示了许多站点范围内的配置工具。这样,您可以留在Elementor内,并在一个地方设置所有站点设置。
在用Elementor编辑的任何页面内,转到左侧面板,然后单击左上方的图标。您将切换到“全局设置”面板。
在“全局设置”面板中,您将找到:
- 网站身份:自定义您的跨网站身份,例如徽标、标题、标语甚至Favicon
- 布局:定义Elementor的默认布局设置,例如默认内容宽度或默认页面布局
- 灯箱:设置Elementor灯箱的所有默认样式
- 主题样式:为版式、按钮、图像和表单字段自定义非Elementor HTML元素(通常由主题设置)。
- 全局颜色和字体 (将在下面详细说明)
设计系统功能2
全局颜色
3.0版引入了一种处理站点颜色的新方法:全局颜色。
全局颜色使您可以在一处更改颜色,并使该颜色在您放置的任何位置进行更新。
首先选择站点的四种基本全局颜色。然后,进入Elementor中的任何颜色样式,并将其设置为四种颜色之一。您还可以在“全局列表”中添加尽可能多的自定义颜色,并根据自己的喜好命名。
现在,CSS变量的魔力开始发挥作用。返回“全局颜色”,并更改其中一种颜色。您整个网站的配色方案会根据新的“全局颜色”进行更改。在您的Web设计过程中,混合和匹配颜色从未如此简单。
开发者构建了此控件,以便您可以在控件内部看到实际的全局颜色,从而消除全部猜测。您还可以从控件中分配不同的全局颜色,或创建新的全局颜色,全部使用控件内部的相同颜色选择器。
您是否提供维护、更新或重新设计现有站点的服务?这就是你的幸运了!此功能非常适合更改网站的配色方案,而无需遍历您的所有页面和帖子并分别进行编辑。从现在开始,您只需单击几下即可在一个地方设置,编辑和删除任何全局颜色。
设计系统功能3
全局字体
颜色和版式是任何网站的基础。使用Global Colors的相同逻辑,开发者创建了一种全新的方法来处理网站的文本样式。
使用全局字体,可以在全局范围内设置每个字体设置。现在,您可以全局配置所有站点的排版设置,包括:字体系列、字体大小和比例、字体粗细、字体变换、字体样式、字体修饰、行高、字母间距和响应设置。
您将能够对包含文本的每个小部件应用这些设置,并在基本列表之外自定义自己的全局字体。
设置网站的版式后,就可以进行更改,这些更改会影响您使用“全局字体”设置的所有文本区域。
您还可以确切看到应用了哪些全局字体。
新主题生成器
您的整个站点集中可视化和组织
尽管Elementor的Theme Builder在视觉完整网站设计方面已成为行业领导者,但开发者还是决定继续改进。
引入了新的主题生成器,该主题生成器以可视和直观的方式管理您的整个网站。
Theme Builder是一个基于React的应用程序,它提供了网站的概述,包括网站的所有部分:页眉、页脚、全局页面模板、全局帖子模板等等。网站的每个部分都直观地触手可及,因此设计一个完整的网站的任务变得更加容易。
新的主题生成器将使您可以直观地浏览整个网站结构。查看哪些部分是激活的、哪些不是、管理哪些模板适用于您网站的不同区域,并可以根据需要轻松访问更改、更新或添加内容。
每个站点部分都会获得一个自动图像预览和实际模板的屏幕截图。这样一来,您就可以看到整个网站的“鸟瞰图”,从而可以精确定位要编辑的模板。
这个怎么运作
下一段将使您成为超过大多数网站创建者的“超级Elementor构建者”,所以建议您特别注意。
要使用新的主题生成器开始构建您的网站,请单击编辑器左上方的汉堡图标,然后单击“主题生成器”。您也可以从顶部的管理栏中使用快捷方式CMD / CTRL + Shift + E进行访问。这适用于您网站中的任何位置。
现在,您将看到创建完整站点所需的所有基本部分。
如果它是一个新站点,并且还没有任何部分,则单击任何部分并进行构建。我们建议从一个新的顶部开始(仅仅只是“顶部”的部分……)
构建顶部后,您可以继续设计其他站点部分,并将其插入到您想要的任何页面中。
Elementor 3.0额外功能:性能提升
开发者一直在进行性能调整和改进,但是这一次,他们对代码和基础结构进行了一些重大更新,这些更新带来了显著的性能改进。
开发者减少了DOM元素的数量,并使Elementor更快地渲染您的网页。
这将改善您的页面速度排名和网站上用户的整体体验。
页面加载速度发生了什么变化?
Elementor 3.0对服务器端呈现过程以及Elementor呈现动态CSS值的方式进行了重大改进。
Elementor允许您在网站中合并动态元素和价值。例如,您可以为网站帖子创建模板,并决定要显示每个帖子的特色图像作为帖子标题后面的背景。
在幕后,当Elementor准备要发送帖子到浏览器时,它将扫描该帖子中的动态值,然后获取它们,如果它们包含任何CSS值,则打印该CSS。这个过程是“昂贵的” – 意味着它既费时又费资源。
在Elementor 3.0中,开发者大大减少了在此过程上花费的时间。这是通过为每个帖子存储动态值列表来完成的。创建该列表后,每当有人访问该帖子时,Elementor都会直接转到该列表,从而使过程更快、更精简。受此优化影响的动态值包括背景图像、颜色等。
这项改进大大减少了服务器负载,缩短了写入第一个字节的时间,因此,站点访问者的加载时间大大缩短。
在Elementor,开发者认为网站性能是当务之急,他们会在即将发布的版本中继续在这方面进行改进。
有关升级的重要说明
Elementor 3.0是一个主要版本,其中包括重大的基础结构更改。升级到v3.0之前,请确保备份您的网站,并且如果您使用任何第三方Elementor插件,请确保其与Elementor 3.0兼容。
在升级Elementor Pro 3.0之前,请确保升级到Elementor 3.0的核心版本。
到了尝试3.0的时候!
正如我们所提到的,此版本包含很多东西,我们相信它将真正影响您的日常工作。让我们总结一下:
设计系统功能,可帮助您更一致、更有效地工作。
新的主题生成器是一个功能强大的可视化工具,无需代码即可管理网站的每个部分。
性能改进将缩短您的网站加载时间。
Elementor 3.0将帮助您成为专业的网站创建者。如果您还没有使用,请立即升级到Elementor Pro,让新的一年成为您的业务飞速发展的一年!
发表回复