Elementor教程-创建第一个页面

上期Elementor教程回顾:Elementor教程-初识elementor-神奇的WordPress页面生成器

我们上一期教程,完成了插件的安装,本节课程将分享如何使用Elementor来创建页面的基本操作。

Elementor教程-模块介绍

Elementor的操作主要依赖于三个模块:块(Sections)、列( Columns)、小部件(Widgets)。

Sections 是elementor中最主要的模块, Columns被包含在Sections中,Widgets应用在Columns中。

Sections_Columns_Widgets图示说明
Sections_Columns_Widgets图示说明

用户可以通过快捷按钮(Handle)对其进行编辑。如下图所示,鼠标移动至对应位置,会自动显示快捷按钮。

Handle

Elementor Handle

当然你也可以通过右键对3个模块进行编辑操作。右键功能从2.1版本就加入了,对用户提供了更加便利的操作方式。关于右键的更多内容,请点击Elementor教程-右键操作

Handle_RightClick
Handle_RightClick

Elementor教程-Sections操作介绍

在Elementor编辑页面,可以点击红色加号按钮创建自定义布局的块,也可以点击导入按钮从现有模版库进行导入。

Elementor教程-新增自定义快或从模版库导入
Elementor教程-新增自定义快或从模版库导入

自定义块(Sections)

点击新增自定义按钮,会提示要求选择块的布局结构,也就是当前块,按照那种分列方式创建。

Elementor教程-选择自定义块结构
Elementor教程-选择自定义块结构

如上图所示,我们选择3/3/6的布局结构,点击后,会在页面自动创建一个相同的块。

Elementor教程-选择自定义块结构 -3/3/6结构布局

右侧红框内为我们自定义的结构布局,左侧显示的是该块对应的配置选项。

更多关于块(Sections)的更多内容,请点击Elementor教程-Sections概述

自定义列(Columns)

当我们根据自定的布局创建好块以后,我们可以对列进行编辑,以达到我们的要求。

可以右键点击列的快捷按钮,选择Add New Column,新增一列。

Elementor教程-自定义列-新增列

也可以将鼠标移动到2列之间,当鼠标变成拖拽图标时,按住拖拽,可以快速的调节列的宽度。

Elementor教程-自定义列-修改列宽

关于列(Columns)的更多内容,请点击Elementor教程-Columns 概述

自定义小部件(Widget)

确定好列的最终布局后,我们可以点击对应的列,从左侧的面板拖动需要的小部件至列。这里我们假设需要将“按钮”部件,增加到第一列。我们直接拖拽即可。

Elementor教程-新增小部件

推拽完成后的效果如下图

Elementor教程-编辑小部件

关于小部件(Widget)的更多内容,请点击Elementor教程-Widget 概述

发表评论

电子邮件地址不会被公开。 必填项已用*标注