专注于外贸建站,分享WordPress教程和Elementor教程

Elementor教程:编辑器入门常识12条

更新日期:2024-08-23
本系列教程
加入读者学习群
我用的页面编辑器
让我的客户网站GTmetrix测分A\A的主机Cloudways
独家优惠前3个月7折, 戳上方按钮注册即可自动带入优惠码LOYSEO
所赠主题插件价值>$49
主机送Astra Pro不限站点1年
gmail.comsina.com邮箱,注册易通过
遇到问题,联系我

本文是Elementor教程系列中的入门级教程,介绍12个Elementor编辑器的入门知识,让你快速熟悉它。本文中,我将Elementor的widgets统一命名为小部件,有时候我也会称它为元素块。

编辑器的构成区域

进入Elementor编辑器,我们能看到如下图所示的三部分:顶部工具栏、面板、画布。

Elementor教程:编辑器入门常识12条

顶部工具栏

在顶部工具栏中,你可以找到搭建页面所需要的工具和设置的入口,譬如:主题生成器、操作历史与修订、用户首选项(配置界面的明暗风格等)、键盘快捷键、退出编辑器、添加小部件、站点设置、结构导航、页面设置、响应式、搜索、预览、发布等等,更多教程,详见:Elementor顶部工具栏教程

面板

在左侧的面板之中,你可以找到设计页面所需的各种小部件,并可以将小部件点选拖拽到右侧画布之中;你还可以点击画布中的小部件,然后,面板中将出现这个小部件的设置功能。

画布

我们也可以将『画布』称之为内容区域,因为你要制作的页面、文章、产品等就放在此区域内。

你还可以在设置中切换当前页面的画布的布局(虽然我们很少会用上它),不同的布局,会给你呈现不同的画布构成,譬如,你选择Elementor canvas布局,那么画布就是空空的,没有页头、没有页脚,空白一片,并且,下图中你看到的布局的选项,并不是固定的(通常只有前4个),有些主题会增加布局的选项。

Elementor教程:编辑器入门常识12条

容器

创建容器

在画布之中,我们会接触到两类小部件,一种叫做容器(container),其他的小部件都必须位于容器之中,另一种就是其他各种类型的小部件,譬如文本、图片、相册、视频等等。

当你点击画布中的+号时

Elementor教程:编辑器入门常识12条

便能看到两种布局的选项,一种叫做Flexbox,另一种叫做Grid。

Elementor教程:编辑器入门常识12条

Flexbox提供了如下的预制结构,这些只是预制结构,你完全可以自行再设计其他类型的布局。

Elementor教程:编辑器入门常识12条

而Grid提供了如下的预制结构,相比Flexbox,Grid就是比较规矩的格子。

Elementor教程:编辑器入门常识12条

选好容器布局后,直接可以点击它插入页面之中,之后,你便可以将小部件添加到画布之中了。

Elementor教程:编辑器入门常识12条

编辑容器

如果你需要编辑容器,譬如调整容器的结构、向容器添加背景色、背景图片、调整宽度和高度、添加入场动画效果等等,那按照下图所示,点击容器的控制手柄,然后你将在左侧面板中看到三个标签页,分别是布局、样式、高级设置。

Elementor教程:编辑器入门常识12条

当你在容器上点击鼠标右键时,也能召唤出操作项来,譬如添加新容器、复制、粘贴、粘贴样式、重置样式、存为模板、删除等等。

Elementor教程:编辑器入门常识12条

小部件

将小部件添加到容器之中

点击下图所示两处的+号,都可以在左侧面板中显示小部件。

Elementor教程:编辑器入门常识12条

然后,你可以鼠标左键按住小部件,拖拽放入右边画布的容器之中。

Elementor教程:编辑器入门常识12条

你也可以直接单击所需要的小部件,它会自动出现在画布之中,然后,你需要自行拖拽调整它的位置,如果在画布中拖拽不到适合的位置,也可以使用下文中的栏目导航来进行调整。

移动小部件

移动小部件的方法有两种:

  1. 在导航/navigator中拖拽元素上下移动,如果元素较多时,建议在导航中定义元素的名称,以便识别
  2. 直接按住元素的编辑按钮进行拖拽移。(当鼠标悬停于元素上时,就会出现蓝色的编辑按钮)

详见下方的操作动图。

如何在Elementor中移动元素?(2种方法+视频)

编辑小部件

如同编辑容器一样,我们也可以编辑每个小部件。在画布中单击小部件本身,或者单击小部件的控制手柄,都能将面板切换成当前小部件的设置项,包括三个标签页:内容、样式、高级设置。

Elementor教程:编辑器入门常识12条

当你在小部件上点击鼠标右键时,也能召唤出操作项来,譬如复制、粘贴、粘贴样式、重置样式、删除等等。

Elementor教程:编辑器入门常识12条

搜索小部件

Elementor的小部件还蛮多的,如果你再安装一些Elementor扩展插件的话,那小部件就更多了,如果想快速找到自己需要的小部件,可以借助下图中的搜索功能。

Elementor教程:编辑器入门常识12条

设置最喜欢的小部件以实现快速访问

对于常用的小部件,你还可以将它『加入收藏』,放到『最爱』一栏。

Elementor教程:编辑器入门常识12条

如果你想选中多个小部件或容器进行操作,譬如复制、黏贴样式或删除等等,那可以在按住键盘ctrl(Window电脑)、command(苹果电脑)之后,在画布或导航中左键点选对应的小部件即可实现,也可以在导航中点选。下图就是多选的效果。

Elementor教程:编辑器入门常识12条

多选的小部件,我们依旧可以右键进行操作,譬如复制、删除等等。

Elementor教程:编辑器入门常识12条

帮助

容器和小部件的配置挺多,那如果你对这些配置摸不着北,可以在面板底部找到『需要帮助』,它会为你跳转到当前小部件的对应的官方说明文档之中。

Elementor教程:编辑器入门常识12条

推荐阅读:更多Elementor教程

点赞

0 / 5 0

Your page rank:

Picture of 外贸建站技术姐Bonnie
外贸建站技术姐Bonnie

Bonnie是LOYSEO的创始人,在建站领域有着超过14年的经验,热爱能将想法变为现实的WordPress,更是Elementor的忠实用户~

LOYSEO
让我的客户网站GTmetrix测分A\A的主机Cloudways
独家优惠前3个月7折, 戳上方按钮注册即可自动带入优惠码LOYSEO
所赠主题插件价值>$49
主机送Astra Pro不限站点1年
gmail.comsina.com邮箱,注册易通过
遇到问题,联系我