Elementor 3.0有什么新功能-设计系统，改进的主题构建器，性能改进

Elementor 3.0更新-新的主题生成器，设计系统，页面速度

等待终于结束了，Elementor发布了它的8月25日发行3.0版^th这是该插件近两年来收到的第一次重大更新。

在Elementor 3.0，重点是改进已经存在的功能和创建一个设计系统，将

• 为初学者简化过程
• 加快站点创建速度
• 提高性能

重要的是要知道，在这次更新中，Elementor Pro和free都得到了显著的改进，我们将在本文中介绍所有的变化。

话虽如此，让我们深入研究这篇文章。

Elementor 3.0中品牌的改变

当你点击“Edit with Elementor”按钮时，你会注意到的第一个变化是品牌名称“Elementor”的字体变化。

正如你在上面的截图中看到的，与之前的相比，使用的字体非常粗体。而且它更突出，不能错过。最重要的是，背景也被改变了，这使得它更加突出。

组织化元素配置菜单

首先，您可以通过单击左上角的汉堡包图标来访问Elementor的配置菜单。

如果你已经使用了Elementor一段时间，那么你可能已经遇到过这些设置，诚实地说，当我开始使用Elementor时，我发现插件的这一部分相当压倒性。我相信你们中的一些人会感同身受。

现在，这是由于有太多的设置和少得多的组织。

在Elementor 3.0中，这部分已经收到了大规模的更新，在我们讨论更改之前，下面是之前和之后的截图。

在Elementor 3.0之前

在Elementor 3.0之后

当你比较上面的两个截图时，你会注意到的第一件事是，更新后这个菜单中的设置少了很多。你能看到的那些都是明确定义的。

你还可以看到有两个新的设置

• 网站设置
• 主题建设者

设置菜单中的主题构建器选项将带您到修改后的主题构建器。(本文稍后将对此进行详细介绍)

顾名思义，网站设置包含所有影响网站的全局设置，从字体到颜色到布局等等。下面是Elementor 3.0中所有新的站点设置的截图

站点设置菜单分为3个部分

• 设计系统
• 主题风格
• 设置

下面我们讨论了Elementor站点设置部分的更新。

元素设计系统介绍

与Elementor 3.0的发布，介绍了一种新的设计系统特点。如果你不熟悉设计系统，那么让我简单地告诉你。

我们都很熟悉亚马逊，并在某个时间点用它购买过产品。现在，如果你仔细看亚马逊的网站，你会注意到整个网站和所有地区的配色方案、排版、布局和其他设计元素是一致的。

这是因为亚马逊有一个设计系统，它可以为访问者提供一致的设计体验。

现在，这让我想到了设计系统的确切定义——设计系统是你的品牌视觉指导方针的集合，它包括颜色、图案、排版、可重复使用的图形和其他有助于保持品牌一致性的元素。

设计系统已经成为网站设计行业的一部分很长一段时间了，它是Elementor中非常需要的功能。

在Elementor 3.0中，在设计系统下你会发现2个设置

• 全球的颜色
• 全球的字体

使用这些你可以分别设置你网站的全局颜色和字体。Elementor中的设计系统不仅限于这2个设置，其他设置全局设计元素的功能可以在设置部分中找到。

话虽如此，

Elementor 3.0设计系统中的第一个设置是

全球的颜色

如上所述，使用此设置可以为您的应用程序创建全局调色板网站．

要添加颜色，你需要在设计系统中单击全局颜色，它会显示默认的颜色列表。

在这里，您可以单击底部的“添加颜色”按钮来添加一个新的颜色，或者单击列表中现有的颜色，并使用颜色选择器选择您想要的颜色。参考下面的截图。

此外，你还可以通过点击改变颜色的名称。完成更改后，单击Update保存所做的更改。

添加全局颜色后，让我们看看

如何在元素中使用全局颜色

出于演示目的，我使用Elementor职业首先，我将使用这个功能为各种元素添加颜色，然后，我将改变颜色。

我要编辑的元素是

• 头
• 按钮
• 丝带
• 价格

下面是使用全局颜色之前的价目表截图。

要更改上述元素的颜色，您需要单击样式，然后在标题下找到背景颜色。

在下一步中，您需要单击背景颜色前面的Globe图标，并从已创建的全局颜色列表中选择一种颜色。这里我将选择Primary。

类似地，我继续对定价表的其他部分进行了更改，我已经选择了

• 主要用于标题和按钮背景色
• 保存颜色#6为定价和彩带背景色

这里是添加全局颜色后的定价表的截图。

在我们继续之前，重要的是要注意，使用全局颜色时，全球图标的颜色会变成蓝色。

现在，下一个问题是，如果你想再次改变这些元素的颜色。你必须对每一个都做这些改变吗?

答案是否定的，要改变颜色，你所要做的就是访问全局颜色，改变你应用在这些元素上的颜色，它会自动改变你网站的每个部分的颜色，使用这个全局颜色。

例如，如果我将Primary更改为红色，并将Save Color #6更改为蓝色，则在定价表中使用这些全局颜色的元素上的颜色将自动更改。

请记住，如果网站的其他部分使用了这些全局颜色，那么它也会自动更改。这意味着全局颜色不仅仅局限于一个页面或一个小部件，它具有整个站点的影响。

现在，如果您正在重新设计或重新品牌您的网站，那么使用全局颜色将节省您大量的时间，因为您将不必单独添加或更新元素的颜色。此外，它还有助于保持整个网站的品牌一致性。

最好的部分是你可以做到这一点，只需点击几下，不需要编码。

话虽如此，

如果你想知道如何添加一个价格表，那么让我告诉你，这是一个小部件在Elementor Pro上可用，只需单击即可添加页面或帖子。

全球的字体

Elementor设计系统下的第二个设置是全局字体，就像全局颜色一样，在这里您可以选择不同的字体类型、大小、重量等，如果使用这些字体，将对站点产生全局影响。

全局字体的工作方式与颜色完全相同。一旦你做了一个样式列表，在你的网站上使用它们，以后如果你想改变或更新字体，那么你所要做的就是在全局字体中更新它，这些变化将自动反映在整个网站上。

话虽如此，

要添加全局字体，第一步是单击设计系统下的全局字体

它会显示一个预定义样式的列表，如果你想添加一个新的样式，那么你可以单击添加样式，将一个新的样式添加到列表中。

如果你想编辑一个现有的样式，那么你可以单击样式前面的编辑图标，并进行所需的更改。

此外，您还可以通过单击它们来更改样式的名称。现在，让我们看看

元素中的全局字体如何工作

为此，我将再次使用我之前创建的定价表，并将添加全局字体

• 标题
• 特性
• 按钮
• 丝带

要在这些元素上实现全局字体，首先需要选择或添加小部件，然后选择样式。

在选择样式时，你会发现标题在标题下

现在，你需要找到typography并单击Globe图标，它将显示你所创建的所有全局字体样式。您需要从列表中选择一个。

在这里，我将再次选择主要，下面是添加全局字体后的价格表截图。

这样做，全球图标的颜色将变成蓝色，表明使用全局字体功能。

现在，让我们回到Elementor站点设置中的全局字体，看看改变字体是否会有任何影响。

因为我在所有元素上都使用了Primary，我将通过单击Edit图标更新样式，并将字体家族更改为Red Hat Display，粗细改为600。

您将看到，一旦进行更改，样式将自动更新。最好的部分是它节省了大量的时间，并且超级容易执行，不需要编码知识。

话虽如此，

在3.0版本发布之后，Elementor添加的另一个非常有趣的功能是

增加网站标识

网站标识是你在WordPress网站设置阶段肯定会遇到的一个功能。

说到你的网络形象，品牌很重要。站点标识通过允许您添加品牌元素到您的站点，如徽标，标题，描述等来处理这一问题。

在Elementor 3.0发布之前，站点标识设置只能在WordPress的“外观”下的“自定义”下找到。但是，如果你正在使用Elementor，你也可以在Elementor编辑器中访问它。

这意味着如果您正在使用Elementor创建一个网站，您想要添加一个徽标到您的网站或描述到您的网站或博客那么你就不必像以前那样离开Elementor编辑器了。

话虽如此，

在Elementor中的Site Identity中，你会得到与WordPress中相同的基本设置，如果你想配置它，那么第一步是点击左上角的汉堡图标，然后选择Site settings。

点击网站设置，你会在设置下找到网站标识。

下一步是单击站点标识，它将显示所有设置

• 网站的名字
• 网站描述
• 网站的标志
• 网站图标

在元素中添加站点名称

要添加网站名称，您必须在“网站名称”下面的框中输入网站名称。

一旦你完成了添加名称，下一个选项让你添加一个关于你的网站的小描述。

使用元素添加站点描述

您可以在Elementor中添加网站描述，在网站描述下方的框中。

添加站点描述后，您将发现选项为

添加网站Logo

使用此选项，您可以添加一个徽标到您的网站。

要使用Elementor添加徽标，您需要将鼠标指针悬停在“站点徽标”下方的框上，然后出现“选择图像”按钮

点击后，它会带你到媒体库，在那里你可以选择一个现有的图像或上传一个新的标志。

列表上的最后一个选项是

网站图标

这个选项允许你使用Elementor添加一个图标到WordPress站点。

要添加一个图标，你所要做的就是点击下面的方框网站图标与(+)的迹象。

它会带你到媒体库，就像以前一样，在那里你可以选择一个已经存在的图像或上传一个新的。

话虽如此，

如果你正在寻找为你的网站创建图形的工具，那么我强烈推荐使用帆布．这是一个在线图形设计工具，你可以用它轻松地创建logo、横幅、Pinterest图片或其他任何东西，最好的是，它是免费使用的。

添加完所有内容后，单击Update保存所做的更改。

在前进的道路上,

重要的是要知道在Elementor 3.0中，主配置菜单中的一些设置已经被移动到Site settings下面。

• 主题风格
• 仪表板设置
• 全局设置

此外，在Elementor 3.0中，仪表板设置被重命名为附加设置，可以在“站点设置”下的“设置”中找到。

不像仪表板设置已重命名和重新定位，全局设置下的选项已移动到设置下的站点设置，这些是

• 布局以前称为样式
• Lightbox

当我们讨论布局设置时，重要的是要知道，现在使用这个设置，您将能够为整个网站选择默认页面布局。

此外，它还允许您为移动设备和平板电脑定义断点。总而言之，在这次更新中，Elementor把焦点放在组织和效率上。

说了这么多，接下来我们来讨论一下

Elementor 3.0中主题构建器的变化

如果你是Elementor职业用户然后你已经知道，它有一个主题构建器功能，使用它你可以从头开始创建你的博客或网站，而不必担心代码。

在这次更新中，主题构建器已经完全改进，具有新的用户界面和功能。

在我们深入研究主要更新之前，重要的是要知道在Elementor 3.0更新之后，您可以通过三种方式访问主题构建器。

WordPress仪表板

要从你的WordPress管理中访问Elementor的主题构建器，你需要在管理面板中找到模板选项卡，然后选择主题构建器。

Elementor编辑器

如果你在Elementor编辑器中，想要访问主题构建器，那么你必须点击左上角的汉堡包图标。

它将带您进入配置菜单，在那里您将找到访问主题构建器的选项。

使用快捷键

最后一种方法是访问主题构建器的最快方法，它是通过使用键盘快捷键。

如果您是Windows用户，则按CTRL + SHIFT + EMac用户必须按下CMD + SHIFT + E这样做会直接带你到主题构建器。

现在您知道了如何访问Elementor主题构建器，我们将要讨论的下一个主题是

3.0版用户界面的更改

首先，新的Elementor主题构建器是一个基于React的应用程序，它将向您展示您的网站的各种组件的鸟瞰图，例如

• 头
• 页脚
• 页面
• 的帖子
• 档案

和更多。

在此更新之前，您创建的所有模板都显示在列表表中

如果你比较上面的两张图片，你会发现新的主题构建器更直观，更有组织，对初学者更友好。

我的意思是，新的Elementor主题构建器可以让新的网站管理员很容易地知道他们必须为网站创建哪些模板，哪些模板是缺失的。

例如，在上面的图像中，你可以看到我目前没有搜索结果的模板，这就是为什么它从全局部分中缺失的原因。

当我们讨论缺少模板的主题时，重要的是讨论

在元素或主题构建器中添加新模板的更改

在Elementor 3.0更新之前，要添加一个新模板，你必须访问主题构建器并单击add new，然后会出现一个带有下拉菜单的弹出框。参考下面的截图。

在这里，您必须从下拉菜单中选择模板类型，输入模板的名称，然后按下创建模板。

这样做时，它将带您到Elementor编辑器，在那里您可以轻松地创建模板。创建完成后，它将自动列在其中一个选项卡下。

现在，在Elementor 3.0的发布这个过程已经完全改变了，如果你想添加一个新模板，那么你需要导航到新的Elementor主题构建器。

一旦你到了那里，你需要点击右上角的Add New按钮。

当你点击Add New，它会显示你可以使用Elementor Theme Builder创建的网站的每个部分，你所要做的就是选择你想要创建的部分。

例如，由于博客不插电丢失了搜索结果页面，我将从网站部分选择搜索结果，它将带您到编辑器，在那里我可以创建它。

在我们继续之前，有一点很重要，那就是当您单击Add New(一个新的信息图标)时(我)每个部位都能看到。

当你点击它时，它会向你展示一个关于如何创建特定部件的视频教程。这使得Elementor职业更加用户友好。

话虽如此，

还有另一种创建站点部件的方法，那就是首先从侧栏中选择一个部件。

它将显示您为该网站部分创建的所有模板。现在，要添加一个新的，你所要做的就是点击顶部的添加新按钮。

它将带您进入Elementor编辑器，您可以在其中创建模板。

话虽如此，

一旦您完成了模板的创建，下一步就是管理它们。

在新的元素主题构建器中管理站点部分

如上所述，在先前版本的Elementor主题构建器中，当您创建一个新的站点部件时，它会自动列在一个主选项卡下。

如果你已经创建了多个模板，那么管理它们可能会有点混乱。

然而，在新版本由于每个元素的可视化，任务变得非常直接。

首先，如果您为一个元素创建了多个模板，那么您可以通过单击主题构建器侧栏中的站点部分来访问每个模板。参考下面的截图。

这使得查找模板变得容易，花费的时间也更少。

现在，如果您想编辑一个模板，您只需要单击模板右上角的edit，它将带您到Elementor编辑器。

正如你所看到的，我有2个单一的帖子模板，一个是常规的帖子，另一个是用于WordPress术语表．这两个模板都可以通过单击上面突出显示的Edit按钮进行编辑。

如果要删除模板，该怎么办?

删除模板时，您需要单击右上方的3个点

它会打开一个小菜单，就像上面的截图，你会发现选项删除它。

此外，重要的是要注意还有其他两个选项可用。

• 出口-当你点击导出，它会下载一个.json文件，你可以上传到你的其他网站的主题构建器使用Elementor职业．
• 重命名-顾名思义，您可以使用此选项重命名模板。在选择rename时，它会显示一个弹出框，您可以在框中输入新名称，并单击Change保存更改。

同样重要的是，要知道模板上还有另一个可用的设置，即实例或条件。

Elementor 3.0中模板条件的改变

如果你是Elementor职业用户，并使用主题生成器设计了您的网站，那么我很确定您熟悉这种设置。然而，如果你不是，那么让我简单地告诉你。

当你创建一个博客或网站使用Elementor主题构建器。创建每个部分后，您必须添加条件，说明该模板可以应用于何处。

在此更新之前，要更改条件，您必须编辑模板。但是，现在您可以通过单击模板下面的Edit Conditions选项来更改它。

当您单击Edit Conditions时，它将带您进入一个页面，您可以在其中定义站点中希望在其中显示模板的区域。

在这里，你所要做的就是单击添加条件，然后设置条件，然后单击保存并关闭。

这是另一个可以节省时间并加快过程的更改。

现在您已经了解了在主题生成器中创建和管理模板的基础知识，重要的是要知道在3.0版本中Elementor引入了一个新功能，使用它您可以很容易地知道哪些模板正在使用。

例如，在不插电的博客中，我们为单篇文章和词汇表创建了不同的模板，将来我们可能会根据需求创建更多的模板。

在管理多个模板的这种情况下，要知道旧的Elementor主题构建器中哪些模板是活动的有点困难。

然而，在新版本中，很容易知道哪些模板是活动的，因为这些模板上有一个绿点。

相反，不活跃的细胞有一个灰点。

现在，如果您已经创建了一个新模板，并且忘记使用它，那么只需查看模板，您就可以知道它是否正在被使用。

话虽如此，

我们要讨论的下一个更新是

Elementor 3.0中的性能改进

当谈到SEO和用户体验时，页面速度扮演着重要的角色，因为它是排名因素。

记住这一点，Elementor对代码和基础结构进行了一些重大更改，从而显著提高了性能。

在更新到Elementor 3.0之后，我确实注意到了性能的提高，因为博客加载非常顺利，变化是显而易见的。下面是桌面和移动设备上的当前加载时间

桌面

移动

正如你所看到的，这两款设备的加载时间都相当不错。

说到这里，让我们来看看Elementor 3.0中的一些性能改进。

DOM的改进

当你测试你的网站的页面速度时，你可能会在GTMetrix中看到“减少DOM元素的数量”和在谷歌PageSpeed Insights中看到“避免过多的DOM大小”错误。

如果你在思考是什么导致了这个错误，那么简单的答案是网页上存在过多和不必要的元素。

重要的是要知道，当您使用任何页面构建器创建页面时，DOM可能会像这样过度填充插件使用很多< div >或包装元素在页面的HTML输出，使其加载缓慢。

最近，Elementor收到了很多关于页面中存在不必要的包装器的反馈，这些包装器会导致页面大小增加，并对性能产生负面影响。

在这个Elementor上的操作删除了其中的一些元素，从而简化了输出，易于理解，提高了可读性，并提高了页面速度和性能。

此外，下面是已删除的包装器类的列表

• .elementor-inner
• .elementor-row
• .elementor-column-wrap

要了解更多细节，请参见Elementor的开发文档

Elementor 3.0中的其他性能改进

如果您是Elementor用户，那么我相信您一定熟悉它允许您向页面添加动态元素的事实。

例如，如果你访问这个博客上的任何一篇文章，你会发现专题图片被设置为标题后面的背景。

页面和档案也是如此。

在这种情况下，当用户访问网站上的一个页面时，Elementor会扫描该页面是否存在任何动态值，如果发现，它会获取这些值，然后产生输出。

正如您所看到的，这个过程很长，而且占用资源。

记住这一点，在这次更新中，Elementor通过为每个帖子存储一个动态值列表来改进这个过程。

现在，当有人访问页面时，Elementor直接从这个列表中获取值，这大大减少了进程的长度，资源的使用，反过来它增加了页面的速度。

话虽如此，

如果你正在与你的网站的页面速度斗争，那么我会建议

• 使用一个好的缓存插件WP火箭
• 安装CDN
• 优化图片

这样做，你一定会看到页面速度的提高。

另外，重要的是要知道，我一直在使用Elementor职业一年多了，我一直在用它WP火箭缓存．这极大地提高了博客的页面速度。你已经看到了上面结果的截图。

本文总结了Elementor 3.0中包含的所有更新、改进和特性。如果您正在考虑使用Elementor创建站点，那么我强烈建议您这样做。有两个版本的插件免费和专业。您可以使用下面的链接下载免费插件

如果你正在寻找专业版本的插件，那么我已经分享了下面的计划。

Elementor Pro定价计划

我希望你现在知道Elementor 3.0的新功能。如果你有任何疑问，请通过评论区或社交媒体与我们联系。

请告诉我们这次更新中你最喜欢的功能或改进。此外，如果你觉得这篇文章有帮助，那么就在社交媒体上与你的朋友和同事分享这篇文章。

在你离开之前，请随意查看博客工具上最好的交易和折扣和我们的博客和WordPress术语．还有，想要了解我们的最新内容，请注册我们的通讯，加入我们的Facebook群请在社交媒体上关注我们。