给模板设计师
Last updated on 11/1/2024@mrbirddev
如果您的模板在 slidde.co 上有出色的编辑体验,当客户想要更改设计或将设计扩展到多个页面时,他们会联系您。
没有编码或设计经验的用户可以使用富文本编辑器,自行更换图片。但有时一个漂亮的模板可能过于复杂,难以轻松调整以满足他们的需求。
以下是一些建议。
编写教程
在 幻灯片 中使用 隐藏 来编写关于如何使用您的模板的教程。这里有一个示例
编辑动画隐藏元素
如果您有隐藏某些文本/图像的动画,例如 opacity: 0
或 display: none
,您可以悬停在 CSS 样式名称上并点击编辑图标。然后选择“在画布中隐藏”选项,仅在导出真实网站时应用。这样您的用户可以在编辑器中轻松编辑这些元素。
使用变量
您可以设置 CSS 变量,让您的客户轻松更改模板的颜色或其他属性。
--primary-fg: #000
--primary-bg: #fff
然后您可以在元素的所有后代中应用它,包括元素本身
color: var(--primary-fg)
background-color: var(--primary-bg)
这里是官方文档以获取更深入的指南。
样式化元素列表
当您对元素列表进行样式化时,可以应用高级选择器来增强用户体验。
如果您为按钮列表设置 color:red
,color:blue
,color:green
,当用户的按钮数量不是 3 或不小心删除了一些按钮时,他们将需要自己重新设置按钮样式。
然而,如果您对 按钮列表 进行如下操作,
&>*:nth-child(3n+1).color: red
&>*:nth-child(3n+2).color: green
&>*:nth-child(3n+3).color: blue
无论用户有多少个按钮,他们总是会得到一个交替颜色的按钮序列。
相同的原则可以应用于一组图像。
你可以阅读更多关于 nth-child 和 nth-of-type 的内容,以了解它们的具体语法。