架站勤拿手

03_[實作]設計「首頁」版型與內容

前言

學習頁面設計的最好方式，就是拿一個網站來「模仿」，有人手把手帶你從首頁開始，把每一頁都模仿做一遍，進步就很快，成效會很明顯且很有成就感。

首頁，有時候是最後才設計的，為何？因首頁一般會把其它各頁面的資料「摘要」一些置入首頁，以達到「入口頁」的作用，故有時候會等其它頁面完成後才來設計首頁。

模仿對象

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

準備工作

後台安裝免費圖庫外掛 : Instant Images

實作

第1區塊:Banner區 

▍ 使用元素工具 :

標題、內容編輯器。

▍ 設計提示 :

• 容器:外層全寬100%，並替容器設定適當高度。
• 背景圖 :挑選可左右滿版的大圖背景的寬度至少要3000px以上為佳。
• 替元素加上載入動畫。
• 可加入按鈕錨點連到下方某一區塊。

第2區塊:最新消息 

▍ 使用元素工具 :

標題、內容編輯器、分隔線、圖示列表。

▍ 設計提示 :

• 容器: 切版起手式，外層全寬100%，內層80%，以做出左右留白。
• 背景:大容器設定純白色背景。
• 切版:從80%容器再切左右兩欄。
• 最新消息標題:標題，用絕對定位讓它壓在框線上。
• 最新消息內容:新手練習用純文字(內容編輯器)，進階學習時用Post載入列表標題。
• 簡介標題:用分隔線做出標題+線條。
• 簡介內容:用純文字(內容編輯器)。
• 保證標題:用分隔線做出標題+線條。
• 保證內容:用圖示列表。
• 背景文字:標題填上Interior Design ，再用絕對定位(用%控制)、z-index調-1。(新手覺得太難可略過)

第3區塊:服務項目與流程

▍ 使用元素工具 :

標題、分隔線、圖示、媒體輪播、內容編輯器、錨點。

▍ 設計提示 :

• 容器: 切版起手式，外層全寬100%，內層80%，以做出左右留白。
• 背景:大容器設定淺灰色背景。
• 切版:80%容器再製一個，則會有2個80%容器上下垂直排列。
• (上)主要服務內容:用水平排列數個小容器，再置入圖示與標題。
• (下)細切:從下方80%容器中再切左右兩欄, 左30%右70%。
• 服務流程步驟:右邊會有兩個區塊，兩個區塊中各自再切小容器並置入標題、內文編輯器(加上左框線)。
• 主選單錨點:加上「服務項目」的錨點連至本區塊。

第4區塊:精選案例

▍ 使用元素工具 :

標題、內容編輯器、媒體輪播、按鈕。

▍ 設計提示 :

• 容器: 切版起手式，外層全寬100%，內層全寬80%，以做出左右留白。
• 背景:大容器設定白色背景。
• 置入2個媒體輪播。
• 按鈕:連結至「作品集」之頁面;加上陰影效果。

第5區塊:影片動畫

▍ 使用元素工具 :

內容編輯器、按鈕。

▍ 設計提示 :

• 容器: 外層全寬100%，內層600px。
• 外容器設「背景影片」(  youtube.com/watch?v=RkZSyUBu2xU  ) 。
• 外容器設定垂直置底、水平靠右，即可把內容器置於右下角。
• 內容器背景設置微透明黑色、弧角。
• 內容器置入內容編輯器、按鈕。

第6區塊:心得見證

▍ 使用元素工具 :

標題、評分、內容編輯器、見證輪播。

▍ 設計提示 :

• 容器: 切版起手式，外層全寬100%，內層80%，以做出左右留白。
• 內層容器置入標題、評分、內容編輯器、見證輪播等元素。

第7區塊:常見問題

▍ 使用元素工具 :

標題、切換、按鈕。

▍ 設計提示 :

• 容器: 切版起手式，外層全寬100%，內層80%，以做出左右留白。
• 內層容器再切成左右兩欄。

總結

以上的實作，可以發現切版很重要，如果版型切不出想要的排列區塊，就無法置入元素，另也可以發現我們常用的元素工具就那幾個在交替，但只要運用得宜，就能排列出有質感、客製化的版型，就不必仰賴套版主題那種改不太動又不知怎麼改的瓶頸。

07_常用的元素工具介紹

前言

元素工具有很多個，這邊僅列出常用的，像我接案七八年，真的很多冷門的元素工具我從來沒用過，這邊把較常用的用表格方式列出。

常用的元素工具

元素工具名稱	主要用途	備註
【基本】
*Container	容器，用來做網頁區塊佈局，即切版。
*標題	每頁都會用到。
*圖片	每頁都會用到。
*內容編輯器	每頁都會用到。
影音	可插入Youtube影音、Vimeo影音、或站內影音。	常用在「首頁」。
*按鈕	每頁都會用到。
*分隔線	就是分隔線，有許多樣式可選。
Google地圖	常用來做在「聯絡我們」或「活動報名頁」、「頁尾(footer)」。
*圖示	置入icon圖示，有數百種可選，常與標題、內容編輯器配合使用。
【一般】
圖片轉盤	用來做『圖片輪播』，沒買Pro版的只能用它做輪播的需求。
圖示列表	用來製作條列項目。	常在頁尾(footer)。
分頁	頁籤切換內容。	#收合與展開資料
*收合容器、 切換	用來做『問與答』，兩個功能差不多。	常用在「首頁」。 #收合與展開資料
社交網路服務圖示	不是分享功能，而是用來社群的連結而已。
警告	用來寫一段區塊顏色分明的「文字段落」，用來講一段很重要的提醒的話。
短代碼	有些外掛會提供短代碼，我們可以用短代碼來置入其它外掛的功能效果。	整合其它外掛功能，偏客製化。
Html	會寫語法的人可以在此寫語法來修改網頁。(CSS、jQuery)
*選單錨點	常用來做一頁式網頁的「同頁內之連結」。	一頁式網頁範例
資訊欄	置入部落格之資訊欄。
【專業版】
文章	文章列表，可用來做『最新消息、作品集、成功案例、部落格』。	文章列表排除某分類:Ultimate Category Excluder
*藝廊	用來做「作品集」。	純圖片作品集，點開後沒有文字介紹那種。
表單	用來做「聯絡我們」。
*幻燈片	用來做『大圖輪播』，圖上可以置入文字。
導航選單	脫離「自訂」的單樣式，用來做新的『主選單』。	模版設計
*媒體輪播	用來做『圖片輪播』、可混搭『影片輪播』。
見證輪播	客戶心得的輪播。常用在『成功案例』。	各產業都可運用。常用在「首頁」。
目錄	自動抓取同一頁中的標題形成小目錄。
分享按鈕	替文章加入「分享此篇」的按鈕。
段落引用	與「警告」類似，用來寫一段區塊顏色分明的「文字段落」，用來講一段很重要的提醒的話。
Facebook粉絲專頁	用來崁入粉專的主頁。
版型	把已存的小版型置入網頁呈現，常用來做『簽名檔』。	只要修改已存小版型，全站每一處有置入小版型的就會統一更新。

總結

1、想要做出精美的網頁，除了要熟知每種元素工具的用途之外，更要發揮創造力來思考一些用哪些元素工具可以更佳來呈現素材與文案。

2、另每個元素工具中都有「樣式」可以讓你配色、調整外觀，這也是讓網頁變得有美感、有質感的重點，例如光是一個「標題」，你好好研怎樣調製它的樣式，就可以有不同的風格，參考此篇!

3、更要多看多觀察一些不錯的網頁來思考，要想若是我，我會用什麼樣的元素工具來達成這樣的效果？我版型要怎麼切？久而久之，你所設計的網頁就會越來越有質感、越來越好看!

05_Elementor編輯區面板介紹

前言

編輯區的面板是比較重點的地方，請了解後先「實作」看看，上課或看教學時，方能快速點到想點的功能。

一、進入編輯區

1、先從”頁面”原始編輯區進入

因為Elementor最最最常用來設計頁面區的頁面，所以我們的第一次進入編輯器就先從「頁面」開始 。

因還沒按照我們預先規劃的選單架構來設計網頁，所以你可以先暫時隨意開立一新頁面，以此進入Elementor編輯區來認識一下編輯區的面板，如下圖。

當初建立新頁面時，此時我們是在WordPress內建的「區塊編輯器」介面，當點③使用Elementor才是進入「Elementor編輯器」的介面，不過要了解到一點，就是內建的「區塊編輯器」與「Elementor編輯器」只能二選一來用，如果已用Elementor編輯器做好的內容，硬要轉回區塊編輯器的介面來編輯，則在Elementor編輯器所設計的內容都會造成異常或部分消失。

點合③後即立即進入「所見即所得」編輯區，可能會很高興很興奮就開始拖拉元素了，先別急，請先聽從指示把面板摸熟吧!

※不過用Elementor可以單獨製作「小版型」來另存一名稱之後，每個「小版型」都有它的「短代碼」也可以在區塊編輯中插入來呈現效果，例如製作每篇文章一起共用的「簽名檔」。(後面另提)

2、先學怎麼「回去後台」

如下圖。

出去後，記得再來進一次，還沒講完…

二、編輯區面板介紹

1、上方選項

 

 

回後台	左上角主要就是回到一般的WordPress網站後台、修改記錄還原(可以在還沒關閉此頁前，都可以按照上面的時間點來還原之前修改的內容)。
元素工具區	展開所有可用元素工具。
網站設定(全局)	常用到的是預先設定全局的主要顏色，其它選項較少用且進階可先略過。
結構	即元素導覽器，當內容區已置入過多元素時，可以用此工具來找想要的修改的元素的所在位置。
筆記	當頁進行設計時，可在某區域或元素留下備註(訪客不會看見)。
設定	用來關閉頁面設計標題、頁面佈局、當頁預設背景、當頁加入css語法。 用來選擇「基本佈局」，有畫布、全寬、沿用主題佈局(Theme)。 ●畫布 : 無頁首頁尾，常用在一頁式網頁。 ●全寬 : 保留頁首頁尾，但會把佈景主題預設在網頁中塞入的標題、精選圖片、側欄都拿掉，保持「body」全空白。 ●沿用主題佈局(Theme) : 就是按照佈景主題預設的格式，較少用。
響應式調整	調整不同裝置的元素尺寸。
預覽	預覽畫面。
發佈或更新	把網頁存檔並公開。
儲存草稿	網頁先存檔但不公開。
另存範本	這裡指的是「全頁」存成一個版型。 另在右側製作的內容中，也可以僅把「部分區塊內容」另存成小版型就好。 這裡的運用，指的是→這裡。

以上，都請在畫面上點點看。

2、下方面板

下方面板主要是內容的設計區。

下方面板的元素工具的拖用方式 :

• 可直接把左側元素工具直接拖至右側下方虛線框處。
• 若已有點①而產生空白區塊容器，可直接把左側元素工具拖至區塊容器裡面。

 

 

我們常聽到的「切版」，就是運用①的新增區塊容器Container，並把容器做內外層的比例劃分或容器中再置入小容器，而將網頁劃出大小不同的區塊。

預設版型:即②處，申請一個Elementor官方免費帳號，即可套入它所內建的單篇範本，不過這又會回到套版的老路，我們要學習的是如何自己客製化設計網頁，它的單篇範本你可用來參考與研究如何做出的就好。

04_Elementor後台面板介紹

前言

Elementor後台面版請先大致了解一下常用的即可。

分成二大區

安裝Elementor後，後台會多出二大區，即「Elementor」與「範本」這兩區，

如下圖的功能選項，有許多是很少用到的。

這邊僅提常用到的部分 :

名稱	說明	備註
Submissions	Elementor表單送出後的備查區。
取得幫助	Elementor官方的教學文章區，全英文。
License	若是已付費買完Pro，由此處與官方取得綁定網域，才能啟動Pro功能。
已存版型	在設計過程中，覺得設計不錯的「小區塊」可以存成「小版型」來反覆使用。每個「小版型」都有它的「短代碼」也可以在『原生的區塊編輯器』中插入來呈現效果，例如製作每篇文章都一起用的「簽名檔」。	免費版功能。
Popups	彈跳視窗製作，應用範圍很廣，很多種變化。	Pro版功能
Theme Builder	又稱”主題建構器”，是進階設計，專門用來設計「模版」與動態資料對應，計有header(頁首)、footer(頁尾)、archive(分類列表)、single post(單篇)模版模版。 新手不宜，後面再學。	Pro版功能

其它沒提到的部分，在後期陸續遇到不同情境時 ，再另在該情境中說明相關的設定。

 

03_安裝頁面編輯器

前言

若僅要使用免費版的，請安裝免費版就好，而本站教學是預設你也已有付費Pro版的，因後面的進階教學文章有教學功能仍需使用到Pro版的。

安裝

【Elementor】	免費版	後台搜尋安裝
【Elementor Pro】	付費版	至Elementor官方後台下載後上傳安裝
【Elementor Pro 】	練習用之版本	下載

(1)Elementor免費版安裝

在後台搜尋「elementor」來安裝。

注意，接下來會有很多下一步的畫面出，請統統都先按「X」。

▼如下圖，可先暫先回到一般的後台。

(2)Elementor Pro版安裝

Pro版須先下載至本機電腦，再用上傳的方式來安裝。

▼完成畫面

Q&A

問 : 我在搜尋安裝Elementor時，發現有很多很多Elementor的相關延伸外掛，我都可以順便安裝嗎？

答 : 在新手階段暫不可以這樣做，整個介面會更混亂，不利學習。等整個Elementor都上手後再按照「客製需求」去尋找與安裝「適用」的Elementor擴充。