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,找到截图中的这个图标,安装并且激活。(或者从这里下载安装包后上传到网站上安装。)
安装完毕后点击激活(Activate)按钮,会出现下图。
提示你创建一个Elementor账号,免费版的话创建了也没什么意义,直接跳过就好。
如果你想要购买高级版,可以到奶爸这里购买。
让你使用它们的hello主题,这个主题是一个完全空白的主题,任何东西都要你通过elementor去设计,不建议新手使用,自己没设计功底做出来的网站会很丑。推荐使用astra这种简单的主题。
让你上传网站LOGO,如果还没准备好,也可以后面再传。
直接跳过。
激活成功后,在你网站后台左边的菜单里面,就可以看到Elementor对应的菜单入口。
提示:如果你购买了elementor Pro,那么还需要手动上传pro的安装包到插件界面安装,然后激活才能使用Pro的功能。
Elementor使用教程
安装完毕Elementor,接下来我们就一起来看看怎么使用Elementor进行网站界面设计。WordPress默认主题对于普通用户来说,想要调整的美观是比较难的事情,所以我们这里推荐大家安装Astra这款免费小巧的主题。
创建第一个elementor页面
1、在WordPress后台,选择新建,页面。
2、点击最顶上的使用Elementor编辑按钮,出现的界面就是Elementor的工作界面。
3、Elementor工作区介绍,在打开的页面最左边的,就是Elementor的小工具,带锁的就是Pro版本的功能,需要付费购买。右边就是你网站页面的可视化编辑区。
使用Elementor设计页面教程
接下来奶爸教大家如何使用Elementor来设计页面,当然,设计的前提是你知道自己要把这个页面设计成什么样子,你可以先画一个草图,然后慢慢用elementor设计出来。
使用Elementor设计页面有两种方法:1、完全自己设计;2、导入设计好的模板修改。
最基础的elementor使用方法如下:
①、在左边的这些元素,你需要使用什么,就按住直接拖动到右边的可视化编辑区域。
②、这个加号可以新增段,你可以理解成新增加一块内容区域,和上一块内容分开。
③、这里是添加模板,点击后你会发现里面分为:模块、网页、我的模板。
这些模板库里面,带有Pro标志的,就是意味着要Elementor Pro才能使用,我们这里随便导入一个网页来作为演示。
点击插入,然后需要你使用elementor账号进行连接,没有elementor账号的点击这里注册一个。
成功导入后,就如上图的样子。
我们需要修改什么地方,就点击那个区域,然后左边就会出现对应的元素设置窗口。
如果碰到不想要的部分,直接右键点击删除就可以了。
如果需要新增内容,就点击加号,然后选择段,再把要添加的内容拖进去,例如图片、文本、标题、视频这些内容。
使用现有模板库里面的页面进行设计相对来说更加简单,便于新手学习和研究,当一切就绪后,点击发布/更新按钮,就可以完成这一个页面的设计了。
免费Elementor功能增强教程
Elementor Pro的价格你觉得太贵不值得购买(找奶爸可以99元购买哟),奶爸教你几招免费获得elementor功能增强的技巧。
进入WordPress后台插件安装界面,搜索elementor之后,你会发现有很多标题带有elementor的插件,如下图:
例如我们安装Essential Addons和Premium Addons后,在使用elementor编辑器设计页面的时候,左侧的元素区域就会多出很多本身没有的功能。
一些elementor Pro上的功能,通过安装第三方Addons也可以实现,不过不建议安装太多的扩展插件,因为不同的插件会包含不同的js和css等文件,容易引起网站打开速度变慢。
Elementor Pro高级功能使用教程
虽然通过第三方插件可以扩展免费版elementor的功能,不过一些高级的功能还是没有办法替代的,这里奶爸就教大家如何使用elementor pro的一些高级功能。
使用elementor pro你可以完全从头规划你网站的各种配置,例如主题颜色、文字、排版、按钮的样式,如下图:
设置好全局样式之后,可以回到主题构建器,自己拼凑一个想要的网站设计。
可以看到,你可以自己设计网站的header、footer、Single Post、Single page等页面,如果你安装了WooCommerce电子商务插件的,那么电商页面也可以自己设计。
例如我们选择一个Header,点击创建,然后会弹出一个模板库,里面所有的预制header模板你都可以直接导入使用,不满意也可以自己手动设计。
设计好了之后,点击发布,会出现选择在哪些页面显示的选项,如下图。
你可以设置整个网站(entire site)都显示,或者只是部分页面显示这个头部布局,其他的页面也类似,这就为你网站自定义提供了很大的自定义空间。
在elementor pro的在线模板库里面包含了很多的预制模板,包括整个网站的,或者某一个部分功能的模板,使用pro都可以直接导入使用,也可以导入后自己修改。对于新手来说,无疑这是一个很强大的功能。
Elementor使用常见问答
外贸网站建设上,网站的询盘表单是必备的一个需求和功能,怎么使用elementor制作联系表单呢?
首先,你需要安装一个联系表单插件,直接在后台插件库搜索contact就会出来很多免费的联系插件,安装好之后,创建一个询盘表单,然后复制短代码到Elementor里面添加简码元素即可。
页面上的跳转效果专业术语叫做锚点,这里涉及到一点html基础知识,例如这篇elementor教程的目录功能点击后可以跳转。奶爸这里使用的是文章目录插件。
不过我们也可以手动使用elementor创建锚点。点击你想要跳转到的元素或者段,然后高级里面输入一个唯一的id值。
网站头部和底部内容默认使用elementor是没有办法修改的,我们需要另外安装一个插件:Elementor – Header, Footer & Blocks Template,安装并且激活插件,接着就可以在主题菜单的内容区块处看到。
更多elementor教程
如果有没能解答你elementor使用问题的教程,可以在本文末尾留言,我会适当更新相关操作说明到本文。
奶爸您好,我的后台页面添加了一个页面模板修改后。出去看我的页面缺三少四且背景颜色也不对。后台确实没问题的求指教
可能是缓存插件问题,也可能是CDN的缓存问题。
最好出个视频教程一步一步的操作各个部件,看了很多教程没有一个有用的,全部是英文,而且讲的都一样,没一个我遇到的问题。
都是免费教程,谁有精力做那么细致啊。
我在插件商店下载了这个编辑器后,去使用它创建新页面时,那个工具根本拖动不了。上面教程也写了把标题直接按住拖到里面,但是我的脱不出来。这个有办法解决吗
你这种问题大概率是你哪里操作失误导致的,不眼睛看着你操作一遍判断不出来问题。
谢谢呀 其实我第三天重新用这个插件的时候可以正常使用了。第一天安装之后 死活用不了,尝试好多次卸载—安装—卸载
写的真好,嘻嘻
你好,我不需要element的手机显示模式,怎么才能设置成,手机端入口进入到网页,显示的还是pc模式呢?
选择不是响应式设计的主题或者自己用代码覆盖掉。
elementor免费版和付费的区别在哪里呢?
高级版有更多的小组件,还可以编辑整个网站结构。