Elementor教学:2小时快速入门,轻松搭建响应式网站

Elementor是WordPress的一款可视化页面编辑器插件。使用该插件,你可以在没有技术人员支持的情况下,通过组件拖拽的方式来轻松搭建专业的B2B外贸网站。

这个Elementor教程是一篇知识扫盲教程;但更多的是一篇实操教程,可以让我们学习在搭建外贸营销型网站的过程中具体需要用到的功能、需要制作的页面是怎么样实现的。并且在实操的过程中来让我们熟悉Elementor常用的设置和功能,是指向性非常明确的一门教程。

Elementor基础教程

 在基础教学模块中,将带你初步了解Elementor的安装和使用,以及Elementor中最重要的一个概念:容器&布局。还会介绍Elementor的基础功能以及付费版本跟免费版的功能差异。

01
开始使用安装Elementor
带你从零完成插件安装、基础设置、以及如何使用Elementor来编辑我们的页面
02
将Section转换为Flexbox容器
虽然现在Elementor都是默认用容器布局,但是如果网站之前有旧版Elementor,那么这个教程会教你把旧的Section布局安全迁移到Container + Flex,页面更轻更好维护;
03
Elementor 容器&布局详解 (重点)
Elementor 3.6 以后发布了Flexbox Containers,这个容器的概念是我们使用Elementor打造专业页面的重点。可以这么说,掌握了容器,你就掌握Elementor。我们这章教程会进行实操,实现Intel的一部分页面模块。
04
Elementor 高级功能设置
Elementor的小部件总数有90个以上,这些小部件包括表单、滑块、帖子展示、作品集、价格表、菜单导航、登录/注册表单、WooCommerce 集成小部件等。每个小部件都有一些高级设置可以让我们给小部件赋予不一样的效果。
05
Elementor Pro vs. Elementor
尽管Elementor免费版已经足够我们去实现专业的网站布局,但是使用了Elementor Pro之后能够让你的网站从“好看”转变成“好看、好用、好转化”。这篇文章会介绍一些Elementor跟Elementor Pro的一些区别。

Elementor页面元素设计

这部分我们将会使用Elementor来制作外贸站点页面中常见的重要部分,部分内容需用到Elementor Pro。也需要用到上一部分基础教程的Elementor容器和布局这块的知识。

01
Elementor制作Banner
Banner作为网页的核心视觉元素,既是吸引访客眼球的第一道风景线,也是传达关键信息和引导用户行动的有效方式。我们这个章节将学习如何用Elementor来实现Banner。
02
Elementor制作Header
Header部分也是网站非常重要的一个模块。Header中清晰的导航栏能让访客第一时间看懂站点怎么组织内容,快速抵达「产品、解决方案、 用户案例」等关键入口,从而提升浏览效率与满意度。同时,把“联系、报价、试用、WhatsApp”等转化型按钮安放在导航中,也能明显拉升点击与咨询转化。
03
Elementor制作Footer
Footer是集导航、信任、合规与转化于一身的底部中枢;用Elementor搭建能把它做成可视化、可复用、可度量的全站模块,省时、省心、好维护。
04
Elementor制作悬浮按钮
我们可以使用Elementor将客服、询盘表单、电话或 WhatsApp等入口做成悬浮按钮,按设备或页面类型设置显示条件,增加用户转化机会。
05
Elementor制作返回顶部按钮
在页面上添加“返回顶部”,增加网页的易用性,提升用户体验
06
Elementor制作侧边栏
侧边栏(Sidebar)在不同类型的网站中扮演着不同的角色。我们这个教程将学习如何通过Elementor合理设计侧边栏,不仅能够提升用户体验,还能有效支持网站的业务目标。
07
Elementor制作外贸询盘表单
外贸询盘表单是B2B外贸营销型网站中最重要的功能之一。它不仅是获取潜在客户的关键途径,更能显著提升用户体验和企业形象。借助Elementor Pro强大的Form小部件,我们可以轻松设计出符合企业需求的定制化询盘表单。
08
Elementor制作超级菜单
超级菜单(也叫Mega Menu)是一种比普通下拉更宽、更大的菜单导航:当用户悬停或点击顶级菜单时,会展开一个多栏布局,把大量链接按产品线、行业应用、资源等清晰分区,并可嵌入图标、缩略图、推荐卡片、甚至表单与下载入口。这篇Elementor教程将教你使用Elementor Pro+ ElementsKit Elementor Addons插件来实现超级菜单。

Elementor模板

前置条件:Elementor Pro专业版。模板是Elementor Pro中最重要的功能之一。有了模板,我们可以根据自己的需求对网页进行自定义,提升网站的美观和功能性。

01
Elementor打造专属产品详情页
这篇Elementor教学,会带你实现产品详情页,替换掉呆板、默认的WooCommerce产品详情界面,让产品详情页面看上去既轻快又可信。
02
Elementor如何做产品分类列表
分类页是产品架构的“路口”,把用户快速带到合适的子类与产品卡片。它提升可发现性(清晰的分组与面包屑让人不迷路)、承接广告与SEO(用户多从“产品类目关键词”进入)、也方便横向比较与筛选,从而提高到达详情页与询盘/下单的比例。用Elementor来做分类页能够做出专业的界面小姑、可复用的高效模板,非常好用。
03
Elementor如何做文章列表页
文章列表页的任务是把零散文章组织成可浏览的路径,让读者在封面、标题、摘要、标签之间迅速判断价值,而我们这里要学习的Elementor的模板功能能把这些元素做成统一卡面。长期来看,这页能提升站内停留、带动内链权威度,并为产品页导流。
04
Elementor个性化搜索结果页面
默认的搜索结果像一串生硬链接,我们将学习如何使用Elementor创建个性化搜索结果页面。个性化之后,结果可以按类型分区(产品、文章、下载),每个卡片带缩略图、关键属性和行动按钮。
05
Elementor自定义404页面
学习如何使用Elementor来实现自定义404页面。当用户访问网站上不存在的页面时,提供搜索框、热门分类与返回首页等快捷入口来增加用户留存率。
Scroll to Top
Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors