4 種在 Weebly 上修改 CSS 的方法

本文摘自 <Weebly in 3 Min>

前言:本文假設讀者已經具有 CSS 的基本知識。

Weebly 雖然不像 Wix 一樣有許多的主題和套件模板供你選擇,但他們開放程式碼讓你修改 HTML, CSS, 和 JavaScript,讓你可以自己打造和客製化自己的套件 (點這了解如何修改程式碼)。本文章將要教你四種在 Weebly 修改 CSS 的方法。



1. 為單一頁面增添 CSS

有時候為了在特定頁面上添加一些額外套件,尤其是 Weebly 沒有的套件,像是 背景影片 或是 banner,就必須添加額外為套件所寫的 CSS。首先,進入 Pages > 選擇你要的 Pages > SEO settings > Header Code,並照以下指示添加程式碼。

<style>
  // Add your CSS code here
</style>
這樣的 CSS code 只能應用在單一頁面上,好處是它不會增加其他頁面 loading 的負擔。


2. 在網站的 SEO Setting 修改 CSS
如果想要針對整個網站的設計進行簡單的修改, 像是改變整體文字的預設大小或顏色,可以到 Settings > SEO > Header Code 添加以下的 code。
<style>
  // Add your CSS code here
</style>



3. 在 main style sheet 或是 main.less 上修改 CSS

如果是要從事更複雜的 CSS 修改,像是 navigation bar, footer,就必須要修改你的 main style sheet。這邊,我假設你已經閱讀了 <如何修改程式碼>。進入 HTML Edit,然後找到 main-style.css,或是 main.css,或是 main.less,如下圖。

( p.s. 不同的 Weebly 主題模板使用不同的 CSS file,2016 以前的 Weebly 主題使用純 css,之後使用 less。Less 是 CSS 的 pre-processor,它簡化了一些 CSS 的步驟,不過同樣是可以接受 CSS code。)


這邊你可以找到所有網站套件會使用到的 CSS。你可以直接編輯這些 CSS,或是透過 !important 的手段另外寫 CSS 來 override 本來的設定。要記得的是,只要是有添加或是更改 CSS 都要用 comments 來標注本來的設定,如以下。每次修改 CSS 加上 comments 是個好習慣,尤其是之後要再回復成原本設定就方便了。

  .copyright {
  font-size: 16px; /* Original size is 14px */
  text-align: center; /* Orignial text is left-aligned */
  color: white;  /* Original text color is black */
}
因為 main style sheet 上的 CSS 會應用到整個網站,所以不建議隨意修改。而且在 main style sheet 上添加太多的 CSS 會造成後續維護的負擔。


4. 上傳額外的 CSS 檔案
最後一個也是最少人知道的手段,就是上傳額外的 CSS 檔案。進入 Theme > HTML Edit > Assets 後,你可以將 CSS 檔案上傳到這邊,如下圖。


之後在 Page > Header Code 中添加下列的 code 呼叫 CSS file 就好了。
<link href="http://yourwebsite.com/files/theme/your-css-file.css"
rel="stylesheet" type="text/css"/>

對某些人來說 - 當需要寫為數較多的 CSS 時,在單一頁面上的 header code 既不適合,而 main style sheet 也已經負載過多,這時候有個獨立的 CSS 檔案就有好處。另外,如果你還沒有意識到的話,其實你也可以在你的 Weebly 網站上存放 CSS 檔案和其他圖片資源來供你的其他網站使用。





延伸閱讀:<如何修改 HTML> <如何修改 JavaScript>

客製化 Weebly 的 "404 找不到" 頁面

本文摘自於 <Weebly in 3 Min>


"404 找不到" 是 HTTP 裡的預設反應。當伺服器沒辦法提供網頁給使用者輸入的連結時, 404 頁面就會回傳給使用者。通常是因為使用者輸入的連結已經損壞或是更新,導致他現在輸入的網址沒有對應的網頁。想必大家一定有經歷過 Google 上的 404 頁面。

Google's 404 Page



雖然 "404 找不到" 乍看之下不是很重要,但是專業的網站總是會賦予它一些令人驚喜的設計,像是 Imgur 的 404 頁面,如下圖。英國的 Metro News 特地為 404 頁面做了報導,因為越來越多網路公司認知到 - 有好的 404 頁面設計會給找不到網址的使用者一點安慰和一點驚喜。

Imgur 404 Page

Weebly 有為使用者預設一些簡單的 "404 找不到",但是他的設計既無聊又沒變化,都是使用千篇一律的 “404 找不到" 風格,如下圖。
404 on Weebly

不過 Weebly 的平台上有個小竅門讓你可以客製化你自己的 "404" 頁面。首先,在你的網站上成立一個頁面,命名為 "404",並點選 Hide in Navigation 將它隱藏起來,如下圖。你也可以更進一步到 SEO settings 將 404 頁面隱藏起來,不被搜尋引擎找到。



成立 404 頁面後,Weebly 會將你網站上搜尋不到的網址自動導向至這個頁面。接下來,你就可以針對這個 404 頁面重新設計啦~。你可以將一些有趣的 imgur GIF 連結附在你的 404 頁面上,像是 Weebly in 3 Min 的 404 頁面 ; 你也可以參考國外這個部落格統整了 <36 樣有趣的 404 頁面設計>。


好的 404 頁面設計具備以下三大特徵:

1. 引導使用者到正確的網址或者是首頁。

2. 提供使用者直接聯絡你的方法。通常會被引導到 404 頁面是因為網址出現問題,或者是舊的網址已經故障。

3. 發揮你的創意~


Weebly in 3 Min's 404 Page

最後,404 頁面可以想成是網站上的最後一道防線,因為輸入的網址已經損壞或是更新了。如果要防止網址損壞或是更新的問題,讓使用者可以順利找到他想要的連結,建議參考我的 <善用 301 頁面>。





善用 Weebly 的 "301" 頁面

本文摘自於 <Weebly in 3 Min>


經營網站或是部落格久了,就會常遇到要將網站搬家搬到另外一個主機或是另一個部落格或是架站服務,這時候網址轉換就很頭大了。舉個例子,之前的網站可能要求你所有網頁的網址後面加上 php 檔名,但是你搬家後的新網站則是要求換成 html 檔名。可是,大部分的人只知道你的舊網址,而不知道你的新網址。這時候," 301 (Redirect)" 就很重要了。它是 HTTP 一個可以將網址導向另外一個網址的方法。當伺服器接到 301 的訊息,知道本來輸入的網址現在已經是另外一個網址,它會立即連到另外一個網址。


Weebly 上也提供了 "301 Redirect" 的服務。首先,進入 Settings > SEO > 301 Redirects > Add Redirect,如下圖。



接下來,把你的舊網址列在 "Old URL" 下方,然後再把對應的 Weebly 頁面列在對應的 Destination Page,如下圖。



儲存之後,你可以以此類推繼續接下去,如下圖。另外,多個舊網址可以同時連到一個新網址。



" 301 "的應用非常廣。許多時候,當你要將兩個網頁合併成一個網頁,需要把其中一個網址導向至另外一個網址,都可以使用 "301 Redirect"。









延伸閱讀 < 如何客製化 "404 找不到" 頁面 >


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 特色






在 Weebly 上使用 Parallax 功能

本文摘自  <Weebly in 3 Min>



Parallax 自 2014 年起開始風行於國外各網站首頁。它是一個讓你在滑動網頁時,可以將背景圖片定格在固定位置的功能。使用 Parallax 功能可以增加你的網站層次 (layer),讓你的網站設計看起來更豐富,如下圖。


Parallax 功能 。 範例頁面

Weebly 在 2016 年推出的 Weebly 4 也新增了 Parallax 功能。本篇文章將會教你要如何在 Weebly 上使用 Parallax 功能。Weebly 2016 年後推出的主題 (Theme) 都能夠讓你使用 section 功能,而透過 section 你就可以使用 Parallax。

p.s. 如果你使用的 Weebly 主題是在 2016 年以前推出的,可能就沒有辦法使用 section 功能,也就沒有辦法使用 Parallax。

有兩種方法可以在 Weebly 上使用 Parallax:


  1. 在有使用 header 的頁面上,點擊 header 兩下來設定 header 的背景,接著會跳出兩個選項,選擇 Edit Background,然後選擇 Image,如下圖 1。


    圖 1

    接著選擇 Scrolling Effect >> Parallax,如下圖 2。

    圖 2
    更新後,你將發現網頁的 header 就有 Parallax 的功能了。

  2. 其實在 header 以外的地方也可以使用 Parallax。在 Drag and Drop 的 section 套件也可以讓你section 上的 background image 做 Parallax 的功能,如下圖 1 和 圖 2。 

圖 1
圖 2。 Edit Background >> Image >> Add Image >> 選 Image >> Select
當然在 section 上添加 Parallax 的過程中,你會發現 section 其實有非常多的功能。我們在另外一篇文章會討論更多關於 Weebly 新推出的 section 功能