網站設計基礎篇 Elementor教學PART 2 內建版型好好用

190705 每日_工作區域 1

嗨~又到了網頁設計的教學時間,之前光先生介紹過了Elementor基本的功能及操作,接著要介紹Elementor的內建版型啦,跟著光先生一起看下去吧!

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

使用Elementor製作頁面時,可以從頁首編輯,並使用各種元素小工具將版面設計規劃;或者套用內建版型,在現有的內建版型進行修改調整,這種方式在製作頁面是很有效率一招,Elementor也提供了各種區塊和100+的模版,不管是免費版還是Pro版本都可以查看並使用,當然,在付費Pro版本中的樣式更多唷!

如何使用內建版型呢?

進入頁面/文章/template 的[使用Elemantor編輯]可看到以下畫面

在右邊找到一個灰底資料夾的圖示[新增版型]點進去

可看到以下畫面

A區塊:網頁中常用到的部分,可自由插入使用,如:按鈕、問答Q&A、價格表、產品優勢等,蠻像已設計好的左側元素小工具公版

B頁面:一看就知道已經是可直接上架的網頁樣式,假如在製作網站時遇到困難,不妨看看現有的頁面版型取得靈感吧!

C我的版型:在Template製作好的版型,可從我的版型插入使用

D匯入版型:如在A網站設計的樣式也想放在B網站,就可先在A網站將版型下載並到B網站做匯入的動作

E同步版型庫:假如同時開啟很多分頁在使用時,點選一下即可將在其他分頁製作並儲存好的版型同步(類似網頁重整的概念)

F儲存:將整個頁面版型儲存為Template,會在我的版型出現,製作其他頁面時可將版型插入

如何使用內建版型呢?

A插入區塊版型

從頁首、頁尾、按鈕、聯絡表單、文章列表到404頁面等,多達22種網頁常見區塊範例供使用,大部分為黑白配色,容易組合搭配和修改
1.從左上角的種類選擇一種要用的類型

2.滑鼠移至選好的樣式會看到一個🔍,點選可預覽該樣式的實際樣子(包括動畫等等)

3.確認好了即可點選右上角插入/或是在前一步驟的左下點選插入

4.這樣就完成插入區塊版型啦!如要編輯(換顏色/換字體等)都可以先點選右邊要編輯的部分,左側就會對應到該小工具的編輯欄及可進行編輯

B插入頁面版型

為一整頁的版型,有很多元的風格可選擇,從一般的官網頁面、廣告頁到一頁式頁面等,大致上已是完整的網站頁面了,種類齊全,可擇一版型套用後再進行微調成自己的風格,也可從多個版型內挑選喜歡的部分將其插入頁面後,再刪減及重新排列組合成新的頁面

2.滑鼠移至選好的樣式會看到一個🔍,點選可預覽該樣式的實際樣子(包括動畫等等)

3.確認好了即可點選右上角插入/或是在前一步驟的左下點選插入

4.這樣就完成插入區塊版型啦!
這邊和區塊版型比較不一樣的是,假如原來的頁面已有套用主題可能會有頁首或有頁尾的部分
如要完整呈現頁面的樣式,請在左下角的設定-頁面佈局-調整成 Elementor畫布

未更改前
更改後

C插入我的版型

當設計好了一個版型後,可儲存到我的版型,需要用到重複的設計時,可在選擇插入,也可匯入或匯出很方便。
至於如何使用,這個部分之後會再詳細做說明唷!

特別介紹-全域小工具


如按鈕、文字等都可儲存成全域小工具,套用在網站所有有出現小工具的地方,如修改時有使用到全域小工具的頁面將會一起做更動!

像是頁首或頁尾都有社群連結的話,只要儲存成全域小工具,在更換連結時就會同時一起改囉,省時省力的小幫手!

 

介紹到這邊,相信大家更了解Elementor了吧, 想知道更進階的使用撇步嗎?那就千萬別錯過下次的文章哦!我們下次見啦!

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

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

每日學,文章推廣

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

發表留言