Elementor 教學小工具應用(二)- 網站版面設計操作要領

Elementor 版面教學

Elementor 版面教學 :

1. Elementor 新增版面欄位操作

2. Elementor Inner Section操作

Elementor 版面教學 主要是說明使用 Elementor 設計網頁排版的基本方式,也就是在放入文字、圖片等小工具前,必須要先建立所謂的 ” 容器 “,而  Elementor 容器分為兩種,最外層的 ” 段 (section)” 以及分隔網頁元素的 ” 欄(column) “,這兩種容器的操作方式是在設計網頁版面前需要先理解如何操作的,如果沒有先熟悉加入容器的方法,就無法合理安排網頁內容元元素樣式,像是對齊方式、間距、大小等細節。

Elementor Page Builder 外掛下載點:https://wordpress.org/plugins/elementor/

Elementor 官方網站:https://elementor.com/

Elementor 操作說明手冊:https://docs.elementor.com/article/226-getting-started

• Elementor 新增版面欄位操作

第一步:和上一篇標題文字與圖片影音設定方式一樣,先按”+”新增藍框區塊。

Elementor 版面教學

第二步:檢查左側項目名稱部分中是否顯示編輯 “段”,然後從”佈局”中的高度”選擇最小高度”。

Elementor 版面教學

第三步:使用滑塊或數字設置所需的高度。

Elementor 版面教學

第四步:設置背景圖像。您可以使用純色,漸變或視頻作為背景,繼續編輯該部分並打開”樣式”選項

Elementor 版面教學

第五步:在媒體庫選擇想要的圖像作為背景。

Elementor 版面教學

第六步:右側放置文字,左側放置一個圖像。

Elementor 版面教學

第七步:添加一列(1欄→2欄)右鍵單擊列圖標(灰色圖標)。將出現一個菜單。選擇”+”。新增欄位,最多增加到10個欄位

Elementor 版面教學

第八步:在右側添加標題,在左側添加圖像小工具。

Elementor 版面教學

第九步:可以再拖曳一個標題到右邊”欄”的地方,底下藍色框內的反影標示會提醒你放開滑鼠會落在那一個區塊。

Elementor 版面教學

第十步:在左邊編輯圖片 內容裡 “對齊” 選擇靠左。

Elementor 版面教學

• Elementor Inner Section操作

第一步:左側工具欄店選滑鼠拖曳 Inner Section 小工具到藍框裡。

Elementor 版面教學

第二步:就會像剛剛第六步驟新增一個欄位一樣的版型。

Elementor 版面教學

第三步:滑鼠點選拖曳兩欄位中間的虛線可以調整左右版面配置。

Elementor 版面教學

第四步:點選編輯 “欄” 選擇佈局 在欄寬度(%) 可以自行輸入數字設定。

Elementor 版面教學

第五步:或是選到編輯”  Inner Section “有配置好的結構可以選擇,都會呈現一樣的效果。

Elementor 版面教學

 

結語:

Elementor 小工具有很多種類,在之後的教學中鵠學苑會由淺入深逐一介紹常用小工具的特色與做法,希望讓想要架設網站的朋友們可以熟練的運用這套網頁編輯外掛,加快網頁編輯效率!

今天的教學到這裡告一段落了,不要忘記在右側訂閱鵠學苑電子報,確保收到最新 WordPress 教學文章,如果有網頁設計相關需求,或者想了解最新網站知識,也可以到 鵠崙設計 做線上免費諮詢喔!我們下次的教學見~

WordPress 外掛 相關教學文章:

Elementor 教學 - WordPress 視覺化網站編輯外掛,基本操作及設定介紹

Elementor 教學小工具應用(一) - 標題文字與圖片影音設定方式

Elementor 教學小工具應用(三) - 為網頁加入動態視覺效果

Elementor 教學小工具應用(四) - 設定數值欄位自動抓取網站資料

WordPress 網站翻譯 外掛 – Loco Translate 中文化網站主題與外掛

Post Types Order 更改文章及圖片排列順序,WordPress 外掛教學

網站架設知識推薦閱讀:

Elementor 網頁編輯器 突破 300 萬下載次數,最受歡迎的外掛!

Google FAQ 結構化資料啟用,讓問與答在搜尋結果中直接呈現

Google 演算法更新,使用者搜尋後將出現多樣性的網站內容

鵠學苑

鵠學苑

我們是由一群熱愛 WordPress 網站架設的同好所組成的團隊,希望可以將這套 頂尖的 CMS 管理系統推廣給想要架站的朋友們,並且能夠在過程中互相交流心得,讓網站架設過程變得更有效率!

訂閱電子報

立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!

熱門文章

最新文章

相關文章

標籤雲

Sign up for our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit

Scroll to Top