本教程详细介绍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
