免費網頁設計教學,5種 WordPress 網頁設計方法|遠振 Blog

建立一個 WordPress 的網站並不困難,現在網路上教學非常多,你要擁有一個網站簡單,但是要擁有一個「怎麼樣」的網站卻不簡單,這就像是你開了一間麵店,但麵店裡面幾乎沒有「裝潢」是不行的,你可能會認為最主要是好吃!但其實在現今的社會當中,吸引到眼球才是第一步,這也是為什麼你需要學會 WordPress 網頁設計,也就是你網站的樣子。

以下將會介紹 5 種 WordPress 網頁設計方法,你可以從這五個地方去下手。

 

5 種 WordPress 網頁設計方法與教學

1. 使用 WordPress 主題

在 WordPress 的佈景主題當中,有分成「免費」與「付費」兩種不同的主題,在你一開始創建網站,還沒有什麼有趣的主題內容時,其實是可以先使用的,不過等你的網站經營到一個等級後,你會發現你需要更加精美,且優化過的主題出現。

不過,你要自己做出完全客製化,並且精美的網頁設計是困難的,但你可以試著用一些簡單的模板,也就是「佈景主體」將你的網頁變得更加精美漂亮,這也是為什麼 WordPress 受到許多人歡迎,因為你一鍵即可輕鬆解決這個問題,你可以在 WordPress 的後台找到。

使用 WordPress 主題的網頁設計教學

Step1. 到 WordPress 後台點選「外觀」並點選「佈景主題」,接著點選「安裝佈景主題」。

Step2. 你可以發現裡面有非常多免費可以使用的佈景主題,多達五千多種可以使用。請選擇適合您功能需求與樣式的佈景主題。

使用 WordPress 主題的網頁設計教學|遠振 Blog

Step3. 當你點選佈景主題之後,就可以預覽看到這個佈景主題會如何改變你的網站。

若你喜歡這一款佈景主題,只需要直接點擊「安裝」,就可以瞬間讓你的網站充滿設計感。

WordPress 網頁設計教學, 網頁設計自己來|遠振 Blog

2. 自訂 WordPress 主題

如果你還不滿足,覺得只有這樣設定後,還是有可能會跟其他人一樣,你不希望整個網站看起來是一樣的,能有點變化,那麼你可以選擇「自訂」自己的 WordPress 主題,在自訂裡面,你可以調整自己網頁的呈現,從列出可點選的項目、欄位的調整與內容、各個內容框裡面的顏色與文字大小等等,基本上你都可以從這裡去調整,而這裡調整後將可以讓你與同樣採用這個「佈景主題」的使用者網站不一樣,這也正是你自己可以做到的客製化。

透過自訂 WordPress 主題的網頁設計教學

Step1. 到 WordPress 後台點選「外觀」並點選「自訂」。

自訂 WordPress 主題來製作網頁設計|遠振 Blog

Step2. 從左邊開始去調整網站的樣子,你可以發現能做的事情其實還挺多的。

WordPress 網頁設計教學,自訂 WordPress 主題來設計網站|遠振 Blog

3. 使用 WordPress 頁面建構器

調整完整個網站需要的樣子後,接著就是針對產出內容的「頁面」去做文章,好消息是,網站本身就內建了頁面建構器,WordPress 頁面建構器可以快速的讓你的文章成行,你只需要將你的標題與內容打好,並且選擇幾張優美的圖片,就可以將你的文章放上網站當中,這是重要的,因為未來使用者都可能會透過你的文章進入的網站,所以文章的外觀也等同於你的外觀,這點是你該注意的。

使用 WordPress 頁面建構器的網頁設計教學

Step1. 到 WordPress 後台點選「文章」並點選「新增文章」。

使用 WordPress 頁面建構器來製作網頁設計|遠振 Blog

Step2. 在 WordPress 頁面建構器中放入你想要的標題、內容與圖片,以及一些文章設定,即可完成一篇文章,並發佈於網路當中(在原本 WordPress 頁面建構器當中,就已經有非常多種好使用的功能。

WordPress 網頁設計教學,WordPress 頁面建構器設計網頁|遠振 Blog

4. 使用 WordPress 外掛

如果你覺得 WordPress 頁面建構器不好用,那麼你可以選擇使用不同的頁面建構器,目前在 WordPress 插件當中,最為推薦使用的頁面建構器就是 Elementor,直覺化的設計,可以用拖拉的方式完成一整個頁面的設計。

使用 WordPress 外掛的網頁設計教學

Step1. 到 WordPress 後台點選「外掛」並點選「安裝外掛」。

使用 WordPress 外掛來製作網頁設計|遠振 Blog

Step2. 右邊搜尋打上「Elementor」,並安裝第一個 Elementor Website Builder。

Elementor Website Builder 安裝與設定的詳細教學請點及連結查看。

網頁設計自學,WordPress 網頁設計模板|遠振 Blog

Step3. 當你進行文章編輯時,就會看到 Elementor 的頁面建構器,使用 Elementor 多樣的編輯功能可以將你的網頁頁面裝潢得更加美觀。

免費 WordPress 網頁設計,網頁設計軟體|遠振 Blog

這是一款有分付費版與免費版的 WordPress 外掛,如果你喜歡的話也可以升級為付費版本,裡面有更多功能可以使用,不過同樣的,當你只是剛開始經營網站,你可以先嘗試使用一陣子的免費版本,再開始使用付費版本。

4. 使用 WordPress 樣式表(CSS)

最後一個,就偏向比較難的「寫程式」環節,因為你採用的是 WordPress,你若想要變得更與眾不同,那你就一定得會一些基本的程式語言,不過因為這範疇較廣,在這裡我也只能簡單提及到你該如何將網站頁面弄的更好看。

使用 WordPress 樣式表(CSS)的網頁設計教學

Step1. 到 WordPress 後台點選「外觀」再點選「自訂」。

使用 WordPress 樣式表(CSS)進行 WordPress 網頁設計|遠振 Blog

Step2. 你可以在下方填入 CSS。

從這裡可以做到更多元的變化,讓網頁有更不一樣的呈現。

WordPress CSS 網頁設計教學,網頁設計語言編輯|遠振 Blog

要讓整個網站變得好看,其實你有很多的方法,這邊提供最初淺的幾種方式,讓你可以以最快的速度做到更改自己的網站到頁面的呈現樣子,而將網站變好看,具有設計感,本身就是一件需要被重視的事情,當你今天擁有能夠吸引他人進入的樣子,才會帶來更多的流量甚至是商業機會。