目的:如何運用 WordPress -Elementor,製作不規則視窗效果。分享步驟如下:
1.基礎設定:由於是以單欄位設定,因此新增一個欄位,並設定背景顏色,與加入標題字樣。

2. 想在欄位的右下方放置圖,因此先於左邊工具欄,選擇圖片工具,並置入已先準備好的png圖示。

3.至圖片進階>Positioning>寬度設定為自訂,Position設定為absolute,讓物件可以隨著自己想要的位置進行位移。

由於要把圖式放置視窗右下方,需調整Horizontal、Vertiacl方向,這部分至設定RWD時,也需隨著調整。
4. 接著可以直接拖拉圖式至想要的位置,但這時會發現物件若超出視窗,會跟著被裁切,無法完整顯示。

5.這時就必須回到整體視窗的設定,進階> Padding,設定Padding寬度,可看到視窗四周增加寬度。

6.最後依然在視窗設定之下,樣式中顏色alpha值調整為0,就可以看到右下圖式完整顯示出。

[小結]
在近期製作中,運用到 Elementor 設定,並加上網頁編輯的基礎概念,就可以很快速達到原本需要依靠程式控制才能做出的版面效果,是個在WordPress中相當方便實用的編輯器。