Elementor 配合 Woodmart 打造灵活电商页面布局指南

在用 WordPress 打造电商网站时，页面布局的灵活程度，会直接影响网站的视觉效果和访客的浏览、购买体验。Woodmart 作为一款兼容 Elementor 的高级 WooCommerce 主题，提供灵活的页面布局和丰富的设计选项。配合 Elementor 页面构建器，没有编程基础，也可以实现对首页、商品页、类目页等页面的自由定制。

这篇文章介绍用 Elementor 自定义 Woodmart 页面布局的流程与技巧，帮助你打造符合品牌定位的电商页面。

一、启用 Elementor 与模板继承

安装并启用 Elementor 插件

进入 WordPress 插件页面
点击“插件”菜单，并选择“添加插件”
搜索并安装“Elementor”
安装完成后，选择“启用”

二、创建一个新页面并启用 Elementor

进入“页面” → “新建页面”
输入页面标题，例如“我的首页”
点击“使用 Elementor 编辑”按钮，进入可视化编辑器

现在你已经进入了 Elementor 的页面编辑界面，可以开始自定义布局。

三、了解 Elementor 的基本结构

Elementor 的编辑区域由三部分组成：

顶部栏（Top bar)：位于页面上方，用于保存、预览、切换响应视图等操作；
面板(Panel)：位于左侧，包含所有可用的小工具和设置选项；
画布（Canvas）：中间区域，是你实际构建页面和拖放组件的地方。

你可以自由组合这些元素，创建任何你想要的页面结构。

四、常用组件介绍与用法

以下是一些常见组件及用途：

标题：添加主标题或副标题
文本编辑器：输入正文内容，可调整字体、大小、颜色
图片：插入产品图、Banner、LOGO 等
按钮：用于跳转链接、提交表单等
视频：支持嵌入 YouTube、Vimeo 视频
图标框/服务区块：适合做优势介绍、功能展示
图片轮播/幻灯片：展示多个图像内容
Google 地图：嵌入店铺地址或办公地点
表单：收集用户信息，配合插件使用（如 WPForms）

只需将左侧的组件拖入右侧页面区域，即可实时预览并调整样式。

五、调整排版与风格

Elementor 提供非常多的自定义选项：

设置段/列的宽度、内边距、背景图或背景色

设置每个组件的字体、颜色、边框、阴影、间距等

可针对不同设备（手机/平板/电脑）分别设置样式，实现响应式页面

此外你还可以保存一整个区块作为模板，方便在其他页面复用。

六、保存并发布

没准备好发布:

可以先点击“Save Draft”进行保存，便于后面修改

页面设计完成后：

点击右上角的“Publish”按钮

小结

用 Elementor 配合 Woodmart，页面内容和排版可灵活设置，不论是品牌首页、类目页还是商品详情页，都能通过拖拽模块、调整排版、控制展示内容，打造出符合品牌调性的视觉风格。凭借这一组合，你无需依靠开发人员，也能快速建出专业感十足的 WooCommerce 商城页面。

联系我们
教程看不懂？联系我们为您免费解答！免费助力个人，小企站点！	客服微信
① 电话：020-2206-9892
② QQ咨询：1025174874
③ 邮件：[email protected]
④ 工作时间：周一至周五，9:30-18:30，节假日休息