最新Elementor新手小白教程(详细图文讲解)

By | 12月 25, 2020

Elementor是一款WordPress网页构建器。通过‘拖放’元素,修改元素样式来搭建网站页面。即使你是不懂代码的小白,也能利用elementor搭建出完美,甚至高大上的网站。

虽然很多知名的主题也自带了网页构建器,比如Enfold,Avada,The theme 7等主题,但是相对于elementor还是不够灵活,而且Elementor提供相当丰富的网页元素。

今天给大家讲解怎么使用elementor搭建WordPress网站?

1.安装免费版本的Elementor


我们可以像安装其他免费的WordPress插件一样为WordPress安装Elementor。打开WordPress网站后台,安装插件。Dashboard -> Plugins -> Add new。(以英文版本WordPress后台为例)

搜索Elementor并通过点击“Install Now”按钮和“Active”按钮安装插件。一旦插件安装完毕,Elementor将带我们进入插件的欢迎屏幕。接下来,让我们为页面启用Elememtor页面构建器。出于文章教程的目的,我已经安装了Astra主题并创建了三个页面。

2. 在Page或者Post页面启用Elementor


你可以在新的和已有的Page/Post类型的上使用Elementor。所以,请随意使用任何类型的Wordpress页面。我想创建Home的内容,所以编辑Home页面。我们在编辑页面可以看到Edit with Elementor的按钮。点击启用elemtor.(古腾堡和经典编辑器都可以看到)

点击后,页面会自动跳转到Elementor的编辑页面。

在页面的左边,我们有Elementor选项和页面元素,它们将帮助我们构建页面内容。在页面的右边,是页面的容器页面,你可以拖放元素或小部件又名Elementor元素来构建页面内容。

3.设置全局谷歌字体

我要做的第一件事是设置页面的字体。我想要整个页面的内容使用“Ubuntu”谷歌字体。在Elementor界面上,点击屏幕左上角的“三栏”图标,即可进入“Global”Elementor选项。

下一步,点击Style下面的Default Fonts

然后,在“Default Fonts”下,选择“Ubuntu”或任何其他你喜欢的谷歌字体:
Primary Headline
Secondary Headline
Body Text
Accent Text
你可以选择任何你喜欢的字体组合。我真的很喜欢“Ubuntu”,所以我就这么做了。无论如何,一旦你设置好字体,点击“应用”按钮来保存更改。

Elementor中设置配色方案
下一步,我们设置网站的配色方案。要做到这一点,点击“三栏”图标回到“Global Options”,这一次,点击“Default Colors”,如果你喜欢,可以使用下面的配色方案:

 

 

正如你所看到的,我已经从徽标中选取了配色方案。要更改颜色,只需单击颜色框。一旦你完成了播放,请不要忘记点击保存按钮。最后,通过点击“后退箭头”图标或“Apps”图标,退出Elementor界面的“全局选项”部分。

2.理解用Elementor构建的页面的构建块
Elementor构建页面是用过块元素来构建的,通俗的将就是先在页面中的每一行中插入几列。为了添加列数,我们点击页面的右侧的红色+按钮,就会给出我们选择列数的按钮。(根据我们对网站的规划选择)

添加好后,我们就可以往里面拖放我们想添加的网页Elementor元素。比如文字,图片或者视频。当我们将元素添加好后。Elementor工具栏自动就会进入编辑状态。
注意,当选择了列数后,如果我们觉得不合适,我们依然可以删除重新添加。而且我们也可以控制每一列的占行比例。比如当我们选择两列的话,默认是各占50%,但是我们依然可以改变这个比例。