網站設計基礎篇 Elementor教學PART 3 頁首頁尾自己來

190712 每日_工作區域 1

嗨~又到了網頁設計的教學時間,上次光先生介紹過了Elementor內建的版型,接著要介紹更進階一點的主題建構器教學啦,主題建構器是什麼呢?跟著光先生一起看下去吧!

每日學,內容精要,重點快速瀏覽學習,輕鬆掌握重點。

關於Elementor主題建構器 (Theme Builder)

必須升級到Elementor Pro才會解鎖主題構建器,出現版型選項:

頂部(header)網站的頂部,包括網站logo,選單,社群圖示或上搜尋欄等。
底部(footer)網站的底部,包含版權資訊,網站聯絡資訊,附加鏈接及免責聲明等。
單頁(single)可以是文章頁面,媒體頁面,404頁面或部落格文章的佈局,包括標題,特色圖片,日期,類別,評論區域,分享按鈕等。
文章列表(archive)最新文章的列表或特定類別,日期,標籤或其WordPress分類中的文章。

而下面這兩個則是裝了woocommerce才會出現
單一商品(single product):商品詳情頁的版型,包括商品圖片,商品資訊,加到購物車,推薦商品,評論等。
商品檔案(product archive):
商品分類/種類頁的版型,包括商品種類,圖片,名稱,了解更多等。

以下就來介紹基本版型設定吧

  • 頁首和頁尾
  • 文章列表
  • 單頁

1.首先登入後台–左側選單 – template –主題建構器/saved templates–新增
可看到點選主題建構器有頂部/底部/單頁/文章列表/單一商品/商品檔案
2.點擊全部則是會再多了頁面/段/全域小工具/彈出式視窗

主題建構器
點了全部
上一篇
下一篇

頂部和底部的建置

1.首先點選新增後會彈出版型視窗–選擇頂部或是底部–名稱可自訂好記的

選擇頂部或底部
上一篇
下一篇

2.進入Elementor編輯器後,會彈出內建版型界面,可直接點選喜歡的內建版型插入修改/或點x直接依照自己的設計圖執行

選擇內建版型

3.這邊以新增的方式製作頁首/頁尾(如影片)
可發現畫面上有原本的主題和已新建好的頁首

4.儲存時點選三角形-彈出顯示條件畫面
可看到預設是包含整個網站(意思是指整個網站都會出現)

左下三角形選擇顯示條件
新增條件-包含整個網站
上一篇
下一篇

5.儲存完成可點預覽就能查看網站的新貌(附圖為頁首前後差別)

原本主題的頁首/頁尾
自訂頁首/頁尾後
上一篇
下一篇

文章列表的建置

1.首先點選新增後會彈出版型視窗–選擇文章列表–名稱可自訂好記的

2.進入Elementor編輯器後,會彈出內建版型界面,可直接點選喜歡的內建版型插入修改/或點x直接依照自己的設計圖執行,基本上,內建的9個版型就蠻好用的,可擇一插入做修改

3.插入內建版型後可發現已將我們網站內的文章做套用
可在自行微調字型,顏色,大小等

4.儲存時點選三角形-彈出顯示條件畫面,可發現條件和頁首頁尾都不一樣,一般選擇全部文章即會套用在網站文章分類上(除非有很多個文章分類,樣式都不同才需要設定不同條件)

5.儲存完成可點預覽就能查看更新後的網站

單頁的建置

1.首先點選新增後會彈出版型視窗–選擇單頁-文章類別可自由選擇(不選也可以)–名稱可自訂好記的

2.進入Elementor編輯器後,會彈出內建版型界面,可直接點選喜歡的內建版型插入修改/或點x直接依照自己的設計圖執行,單頁內建的版型就蠻好用的,可擇一插入做修改

3.插入內建版型後可發現已將我們網站內原本的文章詳情頁內容做套用
皆可在自行微調內容,文字,圖片等

4.儲存時點選三角形-彈出顯示條件畫面,可發現條件和又多了許多,一般選擇全部單頁即可,通常使用到單頁大部分只有文章詳情頁(除非有額外設定,才需要設定不同條件)

5.儲存完成可點預覽就能查看更新後的網站

儲存我的版型

Elementor可將做好的區塊/段/或是頁面保存為版型。如此一來,可重複使用版型,以便將來更快地創建新頁面。
將要儲存的部分可點選

  1. 左下綠色三角形儲存選項 –儲存成版型
  2. 滑鼠移至右邊物件(出現藍框)右鍵-儲存成版型
  3. 滑鼠移至右邊物件(出現藍框)右鍵-點+-出現資料夾圖示-右上角儲存圖示

介紹到這邊,相信大家對於Elementor我的版型應該有更加的了解, 想學習更多網站設計的教學嗎?現在購買網站還附網站教學影片,那麼好康的1+1優惠快來了解吧!手刀前往

喜歡的話請幫我們到「光先生」粉絲團按讚分享,或訂閱我們的Youtube頻道哦!我們會推出更多的內容及影片的!

「以不一樣的思維進行廣告行銷,進而認同品牌價值」,
立志讓更多人知道原來廣告行銷也可以這麼好玩!!

每日學,文章推廣

每日學,內容精要,重點快速瀏覽學習,輕鬆掌握重點。

發表留言