专注于外贸建站,分享WordPress教程和Elementor教程

Elementor教程

本页面是Elementor教程的分类导航,Elementor是2022年最好的WordPress页面编辑器,能够让我们在制作网页时所见即所得。
如果你想流畅的一文熟悉Elementor建站过程,请查看如何用Elementor制作一个外贸网站
如果你想快速了解一下Elementor是如何建站的,请查看下方视频,更多视频在本页面下方。

购买Elementor授权

Elementor的官方价格最低49美元/站/年,我曾经在学习阶段下载过网络上的免费破解版本,然后过了半年,在我学习SEO时,才发现中招了,网站被植入了很多隐藏的外链。因此,我总结了下面两篇教程,第一篇教你如何避坑与选购什么官方套餐,第二篇教你通过更换绑定域名的方式,将官方授权的价值最大化。

如何高性价比的购买Elementor Pro与避坑

拥有Elementor Pro让建站就跟拼图一样方便了,那如何省钱的购买Elementor Pro呢?如何避开坑呢?下面分享自己的实践经验。(还不了解Elementor的点这里) 避坑:不要用Elem

Q1. 激活Elementor Pro授权时,界面提示reconnect按钮,并且点击按钮后无法激活

当你激活Elementor Pro的授权时,看到提示:We’ve noticed that you are trying to connect: 你的域名. Please make sure this is the correct URL and click ‘Reconnect’. 同时提供了一个Reconnect按钮。即便你点击了这个按钮,也依旧无法激活授权。

出现这个问题的原因是:你的网站后台的setting > general页面中的wordpress address和site address是不相同的,Elementor Pro需要你统一它们,请修改一致后,再去激活授权即可。

参考资料:https://elementor.com/help/activate-your-license-key/

基础操作

Elementor页面设置

本教程介绍Elementor页面设置功能,但凡用Elementor制作内容,譬如制作页面、文章、模板时,点击左下角的齿轮即可进入页面设置功能,以便设置页面布局、背景等等,具体功能如下: 常规设置 页面

进阶操作

Elementor主题样式设置详解

Elementor的theme style主题样式可设置各种元素的默认样式,例如背景,标题,按钮,图像和表单字段。这些设置将覆盖主题自带的样式设置,从而使您可以使用Elementor为非Element

Elementor的全局样式与设置

本篇教程将介绍Elementor网页编辑器的全局样式与设置的常用功能,譬如设置全局的字体、颜色、页面内容宽度、元素默认间距等等。 功能入口:在用Elementor编辑页面时,点击左上角的按钮,然后点击

Elementor的Advanced高级设置教程(18个功能点)

本文将介绍Elementor网页编辑器中元素的Advanced高级设置功能,不同元素块的高级设置的内容项是不同的,下面对常见的高级设置项目进行讲解。 Advanced高级设置 是的,这个栏目的名字重复

Elementor自定义代码教程 (PRO)

Elementor自定义代码(Custom Code)功能是Elementor Pro付费版本功能,它允许你添加代码片段,如Google Analytics代码或Facebook Pixel代码,你可

制作页面(视频)

我的专业领域是建外贸网站,所以,我以为外贸网站的常见页面为例,使用Elementor逐一制作它们,并录制完整的教学视频(视频在vimeo,请科学上网后查看),我想付费的教程视频也大抵如此。

制作首页
制作关于我们页面
制作联系我们页面
制作关于我们页面

用Elementor做外贸网站

4 Videos

制作页头页脚(Pro)

也需你还在用Astra主题或者其他主题提供的页头页脚配置功能,而Elementor直接打破规则,它虽不是一个主题,但它可以替代主题去灵活的制作网站的页头和页脚。

如何用Elementor Pro制作网站页脚【视频】

使用Elementor pro可以创作出多种多样的页脚,可以不再局限于主题自带的页脚了。并且Elmentor Pro的模板库里提供了多款页脚模板,一键导入就可以直接用起来了,还可安装Envo

制作文章模板(Pro)

又是一个打破规则的功能,过去,主题们对于博客文章的列表页、详情页,只是提供一些配置功能,或者提供几套模板供你选择,如果你想对它们进行DIY调整,那是不可能的,包括我常用的B2C独立站常用主题Woodmart也一样,你可以观察很多博主的文章列表或详情,基本都是千篇一律。

而有了Elementor Pro,你可以自己DIY文章列表、文章详情页的模板,甚至可以为不同分类、或者具体某些文章制作模板,不再束手束脚。

为什么blog/news页面无法用Elementor编辑

当你在wordpress中发布了一些文章,想用Elementor编辑blog或news页面时,却出现了如下报错,提示你无法编辑博客页面,这是为什么呢?又怎么解决这个问题呢?我们会逐一讲解。 Eleme

制作产品模板(Pro)

继续打破规则,不再受限于主题本身提供的产品列表或详情页的模板,你可以用Elementor Pro DIY产品列表、文章详情页的模板,就跟上面的文章模板一样灵活。目前,我注意到Woodmart主题也增加了Layout功能来实现DIY产品的模板。

Elementor所提供的产品模板定制功能,也并不是完美无缺的,如果你的定制需求复杂,你还是会用到一些第三方的扩展插件,譬如Crocoblock的jetplugins

制作询盘表单(Pro)

你是否还在用contact form 7或者是wpforms插件呢?我过去就用过它们,前者功能不全,后者免费版功能不全。直到我用上Elementor Pro的form元素,我就再也不用其他表单插件了,少装一个插件,少一点网站的重量,还能剩下一些成本。

适合Elementor的主题

如果你问我用什么主题搭配Elementor。我会说,如果做非B2C站点,我用Hello Elementor主题,它是官方原配。如果是B2C站点,我用Woodmart主题。如果你做博客站,我便推荐你用Astra或Generatepress主题。

Astra主题 – 轻量、模板超多的WordPress主题

你是否在寻找速度快、模板多、支持热门编辑器的热门主题,Astra主题是免费WordPress主题的热门之一,拥有一百万+用户与五星好评,免费版也提供数十套一键导入的网站模板。

问题答疑

可以,请看下图,在Elementor设置的文章类型中,勾选产品并保存。然后你在编辑产品时,就能看到使用Elementor编辑按钮了。

image 41

可以用Elementor编辑产品的详细介绍,也可以认为是产品的正文而产品的简介(short description)是无法使用Elementor编辑的。

image 43

与上文同理,请在下图的Elementor设置中勾选你添加的文章类型并保存

此图像的alt属性为空;文件名为image-41.png

可以,譬如你可以用Custom post type ui(CPT UI)添加名叫case的文章,便于管理公司的案例,如果你想以类似博客的形式展示case,那么你在用CPT UI添加case时,需要注意下图中的配置:将has archive选择为true,这样以来,才能用Elementor Pro制作针对case的文章列表模板(Archive),然后发布模板时设置display condition为case archive即可。

image 44

原因是:这个页面在woocommerce的设置中已被设为商店页面,所以不可以用Elementor直接编辑。但你可以使用Elementor Pro制作Product archive模板,并在保存发布时,设置展示条件为shop page。

image 45

elementor pro create woocommerce shop page用Elementor Pro制作产品列表模板时,设置展示条件为shop page

有读者反馈希望banner不因设备尺寸的改变而改变布局,譬如:不希望文字把背景图片挡住,又希望图片在不同设备上都能完整显示….emm,你只有把文案做到图片里直接作为banner了。

目前有几种方法:现在我比较推荐的是使用Eelementor的Image carousel元素来实现。

下面是我以前用的旧方法。

以Elementor Pro为例,你需要使用slider元素,将图片上传到背景中,同时设置size:contain,然后点击height(高度)旁边的设备图标,切换到不同设备上,分别设置图片的高度,以便图片宽度能完整显示。

image 46

接下来,切换到这个banner的content标签页,将内容、按钮都清空,设置link(链接),将链接方式(apply link on)设置为whole slider。

image 47

如果你使用的是免费的Elementor,那么你需要使用 Premium Addons For Elementor 高级元素扩展中的Premium Carousel / 轮播来制作banner。

Elementor教程导航
让我的客户网站GTmetrix测分A\A的主机
独家优惠前3个月优惠30%, 戳上方按钮注册即可自动带入优惠码LOYSEO
用Gmail邮箱,注册易通过
主机送Astra Pro不限站点1年
遇到问题,联系我
建站学习交流群