专注于外贸建站,分享WordPress教程和Elementor教程
不用充值便可免费试用3天的Cloudways超快独享主机,独家优惠码:LOYSEO,前2个月可优惠30%,感谢你的互惠互助

Elementor教程

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

购买Elementor授权

如何高性价比的购买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中移动元素?(2种方法+视频)

在使用Elementor编辑器进行WordPress建站或外贸网站建设时,我们可以通过移动元素来进行内容顺序的调整,移动的方法有两种: 在导航/navigator中拖拽元素上下移动,如果元素较多时,建

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代码,你可

制作页面(视频)

制作外贸网站首页

制作关于我们页面

制作联系我们页面

制作下载页面

制作页头页脚(Pro)

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

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

如何用Elementor Pro制作网站页头导航【视频】

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

制作文章模板(Pro)

如何使用Elementor Pro制作文章列表页模板

如果你用是Elementor Pro插件,你便可以省了付费主题的钱,直接用Elementor Pro导入模板库的文章列表模板页,或者自己制作文章列表页模板;如果你购买了付费主题,又习惯用Element

制作产品模板(Pro)

制作询盘表单(Pro)

适合Elementor的主题

Astra

最快、最轻、最好的免费WordPress主题之一,拥有一百万+用户与五星好评,免费版也提供数十套一键导入的网站模板。
本站还有手把手的Astra建外贸网站教程

问题答疑

可以,请看下图,在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教程导航
超快独享主机
Cloudways
免费试用3天,无需充值
费用月结 | 不用一次性付整年
*注册优惠码Promo code:LOYSEO
*用Gmail邮箱,注册易通过