使用Elementor加快设计过程的提示

使用Elementor加快设计过程的提示

众所周知,Elementor是当今WordPress社区中最好的页面构建器之一。而且,它不再只是页面构建器。 Elementor的发展如此之快,您甚至可以使用免费的基本WordPress主题来设计功能全面的网站,而无需编写任何代码!


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

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

从预制模板开始

预制模板可以加快项目的开发速度。从头开始设计新页面会花费一些时间,而且经常会不断调整页面的布局和样式,从而浪费时间。这正是模板派上用场的地方。 Elementor的模板库是加快设计过程的绝佳资源。即使您不使用预制模板,也可以始终使用模板库作为灵感。只需单击一下即可轻松将模板直接导入到页面中.

Elementor模板可分为两部分。首先,例如,当您要从上到下导入预制页面时,可以导入包含其所有内容的完整页面(如“关于”或“联系”页面)。第二个选项是如果您只想导入设计的一个部分或块。例如,如果您喜欢服务,英雄,与我们联系或订阅部分中的一个部分,则可以执行此操作.

网上可以免费获得精彩的免费模板和高级模板集合.

Envato市场

Envato市场

Envato市场可能是最受欢迎的市场,不仅对于Elementor模板,而且对于WordPress主题和插件.

TemplateMonster

TemplateMonster

TemplateMonster是高质量模板资产的另一提供商,他们还提供一些免费模板.

Elementor模板库

Elementor模板库

Elementor模板库–是Elementor的本机模板仓库,新的Free和Premium模板经常出现.

使用热键

如果您仅用鼠标来使用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 + ?打开键盘快捷键帮助窗口
退出退出打开设置并跳转到退出到仪表板

页面的自定义CSS

您是否知道每个页面都有自定义CSS?是的,但是请注意,此功能仅包含在Elementor Pro版本中。作为解决方法,我将向您展示如何为每个页面添加自定义CSS。如果您只想在页面级别上添加小型自定义版本,则此技巧将为您节省金钱.

为此,您只需要利用HTML小部件和其中的这段代码即可:

看一下这个例子:

自定义代码

Elementor Finder搜索栏

通常,在进行页面设计时,您想跳到其他页面,设置,销售页面或其他任何地方,并且如果您:保存页面>返回仪表板>打开页面,可能会很耗时。 >搜索您要打开的页面。如果您不得不一次又一次地这样做,可能会浪费大量时间和精力。.

幸运的是,Elementor具有内置的解决方案,可以简化和加快设计过程。您不必使用所有麻烦,而只需使用Elementor Finder。您可以通过在搜索栏中搜索来直接跳至任何设置,模板,页面或主题部分。可以通过在WordPress仪表板中的任意位置单击Cmd / Ctrl + E键来访问Finder。观看此视频,了解您可以使用Finder进行的所有操作.

使用导航器

导航器是一个导航树窗口,可轻松访问页面构建器中的每个元素。这个小窗口使您可以浏览元素并轻松拖放小部件.

导航器对于长页面或具有复杂多层设计的页面以及组合Z索引,减去边距和绝对位置等的元素特别有用。它使您可以访问可能位于其他元素后面的元素句柄.

您可以通过以下三种简单方法之一访问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个现成的版块模板,例如联系方式,号召性用语,页眉,页脚,服务,关于,团队,服务,倒计时等等。目的.

WunderWP预制模板

包起来

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

您认为哪一条是最有用的提示,而您以前从未知道过哪一条?也许您还知道这里没有提到的内容?请与他人分享.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map