更新於 2023/07/25閱讀時間約 3 分鐘

【2023 WordPress No Code 簡易上手課程】Elementor 教學

raw-image

Elementor 是世界上最先進的網站設計工具之一,允許用戶在不寫任何代碼的情況下創建美麗的網頁。這篇文章將介紹 Elementor 的基本功能,並提供一些實用的技巧和技術。

Elementor是什麼? 免費版 VS 付費版

Elementor 是一個 WordPress 頁面構建插件,讓你能夠透過拖放界面創建獨特的網頁設計。Elementor 提供了免費版和付費版兩種選擇,免費版提供基本的頁面創建功能,而付費版則提供更多的設計選項和高級功能,包括全站設計,更多的專業模板,和更多的設計元素。

Elementor Theme 推薦

Elementor 與大多數 WordPress 主題都兼容,但一些主題尤其適合與 Elementor 一起使用。這些主題包括 AstraOceanWP GeneratePress,它們都提供了與 Elementor 無縫集成的設計和功能。

Element、style、advanced 設定是什麼 ?

在 Elementor 中,每個頁面都是由不同的元素(Element)組成的,例如文字框,圖片,按鈕等。每個元素都有其對應的風格(Style)設定,讓你可以調整顏色,字體,邊框等。進階(Advanced)設定則提供更多的定制選項,例如邊距,填充,Z-index,動畫等。

Full width、box design、parallax design 分別

Elementor 提供了多種設計選項,讓你可以輕鬆創建全寬(Full Width)盒型(Box Design)的網頁。

全寬設計讓你的內容可以佔據整個螢幕寬度,而盒型設計則將內容包裹在一個中央的容器中。

全寬(Full Width)

全寬設計意味著頁面的元素(例如圖片、滑塊或顏色塊)將延伸到視窗的兩邊,不考慮螢幕的大小或分辨率。這種設計風格可以提供一種現代、開放的感覺,並為大型視覺元素提供足夠的空間。

例如,Apple 的官方網站(https://www.apple.com/ ↗)就使用了全寬設計。你可以看到,無論是圖像還是背景色塊,都延伸到了視窗的邊緣。

盒型(Box Design)

盒型設計則是將內容包裹在一個明確的框或容器中,這個框的寬度通常是固定的或最大的。這種設計風格可以提供一種組織良好、結構化的感覺,並且可以讓讀者更加專注於中間的內容。

例如,Wikipedia 的條目頁面(https://en.wikipedia.org/wiki/Main_Page ↗)就是一個典型的盒型設計。內容被放置在一個固定寬度的中央列中,並且在兩側有空白的邊距。

此外,你還可以使用 Elementor 創建視差(Parallax)效果,這是一種當用戶滾動頁面時,背景和前景以不同的速度移動,創造出深度感的效果

Blog /News 頁面設計

Elementor 也非常適合用來設計博客或最新消息頁面。你可以使用文章小工具來顯示你的最新文章,並使用圖片,標題,元數據等元素來創建吸引人的文章預覽。Elementor 的動態內容功能還讓你可以將你的文章內容直接插入到頁面設計中,創建一個完全定制的博客佈局。

希望這篇入門課程能幫助你熟悉 Elementor 的基本功能,並開始創建自己的網站。無論你是網頁設計的新手,還是經驗豐富的專家,Elementor 都能提供你所需要的工具和靈活性,讓你的網站脫穎而出。

想了解更多 WordPress 網頁製作教學或度身訂製WordPress網頁設計,請到https://rovertech.com.hk/website-design/

分享至
成為作者繼續創作的動力吧!
© 2024 vocus All rights reserved.