架站勤拿手

04_[實作]設計「關於我們」版型與內容

前言

「關於我們」主要放公司的相關介紹，例如:起源、理念、大事紀、廠房照、設備照 、活動照、員工合影、董事長的話、證照證書…都可以放。

「關於我們」如果能提供的文案資料實在太不足，要做成獨立一頁怕會太空，需要好好發想怎樣排版才不顯得空洞，或是可考慮直接融入在首頁就可以了，但這邊仍獨立做成一頁來讓練習排版。

模仿對象

• https://ex-interior-design.smallway.com.tw/about/

說明

▍ 使用元素工具 :

標題、分隔線、內容編輯器、圖片(可另參考圖片細論)。

▍ 設計提示 :

• 從其它網頁複製文字來貼上時，記得用「純文字」貼上，避免複製到不必要的格式而無法修改。
• 上方一個大容器全寬100%，設定背景圖與高度。
• 下方一個大容器全寬100%背景淺藍，再包小容器全寬50%背景白並設邊框陰影與上外距位移→負外距。。
• 下方小容器內耜再切垂直2個小容器。
• 垂直2個小容器(上)用來放所有文案，置入標題、分隔線、內容編輯器。
• 垂直2個小容器(下)內部再細切3格，再置入圖片、標題、內容編輯器。
• 圖片加上陰影。

本篇作法之類似版型 : 點此

▍ 補充外掛 :

可裝可不裝，

要讓「內容編輯器」有比較多的控制項，像word文書工具那樣的功能，可以安裝「tinymce」。

安裝完成後，就可以在編寫文案時，可以有一個很像word文書軟體那樣的介面，就可以幫文字做粗體、底線、顏色、表格之類的功能。

05_[實作]設計「作品集」版型與內容

前言

作品集的作法有很多種，這裡針對新手，我們示範「圖片型態的作品集」。

模仿對象

• https://ex-interior-design.smallway.com.tw/portfolio/

準備

利用圖庫外掛，先導入適當量的圖或照片當成是「作品」。

後台搜尋安裝「Instant Images – One Click Image Uploads from Unsplash, Openverse, Pixabay and Pexels」，

安裝好後先在 後台/媒體/Instant Images 搜尋相關關鍵字(須用英文搜尋)以導入30張以上的圖片。

說明

這頁要模仿的版型較為簡單。

▍ 使用元素工具 :

標題、分隔線、藝廊。

▍設計提示 : 

• 容器: 切版起手式，外層全寬100%，內層80%，以做出左右留白。
• 在內容容器中置入 標題、分隔線、藝廊。
• 藝廊 : 選擇「多個」以做出分類切換效果。
  

  

▍ 參考外掛 :

後台安裝【Folders – Unlimited Folders to Organize Media Library Folder, Pages, Posts, File Manager】

以方便管理大量圖片，視需求安裝即可。

06_[實作]設計「聯絡我們」版型與內容

前言

如果你提供給客戶的聯絡方式很少，可以考慮不製作這一頁「聯絡我們」，而改以用「浮動按鈕-客服對話」來替代處理，

或你是製作一頁式網頁時也可以用此「浮動按鈕-客服對話」方式來製作聯絡方式。

當然可以同時製作「聯絡我們」與「浮動按鈕-客服對話」，兩者一起呈現效果更佳。

如果「聯絡表單」的設定太繁雜，就不要放”聯絡表單”，直接放其它LINE、Email、粉專私訊的方式即可。

實作模仿對象 :

• https://ex-interior-design.smallway.com.tw/contact2/

說明

▍使用元素工具 :

分隔線、標題、內文編輯器、圖片、圖示列表、google地圖。

新手練習以模仿為主，此頁中的文字資訊視需求增減。

▍設計提示:

• 容器: 切版起手式，外層全寬100%，內層80%，以做出左右留白。
• 內層容器 : 上，置入 分隔線、標題 。
• 內層容器 : 下，切一左一右之容器，再置入 圖片、圖示列表、google地圖。

▍會用到的特殊網址 :

LINE加好友網址，只要有ID就可以了，例 :

• 官方帳號：@smallway → https://line.me/ti/p/~@smallway#~
• 個人帳號：qtsgservice → https://line.me/ti/p/~ qtsgservice#~

google地圖外開連結 :

• http://maps.google.com/maps?q=台中市西區民生路140號

手機點擊電話可自動撥出:

• 連結前面放「tel:」→ tel:04223366、tel:0928666006

點擊Email可自動開啟本機寄信軟體

• 連結前面放「mailto:」→ mailto:[email protected]

補充:

表單寄信功能

表單想要正常可以把填寫完的內容發送出去，需要一個網域信箱(或稱企業信箱)來搭配，須先建立觀念後再來創立網域信箱，請參考這一篇的引導《為何我的網站無法正常寄出各式通知信？例:表單、忘記密碼、文章留言等等的通知信》。

如果新手對”表單”不熟，或是表單要加入網域信箱來寄信的設定不熟，建議您先不要加入表單功能，此聯絡我們的頁面就放入常用的聯絡方式即可, 參考下圖 :

如果需要學習「表單」的話 ，請自行參考以下影片:

▼表單之設定(37:23)

02_設置”新首頁”取代預設的”文章列表式首頁”

前言

在準備設計每一個頁面時，

我們須先將原本的首頁是部落格文章入口頁，改成新的空白首頁，

而原本的文章入口頁改成置入在主選單中。

也就是『設置”新首頁”取代”文章列表式首頁”』!

實作

■設置新首頁

1、新增頁面，命名為「首頁」

若已建立過首頁的頁面，可不用再建。

須發佈，不可存草稿。

2、到”設定/閱讀“

如下圖，到”設定/閱讀“，把「靜態頁面」的「靜態首頁」，指向為我們剛剛建好的那一頁新首頁。

3、至前台測試效果

到網站前台任何一頁，點擊LOGO或網站名稱，就會回到首頁，測試一下當回到首頁時，是否已經不是原本預設的「文章列表式首頁」了？

■文章入口頁改成置入在主選單中

(如果有規劃建立部落格專區再做此項設定，否則可先略過)

此時文章列表式首頁已消失，已被新首頁取代，

現在要把文章的入口頁改置入在主選單中。

1、新增頁面，命名為「部落格」或其它名稱如「設計專欄」

一樣要新增一個全新的頁面，如下圖。

(此頁命名為「部落格」或名稱自取。內容保持空白。)

須發佈，不可存草稿。

2、到”設定/閱讀“

如下圖，到”設定/閱讀“，把「靜態頁面」的「文章頁面」，指向為我們剛剛建好的那一頁「部落格」頁面。

3、編輯主選單

到「外觀/選單」編輯選單，把「部落格」那頁拉入主選單中。

4、至前台測試效果

到前台點擊主選單中的「部落格」，就會看見我們的部落格入口頁又回來了!