Webflow 適合創新者

使用 Webflow 模板的初始步驟一開始可能會顯得有些不知所措，但我們已經解決了基礎知識，以便您可以開始 - 從獲取和個性化您的模板，到向全世界發布您的創意內容。

在本模組中，您將了解：

1. 如何取得您的模板
2. 如何在 Webflow Designer 中修改您的站點
3. 如何管理博客
4. 如何包含或刪除網站中的元素
5. 如何發布您的網站
6. 如何將自訂網域連結到您的網站
7. 如何配置 Google 分析
8. 如何獲得模板的協助

如何取得您的模板

在開始設計之前，您必須取得範本並在 Webflow 儀表板中從中建立一個網站。您可以獲得您的創新者模板，以便僅用於一個人、企業或網站。

重要的： 取得範本後，您可以透過選擇插入促銷代碼（如果您擁有） 新增促銷代碼 在結帳模式中，在文字方塊中輸入促銷代碼，然後按 申請.

若要選擇並取得您的創新者範本：

1. 訪問 Webflow 的模板市場 找到您希望用於您的網站的頂級模板（例如， 連結 X 模板, 連結應用程式模板, 社交名流的社交模板)
2. 按 購買 在範本的主頁上（如果您尚未註冊，系統會要求您註冊免費的 Webflow 帳戶；如果您已登出，則可以登入現有帳戶）
3. 在結帳模式中輸入您的付款詳細資料（或點擊“修改信用卡」以更新您的付款詳細資訊（如果您之前已新增）
4. 點選 現在付款 按鈕來完成您的購買
5. 輕敲 繼續 驗證您的付款確認後
6. 為您的新網站命名並點擊 建立網站 在 Webflow Designer 中展示您新購買的模板

重要的： 您可以在以下位置找到範本採購發票： 工作區設定 > 範本 選項卡 > 購買的模板。點選 下載發票 取得您購買的特定範本的發票。

稍後，您將能夠從 Webflow 儀表板存取基於範本的網站。

如何在 Webflow Designer 中自訂您的網站

獲得模板後，您可以開始對其進行個性化設置以適合您的風格。 

您的範本可能已直接在 Webflow設計師，或者您可以選擇從 Webflow 儀表板啟動您的網站。這兩個選項都會將您帶到同一個位置 - 設計師 - 在那裡您所有的個人化設計魅力都會發生！  

在開始自訂模板之前，您可以熟悉一下模板中的各個面板。 設計師，旁邊 Webflow帆布 本身： 

• 頁面面板
• 講述人面板
• 資源面板
• 風格面板
• 帆布

這些面板可讓您存取您的頁面（頁面面板），頁中元素的層次結構排列（講述人面板），您已整合到網站中的資產概述（資源面板），以及微調頁面上元素樣式的能力（風格面板）。這 帆布 是您可以與網站中的元素互動的場所。 

您也可以在發布之前透過點擊頁面左上角的「眼睛」圖示在瀏覽器中預覽您的設計。 設計師. 

建議定期檢查網站設計的不同斷點視圖，以確保您的網站在各種裝置上都能回應。了解有關斷點的更多資訊。

除了我們在此模組中納入的詳細資訊之外，模板創建者可能還提供了「從這裡開始」指南作為模板中的頁面之一。如果您的網站中存在這樣的指南，您可以利用它來掌握特定於您購買的範本的提示和技術。 

如果您使用 Webflow 的介紹網站計劃，您將能夠修改範本中的所有頁面，但如果不先增強為付費頁面，則無法附加其他頁面或複製頁面。 工作空間規劃 或已付費 網站計劃.

重要的： 在開始對網站進行變更之前，明智的做法是先備份網站並產生手動備份（除了 Webflow 的自動備份之外），然後再對網站進行任何重大變更。

讓我們來看看如何利用 設計師 到：

• 更改文字
• 調整顏色
• 個性化背景
• 替代圖像
• 更新連結
• 收集網站訪客數據
• 修改SEO配置

重要的： 如果您遇到同時也是符號的元素，請雙擊它以修改符號中的元素。符號是可重複使用的元件，可以在整個網站的多個實例中使用（例如，您可以在多個不同的頁面上擁有相同的聯絡表單）。每次修改符號的一個實例時，它都會在所有其他位置更新。閱讀有關符號的更多資訊。

更改文字

若要修改範本中的文本，請雙擊文字元素或選擇它並按 輸入/返回。然後，選擇佔位符文字並將其替換為您自己的內容。

您也可以變更文字的字型、粗細、顏色等。 版式 category的 風格面板. 

有用的提示： 如果您希望立即變更整個網站的文字樣式，您可以選擇正文（所有頁面）標籤並修改文字的字體類型、字體大小和行高。了解有關排版的更多資訊。

連線閱讀：

• 版式色彩對比

調整顏色

如果您的範本的配色方案包含顏色變量，您可以輕鬆修改顏色變數以在整個網站上更新它（例如，將紅色變數轉換為紫色會將所有紅色元素變更為紫色）。

個性化背景 

某些元素利用背景顏色、圖像或漸層來引入視覺興趣。 

在元素上建立背景可以讓您控制外觀和易讀性。在 風格面板 > 背景，您可以為大多數元素添加背景圖像、漸層或顏色（除了影片和圖像等媒體元素之外）。了解如何調整背景樣式。

其他資源：

• Webflow的顏色選擇器
• 字體顏色變化

替代圖片

您可以選擇將設計中的佔位符圖像替換為您自己上傳的替代圖像。您可以透過「資源」面板上傳圖像並存取先前上傳的圖像。了解如何替換影像。

延伸閱讀：

• 為您的圖像添加替代文本
• 影像的不同檔案格式
• 優化影像品質

修改超連結

更新所選設計中的所有超連結也很重要。若要快速修改超鏈接，請選擇包含超鏈接的元素，然後導航到 設定面板 > 連結設定 並進行必要的調整。了解如何設定超連結並調整其配置。

延伸閱讀：

• 錨文本
• 連結部分

寶貴的提示： 您也可以選擇嵌入 YouTube 或 Vimeo 等外部平台的影片。了解如何利用 Webflow 的視訊組件。

收集訪客詳細信息

若要收集網站訪客的資訊（例如，電子報註冊等）或允許訪客透過聯絡表單傳送訊息，您可以設定表單以準確收集此資訊並將其轉發給您。

您可以直接在您的 站點設定，或利用 MailChimp 或 Zapier 等第三方服務來管理表單提交。探索如何處理表單提交和通知。

調整SEO配置

若要自訂共用或搜尋網站時顯示的標題、圖像或描述，您可以在頁面設定中修改 SEO 設定和開放圖譜設定。透過我們的 SEO 基礎指南深入了解 SEO。

訪問 SEO配置 和 打開圖設定:

1. 訪問 頁面面板
2. 點擊所需更新頁面旁邊的齒輪圖標
3. 編輯資訊於 SEO配置 或者 開放圖配置

經營部落格

如果您的範本包含內建博客，您可以使用 Webflow 的內建內容管理系統 (CMS) 有效率地製作新貼文來展示您的獨特內容。 

CMS 是動態內容的儲存庫。您的網站在各個頁面上引用此動態內容，確保 CMS 中對此內容的任何修改都會自動更新到所有相關頁面。

Webflow 的視覺化 CMS 可讓您塑造結構化內容、圍繞該內容進行創意設計並管理這一切，而無需更改程式碼。了解有關 Webflow CMS 和處理單一集合項目的更多資訊。

您可以透過紫色輪廓或透過選擇元素並檢查 風格面板。如果一個 動態樣式設定 段是可見的，元素是動態CMS元素。

我們回顧一下這個過程：

• 個性化您的個人帖子
• 合併和刪除部落格條目和類別
• 保留部落格文章草稿
• 安排部落格文章

個性化您的個人帖子

您可以在 Webflow CMS 中自訂部落格文章。模板站點中的一個CMS一般包含2個（或更多）CMS 收藏 包含範例內容（例如，「部落格文章」集合和「類別」集合）。您可以將範例內容替換為您自己的資料。

A 收藏 是類似項目的彙編。例如，您可能有一個名為「部落格文章」的集合。 “部落格文章” 收藏 涵蓋個人 收藏品 — 個人部落格文章。

每個 收藏品 （例如，每篇部落格文章）包含您的內容欄位。例如，您可以插入部落格文章標題、部落格文章內容、部落格文章的主圖片、部落格文章的category等。

若要使用您的特定輸入更新範例內容： 

1. 點選 內容管理系統 設計器工具列中的圖示可打開 內容管理系統面板
2. 選擇所需的 收藏 （例如「部落格文章」）
3. 選擇一個 收藏品 （例如，範例部落格文章之一）
4. 在欄位中填寫您的訊息

隨後，您可以：

• 節省 你的改變
• 使用下拉式選單 發布 立即發布您的個人部落格文章（無需全球發布）
• 使用下拉式選單 儲存為草稿 如果您還沒有準備好發布該帖子。 

對任何其他項目重複上述步驟 收藏品 你想更新。您所做的修改將自動反映在畫布上（除非您將貼文保留為草稿，這會將其隱藏在網站上的公眾視圖中）。了解有關更新收藏品的更多資訊。

重要的： 如果您更改部落格文章的標題，請確保更新 URL slug。 

合併和刪除部落格條目和類別

要附加一個 收藏品 （例如，部落格文章或部落格 category），您可以手動建立新項目、從 CSV 檔案匯入項目，或使用 Zapier 或 webhooks 透過 CMS API 連結它們。了解如何創作其他收藏品。

您可以選擇一次刪除多個收藏項目或刪除單一收藏項目。 

刪除單一 收藏品:

1. 訪問 內容管理系統 設計器工具列中的圖示可打開 內容管理系統面板
2. 選擇所需的 收藏 （例如「部落格文章」）
3. 選擇一個 收藏品 （例如，部落格文章）
4. 捲動到底部並選擇 刪除
5. 點選確認 刪除 再次

保留部落格文章的草稿

您最初可以安全地將其保留為草稿，而不是直接在您的網站上發布部落格文章。

您可以多次修改草稿項目並繼續將它們儲存為草稿，直到準備好發佈為止。文章定稿後即可 準備出版 或者 發表 在您的網站上。探索如何管理草稿項目。

安排部落格文章

定時發布讓您可以提前規劃內容發布，並在指定時間自動推送。此功能僅適用於 託管 CMS、商業和電子商務網站計劃.

了解如何安排您的部落格條目。

如何新增或刪除網站中的元素

您已經選擇了所需的自訂模板，但您可能希望在主頁上包含新圖像或在連結清單中添加新的超連結。或者，您可能不需要 Twitter 連結或產品商店，並且更願意從佈局中消除這些元素。您可以靈活地在網站中新增或刪除元素，以完美地自訂您的內容。

寶貴的提示： 對於管理部落格文章，需要採用稍微不同的方法，因為部落格文章由 Webflow CMS 控制。請參閱有關使用部落格的部落格特定說明。 

讓我們引導您完成：

• 將元素合併到您的網站中
• 消除網站中的元素

筆記： 建議在對網站進行任何重大更改之前建立備份。

在您的網站中包含組件

您可以選擇將元素和部分整合到您的網站中。例如，如果您希望插入新鏈接，可以透過將現有連結直接複製並貼上到您的網站來複製現有連結：

1. 選擇 您要複製的元素（例如連結）
2. 使用複製元素 命令 + C （在 Mac 上）或 控制 + C （在 Windows 上）
3. 使用貼上複製的元素 命令 + V （在 Mac 上）或 控制 + V （在 Windows 上）

您也可以點擊來撤銷貼上操作 命令 + Z （在 Mac 上）或 控制 + Z （在 Windows 上）。

從您的網站中消除組件

您也可以從您的網站中刪除元素。例如，如果您不使用特定的社交媒體平台並希望刪除其鏈接，請按照以下步驟刪除元素：

1. 選擇要刪除的元素（確保已選擇其所有關聯組件，以避免刪除後留下任何元素）
2. 按 刪除 鍵盤上的鍵

您也可以點選來撤銷刪除操作 命令 + Z （在 Mac 上）或 控制 + Z （在 Windows 上）。

發佈網站的步驟

在客製化您的設計時，您可以免費將您的網站發佈到 Webflow 的本機網域（例如，「www.myamazingplants.網路流io「）來預覽您的網站在網路上的顯示方式。了解如何發布您的網站。

將個人網域連結到您的網站的指南

儘管您始終可以免費將您的網站發佈到 Webflow 的預設網域（例如 myamazingplants.網路流io），您還可以將自訂網域連接到您的網站並在那裡發布（例如，myamazingplants.com).

我們將向您解釋如何：

• 取得新網站的網站規劃
• 將您的自訂網域連結到您的網站

取得您網站的網站規劃

如果您想在網站中使用自訂網域或建立更全面的博客，您可以為您的網站購買網站規劃。了解如何管理您的網站規劃。

如果您的範本使用 Webflow CMS（例如，用於部落格），則在從網站中刪除 CMS 之前，您無法購買基本網站計劃。此操作可能會影響模板設計的部分內容，因此請確保在消除 CMS 之前備份您的網站。

了解如何為您的網站規劃購買應用程式促銷代碼。

將您的自訂網域連結到您的網站

一旦您獲得了網站的網站規劃，您就可以將您的網站發佈到您擁有的任何自訂網域（例如，myamazingplants.com）。了解如何連接您的自訂網域。

增加 Google Analytics 的流程

您開發了一個很棒的網站。現在，是時候設定 Google Analytics 來監控基本指標，例如使用者數量、總瀏覽量、使用者會話持續時間和跳出率。 Google Analytics 還可以深入了解您網站的流量來源，讓您深入了解城市等特定位置。了解如何為您的網站設定 Google Analytics。

取得有關範本的協助

如果您是 Webflow 的新手，並且發現模板具有大量互動、自訂選單和難以自訂的彈出模式，您可以向模板設計者尋求協助。此外，許多模板設計者在其模板中包含對 documentation 的支援。

慶祝您在創建獨特且引人入勝的網站方面取得的成就，並與世界分享您的創意內容！