從這裡開始

簡介

歡迎光臨

無論您是剛購買 Masterclass Course Template，或是只是想看看，我們都很高興您能來到這裡。如您所知，Masterclass Course 是建構在 Webflow 上的 - Webflow 是強大的無程式碼創建網站工具。如果您已經熟悉它，我相信編輯這個範本將是小菜一碟。

本文件涵蓋使用 Webflow 的一般規則，我們認為值得分享。

如果您是 Webflow 的新使用者

另一方面，如果您是第一次使用 Webflow，您可能需要瞭解一下Webflow 大學和他們的 101 速成課程。

特定範本

Masterlclass 課程 Webflow 模版使用 Webflow 的會員功能建立。

會員結構

其結構包括稱為 "Masterclass 「的 」Basic 「計劃和稱為 」Masterclass+「的 」Pro "計劃。購買 Basic 計劃的使用者可存取 Classes Collection 內的所有課程。購買「專業」計劃的使用者可以同時使用「課程系列」中的課程以及「課程+系列」中的課程。

造型設計

以下是一些有關模板樣式的一般規則。

顏色

在 Masterclass Course Template 模板中，我們使用了顏色色板。這表示您可以在一個地方變更顏色，而且會套用到共用相同色板的所有元素。

變更色板：

1. 按一下要編輯顏色的元素。
2. 在右側的樣式選項卡中，找到顏色選項（例如：文字顏色）
3. 按一下顏色方塊。
4. 開啟小彈出視窗後，按一下編輯圖示，然後選擇新顏色。
5. 按一下儲存。

請參閱以下視訊的迷你教學。

字體

Masterclass 課程範本使用一種額外的字型，稱為 Instrument Sans。您可以從 Google Fonts 下載。這種字型對於個人和商業用途都是 100% 免費的。

Instrument Sans 應用於網站的正文，因此會自動應用於所有段落和文字區塊。您可以透過以下方式全局變更它

1. 選擇「身體
2. 在右側的樣式索引標籤中，按一下選擇器，然後選擇「正文 (所有頁面)」。
3. 向下捲動至「排版」，然後變更所需的字型。

請參閱以下視訊的迷你教學：

‍

Instrument Sans 也適用於標題 (H1-H6)。您也可以用同樣的方式編輯它們：

1. 選擇要編輯的標題類型
2. 在右側的樣式索引標籤中，按一下選擇器，然後選擇「所有 H(1, 2, 3, 4, 5, 6) 標題」。
3. 向下捲動至「排版」，然後變更所需的字型。

圖示

所有圖示都是 .svg 格式，因此在網站上變更顏色配色不會影響它們。您可以從「資產 -> 圖示」標籤下載這些圖示，然後在您的設計軟體（Photoshop、Figma、Sketch 等）中編輯。您也可以直接上傳您自己的圖示。

編輯

以下是一些編輯範本副本和圖片的一般提示。

靜態內容與動態內容

在 Webflow 中，我們會區分兩種不同的文案類型 - 靜態內容和動態內容 (CMS)。

要快速區分這些文案類型，您可以查看導覽器索引標籤，其中靜態內容將使用白色字體顯示。

‍

‍

而動態內容將使用紫色字體顏色顯示。

‍

‍

您也可以直接看到哪些元素是靜態的，哪些是動態的，只要在設計師空間中直接將滑鼠懸停在該元素上即可。靜態內容周圍會有藍色邊框。

‍

而動態內容的邊界會是紫色。

編輯靜態內容

除了 CMS 相關的副本外，其他副本都是靜態內容。這表示您需要直接在頁面上編輯。

您可以用兩種方式編輯靜態內容：

1. 在「設計師模式」中，只需在您要編輯的文字上按兩下，然後變更它。Webflow 會自動為您儲存。
2. 在「編輯器模式」中，同樣地按一下文字並變更它。

查看以下視訊，瞭解如何在「設計師模式」中編輯靜態內容。

編輯動態內容

編輯動態內容非常容易，但一開始可能會有點困惑。這種類型的內容您需要透過集合來編輯。一旦掌握了，就像填寫網頁表格一樣簡單。

若要編輯動態內容：

1. 移至左側的 CMS 收藏集，找到您要編輯的收藏集 (例如：部落格)。
2. 按一下集合項目 (例如特定的部落格文章)。
3. 變更您要編輯的輸入 (例如：部落格文章標題)
4. 儲存後就完成了。

您可以在 Webflow CMS 的大學頁面上閱讀更多關於編輯收藏集和使用 Webflow CMS 的資訊。

編輯（靜態）影像

本模板中使用了兩種不同的圖片類型 - 一般圖片和背景圖片。您可能會注意到，我們主要將一般影像用於圖示，而大影像則作為背景影像來實作。

編輯一般影像：

1. 找到您要變更的影像並選取。
2. 在右側的設定索引標籤中按一下取代影像，然後選擇新的影像。

編輯背景圖片：

1. 找到有背景圖片的元素 (例如 Section、Div) 並選取它。
2. 在樣式索引標籤中，向下捲動到背景影像設定，然後按一下影像設定。
3. 在彈出的小窗口中選擇「選擇影像」，以選擇不同的影像。

看看下面的視訊，瞭解如何編輯背景圖片。

編輯產品（電子商務）

編輯電子商務產品與編輯動態內容非常相似。

編輯您的產品：

1. 前往「Ecommerce」，然後按一下「Products」。找到要編輯的產品並選取。
2. 進入產品後，編輯您想要的所有欄位。
3. 儲存後就完成了！

支援

如果您購買了 Masterclass Course Template，我們將為您提供基本支援。如果您有與我們模板直接相關的問題，請發送電子郵件至templates@wavesdesign.io。

有關使用 Webflow 作為工具的問題，請參閱他們的大學或聯絡他們的支援人員。

‍

如果您想找人客製化您的範本，請讓我們知道templates@wavesdesign.io。