我们推出 GemPages 编辑器第 7 版时,它带来了巨大的飞跃——不仅在性能上,更在商家构建方式上。然而,每个落地页、每张产品卡片和每个捆绑包布局背后都有一个不变的元素:元素设置。
随着时间的推移,这些设置开始显得陈旧。
在过去的一年里,我们一直在与商家沟通,但有一个问题一直存在:他们知道该做什么,但游戏的设置让事情变得比预想的要难。所以我们问自己:
如果元素设置是围绕如何设计的,那么它们会是什么样子 思考——不仅仅是代码如何工作?
此版本于 29 年 2025 月 XNUMX 日发布,这就是我们的答案。
我们致力于让构建过程更加流畅、直观——关键更新包括新的 UI 模式和新的设置行为。这些更新旨在减少日常任务中的摩擦,并更好地支持商家的构建方式。
以下升级将改善 GemPages 内部的建筑体验:
1. 更清晰地分离样式和布局控制
长期以来,GemPages 的元素检查器都采用双选项卡系统——一个用于设置样式,一个用于自定义元素在页面上的显示方式。虽然这种方法虽然有效,但用户并不总是清楚从哪里开始。有些用户会跳过关键设置,仅仅是因为这些设置没有按照他们预期的方式呈现。
我们如何改进它:
在此更新中,我们保留了双选项卡结构,但明确了它们的作用。
- “设置”选项卡 现在只专注于 视觉呈现 元素的布局,包括排版、颜色、背景、边框和图像。这些控件适用于 主要内容区域 的元素。
- 进阶标签 管理元素的行为方式及其在布局中的适应性,包括间距、对齐、定位、可见性和响应式显示。这些适用于 外容器 或 边框,元素的。
这对您意味着什么:
通过将视觉设计与结构布局明确分开,此更新为您的工作流程带来了更大的清晰度和控制力。
您无需再费力猜测设置的位置,也无需在面板之间切换进行相关更改。视觉样式(例如排版、颜色和图像)会按其所属位置分组。与间距、对齐和可见性相关的控件也按逻辑排列,并在需要时才显示。
这种改进的结构有助于减少认知负荷,最大限度地减少返工,并使您能够专注于制作视觉一致且结构合理的页面。
2. 全新用户界面,扫描模式更易读
| 旧设计 | 重新设计 |
![]() |
![]() |
在之前的元素检查器版本中,控件的结构因设置而异。有些设置使用垂直堆叠,有些则以不一致的方式组合标签和值。随着设置的增加,面板变得越来越难以浏览——尤其是在快速操作或连续编辑多个元素时。
我们如何解决这个问题:
一致的从左到右的扫描模式。

此选项卡中的每个设置现在都遵循清晰的从左到右的模式:标签→值。
乍一看,这只是一个小小的改变。但当你编辑几十个元素时,这种一致性就建立起来了。 信托 。您无需重新学习从一个区块到下一个区块的设置结构。您的眼睛知道该看哪里。
这种模式不仅随着更多设置的引入而提高了可扩展性,它还训练用户更有效地浏览编辑器,帮助初学者和经验丰富的团队更快地行动,减少错误。
弹出窗口内的嵌套设置。

有些设置不仅仅显示单个值——它们会打开一整套相关的控件。过去,这些附加选项以内联方式显示,这会导致“设置”面板迅速膨胀,界面显得拥挤。
为了解决这个问题,我们引入了一个新结构: 弹出窗口中的嵌套设置.
点击“边框”之类的设置,会打开一个简洁、聚焦的弹窗——面板旁边的浮动模式——仅显示相关控件。这些弹窗最多可包含 3 层深度,每个子组仅在需要时打开。
这对您意味着什么:
- It 保持主设置面板整洁,默认仅显示顶级选项。
- It 减少压力,特别是对于不需要预先进行所有高级设置的新用户。
通过隐藏复杂性直到需要时,编辑器变得更容易扫描和更快地导航 - 而不会牺牲功能。
3. 设置的新行为
版本 7 的更新引入了新类型的设置,并改进了一些现有设置的行为方式 - 使交互更快、更清晰、更易于控制。
现在,许多设置都遵循“点击添加,点击移除”的模式。点击控件后,无需从空字段开始,而是会自动插入默认值。之后,您只需单击一下即可调整或移除该默认值。
这种简单的交互改进有助于减少设置过程中通常涉及的手动工作。它为您提供了清晰的起点,无需猜测,让您可以专注于调整,而无需从头开始构建。
为何重要
通过自动应用默认值,编辑器可以删除不必要的步骤并保持您的工作流程正常运行。
您可以更快地做出决策,减少重复输入,并避免因不需要深度定制的设置而减慢速度。
设置面板有何变化?
| 个人设置 | 旧设计 | 重新设计 |
|---|---|---|
| 布局: 嵌套设置现在分组在弹出窗口内,仅显示父标签及其当前值。 |
![]() |
![]() ![]() |
| 背景: 更新后的背景设置通过添加视频作为新选项(与颜色和图像一起),为您提供了更大的灵活性。 |
![]() |
![]() |
| 形状: 边框设置在 Popover 内调整,包括设置:
|
![]() |
|
| 填充: 在旧版本中,填充有时放置在“设置”选项卡或“高级”选项卡中。 在此更新中,Padding 被移至“设置”选项卡。 |
|
|
| 对准: 对齐设置现在位于编辑器面板的底部,大小和背景下方。 |
![]() |
![]() |
按类型浏览元素设置
为了帮助您更快地导航,这里列出了升级后的编辑器中支持的所有元素的分类列表。
每个链接都会将您带到一篇专门的文章,其中详细介绍了元素的工作原理以及如何配置其设置。
1. 基本元素
2. 互动元素
3.媒体元素
4. 产品要素
- 产品
- 产品列表
- 产品购物车按钮
- 产品名称
- 产品价格
- 产品比较价格
- 产品介绍
- 产品查看更多
- 产品动态结账
- 产品数量
- 产品供应商
- 产品SKU
- 产品图片
- 产品型号和样品
- 产品徽章
- 产品折扣标签
- 产品库存柜台
- 加入购物车
- 产品文件上传
- 产品包
- 产品自定义字段













谢谢您的意见