Webflow 必學的五大技巧 | Webflow 中文教學

當開始回想起我剛開始學習如何使用 Webflow 時，有一些技巧是希望自己能早點知道，而這些 tips 絕對會讓我的 Webflow 學習之旅變得更加輕鬆！

Webflow 並不像 Squarespace 或 Wix 那樣簡單的工作方式，這也是它神奇的原因。簡單來說 Squarespace 和 Wix 等網站建設者採用基於模板拖拉的方法，它們可以輕鬆快速地選擇模板、刪除一些內容並快速的發佈網站。

而 Webflow 允許設計師從空白畫布開始，擁抱創作的天空。當然，你也可以從模板開始，並根據自己的喜好對其進行完全自定義，而無需編寫任何代碼。當然了解編碼的知識會讓你使用 Weblfow 更加容易，因為可以自訂化更困難的排版或動畫。

Tendemy 推出了Webflow中文教學課程！提供給大家參考。

了解 HTML + CSS 會讓一切變得更簡單

儘管在使用 Webflow 時您根本不需要編寫任何代碼，但了解 HTML 和 CSS 將大大降低學習曲線。Webflow 網站是通過使用基本的 HTML 構建塊（如部分、div、標題）構建的，並且這些都是使用模仿 CSS 工作方式的可視化編輯器來設置樣式的。

若想要正確佈局您的設計，基本上還是需要了解每個 HTML 構建塊的行為方式。需要理解的重要原則示例：

div是塊級元素，這意味著它總是從新行開始並佔據可用的全部寬度。
Margin 是元素周圍的空間，而 padding 是元素與其內部內容之間的空間。

這兩個原則只是在使用 Webflow 時需要了解的其中兩個，如果沒有這個基本的理解，當你將一個 div 放到你的畫布中並且它沒有與另一個元素並排放置時，可能會有點不知所措。就像最一開始我在碰 Webflow 的時候，連一個 div 都沒有用到，導致網站整體的架構變得非常複雜。

因此，我非常強烈建議在深入研究 Webflow 之前請必須了解 HTML 和 CSS 的基本入門課程！

2.從複製模板及利用可以clone的專案中學習

如果你才剛學了 HTML 和 CSS 的基礎知識，並且通過將一些元素拖放到畫布上創建了一個基本的 Webflow 登錄頁面。同時也渴望創作那些很酷的設計且有動畫網站，該怎麼開始呢？

“Plagiarism is trying to pass someone else’s work as your own. Copying is about reverse-engineering. It’s like a mechanic taking apart a car to see how it works.” — Austin Kleon, author of Steal Like an Artist

我們可以利用反向工程來看這個專案是怎麼做的，來搞清楚它的運行方式。就像修理工拆開汽車來看它的工作原理一樣，或者像畫家拷貝畢卡索的作品。當你研究他們的作品，並把這些東西轉化為自己的方式，而非單純表層模仿，就會變成你自己的東西。

Webflo 模板

目前有兩個很棒的地方可以找到令人難以置信的 Webflow 專案展示的地方，我們完全可以從中學習。第一個是 Webflow 提供的付費/ 免費模板的地方，這個平台可以當作專案發想的起點。

我非常推薦利用研究些模板來了解作者構建方式，當作學習工具。以下是你可以開始做的：

到 Webflow Templates 查看所有可用模板，並選擇您喜歡的模板
進入所選模板的頁面後，點擊 “Preview in Designer”按鈕，即可進入 Webflow 介面
帶到該模板的 Webflow 設計介面時，點擊左上角的藍眼睛圖標
現在您可以點擊查看每個元素和部分是如何構建的

注意：如果你計畫重建頁面來練習使用 Webflow（我們非～～常強烈推薦你用這種方式來練習），你會需要該頁面上的所有圖像和圖標。為了快速下載所有這些圖片，有一個很棒的 extension 叫做CSS Peeper，它可以讓您快速下載所有內容！

Webflow Clonable Showcase 可複製的模板

第二名是 Webflow Clonable Showcase。這是由 Webflow Community 創作者創立且可複製項目的集合的地方。

任何人都可以複製其這些項目，並將它們用作其項目的模板或使用該項目中的任何單個元素。同樣，這也是一個了解其他人如何構建項目的好地方。在這裡複製專案的想法不是複制和傳遞別人的作品然後又作為你自己的作品，通常是為了了解其他創作者如何能夠實現某種交互動畫或設計。其實這是逆向工程的學習工具。

Tenten 目前釋出的兩款設計模板也可以讓大家下載克隆唷！

https://webflow.com/website/the-pineapple

https://webflow.com/website/designer-portfolio-tenten

3. 默認 class, style, combo class

將元素拖放到畫布上並開始向其中添加樣式非常容易。但是，當您這樣做時，Webflow 會自動為該元素分配一個類。通常它是隨機的，比如“ Heading 1”，因此有時會因為相同 class 命名的關係，改到原本預計不同的設計。

默認 Style
當我們開始一個新項目時，我們可能已經創建了一個figma設計檔案，該檔案已經定義好我們要使用的字體、標題的大小、段落的長短等。因此，我們可以通過首先將這些默認樣式設置為相應的 HTML 標籤來開始我們的 Webflow 項目。

當我們第一次向我們的項目添加一個段落時，我們可以單擊右側面板上的 Selector 字段，然後選擇“All Paragraphs”。現在我們添加的任何樣式都將成為所有段落的默認樣式！這意味著我們不必每次添加段落時都手動重新輸入相同的樣式值，這將是不必要的浪費時間。

Classes
由於您現在對 HTML 和 CSS 的工作原理有了基本的了解，因此您知道什麼是 Class。Class 旨在節省您的時間。假設您已經為段落設置了默認樣式，但現在您需要一個充當副標題的段落，因此需要稍大的字體，這就是 Class 應該要重新設置的地方。

你可以給這個新段落一個類，比如“subtitle”，然後進行更改。下次您在項目中需要另一個副標題時，您可以簡單地添加一個段落並將其指定為“副標題”類，它將繼承您最初為該類設置的所有樣式。

你可能會注意到某些數值會顯示藍色或橘色。如果它是藍色的，這意味著樣式來自當前類、標記或斷點。如果它是橘色的，則表示該樣式是從另一個類、標記或斷點繼承的。當您更改以橘色突出顯示的其中一種樣式時，指示器將變為藍色，表示它現在屬於類、標記或斷點。

Combo Classes 組合類

在第一個類之後添加的任何後續類都稱為組合類。當您需要創建異常或更改上一個類的某件事時，組合類非常有用。讓我們回到上面的字幕的案例。

若正在添加一個看起來與之前的字幕相同的新字幕，只是這個新字幕的文本顏色現在是藍色而不是黑色。您可以簡單地添加一個名稱為“is - blue” 的組合類，並將文本顏色更改為藍色。現在，只要您的項目中需要另一個藍色字幕，您就可以重用這個組合類。

如果您需要更改最基本的指令，單擊 Selector 字段旁邊右側面板上的“Inheriting # selectors”即可單擊上一個class。

4. 創建可重複使用的 symbols

創建 symbols 是將這個元素在專案中重複使用來節省時間的好方法。symbols 可以是按鈕、menu、hero seciton、card、footer。symbols 可重用元素可以大大加快項目的開發速度。

Webflow 定義了兩種類型的symbols。第一種類型是每個實例具有相同內容的 symbols，它們是具有相同內容並在整個設計中重複的符號，例如 menu 和 footer。在一個地方編輯這些將在您的項目中的任何地方更新它們。

5. 互動動畫

Webflow 有一個可視化界面，可以幫助您再次創建非常棒的互動動畫，且無需編寫任何代碼！透過介面即可創建基於滾動、單擊、hover、頁面加載等簡單的動畫。只需單擊即設定，即可非常輕鬆地為網站添加更豐富的視覺效果。

感謝 Airbnb 的設計團隊的貢獻，現在任何人都可以在 Adobe After Effects 中創建動畫並使用 Lottie 輕鬆將它們添加到他們的網站！您無需編寫任何復雜的 javascript 代碼，只需使用 bodymovin 插件即可將您的 AE 動畫導出為 Lottie JSON 文件。

進入 Webflow 後，您只需添加一個 Lottie 元素並上傳您的 JSON 文件。將其添加到您的網站後，即可讓它循環播放，也可以使用 Webflow 交互來控制它們，讓它們在滾動或點擊時進行動畫處理。

顯示 Lottie 界面的 Webflow 工作區左側面板的屏幕截圖
如果您不熟悉 Adobe After Effects，Lottie 實際上提供了一堆免費動畫，您只需下載和使用即可。您甚至可以直接在他們的網站內編輯任何圖層顏色。

Webflow 其實還有非常非常多的使用技巧，我們沒辦法在這一篇單獨講完，畢竟這樣會變成超級長的一篇文。後續 tenten 也會推出 Webflow 設計系列的課程讓大家一起學習，若你對 Webflow 有任何問題，歡迎加入我們的中文討論區，會有許多學長姐可以幫助你。

更多閱讀：