Weebly 新推出的 Section 功能

本文摘自於 Weebly in 3 Min

2016 年推出的 Weebly 4 有許多新功能,其中最矚目的功能就是 section 套件。section 是目前許多網頁首頁 (landing page) 設計的特色,它把網頁分成一層一層的,所以可以在一個頁面上敘述更多資訊,如下圖。

Landing Page Demo

網頁首頁有了 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。

<section>
  // Code anything you want here
</section>


你可以使用 CSS Style 來為這個 section 製作背景顏色和圖片。


3. 使用 <div>

此方法相當類似於第二個方法,不同處在於是使用 <div>。<div> 在 <section> 推出前是用來製作 section 的主要方法,其方法也是大同小異。將下列的 code 貼在你想要的位置上。

<div>
  // Code anything you want here
</div>



========================================================================

<section> 作為專門用來製作 section 非常合適,因為它在後續維護程式上不容易和其他一堆 <div> 混淆,而且所有瀏覽器在 2014 年前後都開始支援 <section> 了。看看下一篇關於如何透過 section 套件來使用 parallax 特色






comments powered by Disqus