fbpx

Elementor應用教學-打造完美頁面視覺

上一篇我們講過了Elementor基礎的架構,本篇我們會進入到實際操作的部分,建議對於初次接觸Elementor的使用者可以先從#基礎教學篇開始。Elementor在編輯的時候需要用到層級架構與分布的概念,先釐清段與”段”與”欄”的關係後,可以想像一個子母關係的概念:大的建構完畢;小的繼續點綴。我將Elementor大致歸類為四種,用這四種去說明Elementor的功能。

文字

內容:將文字輸入的地方很好理解,跟Word編輯相似,只是多了一些網站可以用到的功能。

樣式:文字表現的方法有很多,從這邊我們可以做到顏色與排版,這幫含了字型、尺寸、粗細程度、間距等等…

進階:這個功能在任何工具都有,可以調整這個區塊內的更多內容。比方說我要移動讓這部分跟別的區塊重疊、動畫、背景畫面、邊線等等…當然上面剛剛提過的基本調整這邊也都可以逐一設定。

圖示

內容:在這邊選擇要哪張圖、尺寸,此外圖片是網站的一整個區塊,所以可被設計為按鈕,可以讓他在點擊後如同點擊連結,跳轉化面。

樣式:細部調整,寬度透明度、邊線陰影,甚至讓它在滑鼠經過時有特效產生(彷彿上述的如同按鈕)。

進階:用途彼此都類似,不贅述。

工具

這裡會有兩種可能,一種是自己安裝了其他工具的外掛,比方說購物車,Elementor會自動連結,讓你在這邊可以看到新增的功能,如此一來就可以自己決定要怎麼顯示了,非常方便。

內容:可以設定工具內包含甚麼,我用表單範例就可以決定要有多少問題、什麼樣的問題,甚至提交出去後可以寄送Mail通知我,或者給填寫mail在表單裡的人,知會他表單已送出。

樣式:表單包含欄為、框線、按鈕等等,調整設計的功能也都是一應俱全。

進階:用途彼此都類似,不贅述。

功能

內容:跟工具類似,可以設定這項功能,希望包含甚麼、如何發揮、顯現。由於是功能類,依據不同的工具會有不同的應用,可以多方嘗試。

樣式:大同小異,調整美觀,不同工具又會有不同的架構。

進階:用途彼此都類似,不贅述。

在設計的功能剛剛闡述了大部分內容,但是實務面的東西還是要多加摸索,才用愈加熟練,希望你能有效的運用這份強大工具!

-Ethan

發表迴響