给模板设计师

Last updated on 11/1/2024@mrbirddev

如果您的模板在 slidde.co 上有出色的编辑体验,当客户想要更改设计或将设计扩展到多个页面时,他们会联系您。

没有编码或设计经验的用户可以使用富文本编辑器,自行更换图片。但有时一个漂亮的模板可能过于复杂,难以轻松调整以满足他们的需求。

以下是一些建议。

编写教程

在 幻灯片 中使用 隐藏 来编写关于如何使用您的模板的教程。这里有一个示例

编辑动画隐藏元素

如果您有隐藏某些文本/图像的动画,例如 opacity: 0display: none,您可以悬停在 CSS 样式名称上并点击编辑图标。然后选择“在画布中隐藏”选项,仅在导出真实网站时应用。这样您的用户可以在编辑器中轻松编辑这些元素。

使用变量

您可以设置 CSS 变量,让您的客户轻松更改模板的颜色或其他属性。

--primary-fg: #000
--primary-bg: #fff

然后您可以在元素的所有后代中应用它,包括元素本身

color: var(--primary-fg)
background-color: var(--primary-bg)

这里是官方文档以获取更深入的指南。

样式化元素列表

当您对元素列表进行样式化时,可以应用高级选择器来增强用户体验。

如果您为按钮列表设置 color:redcolor:bluecolor:green,当用户的按钮数量不是 3 或不小心删除了一些按钮时,他们将需要自己重新设置按钮样式。

然而,如果您对 按钮列表 进行如下操作,

&>*:nth-child(3n+1).color: red
&>*:nth-child(3n+2).color: green
&>*:nth-child(3n+3).color: blue

无论用户有多少个按钮,他们总是会得到一个交替颜色的按钮序列。

相同的原则可以应用于一组图像。

你可以阅读更多关于 nth-childnth-of-type 的内容,以了解它们的具体语法。

Loading...