tips
教程需要,本站采用的国外服务器,国内访问较慢,感谢耐心等待。

Elementor教程

使用拖拽操作方式设计你自己的WordPress网站
#!trpst#trp-gettext data-trpgettextoriginal=3#!trpen#播放影音#!trpst#/trp-gettext#!trpen#

认识Elementor

Elementor是一款WordPress平台的页面构建器,通俗点说就是用来设计网站外观的,例如你现在正在访问的ELE教程网就是使用Elementor设计的。

它的操作界面就像右图一样,左侧是元素操作区域,右侧是可视化的编辑效果展示区,所见即所得。

Elementor带有免费版和高级版,免费版也可以设计网页,高级版可以完全对网站进行定制化,一个优秀的主题配合免费版Elementor也能够满足绝大多数网站的设计需求。

elementor截图

Elementor使用教程

一、基础设置

在安装好Elementor之后,网站后台左侧可以看到对应的选项,点击设置菜单。

Elementor基础设置

在设置界面,文章类型这里根据自己的需要选择,比如有些人需要用elementor编辑产品详情页,那么就勾选产品即可。(安装了WooCommece插件后才会出现产品类型)

Elementor设置

默认颜色和默认字体可以直接禁用,通常情况都不会用它默认的颜色跟字体。

其他设置可以暂时保持默认,等你网站搭建完毕之后需要使用到或者优化的时候再去设置。

二、使用Elementor设计页面

通常情况,我们使用Elementor使用最多的就是页面设计。操作步骤如下:

1、WordPress后台,新建页面,然后选择使用Elementor编辑。

新建页面使用Elementor编辑

2、进入Elementor的编辑页面,页面功能介绍请参见下图:

Elementor编辑界面

在元素区域可以看到很多的小部件,比如内部区段,标题,图像等。

我们一个网站的页面上最常见的内容就是文字和图像,所以专业版的那些小部件能不能用影响不大,只是使用Elementor Pro可以使用在线素材库,可以降低入门难度。

3、点击文件夹图标,可以导入在线素材库里面的页面模板或者模块。

导入Elementor素材

三、Elementor基础操作

素材库里面的模板也许不能满足你的网站需求,这个时候我们就可以自己从零开始来设计这个页面。

想要设计页面,首先我们脑子里要有一个大概的布局,例如你现在看到的ELE教程网的首页,大概布局是顶上一个左右分的banner,下面左边文字右边图片的布局,再下面是文本内容。

elementor页面布局

我们心里有了这个网页的大概布局之后,就可以开始在页面上拖拽操作起来了。

首先,点击加号图标,添加一个2栏的区段。

elementor添加区段

然后左边是文字,右边是一个视频播放按钮,直接把左侧的元素拖进去。

elementor元素

从上图可以看到,我们设计顶部banner这部分的内容,使用到了以下几个元素:

  1. 标题
  2. 文本编辑器
  3. 图标列表
  4. 按钮
  5. 视频

内容填充上去之后,就是设置显示效果,这个时候就需要调整每个元素的样式。

例如首先给整个段添加一个背景色,选中整个段,然后切换到样式,添加背景颜色为渐变,调整颜色和角度。

elementor设置背景色

如果内容太靠近顶部和底部,想要留一些空白,切换到高级设置里面添加内距或者外距。

elementor调整内距

接着设置文字的字体大小和颜色,选中你需要修改的字体,然后切换到样式就可以调整了。

elementor设置颜色

同样的设置方法,把内容样式都调整好了之后,觉得左边内容太多,而55分的布局太窄了,想要增大点,就点击左边的栏,然后修改宽度百分比。

elementor调整栏宽度

剩下的内容添加方法都是大同小异的,最后做完了还需要设置手机端的显示效果,点击左下角的响应式按钮,然后点击顶上的手机图标就可以单独为手机端调整对应元素的显示效果。

elementor设置手机端。

调整完毕之后,就可以发布了,这样我们就设计了第一个页面,使用同样的方法,把其他页面设计出来就OK了。

更多的Elementor教程请前往ELE教程网的博客查看。

使用Elementor构建整个网站

如你所见,ELE教程网就是使用的Elementor制作的整个网站,如果你也想这样做,那么推荐使用Hello Elementor主题Elementor Pro来搭建。(Hello Elementor是Elementor官方制作的快速、灵活、免费的WordPress主题。)

近期更新的Elementor教程

ELE教程网是专门分享Elementor教程的网站,下面是我们近期更新的Elementor教程,欢迎在教程文章尾部留言交流。