本教學詳細介紹Elementor網頁編輯器中元素或容器的Advanced高級設置功能，包括：佈局、動畫效果、變換效果、背景、邊框、遮罩面具、回應式、屬性、自定義CSS進行設置等等，合理使用下文所述的高級功能，能提升網頁設計效果。
提示：某些功能只對特定元素或容器有效，下面我們開始逐一講解。
Layout 佈局
用於調整當前元素與外部其他元素之間的間距，你就把元素當成一個盒子，盒子與上下左右盒子之間的距離通過它調整，正負數值均可。
用於調整元素內部的間距，如果元素是個盒子，盒子里得有內容的嘛，譬如盒子裝鞋子，鞋子與盒子的四壁之間的距離就是內距。
設置當前元素的寬度，選項包括：預設、全寬（100%）、內聯（自適應）或自定義。
默認 default：系統根據元素本身的特性，預設了寬度類型，有可能是全寬或內聯。
全寬 Full width（100%）：讓元素內容撐滿所在容器（container）的全部寬度。
內聯（自適應） inline（auto）：讓元素按照自己的內容寬度自動調整展示寬度。
自定義：可以自己按圖元px、百分比
%、視窗寬度（VW）來設置元素的寬度
用於設置元素在容器內的對齊方式，選項為：起始（start）、居中（center）、末尾（end）、拉伸（stretch）。
指定元素在容器內的排列順序，包括三個選項：start（排在第一位）、end（排列在末尾）、custom（可以自定義數值，數值越小，排列越靠前，預設的數值是0）
用於控制當前元素在容器內的展示尺寸，跟上文所述的寬度不同，這裡的尺寸是用於利用或容器內的剩餘空間或解決空間不足的問題。
如果一個容器內有多個元素，但仍然無法填滿容器的寬度，那麼你可以指定某個元素擴展它的大小（Grow），它就能把剩餘的空間填滿
反之，如果容器中的所有元素都比較大，無法自然的去容納所有元素，那麼你可以選擇shrink去收縮某個元素。
尺寸里提供了四個選項：None、Grow、Shrink、Custom。
None表示保持原有的大小; Grow和Shrink上文已經講解; 而Custom可以讓你設置擴展和收縮的倍率，這適合有多個元素需要設置不同擴展/收縮倍率的情況。
元素的位置有三個選項：預設default、絕對absolute、固定fixed。
默認情況下，每個元素按照你添加到容器裡的順序依次展示，排好隊，一個個站隊。
當你給某個元素選擇絕對位置時，元素就離隊了，但不會離開這個容器，那它的位置怎麼定呢？ 取決於你為它設置的基準點， 預設基準點是容器的左上角，你也可以更換為右上角、左下角等容器的其他三個角，還可以設置XY軸的偏移量數值來調整詳細位置。
在下圖中，裝飾的小圖示就應用了絕對位置功能，使得它的位置可以被隨意調整用於裝飾。
當你給某個元素選擇固定位置時，它不僅離隊了，還離開了容器，它可以永遠固定在螢幕的某個位置，譬如我用這個功能製作了返回頂部按鈕，同理，你也可以像設置絕對位置時一樣，設置它的具體位置。
頁面上元素很多，頁面就像一個平面，只有x和y軸，z-指數就可以理解為xyz軸里的z軸，z-index越大，說明這個元素的層級越高，就像photoshop里的圖層順序，譬如本站右下角的置頂按鈕的z-指數是999，這樣它的層級最高，不會被其他層元素擋住。
當你要為元素寫css樣式時會用到它，它也可以被用作頁面內錨點。
當你要為元素寫css樣式時會用到它。
讓你可以控制當前元素在指定條件下展示。
Motion effect 動作效果
- 滾動效果 Scrolling Effects：開啟此選項后，你可以選擇多種動畫和交互效果，這些效果將在使用者滾動頁面時觸發，譬如：橫向移動、垂直移動、透明、放大、旋轉、模糊。 你還可以選擇這種效果的運用設備，譬如只在電腦上運行。
- 滑鼠效果 Mouse Effects：讓元素跟隨你的滑鼠動作，做平面或3D的移動。
- 固定位置 Sticky：讓元素在頁面滾動時保持在固定位置，譬如我網站裡的頂部導航、右側的廣告或內容目錄。
- 入場動畫 Entrance Animation： 為元素亮相在使用者眼前時加一點動畫，譬如淡入淡出、彈跳、翻轉等等。
Scrolling effects 滾動動效 （Pro）
將“ scrolling effects”設置“打開”，將看到下圖，你可以設置：當用戶滾動頁面時的動畫和交互效果
Vertical scroll 垂直滾動
看下面這幅動圖裡的文字berlin，在上下滾動頁面時，文字與底部圖片的位置並不是保持不變的，而是垂直方向上有所滾動的，垂直滾動效果能夠實現：在頁面滾動時，指定元素向上或向下以指定速度滾動
Horizontal scroll 橫向滾動
橫向滾動可以實現：在頁面滾動時，指定元素相左或向右以指定速度滾動。
Transparency 透明度
透明性能夠讓指定元素在滾動頁面時變透明或變清晰，如下圖所示，標題在滾動時逐漸變透明。
該設置有4種的效果可選：
- 淡入-元素從透明開始顯示，並逐漸變為可見。
- 淡出 -元素從可見開始，逐漸變為透明。
- 淡出淡入 -元素開始顯示為可見，然後淡出，然後再次顯示。
- 淡入淡出 -元素從透明開始，然後變為可見，然後再次透明
Blur 模糊
此設置類似於“透明度”，但元素只是變得模糊。譬如下圖中，對背景圖像應用了模糊功能。
Rotate 旋轉
元素隨著滾動而旋轉，下圖展示的是星星的轉動。
Scale 縮放
縮放使得元素可以根據滾動來增大或縮小。下圖示例：背景圖在滾動時會放大。
Apply Effects On 效果運用於什麼設備
在此處你可以選擇是否在電腦桌面、平板、手機上顯示滾動效果。
Mouse effects 鼠標跟隨動效
讓元素跟隨你的滑鼠動作，做平面或3D的移動。
Mouse track 跟隨鼠標
讓元素跟隨鼠標移動而移動，移動方向有同向或反向。
3D傾斜效果
可根據鼠標的移動來傾斜元素，實現3D觀感。
Sticky 固定位置 （Pro）
可以將元素固定在頁面的頂部或底部，當滾動頁面時，它能保持可見，常見的是將導航的sticky，當滾動頁面時，導航會一直顯示在上方; 下圖示例是將聯繫表單固定在右側邊。
下面逐一講解sticky的設置功能：
- Sticky：可以選擇固定在頁面頂部top還是底部footer
- sticky on：可以選擇在桌面、平板、移動端上是否固定位置
- offset：用於調整上下偏移數值，可以為負數，單位是px，譬如：當頂部導航和左側導航都做了sticky，那左側導航會被主導航擋住，此時就要設置offset，讓它偏移一定高度，讓它不被主導航擋住。
- Effects Offset：假設填寫100，那麼用戶必須滾動到頁面的100px處，對應元素才出現固定位置的效果。
- anchor offset：這個設置主要是防止固定位置的欄目擋住連結到的具體內容，譬如，你做了一個導航，並且是固定頂部的，其中某個菜單是連結到頁面內的某個位置的（通常用到CSS ID），也就是錨點連結，如果你想點擊菜單時跳轉到對應位置后，對應欄目的內容不被擋住， 那麼可以在這裡設置一定的數值。
- stay in column：可以將元素的固定位置效果僅在元素所在的容器內呈現，一旦頁面滾到容器以外的區域，這個欄目就不再固定。
Entrance Animation進入動畫
這裡提供了37種入場動畫效果，譬如：淡入、淡出、放大、縮小、旋轉、跳躍等等，當瀏覽器滾動到元素位置時，就會以所選的動畫效果呈現。
Transform 變換效果
你可以為元素設置常態和滑鼠懸停狀態下的變換效果，也可以叫做轉換效果，譬如旋轉、偏移、縮放、傾斜、水準或垂直翻轉，也可以多個效果組合使用。
- Rotate 旋轉：圍繞元素的中心旋轉，可以順時針或逆時針旋轉。
- Offset 偏移：讓元素從當前位置沿著水準或垂直的方向移動，可以設置正數和負數
- Scale 縮放：可以對元素進行放大或縮小，1是原始大小，1.5表示放大50%，0.8表示縮小20%。
- Skew 傾斜：讓元素沿著X軸與Y軸傾斜變形。
- Flip horizontal 水平翻轉：像照鏡子一樣水準翻轉元素。
- Flip vertical 垂直翻轉：像倒影一樣垂直翻轉元素。
Background 背景
可以分別為元素的正常狀態和鼠標懸停狀態設置背景，背景可以是純顏色、漸變色、圖片。
Border 邊框
可以分別為元素的正常狀態和鼠標懸停狀態設置邊框
- 邊框類型：可從從無，實線，雙線，點線，虛線或帶凹槽中選擇
- 邊框半徑：設置邊框半徑以控制四個角的圓角大小
- 盒子陰影：用於調整邊框的投影效果
Mask面具
你可以給元素添加一個遮罩，就像是面具，當你用一個圓形遮罩，那元素只會顯示圓形區域的內容，其餘部分隱藏。
- Shape 形狀：系統預設了圓形、花朵等形狀，你也可以上傳SVG格式的自定義形狀哦
- Size 尺寸：控制遮罩圖形與元素之間的填充關係，就像你的手機壁紙填充時，也會讓你選擇適應螢幕還是填充螢幕，有如下三個選項可供選擇
- Fit：以遮罩圖形為主，保持遮罩圖形的原有比例，顯示完整的圖形
- Fill：以元素內容為主，盡可能多的顯示內容，所以遮罩圖形可能無法完整展示
- Custom：你可以自行調整遮罩圖形的縮放比例
- Postion 位置：設置遮罩圖形在元素中的對齊方式。
- Repeat 重複：決定遮罩圖形是否重複展示，並提供了不同的重複類型。
Responsive 回應
我們經常看到建站公司說網站是回應式的，回應式就是讓網頁在電腦、平板、手機上呈現合適美觀的佈局，而不是把電腦上看到的效果直接搬到手機上，那樣會太擁擠，看不清。
如下圖所示，我們可以控制所選的元素在電腦、平板或手機上顯示或隱藏。
Attributes 属性 （Pro）
可以為元素添加你自定義的屬性，需要程式設計功底，作為架設企業網站基本用不上（我也不會用
Custom CSS 自定義樣式 （Pro）
可以為元素添加自定義樣式，也需要css知識功底。
好啦~本篇elementor advanced教學就到此結束了，學會它們，即便不會寫代碼的我們也能實現酷炫的效果哟~ヾ（•ω•’）o
