Elementor 高级提示和技巧

已发表: 2021-11-29

您是否正在寻找一种方法来使用提示和技巧来花费更少的时间来构建网站?

您是否对学习 Elementor 高级提示和技巧感到好奇? 就它而言,Elementor 是市场上最省时的页面构建器。

Elementor 是一个很棒的工具,它为您提供了很多自定义功能。 现在,它随着时间和精力的发展而发展,让您无需任何编码即可设计功能齐全的网站。 它有许多惊人的技巧和窍门。 为此,Elementor 提示和技巧可以为您提供很多帮助。

为什么要使用 Elementor 高级提示和技巧?

提示和技巧基本上是有用的提示,也是让您的工作更舒适的更简单方法。 当您使用 Elementor 时,您可以使用 Elementor 高级提示和技巧来进一步丰富您的网站建设体验。

众所周知,新工具需要时间来适应。 如果您按菜单方式执行任务,那将花费您很长时间。 这就是为什么您需要掌握一些技巧和窍门以节省您的时间。 使用 Elementor 高级提示和技巧,您可以轻松构建网站并对其进行自定义,而不会浪费时间。

Elementor 高级提示和技巧如何帮助您?

Elementor 高级提示和技巧在工作领域非常重要。 他们可以像这样帮助你——

  • 帮助您更快地构建页面并改善您的工作流程。
  • 在 Elementor 中构建专业页面。
  • 使用高级功能并为您的页面添加视觉风格。

在本文中,我将收集一些 Elementor 高级技巧和窍门,并对其进行描述,以向您展示如何使用它们。 您可以立即轻松地实施它们,这将对您有很大帮助。

以下是一些 Elementor 高级提示和技巧的列表:

  1. 使用查找器
  2. 使用 Elementor 模板
  3. 使用导航器
  4. 使用热键或快捷方式
  5. 保存您的 Elementor 模板
  6. 首先在 Elementor 中找到解决方案
  7. 有效地使用全局小部件
  8. 上传您自己的字体
  9. 将入口动画添加到您的小部件/部分
  10. 添加形状分隔线
  11. 为您的图像添加滤镜效果
  12. 设置默认字体
  13. 设置默认颜色
  14. 添加全高部分
  15. 添加视频背景
  16. 为图像背景使用自定义位置
  17. 更改页面布局设置
  18. 添加视差效果

让我们开始吧!

1.使用查找器

Elementor 高级提示和技巧

如果您花一些时间使用“Finder”,您将无法抗拒使用它。 因为它在菜单顶部占有一席之地。 在 Elementor 高级提示和技巧中,使用 Finder 是最可取的。

Finder 使在 Elementor 页面和 Elementor 中的仪表板设置之间切换变得非常容易。 通过使用提示和技巧,您不必一直关闭 Elementor 并在 WordPress 中再次搜索页面。

您可以在 WordPress 的任何地方使用 Finder 来节省大量时间。 此功能可帮助您通过在搜索栏中搜索直接跳转到任何 Elementor 模板、页面、设置或主题的一部分。 从 Elementor 设置或使用 Cmd/Ctrl + E 键访问 Finder。

2. 使用 Elementor 模板

点击这里

选择模板

Elementor 高级提示和技巧中的这一点有点明显,但我们可以提一下。 不需要每次都重新发明轮子。 您没有网站设计,或者您还没有完全熟悉 Elementor,不用担心! 只需使用 Elementor 库提供的标准模板。

您可以通过轻松找到模板来使用 Elementor 编辑页面。 只需单击“文件夹”图标,库就会立即出现。 毫无疑问,通过在谷歌中搜索“元素模板”这个关键字,你会发现更多漂亮的模板。 您可以将此 Elementor 高级提示和技巧应用于您的工作。

3. 使用导航器

Elementor Navigator 可帮助您轻松保持页面概览。 此外,您可以使用 Navigator 轻松地将部分/列/小部件移动到另一个位置。 在所有 Elementor 高级提示和技巧中,您可以将其用作更好的选择。

当您要创建长页面时,Navigator 对这项工作非常有用。 Navigator 是 Elementor 中使用率最低的功能,基本上可以让您从一个小面板导航整个页面。

您可以通过单击使用 Navigator 访问任何元素。 您可以轻松地在一个部分中查看小部件,也可以直接从导航器中删除它们。

在 Elementor 面板的左下方,您将看到导航器按钮,您只需单击即可打开它。 还有另一种方法可以做到这一点 - 右键单击​​小部件并选择导航器。

4.使用热键或快捷方式

需要在页面或设置之间快速切换? 或者您是否需要快速设计页面、保存内容、撤消更改、打开 Elementor 库或使用查找器?

如果您使用 Elementor,您可以使用许多键盘快捷键快速完成任务。 Elementor 高级提示和技巧有一个显着的功能,例如使用快捷方式。

借助快捷方式快速完成简单的任务,让自己更有效率。 事实上,捷径无疑让您的工作更轻松、更快捷。 您可以加快设计过程,因为快捷方式已合并到页面构建器中。 您将在 Elementor 中获得许多高级自定义快捷方式。

提示:您可以通过使用“Cmd/Ctrl + ?”打开快捷方式参考表来查看所有快捷方式的列表。

以下是 Elementor 中可用的不同快捷方式的列表:

操作快捷键:

转到快捷方式:

5. 保存您的 Elementor 模板

假设您为您或客户做了一个不错的设计,并希望稍后在您自己的网站上使用 Elementor 再次使用它。 在这种情况下,您必须从 Publish/Update 按钮将其另存为模板,如下左图所示。

这给您带来的好处是您无需为每个实例重复重新设计它。 为此,用户也对速度和快速访问感到自由。 您可以像插入任何其他模板一样插入已保存的模板。

如果要将部分保存为模板,请按照以下说明进行操作:

  • 打开 Elementor 并右键单击该部分
  • 点击“另存为模板”
  • 为您的模板命名,您就完成了。

但是,如果您想将整个页面保存为模板,请按照以下说明进行操作:

  • 单击“发布/更新”按钮旁边的绿色箭头图标
  • 单击“另存为模板”选项
  • 为您的模板命名,它将被保存。

所有模板,包括部分和页面模板都将保存在 Elementor 模板库中。 Elementor 还允许您导出模板。 为此,在您的 WordPress 仪表板中,转到 Elementor>Saved Templates。

从此页面,您可以下载 .json 格式的已保存模板。 然后,您可以在任何其他网站上使用这些模板,而无需再次重新创建整个模板。

6.先在Elementor中找到解决方案

如果您在做某事时遇到问题并花费数小时在网站上寻找一个解决方案的插件,那么请在 Elementor 中找到解决方案。 令人惊讶的是,您可以在这里找到解决方案,因为 Elementor 替换了您网站上的许多插件。

当然,如果您使用 Elementor 和 Element Pack 插件,则无需为常规网站寻找任何其他插件。 通过将 Elementor pro 和 Element Pack 视为专业版,您可以获得一些巨大的好处。

7. 有效地使用全局小部件

首先,点击这里

然后,输入名称并单击“保存”

如果您有使用复制/粘贴来重用小部件的习惯,您可以从全局小部件开始,以加快您的工作进程。 Elementor 有一个名为“全局小部件”的功能,可让您定义小部件并在不同页面中使用它。

一旦一个小部件被定义为全局,对其所做的更改将影响添加该小部件的所有页面。 如果您的网站有许多页面具有相同的小部件,请将其视为黄金功能,即:CTA 按钮、推荐等。

让我们看看如何在 Elementor 中使用全局小部件:

  • 右键单击小部件,然后单击“另存为全局”。
  • 为您的小部件命名,然后单击“保存”。

将其转换为全局小部件后,您将在小部件周围看到黄色边框,并且可以像其他普通小部件一样对其进行编辑。 您可以从 Elementor 的全局选项卡将全局小部件添加到不同的页面,并在必要时使用它以避免冲突。

8. 上传您自己的字体

您可以使用来自 Google Fonts 的大量字体创建令人惊叹的页面。 但如果你想在人群中脱颖而出,你可以使用自定义字体。

您可以在 Elementor 中上传自己的字体并在您的页面上使用它们。 这是您可以使用的惊人的 Elementor 高级提示和技巧。

在 Elementor 中上传自定义字体的过程:

  • 在您的 WordPress 仪表板中,转到 Elementor>Custom Fonts。
  • 在自定义字体页面中,单击“添加新字体”以上传您的自定义字体。
  • 您需要上传以下格式的字体:.woff、.woff2、.ttf、.svg、.eot 等。

如果您没有字体的所有格式,您可以使用字体转换器创建不同的格式。 确保上传字体的所有变体。 您可以在上传自定义字体时选择字体的粗细和样式。

9. 将入口动画添加到您的小部件/部分

在在线市场中,用户体验是一个至关重要的问题。 如果你给你的用户一个令人愉悦和流畅的用户体验,他们会涌向你的网站。 您甚至可以通过包含一些微妙的视觉元素来更改网站的整个用户体验。 这是一个很棒的 Elementor 高级技巧和窍门。

您只需将入口动画效果添加到您的小部件和部分即可。 Elementor 提供了许多功能来为您的小部件添加动画。

如何在 Elementor 中添加入口动画效果? 遵循这些:

  • 选择小部件并转到高级>运动效果。
  • 从此选项卡中,在众多选项中为您的小部件选择入口动画。
  • 设置动画持续时间和延迟。

10.添加形状分隔线

形状分隔符是添加到部分顶部/底部的常见功能,我相信您已经使用过它们。 这对您来说是惊人的 Elementor 提示和技巧。 您可以通过添加形状分隔线而不是使用普通分隔线来使您的页面更具吸引力,这样看起来会更好。

按照说明添加形状分隔符:

  • 选择要添加形状分隔线的部分
  • 转到样式>形状分隔线
  • 选择显示在该部分的顶部或底部

您可以选择 15 多种形状分隔器。 一旦您选择了您喜欢的形状,您将能够自定义颜色、更改高度、翻转分隔线并将形状分隔线放在前面。

11.为您的图像添加滤镜效果

首先,点击这里

然后,随心所欲地改变

基本图像自定义,即:更改对齐方式、图像大小和宽度可以在 Elementor 上完成。 您可以在 Elementor 中进行基本的图像编辑。 这是一个适合您的不错的 Elementor 高级提示和技巧。

使用图像小部件样式选项卡中的 CSS 过滤器,您可以对图像进行基本编辑。 您可以调整图像的亮度、对比度、饱和度和色调。 即使您可以模糊图像,并更改您需要的任何内容以使其在页面上看起来更好。

12.设置默认/全局字体

每次创建页面时都必须更改字体的情况很常见。 如果您使用此 Elementor 高级提示和技巧,并且设置将出现在每个新页面上的网站默认字体,则不会发生这种情况,您不必担心。

您可以选择网站的默认/全局字体。 您可以这样做:

  • 单击 Elementor 中左上角的汉堡菜单以打开样式和设置配置菜单。
  • 您将在此处看到默认字体选项。 单击此选项并设置默认字体。 您可以为主要标题、次要标题、正文文本和重音文本选择不同的字体。

一旦您选择了默认/全局字体,它们将在每个新页面或编辑页面上自动选择。 请注意,默认字体在您明确应用字体的情况下不起作用。

13.设置默认/全局颜色

在 Elementor 高级提示和技巧中,这类似于默认/全局字体。 您可以像设置默认字体一样设置默认/全局颜色。 但与默认字体不同,此功能将您选择的颜色简单地添加到 Elementor 的颜色选择器预设中。

尽管如此,这是一个有用的功能,因为您不必每次都复制和粘贴颜色代码。

要设置默认颜色,您必须:

  • 单击左上角的 Elementor 汉堡菜单,然后单击默认颜色。
  • 选择默认颜色。

您可以选择主要颜色、次要颜色、主体颜色和强调色。 您还可以选择预制调色板作为默认颜色。

14.添加一个全高部分

您可以添加一个覆盖整个浏览器屏幕的部分。 这也是 Elementor 高级技巧和窍门中的一个不错的选择。 您可以使用 Elementor 轻松创建全高部分。

为此,请按照以下步骤操作:

  • 选择要制作全高的部分。
  • 在布局设置中,单击高度。
  • 通过单击“适合屏幕”进行设置。

你完成了! 这将自动使整个部分适合浏览器屏幕。

15.添加视频背景

Elementor 高级提示和技巧之一是添加视频背景。 您可以轻松地将令人惊叹的视频背景添加到您的页面。

要在 Elementor 中添加视频背景,您必须:

  • 选择部分
  • 转到样式>背景
  • 将背景设置中的背景类型更改为视频。
  • 选择一个视频
  • 添加视频链接,设置视频的开始和结束时间。

还有一个选项可以选择后备图像。 此图像替换平板电脑和移动设备上的背景视频。

16.为图像背景使用自定义位置

初学者不知道如何正确设置背景的位置,这是最大的问题之一。 不用担心! 为图像背景使用自定义位置是 Elementor 可以解决问题的高级提示和技巧之一。

有一些选项可让您设置图像背景的位置。 如果您的背景图像仍然没有定位,您可以设置自定义位置。

为此,您必须遵循以下说明:

  • 转到背景图像的样式设置
  • 点击位置设置
  • 选择选项,即:左上、右上、左中等。

自定义位置还有另一个选项。 此选项可让您轻松设置图像的 x 和 y 位置。 这对于使该部分与其他位置选项正确匹配非常有帮助。 您可以使用此选项为移动设备定位图像。

17.更改页面布局设置

许多新的 Elementor 用户并不知道这是另一个功能。 它是 Elementor 高级技巧和窍门之一。 您可以使用页面布局设置自定义页面布局。

如何更改页面布局:

  • 点击左下角的设置按钮
  • 选择常规设置
  • 更改页面布局,即:默认布局、Elementor Canvas、Elementor Full Width。

让我们看看这些布局做了什么:

  1. 默认布局:默认布局包括主题的页面布局。
  2. Elementor Canvas:Elementor Canvas 可让您从头开始并从空白画布设计页面。
  3. Elementor Full Width:Elementor Full Width 使内容全宽。 它允许从头开始设计,包括页眉和页脚。

18.添加视差效果

Elementor 高级技巧的另一个惊人技巧是添加视差效果。 它使页面更具吸引力和可用性。 除了作为一项设计功能外,它还创造了一个引人入胜的环境并提供令人满意的用户体验。

您可以使用 Elementor 新推出的动态效果添加不同的视差效果。 它有两种类型:

  1. 滚动效果:这些是您在页面上滚动时的效果。 可以添加垂直和水平滚动效果。
  2. 鼠标效果:有助于营造深度感。 它使元素相对于鼠标的移动而移动。

添加视差效果:

  • 选择要添加效果的小部件。
  • 转到高级>运动效果。
  • 启用您要选择的选项并根据需要对其进行自定义。

可以轻松调整此小部件的透明度、模糊、缩放、旋转和其他属性。

结论

这些是我在上面为您讨论的一些很酷的 Elementor 高级提示和技巧。 我希望这将帮助您加快工作速度。

再见。 祝你今天过得愉快!