版面配置基礎

slidde 網頁的結構

Slidde.co 使用簡單的四層結構：

• userCompName.Page（全域樣式）
• userCompName.Slide（內容分段）
• userCompName.Container（響應式寬度，多欄）
• 行內元素（特定內容）

userCompName.Page

userCompName.Page 層位於頂層，用於設置全域樣式，如字體、顏色和連結樣式，因為 CSS 屬性是可繼承的。

您可以選擇使用 CSS 變數 來使您的模板更具用戶友好性。

如果您無法直接選擇 userCompName.Page 元素，請使用工具欄中的 userCompOption.Select page 選項。

userCompOption.hashSection 功能可以模擬多頁網站。查看此示範：[示範連結](https://demo-76e69f00.slidde.co/)

userCompName.Slide

userCompName.Slide 是 userCompName.Page 下的第一層元素，用於分段內容。

• 簡單的頁面，如 "link in bio" 頁面，可能只有一個 Slide。
• 複雜的登陸頁面可能包含多個部分，如 #header、#hero、#works、#contact、#footer。

userCompOption.htmlId 本質上是一個 HTML ID。根據 userCompName.Slide 內的內容命名它們，以便使用類似 “#ID” 的連結輕鬆導航。[了解更多關於跳過連結](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#skip_links)。

要將 userCompName.Slide 從最終網站中隱藏但保留保存，請勾選 userCompOption.hidden 屬性。這類似於 PowerPoint 的隱藏幻燈片，也可用於教程。

userCompOption.sticky 功能適用於浮動導航欄或其他元素。請參閱此處的示例：[Sticky Demo](https://demo-09963200.slidde.co/)

userCompName.Container

userCompName.Container 負責管理響應式寬度和多欄顯示。

• 移動端和桌面端的寬度通常不同。在 userCompName.Container 中使用 userCompOption.width 屬性，以實現跨設備的自適應寬度。
• 欄位定義了容器中的欄數。您可以設置像 x/12 這樣的寬度（例如，兩個 6/12 欄各佔 50% 寬度）。

每個欄位還可以設置水平和垂直對齊。

其他

其他元素是內聯元素，可以放置在容器內。

通過遵循這種結構化的方法，您可以輕鬆使用 Slidde.co 創建視覺上吸引人的響應式網頁。