給模板設計師

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...