Elementor免費版的小部件有40多個，而Elementor Pro 在免費版的基礎上，增加了超過50 個高級小部件，使總數達到90 多個小部件。這些高級小工具包括表單、滑桿、貼文展示、作品集、價格表、選單導航、登入/註冊表單、WooCommerce 整合小工具等。
Elementor的小工具的設定包括以下三個選項卡：
- 內容設定（Content）：配置小工具的基本內容，如文字、圖像、連結、影片等。
- 樣式設定（Style）：調整小工具的外觀，包括顏色、字體、邊距、填滿、邊框、陰影等。
- 進階設定（Advanced）：設定小工具的佈局、響應式設計、動畫效果、自訂CSS、進階定位等。
內容設定（Content）和樣式設定（Style）取決於小部件的類型和功能，需要我們平時在使用中熟悉。
Elementor小工具的進階設定（Advanced）則相對比較固定，無需重新學習即可套用相同的調整方法。我們這篇Elementor教學課程主要介紹進階設定（Advanced）裡面的功能。
小部件Advanced高級設定有什麼？
Advanced選項卡裡面的設定如下圖：
分別是：
- Layout。 Layout設定裡面的選項會比較多，也是我們常用的一些控制間距和佈局的設定。
- Motion Effects。滾動/滑鼠/進場/黏性等動效增強
- Transform。位移/旋轉/縮放/斜切/翻轉，不改變文件流，適合做輕量動感
- Background。純色/圖片/漸層與Hover 背景，控製版塊底色與質感。
- Border。邊框、圓角與陰影，塑造卡片層次。
- Mask。用幾何或自訂形狀為元素加遮罩。
- Responsive。按裝置（桌面/平板/手機）顯示或隱藏該元素。
- Attributes（Pro）。為元素添加data/ARIA/role 等自訂屬性，用於可存取性、埋點或前端擴展
- Custom CSS。為小部件新增自訂CSS。
Layout設定
上圖就是Layout裡面的設置，包括：Margin、Padding、Width、Align Self、Order、Size、Position、Z-Index、CSS ID/CSS Classes，以及Display Conditions，我們逐一介紹：
邊距（Margin）：用於設定小部件外部的空間，控制小部件邊框與其他元素之間的距離。
填充（Padding）：用於設定小部件內部的空間，控制內容與小工具邊框之間的距離。
邊距（Margin）和填滿（Padding）都可以獨立設置，可以分別為上、右、下、左四個方向設定不同的值。
不同的是，邊距（Margin）支援負值調整。
Margin和Padding是CSS領域的知識，具體顯示可以看下面這張圖：
我們可以為小部件的Margin設定負值，來達到位置微調的效果。例如我們想要小部件向上移動，那麼我們可以設定Margin-Top為負值。
寬度（Width）：可以設定小工具的寬度，選項有：Default、Full Width、Inline（Auto）、Custom。
- Default：通常等同於內容自適應（接近Inline/Auto），但受容器佈局與繼承影響；如需固定佔滿或百分比寬度，需要我們明確選擇Full Width/Custom設定為100%。
- Inline：小工具依內容自適應寬度，不佔滿整行。
- Full Width：佔據滿整個容器的寬度。有關容器的教程可以看這篇。
- Custom：可以讓我們為小工具設定百分比寬度，以容器寬度為基準。
Align Self：只對目前元素生效的單項對齊，用來覆蓋父容器的對齊規則。比如說我們需要實作卡片裡讓CTA永遠貼底，那就可以用到這個屬性。
Order：改變元素在同一行/列的排序，不改HTML 結構即可重排。
Size：設定彈性佔位。設定有三個，分別是Grow（佔不佔剩餘空間）/Shrink（是否可被壓縮）/Basis（基礎寬度）
Position：控制元素是否脫離文件流及其偏移；Absolute 受父級定位影響，Fixed 固定於視口。設定有三個，分別是Default/Absolute/Fixed。
Z-Index：設定層疊順序，解決被遮蔽或要覆蓋的問題。
CSS ID/CSS Classes：為元素綁定選擇器，方便錨點跳轉、樣式與腳本定向作用
Display Conditions（需要Pro版本）：依登入狀態、文章歸屬、時間、分類等條件控制小工具是否展示
邊框（Border）
如上方CSS模型圖所示，邊框（Border）指的是小部件位的內容區域（Content Area）和內邊距（Padding）之間的可視線條。
Elementor給我們提供了簡單地設置小部件邊框的入口。
我們可以在這邊設定邊框的線條樣式、粗細、顏色、弧度等。
響應式設定（Responsive）
響應式功能是Elementor內建的非常重要的特性。
以往，如果想讓網站在所有裝置上都能很好顯示，必須設計多個版本的網站。而現在則可以設計一個網站回應多種裝置的需求，這個就叫做響應式設計。透過Elementor的Responsive功能，我們可以使用視覺化的編輯方式來幫助我們實現響應式設計，Elementor會幫我們自動產生對應的前端程式碼。
在Elementor當中，響應式功能可以讓我們：
1) 設定不同設備下的小部件/容器的效果
Elementor免費版為我們提供了三個裝置的響應式設計：PC、平板、手機端；我們可以在Elementor > Settings > Features > Stable Features > Additional Custom Breakpoints 中去調出更多的選項。 
設定好以後我們進入Elementor的編輯頁面，那麼在頂部欄這邊去預覽、設定不同的裝置端的介面效果。
2) 設定在哪些裝置下方展示、隱藏小部件/容器
Elementor小工具的Advanced Settings功能響應式功能主要是讓我們來設定在哪些裝置下展示目前小工具/容器。假設說我們的小部件只想在PC端顯示，那麼我們就打開小部件的Advanced Settings > Responsive 選項卡，勾選在平板端和M端隱藏起來的選項即可。
動作效果（Motion Effects）
注意：動作效果（Motion Effects）目前不支援IE瀏覽器。
我們在這裡可以設定：
滾動效果（Scrolling Effects）
垂直滾動（Vertical Scroll）
讓元素在滾動時以與頁面不同的速度移動，並按照我們選擇的方向和速度移動。
水平滾動（Horizontal Scroll）
當我們上下滾動螢幕時，元素會相應地左右移動。
透明度（Transparency）
元素的透明度伴隨著螢幕滾動改變。
模糊（Blur）
元素會隨著螢幕捲動而變得模糊。
旋轉（Rotate）
元素會隨著螢幕滾動而旋轉。
縮放（Scale）
元素會隨著螢幕捲動而放大/縮小。
滑鼠效果（Mouse Effects）
滑鼠追蹤（Mouse Track）
元素隨著滑鼠的移動而移動，可以設定同向和反向。
3D傾斜（3D Tilt）
設定元素3D傾斜效果，隨著滑鼠移動而傾斜。
磁吸效果（Sticky）
磁吸效果我們一般用在側邊欄、訂閱表單、多語言切換器、社交分享按鈕或其他元件。
- Sticky：讓我們選擇小工具的磁吸位置，可以選擇頂部和底部
- Sticky On：讓我們設定在什麼裝置端使用磁吸效果
- Offset：讓我們設定小工具位置的偏移量，磁吸效果生效時小工具的位置和頂部保持的距離，可以設定用來避免擋住其他元素
- Effects Offset：設定使用者捲動到頁面的指定的位置才會出現磁吸效果
- Stay in Column：建議設定為Yes，設定小工具的磁吸效果只在目前容器中生效，如果頁面捲動到小部件的容器之外，磁吸效果就會消失。
這是為側邊欄設定了磁吸效果的樣子：
進場動畫（Entrance Animation）
Elementor給我們提供了30+多進場動畫。當我們視窗滾動到對應的小部件的時候，就會出現我們預先設定好的進場動畫。
這裡的設定有：
- Entrance Animation：我們在這裡設定進場動畫
- Animation Duration：設定進場動畫的持續時間
- Animation Delay(ms)：設定進場動畫的延時時間，也就是移瀏覽器視窗移到對應小工具的時候，延遲多少秒觸發進場動畫
進場動畫只會在剛開啟頁面/刷新的時候出現一次。
變形（Transform）
這個功能允許使用者對頁面元素進行空間上的幾何變換，包括旋轉、縮放、傾斜和平移。
這些變換不僅可以增強網頁的視覺效果，還能提升使用者體驗，讓網站更加動態和互動。
但盡量避免使用過多或過於複雜的變換效果，因其可能會影響頁面載入速度，尤其是在行動裝置上。
具體設定和效果展示我們可以看官方文檔的介紹。
背景（Background）
設定小工具的背景顏色（內容跟Padding的顏色），可以設定為純色、漸層色，以及使用圖片作為底圖。
遮罩（Mask）
透過遮罩層對小部件的顯示區域進行限制，創造獨特的視覺效果。我們可以使用預設的形狀（圓形、花型、三角形、斑點、六邊形）或自訂圖片來為小工具添加一層遮罩層來創建你想要的效果
自訂屬性（Attributes）
為小部件新增HTML自訂屬性，這個設定需要結合CSS和JavaScript來使用，涉及到比較深入的前端只是。外貿網站一般用的比較少。
自訂CSS（Custom CSS）
可以讓我們加入自訂CSS，這個需要安裝啟動Elementor Pro。
如果我們想要對小部件進行額外的樣式設置，但是Elementor沒有給到我們相對應的設置入口，那麼就需要用到這個功能。