本文摘自於 <Hank Chan's Blog>
2016 年推出的 Weebly 4 有許多新功能,其中最矚目的功能就是 section 套件。section 是目前許多網頁首頁 (landing page) 設計的特色,它把網頁分成一層一層的,所以可以在一個頁面上敘述更多資訊,如下圖。
網頁首頁有了 section 功能,就能完整得敘述一個故事,也更能說服為什麼顧客需要購買你的產品。要知道,通常新到訪的顧客只會花幾秒的時間來瀏覽你的首頁,決定要不要繼續看下去。如果你的首頁不吸引人,就算你的服務再好使用者也不會再繼續看下去。 1. Drag & Drop 要在 Weebly 上使用 section 套件,首先,在 drag and drop 上找到 section,然後拖曳到你想要的位置,如下圖。
如上圖, section 另有提供你幾種不同的 layout 選擇,有 Gallery, Team, Featured, Menu, 和 contact。你可以依據你頁面上的內容來選擇想要的 layout。在給大家一個使用 section 的案例來參考。
2. 使用 <section>
如果你使用的 Weebly 主題 (Theme) 是 2016 年前的,可能會沒有支援 Section 功能。這樣你得親自寫 code 了。
本文將教你如何使用 HTML 5 的最新功能 <section>,來輕鬆寫出自己的第一個 Landing Page。先閱讀 <如何修改程式碼> 和 <三種修改 HTML 的技巧>,並找到下列的位置
Theme > Edit HTML/CSS > Header Type > 你想要的 HTML 模版上。在你想要的位置上貼上以下的 code。
你可以使用 CSS Style 來為這個 section 製作背景顏色和圖片。
3. 使用 <div>
此方法相當類似於第二個方法,不同處在於是使用 <div>。<div> 在 <section> 推出前是用來製作 section 的主要方法,其方法也是大同小異。將下列的 code 貼在你想要的位置上。 ======================================================================== <section> 作為專門用來製作 section 非常合適,因為它在後續維護程式上不容易和其他一堆 <div> 混淆,而且所有瀏覽器在 2014 年前後都開始支援 <section> 了。看看下一篇關於如何透過 section 套件來使用 parallax 特色。
Comments
|
Details
Hank在原本想幫家裡 中藥店 架網站的想法下,誤打誤撞的進入了 Weebly 的世界,從此成為 Weebly 的愛好者. Categories |