本教學詳細介紹 Elementor 網頁編輯器中元素或容器的進階設定，包括：版面配置、動畫效果、變換效果、背景、邊框、遮罩、響應式、屬性、自訂 CSS 設定等。正確運用以下描述的進階功能，能提升網頁設計的效果。
提示：某些功能只對特定元素或容器有效，下面我們開始逐一講解。
Layout 佈局
Margin 外距
用於調整當前元素與外部其他元素之間的間距，你就把元素當成一個盒子，盒子與上下左右盒子之間的距離通過它調整，正負數值均可。
Padding 内距
用于调整元素内部的间距，如果元素是个盒子，盒子里得有内容的嘛，譬如盒子装鞋子，鞋子与盒子的四壁之间的距离就是内距。
Width 宽度
设置当前元素的宽度，选项包括：默认、全宽（100%）、内联（自适应）或自定义。
默认 default：系统根据元素本身的特性，预设了宽度类型，有可能是全宽或内联。
全宽 Full width（100%）：让元素内容撑满所在容器(container)的全部宽度。
内联（自适应） inline（auto）：让元素按照自己的内容宽度自动调整展示宽度。
自定义：可以自己按像素px、百分比
%、视窗宽度（VW）来设置元素的宽度
Align Self 对齐
用于设置元素在容器内的对齐方式，选项为：起始（start）、居中（center）、末尾（end）、拉伸（stretch）。
Order 排序
指定元素在容器内的排列顺序，包括三个选项：start（排在第一位）、end（排列在末尾）、custom（可以自定义数值，数值越小，排列越靠前，默认的数值是0）
Size 尺寸
用于控制当前元素在容器内的展示尺寸，跟上文所述的宽度不同，这里的尺寸是用于利用或容器内的剩余空间或解决空间不足的问题。
如果一个容器内有多个元素，但仍然无法填满容器的宽度，那么你可以指定某个元素扩展它的大小（Grow），它就能把剩余的空间填满
反之，如果容器中的所有元素都比较大，无法自然的去容纳所有元素，那么你可以选择shrink去收缩某个元素。
尺寸里提供了四个选项：None、Grow、Shrink、Custom。
None表示保持原有的大小；Grow和Shrink上文已经讲解；而Custom可以让你设置扩展和收缩的倍率，这适合有多个元素需要设置不同扩展/收缩倍率的情况。
Position 位置
元素的位置有三个选项：默认default、绝对absolute、固定fixed。
默认情况下，每个元素按照你添加到容器里的顺序依次展示，排好队，一个个站队。
当你给某个元素选择绝对位置时，元素就离队了，但不会离开这个容器，那它的位置怎么定呢？取决于你为它设置的基准点， 默认基准点是容器的左上角，你也可以更换为右上角、左下角等容器的其他三个角，还可以设置XY轴的偏移量数值来调整详细位置。
在下图中，装饰的小图标就应用了绝对位置功能，使得它的位置可以被随意调整用于装饰。
当你给某个元素选择固定位置时，它不仅离队了，还离开了容器，它可以永远固定在屏幕的某个位置，譬如我用这个功能制作了返回顶部按钮，同理，你也可以像设置绝对位置时一样，设置它的具体位置。
Z-Index 层级索引
页面上元素很多，页面就像一个平面，只有x和y轴，z-指数就可以理解为xyz轴里的z轴，z-index越大，说明这个元素的层级越高，就像photoshop里的图层顺序，譬如本站右下角的置顶按钮的z-指数是999，这样它的层级最高，不会被其他层元素挡住。
CSS ID
当你要为元素写css样式时会用到它，它也可以被用作页面内锚点。
CSS Class
当你要为元素写css样式时会用到它。
Display Condition 显示条件
让你可以控制当前元素在指定条件下展示。
Motion effect 動作效果
- 捲動效果：啟用此選項後，您可以選擇各種動畫與互動效果，如水平移動、垂直移動、透明度、縮放、旋轉與模糊。 你也可以選擇有此效果的裝置，例如只在電腦上運行。
- 滑鼠效果 Mouse Effects：讓元素跟隨你的滑鼠動作，做平面或3D的移動。
- 固定位置 Sticky：讓元素在頁面滾動時保持在固定位置，譬如我網站裡的頂部導航、右側的廣告或內容目錄。
- 入場動畫 Entrance Animation： 為元素亮相在使用者眼前時加一點動畫，譬如淡入淡出、彈跳、翻轉等等。
Scrolling effects 滾動動效 （Pro）
將“ scrolling effects”設置“打開”，將看到下圖，你可以設置：當用戶滾動頁面時的動畫和交互效果
Vertical scroll 垂直滾動
看下面這幅動圖裡的文字berlin，在上下滾動頁面時，文字與底部圖片的位置並不是保持不變的，而是垂直方向上有所滾動的，垂直滾動效果能夠實現：在頁面滾動時，指定元素向上或向下以指定速度滾動
Horizontal scroll 橫向滾動
橫向滾動可以實現：在頁面滾動時，指定元素相左或向右以指定速度滾動。
透明度
透明性能夠讓指定元素在滾動頁面時變透明或變清晰，如下圖所示，標題在滾動時逐漸變透明。
該設置有4種的效果可選：
- 淡入-元素從透明開始顯示，並逐漸變為可見。
- 淡出 -元素從可見開始，逐漸變為透明。
- 淡出淡入 -元素開始顯示為可見，然後淡出，然後再次顯示。
- 淡入淡出 -元素從透明開始，然後變為可見，然後再次透明
模糊：模糊
此設置類似於“透明度”，但元素只是變得模糊。譬如下圖中，對背景圖像應用了模糊功能。
Rotate 旋轉
元素隨著滾動而旋轉，下圖展示的是星星的轉動。
Scale 縮放
縮放使得元素可以根據滾動來增大或縮小。下圖示例：背景圖在滾動時會放大。
Apply Effects On 效果運用於什麼設備
在此處你可以選擇是否在電腦桌面、平板、手機上顯示滾動效果。
Mouse effects 鼠標跟隨動效
讓元素跟隨你的滑鼠動作，做平面或3D的移動。
Mouse track 跟隨鼠標
讓元素跟隨鼠標移動而移動，移動方向有同向或反向。
3D傾斜效果
可根據鼠標的移動來傾斜元素，實現3D觀感。
Sticky 固定位置 （Pro）
可以將元素固定在頁面的頂部或底部，當滾動頁面時，它能保持可見，常見的是將導航的sticky，當滾動頁面時，導航會一直顯示在上方; 下圖示例是將聯繫表單固定在右側邊。
下面逐一講解sticky的設置功能：
- 置頂：你可以選擇將它固定在頁面頂端或底部頁腳
- 置頂開啟：允許你選擇在桌面、平板或行動裝置上固定位置
- 偏移：用來調整垂直偏移值，該值可為負值，單位為 px。例如，如果上方導航和左側導覽都卡住，左側導覽會被主導航系統阻擋。此時你需要設定偏移以偏移一定高度，避免被主導航系統阻擋。
- 效果偏移量：假設為 100，使用者必須捲動至頁面的 100px 標記，對應元素才會顯示在固定位置。
- 錨點偏移：此設定主要防止固定欄位阻擋特定連結內容。例如，若你建立固定頂端位置的導覽，選單會連結到頁面上的特定位置（通常使用 CSS ID），即錨點連結。若點擊選單時跳到對應位置且該區段內容未被阻塞，可在此設定特定值。
- 保持在欄位中：元素的固定位置效果只能在該元素所在的容器內顯示。一旦頁面捲動到容器外的區域，該欄位將不再固定。
Entrance Animation進入動畫
這裡提供了37種入場動畫效果，譬如：淡入、淡出、放大、縮小、旋轉、跳躍等等，當瀏覽器滾動到元素位置時，就會以所選的動畫效果呈現。
Transform 變換效果
你可以為元素設置常態和滑鼠懸停狀態下的變換效果，也可以叫做轉換效果，譬如旋轉、偏移、縮放、傾斜、水準或垂直翻轉，也可以多個效果組合使用。
- Rotate 旋轉：圍繞元素的中心旋轉，可以順時針或逆時針旋轉。
- Offset 偏移：讓元素從當前位置沿著水準或垂直的方向移動，可以設置正數和負數
- Scale 縮放：可以對元素進行放大或縮小，1是原始大小，1.5表示放大50%，0.8表示縮小20%。
- Skew 傾斜：讓元素沿著X軸與Y軸傾斜變形。
- Flip horizontal 水平翻轉：像照鏡子一樣水準翻轉元素。
- Flip vertical 垂直翻轉：像倒影一樣垂直翻轉元素。
背景
可以分別為元素的正常狀態和鼠標懸停狀態設置背景，背景可以是純顏色、漸變色、圖片。
Border 邊框
可以分別為元素的正常狀態和鼠標懸停狀態設置邊框
- 邊框類型：可從從無，實線，雙線，點線，虛線或帶凹槽中選擇
- 邊框半徑：設置邊框半徑以控制四個角的圓角大小
- 盒子陰影：用於調整邊框的投影效果
Mask面具
你可以給元素添加一個遮罩，就像是面具，當你用一個圓形遮罩，那元素只會顯示圓形區域的內容，其餘部分隱藏。
- Shape 形狀：系統預設了圓形、花朵等形狀，你也可以上傳SVG格式的自定義形狀哦
- Size 尺寸：控制遮罩圖形與元素之間的填充關係，就像你的手機壁紙填充時，也會讓你選擇適應螢幕還是填充螢幕，有如下三個選項可供選擇
- Fit：以遮罩圖形為主，保持遮罩圖形的原有比例，顯示完整的圖形
- Fill：以元素內容為主，盡可能多的顯示內容，所以遮罩圖形可能無法完整展示
- Custom：你可以自行調整遮罩圖形的縮放比例
- Postion 位置：設置遮罩圖形在元素中的對齊方式。
- Repeat 重複：決定遮罩圖形是否重複展示，並提供了不同的重複類型。
Responsive 回應
我們經常看到建站公司說網站是回應式的，回應式就是讓網頁在電腦、平板、手機上呈現合適美觀的佈局，而不是把電腦上看到的效果直接搬到手機上，那樣會太擁擠，看不清。
如下圖所示，我們可以控制所選的元素在電腦、平板或手機上顯示或隱藏。
Attributes 属性 （Pro）
可以為元素添加你自定義的屬性，需要程式設計功底，作為架設企業網站基本用不上（我也不會用
Custom CSS 自定義樣式 （Pro）
可以為元素添加自定義樣式，也需要css知識功底。
好啦~本篇elementor advanced教學就到此結束了，學會它們，即便不會寫代碼的我們也能實現酷炫的效果哟~ヾ（•ω•’）o
