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没有给到我们相对应的设置入口，那么就需要用到这个功能。