Elementor教程

— 世界领先的WordPress可视化页面构建器插件elementor使用指南

WordPress上面有很多优秀的可视化网页设计工具(Website Builder),而Elementor更是这些页面构建器中的佼佼者,本文奶爸建站笔记将为大家介绍如何一步一步使用Elementor来设计网站。

什么是Elementor?

Elementor是WordPress平台上的一款可视化页面构建器插件,你可以不需要具有专业的编程能力,就可以通过Elementor拖拽式设计和生成网页,例如你看到的这篇Elementor教程,就是通过Elementor设计和制作出来的。

Elementor版本区别

Elementor分为免费版和高级版,高级版也就是付费版,价格为59美元/网站/年起,Pro(高级)版拥有更多的小部件、网页模板、设计素材,并且支持生成WooCommerce页面,能更加完全的定制网站外观和功能。(具体区别

如果对网站设计要求不高,免费版的elementor就够用了,奶爸建站笔记目前使用的是elementor免费版+Ultimate Addons For Elementor 设计的。

你是否需要用到Elementor?

elementor只是众多页面构建器的其中之一,如果你还没有使用过其他的页面构建器,那么直接从elementor入手是一个不错的选择。如果你自己有对网站设计的想法,但是不会写代码,那么elementor就是你所需要的工具。

Elementor Pro破解版靠谱吗?

网上有Elementor破解版下载,在确保破解资源干净的情况下,是可以使用的。不过elementor pro激活是采用在线激活模式,破解版的elementor也只能使用元素小工具,并不能使用在线的素材,所以真的有需要,建议购买正版。Elementor Pro正版购买地址。(如果官方的售价你觉得太贵了,可以直接找奶爸购买,仅售99元/年/站点,正版保证。)

Elementor安装教程

使用Elementor的前提是你已经有了一个WordPress网站,如果还没有,请参见奶爸之间的WordPress安装教程,先搭建一个WordPress网站。

进入WordPress后台,选择插件,安装,然后搜索elementor,找到截图中的这个图标,安装并且激活。(或者从这里下载安装包后上传到网站上安装。)

安装Elementor教程

安装完毕后点击激活(Activate)按钮,会出现下图。

elementor引导

提示你创建一个Elementor账号,免费版的话创建了也没什么意义,直接跳过就好。

如果你想要购买高级版,可以到奶爸这里购买

elementor 使用向导

让你使用它们的hello主题,这个主题是一个完全空白的主题,任何东西都要你通过elementor去设计,不建议新手使用,自己没设计功底做出来的网站会很丑。推荐使用astra这种简单的主题。

elementor上传LOGO

让你上传网站LOGO,如果还没准备好,也可以后面再传。

elementor使用教程

直接跳过。

elementor默认界面

激活成功后,在你网站后台左边的菜单里面,就可以看到Elementor对应的菜单入口。

elementor设置

提示:如果你购买了elementor Pro,那么还需要手动上传pro的安装包到插件界面安装,然后激活才能使用Pro的功能。

Elementor使用教程

安装完毕Elementor,接下来我们就一起来看看怎么使用Elementor进行网站界面设计。WordPress默认主题对于普通用户来说,想要调整的美观是比较难的事情,所以我们这里推荐大家安装Astra这款免费小巧的主题

创建第一个elementor页面

1、在WordPress后台,选择新建,页面。

新建elementor页面

2、点击最顶上的使用Elementor编辑按钮,出现的界面就是Elementor的工作界面。

使用elementor编辑

3、Elementor工作区介绍,在打开的页面最左边的,就是Elementor的小工具,带锁的就是Pro版本的功能,需要付费购买。右边就是你网站页面的可视化编辑区。

elementor工作区域

新版Elementor第一次创建页面的时候,会提示你是否开启Flexbox Container,如果开启后上图中“内部元素”会变为“Container”,两则的设置上有一定的不同,本教程暂不做Flexbox Container部分的介绍。

使用Elementor设计页面教程

接下来奶爸教大家如何使用Elementor来设计页面,当然,设计的前提是你知道自己要把这个页面设计成什么样子,你可以先画一个草图,然后慢慢用elementor设计出来。

使用Elementor设计页面有两种方法:1、完全自己设计;2、导入设计好的模板修改。

最基础的elementor使用方法如下:

elementor设计页面方法

①、在左边的这些元素,你需要使用什么,就按住直接拖动到右边的可视化编辑区域。

②、这个加号可以新增段,你可以理解成新增加一块内容区域,和上一块内容分开。

③、这里是添加模板,点击后你会发现里面分为:模块、网页、我的模板。

elementor模板库

这些模板库里面,带有Pro标志的,就是意味着要Elementor Pro才能使用,我们这里随便导入一个网页来作为演示。

点击插入,然后需要你使用elementor账号进行连接,没有elementor账号的点击这里注册一个。

elementor导入模板

成功导入后,就如上图的样子。

我们需要修改什么地方,就点击那个区域,然后左边就会出现对应的元素设置窗口。

elementor设置界面

如果碰到不想要的部分,直接右键点击删除就可以了。

右键删除elementor元素

如果需要新增内容,就点击加号,然后选择段,再把要添加的内容拖进去,例如图片、文本、标题、视频这些内容。

使用现有模板库里面的页面进行设计相对来说更加简单,便于新手学习和研究,当一切就绪后,点击发布/更新按钮,就可以完成这一个页面的设计了。

免费Elementor功能增强教程

Elementor Pro的价格你觉得太贵不值得购买(找奶爸可以99元购买哟),奶爸教你几招免费获得elementor功能增强的技巧。

进入WordPress后台插件安装界面,搜索elementor之后,你会发现有很多标题带有elementor的插件,如下图:

elementor相关插件

例如我们安装Essential Addons和Premium Addons后,在使用elementor编辑器设计页面的时候,左侧的元素区域就会多出很多本身没有的功能。

elementor功能增强

一些elementor Pro上的功能,通过安装第三方Addons也可以实现,不过不建议安装太多的扩展插件,因为不同的插件会包含不同的js和css等文件,容易引起网站打开速度变慢。

Elementor Pro高级功能使用教程

虽然通过第三方插件可以扩展免费版elementor的功能,不过一些高级的功能还是没有办法替代的,这里奶爸就教大家如何使用elementor pro的一些高级功能。

使用elementor pro你可以完全从头规划你网站的各种配置,例如主题颜色、文字、排版、按钮的样式,如下图:

elementor pro高级功能

设置好全局样式之后,可以回到主题构建器,自己拼凑一个想要的网站设计。

elementor主题构建器

可以看到,你可以自己设计网站的header、footer、Single Post、Single page等页面,如果你安装了WooCommerce电子商务插件的,那么电商页面也可以自己设计。

例如我们选择一个Header,点击创建,然后会弹出一个模板库,里面所有的预制header模板你都可以直接导入使用,不满意也可以自己手动设计。

elementor头部设计

设计好了之后,点击发布,会出现选择在哪些页面显示的选项,如下图。

elementor显示位置

你可以设置整个网站(entire site)都显示,或者只是部分页面显示这个头部布局,其他的页面也类似,这就为你网站自定义提供了很大的自定义空间。

elementor模板库

在elementor pro的在线模板库里面包含了很多的预制模板,包括整个网站的,或者某一个部分功能的模板,使用pro都可以直接导入使用,也可以导入后自己修改。对于新手来说,无疑这是一个很强大的功能。

超便宜购买正版elementor pro

Elementor使用常见问答

如果你安装了专业的幻灯片插件,例如Slider Revolution这种,那么直接在编辑页面的时候,选择简码,然后把幻灯片的短代码粘贴进去就可以了。

elementor短代码

如果你没有安装任何Slider插件,那么也可以使用elementor pro的Slider元素创建。

elementor Slider元素

elementor上面的文字颜色和大小都可以单独设置,首先,找到你需要修改的文字元素,例如文本编辑器,然后选择样式标签页,就可以看到设置文字颜色和大小的地方了。

elementor文字颜色和大小修改

外贸网站建设上,网站的询盘表单是必备的一个需求和功能,怎么使用elementor制作联系表单呢?

首先,你需要安装一个联系表单插件,直接在后台插件库搜索contact就会出来很多免费的联系插件,安装好之后,创建一个询盘表单,然后复制短代码到Elementor里面添加简码元素即可。

页面上的跳转效果专业术语叫做锚点,这里涉及到一点html基础知识,例如这篇elementor教程的目录功能点击后可以跳转。奶爸这里使用的是文章目录插件

不过我们也可以手动使用elementor创建锚点。点击你想要跳转到的元素或者段,然后高级里面输入一个唯一的id值。

elementor添加ID跳转。
然后在需要跳转的按钮或者连接上,输入当前文章的网址#id就可以了(id为你自己设置的那个,截图上为jump1)

网站头部和底部内容默认使用elementor是没有办法修改的,我们需要另外安装一个插件:Elementor – Header, Footer & Blocks Template,安装并且激活插件,接着就可以在主题菜单的内容区块处看到。

elementor添加头部和底部

在elementor的左侧工具栏最底下,点击电脑图标,切换到手机端,就可以编辑网页在手机上的显示效果了。

elementor手机端

更多elementor教程

如果有没能解答你elementor使用问题的教程,可以在本文末尾留言,我会适当更新相关操作说明到本文。

66人评论了“Elementor教程,一文学会用Elementor建网站”

  1. 小有名气的男士

    奶爸您好,我的后台页面添加了一个页面模板修改后。出去看我的页面缺三少四且背景颜色也不对。后台确实没问题的求指教

  2. 最好出个视频教程一步一步的操作各个部件,看了很多教程没有一个有用的,全部是英文,而且讲的都一样,没一个我遇到的问题。

  3. 我在插件商店下载了这个编辑器后,去使用它创建新页面时,那个工具根本拖动不了。上面教程也写了把标题直接按住拖到里面,但是我的脱不出来。这个有办法解决吗

      1. 谢谢呀 其实我第三天重新用这个插件的时候可以正常使用了。第一天安装之后 死活用不了,尝试好多次卸载—安装—卸载

发表回复

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

滚动至顶部