上回我們說明了Elementor 如何新增頁面,以及功能元素和底部欄位介紹。
今天我們要來分享如何開始使用Elementor做網頁設計。
如何用 Elementor 設計頁面?
使用Elementor設計頁面的核心概念
組成元素:
- Section 區塊: 這是Elementor設計的基本框架,每個頁面通常由多個Section區塊組成,它是Column欄和Widget元素的容器。
- Column 欄: 每個Section區塊可以包含多個Column欄,它是Widget元素的直接容器,可以有多個,以實現不同的布局設計。
- Widget 元素: 每個Column欄可以包含多個Widget元素,它們是具體的設計元素,如文字、圖片、按鈕等,用於填充和裝飾頁面。
設計邏輯:
- 由上至下,首先定義Section區塊,然後在每個Section區塊中創建Column欄,最後在每個Column欄中添加Widget元素。
- 透過這三層的結構,可以組織和設計出完整且具有結構性的頁面。
多層次結構:
- 這種多層次的結構允許設計師有機會創建出豐富多元的頁面設計,每層結構都有其特定的設計和配置選項,以實現不同的設計需求。
圖片來源:犬哥網站https://frankknow.com/elementor-tutorial/#edit-tips
新增區塊內容
開始設計:
點擊編輯區的加號Icon以開始設計一個新的Section區塊。
建立Column欄:
系統會自動生成一個兩欄式的區塊。選擇其中一個欄位,開始將元素拖曳至此欄位內。
添加標題元素:
將標題元素拖曳至選定的欄位中,或直接拖曳至該欄位內。
在左側設定區,可進行標題的編輯,如標題文案輸入、文字大小、對齊方式、標題連結等。
添加文本編輯器和圖片元素:
在另一個Column欄位中,重複上述步驟以新增文本編輯器和圖片元素。
就可以完成一個Section區塊囉~
只要會拖曳元素就能利用Elementor編輯器製作出有質感的網頁,有沒有很簡單呢?
樣式及區塊設定
想要更改標題顏色也很簡單 點擊右側指定的標題元素,切換至“樣式”分頁進行修改。
通用樣式設定: 透過“樣式”分頁,可對Elementor的Section區塊、Column欄位、及Widget元素進行樣式設定。
透過“樣式”分頁,可對Elementor的Section區塊、Column欄位、及Widget元素進行樣式設定。
進階設定
- 邊界與內距調整: 在進階設定中可調整邊界和內距。
- CSS設定: 指定自定義的CSS以進一步定制設計。
- 動畫設定: 為元素添加動畫效果以增加視覺吸引力。
- 裝置兼容設定: 設定不同裝置上是否反轉欄位或設置元素的顯示/隱藏。
- 元素特定設定: 根據不同元素,提供更多的進階設定選項。
預覽頁面&發佈上線
完成一個區塊的設計後,再進行下一個區塊的設計, 以此類推, 就可以設計出一個完整的頁面囉!
設計完成後, 點擊預覽以檢視頁面的設計效果。
可選擇縮起 Elementor 左側功能面板或點擊底端的預覽按鈕來查看設計效果。
預覽確認頁面設計沒有問題露, 就可以點擊發佈按鈕以將頁面正式上線囉~
以上就是Elementor頁面設計製作的基本教學,大家有沒有覺得朝設計大師之路更邁進一步了呢?
下一次我們再來個大家聊聊關於Elementor編輯的小技巧,我們就在EP3再見囉~