WordPress 設計網頁外觀完整圖解教學

本篇將介紹如何設計網站的外觀及排版,讓你的網站變成屬於自記設計風個的網站。而你的網站在網頁、手機、平板呈現的方式及排版是不同的,所以有可能你把網站設計的很美,但是在手機上面卻因為跑板而無法呈現。本篇也會教你如何透過自訂器調整你在手機、平板的設計,也就是所謂的響應式設計。

自訂網路設計

首先點選網頁左上角的自訂,就可以跳到網頁設計的自訂頁面了,裡頭就有許多可以自己設計網頁的項目了。

WordPress
自訂網路設計

首先點選左邊的網誌文章,裡面的網誌結構就可以調整妳文章的結構,而資訊欄的部門則可以讓你所有的文章標題呈現在網頁的右方。(資訊欄的設定可以透過一般選項 -> 資訊欄 或 小工具 ->主要資訊欄 去設定)

網誌結構

而其他的像是頁面、單篇文章、分類、資訊欄,都是透過同樣的方式去調整設計的

頁面 : 你的介紹 (ex:自我介紹)

單篇文章 : 每篇文章可以做個別的設計

分類 : 將你文章的分類做排版

資訊欄 : 右邊或左邊的資訊欄排版,有加資訊欄才有

響應式網頁設計(Responsive Web Design)

響應式網頁設計簡稱RWD,是一種能讓網站在電腦、手機、平板都能有良好的體驗,會根據在不同的裝置上有不同的排版及設計,像是文字、圖片大小…。

在自訂器中的左下角有一個電腦、平板、手機的圖標,他分別代表在不同裝置上會呈現的頁面樣子,之後你就可以根據不同的裝置去修改你的呈現方式。(記得先安裝Blocksy Companion外掛)

響應式網頁設計

自訂網站標題、LOGO

可以從自訂項目 -> 網站識別中,設定網站標題以及網站說明,如果想要網站有LOGO的話則點選 ‘選取網站圖示’加入屬於自己的網站LOGO,一個好的網站LOGO像是youtube的LOGO就是

image 8
自訂網站標題

自訂項目 -> 網誌文章 -> 卡片選項 ,也能對網頁做很多不同的設計,像是字體顏色大、大小、顯示排版,大家可以玩玩看~

卡片選項

如果想要將你的網站名稱轉成你的個人圖案可以由自訂項目 ->頁首 ->標誌去新增(頁尾也是一樣 自訂項目 ->頁尾)

網頁標誌

網站的設計是需要每個人自己去設計的,祝大家都可以擁有屬於自己特色的網站~

相關文章 :

WordPress 完整介紹教學

WordPress 佈景主題

WordPress新增文章、頁面、選單

WordPress 設計網頁外觀

WordPress 電子報 + 網站分析工具

變更WordPress 首頁 (靜態首頁)