使用 Elementor 加快设计过程的技巧

由心敲暮色的鼓

Elementor 是当今 WordPress 社区中最好的页面构建器之一，这已不是什么秘密。 它不再只是一个页面构建器。 Elementor 已经发展了很多，即使使用免费的基本 WordPress 主题，您也可以设计功能齐全的网站，而无需编写任何代码！

虽然 Elementor 提供了许多选项和自定义功能，但我们经常错过插件的较小细节和部分，这些细节和部分可能会对网站的设计过程产生重大影响。

使用 Elementor 设计网页已经非常快速和简单，但是如果您想加快设计过程，那么您来对地方了。 在本文中，您将了解如何通过充分利用带有第三方工具的编辑器来加快 Elementor 的设计过程。

从预制模板开始

预制模板可以加快项目的开发。 从头开始设计新页面需要时间，而且在不断调整页面布局和样式时，您往往会浪费时间。 这正是模板派上用场的地方。 Elementor 的模板库是加快设计过程的重要资源。 即使您不使用预制模板，您也可以随时使用模板库作为灵感。 只需单击一下，即可轻松地将模板直接导入页面。

Elementor 模板可以分为两部分。 首先，当您想要从上到下导入预制页面时，例如，您可以导入包含所有内容的完整页面（如关于或联系页面）。 第二个选项是如果您只想导入设计的一部分或块。 例如，如果您喜欢服务、英雄、联系我们或订阅部分中的某个部分，您可以这样做。

精彩的免费和高级模板集合在网络上很容易获得。

恩瓦托市场

恩瓦托市场

Envato 市场可能是最受欢迎的市场，不仅适用于 Elementor 模板，而且适用于 WordPress 主题和插件。

模板怪物

模板怪物

TemplateMonster 是另一个优质模板资源的提供者，他们也有一些免费的模板。

Elementor 模板库

Elementor 模板库

Elementor 模板库 – 是 Elementor 的原生模板仓库，新的免费和高级模板经常出现。

使用热键

如果您只用鼠标使用 Elementor，请停止！ 花 10 分钟学习简码，这将为您节省大量时间并加快网站的设计过程。 除了复制和粘贴等简单的方法外，您还可以使用更高级的自定义快捷方式。 它们非常有用，特别是如果您想在面板和预览模式之间导航，或者切换到移动编辑。

以下是可以大大提高网站设计速度的快捷方式列表：

行动

撤消 Ctrl / Cmd + Z 撤消在页面上所做的任何更改
重做 Ctrl / Cmd + Shift + Z 重做页面上所做的任何更改
复制 Ctrl / Cmd + C 复制部分、列或小部件
粘贴 Ctrl / Cmd + V 粘贴部分、列或小部件
粘贴样式 Ctrl / Cmd + Shift + V 粘贴部分、列或小部件的样式
删除 删除 删除已编辑的部分/列/小部件
复制 Ctrl / Cmd + D 复制已编辑的部分/列/小部件
节省 Ctrl / Cmd + S 将您的页面保存到修订历史记录

去

面板/预览 Ctrl / Cmd + P 在面板和预览视图之间切换
移动编辑 Ctrl / Cmd + Shift + M 在桌面、平板电脑和移动视图之间切换
历史 Ctrl / Cmd + Shift + H 进入历史面板
航海家 Ctrl / Cmd + 我 打开导航器
模板库 Ctrl / Cmd + Shift + L 打开我们的模板库模式
键盘快捷键 Ctrl / Cmd + ? 打开键盘快捷键帮助窗口
辞职 ESC键 打开设置并跳转到退出到仪表板

页面的自定义 CSS

您知道每个页面都可以有自定义 CSS 吗？ 是的，但请注意，此功能仅包含在 Elementor 的 Pro 版本中。 作为解决此问题的方法，我将向您展示如何为每个页面包含自定义 CSS。 如果您想要 Pro 版本只是为了在页面级别添加小自定义，此技巧将为您节省资金。

为此，您只需要利用 HTML 小部件和其中的这段代码：

<style>
/*Your custom CSS code here*/
.elementor p {
color: red; 
font-size: 25px; 
text-decoration: underline;
line-height: 40px;
}
</style>

看看这个例子：

自定义代码

Elementor Finder 搜索栏

很多时候，当您进行页面设计时，您想跳转到其他页面、设置、销售页面或其他任何地方，如果您执行以下操作可能会很耗时：保存页面 > 返回仪表板 > 打开页面> 搜索您要打开的页面。 如果您不得不一次又一次地这样做，这可能会浪费大量时间和精力。

幸运的是，Elementor 有一个内置的解决方案来简化和加快设计过程。 您可以简单地使用 Elementor Finder，而不是经历所有这些麻烦。 您可以通过在搜索栏中搜索直接跳转到任何设置、模板、页面或主题部分。 可以通过单击 WordPress 仪表板中任意位置的 Cmd/Ctrl + E 键来访问 Finder。 观看此视频，了解您可以使用 Finder 执行的所有操作。

使用导航器

Navigator 是一个导航树窗口，可让您轻松访问页面构建器中的每个元素。 这个小窗口允许您浏览元素并轻松拖放小部件。

Navigator 对于长页面或具有复杂多层设计的页面，以及结合 Z-Index、减去边距、绝对位置等的元素特别有用。它允许您访问可能位于其他元素后面的元素句柄。

您可以通过以下 3 种简单方式之一访问 Navigator：

  1. 右键单击任何元素，然后单击导航器。 这将自动将您重定向到导航树中的特定元素。
  2. 单击面板页脚中的元素按钮。
  3. 使用 Cmd/Ctrl + I 键盘快捷键。

看看这个视频，看看它的实际效果：

Navigator 还有一些其他功能，例如命名小部件、折叠和展开小部件、浮动或停靠面板以及显示或隐藏小部件。 您可以在他们的完整评论中看到 文件.

定义您的调色板

通常，当我们设计网站时，我们会遵循设计师创建的设计模式。 此模式通常包含在整个站点中重复的颜色组合。 这些是应该保持不变的品牌颜色。 这意味着每次我们在页面上添加一个新的小部件时，我们都必须复制粘贴颜色代码，或者我们必须记住颜色代码是什么才能在小部件设置中应用它。 这样做可能很耗时。 幸运的是，Elementor 为我们提供了解决方案。

您可以在颜色选择器设置中定义您的品牌颜色，并在每次访问小部件样式的颜色选项时重复使用它们。 只需选择预设调色板或定义您自己的自定义颜色即可在设计时节省时间。

看看这个视频：

预制和可重复使用的小部件样式和模板

Elementor 是最好的页面构建器之一，但是您是否考虑过默认和丑陋的按钮？ 标签？ 菜单？ 或任何其他小部件？ 这些默认小部件看起来像是几年前设计的，或者，也许您想在项目 B 中重用您在项目 A 中设置样式的小部件？

目前，您无法使用 Elementor 为未来的项目保存和重用小部件样式。 幸运的是，免费 WunderWP 插件提供了一些方法来解决这个问题。

首先，WunderWP 包含许多预设的小部件样式供您使用。 标题、画廊、按钮、分隔线、轮播、表格、定价表等的现成样式只需单击即可获得。 只需将 Elementor 小部件拖到您的页面上，选择现成的 WunderWP 小部件样式并开始添加内容。

WunderWP预设

使用 WunderWP，您还可以在 Elementor 中轻松保存和重复使用自己的小部件样式。 这很简单：对小部件进行样式化，将其保存到 WunderWP Cloud（免费！），稍后将其用于类似的小部件。 这适用于简单和复杂的小部件。 例如，您可以使用它来保存包含不同印刷值的标题小部件或具有自定义阴影的图像小部件。

WunderWP 自定义样式

模板也是如此——您可以将创建的全部或部分模板保存到 WunderWP Cloud。 模板将在那里，因此当您准备好时，您可以轻松地将其插入页面或网站。 这样您只需构建一次，节省大量时间。

WunderWP 自定义模板

或者您可以利用 WunderWP 的现成内容模板 现在，有超过 50 个现成的部分模板 – 例如联系人、号召性用语、页眉、页脚、服务、关于、团队、服务、倒计时等等 – 用于各种目的。

查看  如何在 WordPress 中设置 Google Site Kit

WunderWP预制模板

包起来

到目前为止，毫无疑问，Elementor 是目前最好的 WordPress 页面构建器之一。 几乎每天都有新的工具和功能被添加以简化和加快设计过程并加快项目交付时间。

您认为哪个技巧最有帮助，哪个您以前不知道？ 也许你也知道这里没有提到的东西？ 请务必与他人分享。

类似文章