麥克斯與沃普雷司

Free WordPress Themes Himalayas – 佈景主題安裝與設定

Free WordPress Themes Himalayas

Free WordPress Themes Himalayas

WordPress Themes – 佈景主題安裝與推薦這篇文章跟大家分享了幾個關於一頁式佈景主題的特色,max 個人非常喜歡這一類式樣設計的佈景主題,簡潔大方的編排方式,平滑順暢的捲動方式,多種行動裝置支援,網站功能介紹集中在首頁,可以讓訪客感受專業的網站設計,最重要的是操作容易,這對於初接觸 WordPress 的朋友來說真的是最好的一個禮物了。接著就以  Free WordPress Themes Himalayas 這個免費佈景主題來做範例,一步一步的設定介紹,讓大家可以清楚看到一個網站的建置過程,由簡單到專業設計呈現,其實並沒有想像中的那麼困難。

安裝 Himalayas 佈景主題

在控制台的外觀/佈景主題/新增佈景主題,請輸入 Himalayas(圖一),安裝完成後請啟用佈景主題。在開始建置網頁前,也請記得先切換使用子佈景主題。這樣子在往後的維護與升級上比較容易管理,也可以避免因為修改設計失誤時造成網站無法開啟的錯誤。

(圖一)安裝Himalayas佈景主題

 

Himalayas 佈景主題區塊說明

Himalayas 的DEMO網頁,可以在 http://demo.themegrill.com/himalayas/ 看到完整展示,這類型一頁式網頁的設計,可以看到相關的功能都建置在同一個頁面上,透過上方的功能選單,直接捲動到功能區塊,很適合內容不常更新的網站使用。接著就跟大家說明一下整個網站功能架構(圖二)(圖三)(圖四)。

(圖二)Himalayas 佈景主題區塊1/2/3/4說明

 

(圖三)Himalayas 佈景主題區塊5/6/7說明

 

(圖四)Himalayas 佈景主題區塊8/9/10/11/12說明

 

 

開始建置網站

前一段的說明如果清楚也依序建置好相關頁面後,接下來的建置就可以事半功倍了。另外需要注意的是每一篇需要的頁面,都需要記得新增特色圖片(圖五),這樣子首頁的呈現效果才會有圖片顯示。區塊1 上方選單,我們移到後面在述,先從區塊2開始。
 

(圖五)新增特色圖片

 
區塊2 Slider Setting,在控制台/外觀/自訂/Himalayas Slider Options/Slider Settings, Enable the slider 請勾選,啟用 Slider 展示功能。Slider1/Slider2/Slider3/Slider4 請分別勾選已經建置好的 Slider 頁面(*1)(圖六)。

(圖六)選取Slider 頁面

 
區塊3 About Us,在控制台/外觀/自訂/小工具/Front Page Sidebar,新增小工具(圖七),加入TG: About Widget(圖八),About Us 區塊設定資料(圖九)。

  1. About Section ID: 請填入字串或是文字,也請將這組文字記下來,在建置上方選單時會用到。
  2. Title: 請填寫標題,例如關於網站或是 About Us
  3. Description: 簡單描述這個區塊的說明。
  4. Page: 請選擇事先建置好的關於頁面(About Us)(*2)。
  5. Button Text: 按鈕文字,這裡建立按鈕的目的是可以增加連結的功能,可以是情況建置或是留空白。
  6. Button Redirect Link: 這一欄填入的是上方按鈕所需要的連結網址,如果有建置按鈕才需要填入連結。
  7. Button Icon Class: 可以顯示 Font Awesome 圖形,測試效果不顯著,所以跳過留白,不會影響頁面展示效果。

 

(圖七)新增小工具

 

(圖八)新增TG: About Widget

 

(圖九)設定TG: About Widget

 
區塊4 Call to Action,繼續新增小工具,TG: Call To Action Widget(圖十)。TG: Call To Action Widget 設定(圖十一)。

  1. Background Color:這裡可以選擇區塊背景顏色。
  2. Image:想要使用背景圖片的話,可以在這裡選擇。
  3. Call to Action Main Text:區塊的主要描述文字,也可以視為標題文字。
  4. Call to Action Additional Text :區塊的附加描述文字內容。
  5. Button Text:區塊按鈕顯示文字,例如:立刻參加或是立即訂購…可以自行參考網站需求設定。
  6. Button Redirect Link :按鈕連結網址。
  7. Choose the layout :這裡有兩種版型可以選擇,呈現的效果就是區塊4與區塊8。

 

(圖十)新增TG: Call To Action Widget

 

(圖十一)TG: Call To Action Widget 設定

 

 
區塊5 Our Service,繼續新增小工具,TG: Service Widget(圖十二),這個區塊顯示網站的服務內容,關於服務內容的頁面需要先行建置,建置服務內容頁面時,模版請選擇Service Template,特色圖片也請建立好,至於文章摘要部分請自行決定輸入內容,填入的內容會顯示在首頁的Our Service(我們的服務)區塊(圖十三),服務內容頁面建置好以後,就可以設定TG: Service Widget(圖十四)。

  1. Service Section ID:填入資料並且記下來這裡的設定,上方選單建置時會用到。
  2. Title:服務區塊標題。
  3. Description:服務區塊的簡單描述。
  4. Number of pages to display:預設是6篇服務頁面,也可以自行修改設定。

 

(圖十二)新增TG: Service Widget

 

(圖十三)新增service 頁面

 

(圖十四)TG: Service Widget 設定

 
區塊6 PORTFOLIO,繼續新增小工具,TG: Portfolio(圖十五),Portfolio 頁面內容,也是一樣必須事先建置好,建置時模版請選擇 Portfolio Template(圖十六)同樣的特色圖片與文章摘要欄位編輯時不要忘記。Portfolio 頁面確實建置好以後就可以進行 Portfolio 設定(圖十七)。

  1. Portfolio Section ID:填入資料並且記下來這裡的設定,上方選單建置時會用到。
  2. Title:作品展示區塊標題。
  3. Description:作品展示區塊的簡單描述。
  4. Number of pages to display:預設是8篇Portfolio頁面,也可以自行修改設定。

 

(圖十五)新增小工具,TG: Portfolio

 

(圖十六)新增 Portfolio 頁面

 

(圖十七)TG: Portfolio 設定

 
區塊7 Blog,繼續新增小工具,TG: Featured Posts(圖十八),TG: Featured Posts 設定(圖十九)。

  1. Featured Post Section ID:同樣的填入資料並且記下來這裡的設定,建置上方選單時會用到。
  2. Background Color:背景顏色選擇。
  3. Image:是否選擇使用背景圖片,在這裡選擇。
  4. Title:Blog 區塊的標題設定。
  5. Description:Blog 區塊的簡單說明描述。
  6. Number of posts to display:預設是展示3篇文章,Show latest Posts 顯示最新文章。
  7. Select category:或是選擇特定分類的文章顯示。
  8. Button Text:按鈕文字設定,這裡建議可以填入例如閱讀更多(View All),可以顯示更多文章的意思。
  9. Button Redirect Link:網站Blog 的網址,這樣訪客如果有興趣閱讀更多的文章,可以找到連結。

 

 
區塊8與區塊4建置方式相同,這裡就不重複說明。
 
區塊9 Our Team,建置方式一樣的繼續新增小工具,TG: Our Team Widget(圖二十),Our Team 頁面請先建置好,建置時模版請選擇 Our Team Template(圖二十一),頁面建置好以後,就可以進行TG: Our Team 設定(圖二十二)。

  1. Our Team Section ID:這裡填入資料並且記下來設定,建置上方選單時會用到。
  2. Background Color:背景顏色選擇。
  3. Background Image:選擇使用背景圖片。
  4. Title:Our Team 區塊的標題設定。
  5. Description:Our Team 區塊的說明描述。
  6. Number of pages to display:預設是展示3篇 our Team 頁面。

 

(圖二十)TG: Our Team Widget

 

(圖二十一)新增小Our Team 頁面

 

(圖二十二)設定 Our Team Widget

 
區塊10 Contact Us,建置與我們聯絡區塊,請新增小工具,TG: Contact Us Widget(圖二十三),聯絡頁面前面文章提到,是透過 Contact Form 7 這個外掛程式來建置的。因此,我們可以取得一組簡碼(Shortcode)(圖二十四),聯絡頁面建置好記下簡碼(Shortcode),接著進行TG: Contact Us Widget 設定(圖二十五)。

  1. Contact Section ID:這裡填入資料並且記下來設定,建置上方選單時會用到。
  2. Title:標題可以自行填入,例如與我們聯絡。
  3. Description:這裡可以輸入一些聯絡資訊,例如地址電話或是電郵…等等。
  4. Select a Contact page:請點選建置好的聯絡頁面。
  5. Shortcode:建置聯絡頁面時,外掛程式提供的簡碼(Shortcode)。

 

(圖二十三)新增小工具TG: Contact Us Widget

 

(圖二十四)聯絡頁面簡碼(Shortcode)

 

(圖二十五)TG: Contact Us Widget 設定

 
區塊11 Footer Sidebar,這個區塊的建立在小工具,Footer Sidebar One/Footer Sidebar Two/Footer Sidebar Three 這三個區塊(圖二十六),可以自行加入想要呈現的功能(圖二十七)。
 

(圖二十六)新增小工具 Footer Sidebar

 

(圖二十七)新增小工具 Footer Sidebar 內容

 
區塊12 Footer Layout,最後這一個區塊的建立是在控制台的外觀/自訂/Himalayas Design Options/Footer Layout Options,有兩種式樣可以選擇,可以自行挑選喜歡的式樣(圖二十八)(圖二十九)(圖三十)。
 

(圖二十八)Himalayas Design Options

 

(圖二十九)Footer Layout Options

 

(圖三十)Select the Footer Layout

 
區塊1 上方選單,文章到這裡,整個網頁的架構就算已經完成,最後剩下一個重要的建置那就是上方選單,這個選單最大的目的就是可以實現這個一頁式網站的主要導引。接著我們就開始進行上方選單的製作。

  1. 到控制台的外觀/選單/建立選單(圖三十一),選單名稱可以自行填入例如上方選單。
  2. 使用自訂連結,並且將它拉到選單結構內,這裡我們以About Us 做範例,連結網址請輸入關於我們頁面的完整網址,後面記得加上#IDID就是前面文章一直提到要大家記下來的那個ID,這裡就是指About Section ID,導覽命名:是指上方選單想要出現的文字,可以自行填入,在這裡我們範例是About Us(圖三十二)。接著依序將Our Service/Portfolio/Blog/Our Team/Contact Us 一併在選單結構內建置完畢,選單設定的地方,請點選 Primary Menu (主選單的意思),完成後點選儲存選單
  3.  

    (圖三十)建立選單

     

    (圖三十二)Primary Menu 儲存選單

     

    以上完成

    為了讓步驟可以清楚表達,提升大家閱讀的效果,文章內容圖片比較多,也謝謝大家耐心閱讀。整個佈景主題安裝設計步驟完成以後,相信任何佈景主題的安裝或是設定都難不倒各位了。
     

     


     
Exit mobile version