Elementor免费版的小部件有40多个，而Elementor Pro 在免费版的基础上，增加了 超过 50 个高级小部件，使总数达到 90 多个小部件。这些高级小部件包括表单、滑块、帖子展示、作品集、价格表、菜单导航、登录/注册表单、WooCommerce 集成小部件等。
Elementor的小部件的设置包括以下三个选项卡：
- 内容设置（Content）：配置小部件的基本内容，如文本、图像、链接、视频等。
- 样式设置（Style）：调整小部件的外观，包括颜色、字体、边距、填充、边框、阴影等。
- 高级设置（Advanced）：设置小部件的布局、响应式设计、动画效果、自定义CSS、高级定位等。
内容设置（Content）和样式设置（Style）取决于小部件的类型和功能，需要我们平时在使用中熟悉。
Elementor小部件的高级设置（Advanced）则相对比较固定，无需重新学习即可应用相同的调整方法。我们这篇Elementor教程主要介绍高级设置（Advanced）里面的功能。
布局（Layout）
边距（Margin）：用于设置小部件外部的空间，控制小部件边框与其他元素之间的距离。
填充（Padding）：用于设置小部件内部的空间，控制内容与小部件边框之间的距离。
边距和填充都可以独立设置，可以分别为上、右、下、左四个方向设置不同的值，支持负值调整。
Maring和Padding是CSS领域的知识，具体显示可以看下面这张图：
我们可以给小部件的Margin设置负值，来达到位置微调的效果。比如我们想要小部件向上移动，那么我们可以设置Margin-Top为负值。
宽度（Width）：可以设置小部件的宽度，选项有：默认、Full Width、Inline（Auto）、Custom。
Default就是Inline（Auto）选项，小部件的宽度就会随着内容的长度来自动变化。
Full Width就是占据满整个容器的宽度。有关容器的教程可以看这篇。
Custom可以让我们给小部件设置百分比宽度，以容器宽度为基准。
边框（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没有给到我们相对应的设置入口，那么就需要用到这个功能。