您想学习如何制作具有投资组合效果的卡片吗？ 在这个新教程中，我们将向您展示如何使用 Elementor.
如果您不知道我们今天要谈什么，我们邀请您观看以下视频：
然后，让我们回到为什么我们在这里。
要完成本教程，您需要 Elementor 专业版，因为我们将使用仅此版本支持的自定义 CSS 代码Elementor.
另请参阅： 如何使用 Elementor 在图像上方显示文本
让我们创建一个具有 3 列结构的新部分，然后在面板中，让我们定义 高度 河畔 最小高度进而 最小高度 让我们点击 VH 并将滑块设置为 100.
让我们选择中间的列，然后将 内部部分小部件. 默认情况下，内部部分小部件配置为 2 列。 在 2 列下，让我们删除小部件 标题 与标题 餐饮， 选择 H4 对于 HTML 标记，以及 中央 用于对齐。
在标签中 先进 的标题小部件，让我们输入 30 为 最高边距
让我们再次选择内部部分。 在面板中，让我们修改它 高度 河畔 最小高度 和 最小高度 让我们将光标设置为 380. 然后，让我们删除内部部分的右列或左列
让我们放下它 图像小部件 在内部部分并插入我们库中的图像。 让我们选择 所有的 为 图片尺寸 et 中央 为 结盟。
注意：如果您想拥有像我们这样的完整页面，我们邀请您在 Chrome 扩展程序 GoFullPage 的帮助下捕获页面，但您也可以使用另一个页面。
发现还： 如何使用 Elementor 创建图片库
然后在选项卡中 样式， 点击 PX de 宽度，让我们将滑块设置为 260 和 边界光线 河畔 10
接下来让我们通过将 Blur 更改为 40 并将 Diffuse 更改为 -10 来修改 Box Shadow。
在高级选项卡的部分 定位， 选择 绝对的 为 职务, 水平方向 河畔 左中， 差倾角 河畔 0L'垂直方向 河畔 巴斯.
让我们将 Image 小部件复制两次。 难免会全部叠加。 让我们打开导航器，以便我们可以访问第一个隐藏的其他小部件。
让我们替换第二个 Widget 及其 Tab 的图像 先进，让我们修改它们 下边距 et 左 通过输入 30 对于每个。 你现在会看到一个轻微的滞后，
对第三个图像小部件执行相同操作，但应用边距 60 用于底部和左侧边距。 您现在应该对所有 3 个图像小部件有一个概览。
让我们选择我们的内部部分小部件，转到它的选项卡 先进 并在该部分 自定义CSS，复制并粘贴以下代码段：
selector .elementor-widget-image{
transition: ease-in-out 0.6s;
}
selector:hover .elementor-widget-image{
transform: scale(.65);
}
selector:hover .front-img{
transform-origin: center left;
}
selector:hover .mid-img{
transform-origin: center top;
}
selector:hover .last-img{
transform-origin: bottom right;
}（如果你没有这个部分，那么你没有专业版，如果你想继续你需要升级你的版本）
现在，如果您将鼠标悬停在我们的地图上，您将看到一个缩放动画
让我们选择我们的第一个图像小部件（最低的一个）并在它的选项卡中 先进，让我们抓住 正面图片 为 CSS 类.
对于第二个图像小部件，让我们输入 中图 用于 CSS 类。
对于第三个 Image Widget，让我们输入 最后一张图片 用于 CSS 类。
现在将鼠标悬停在我们的专栏上，我们将看到一个华丽的动画 内容 我们的内部部门。
让我们在平板模式下显示我们的页面 我们将看到图像将无法正确显示。
选择第一个图像小部件，在其样式选项卡中，让我们通过单击 PC 来修改宽度，然后输入 150 作为宽度。 让我们对其他 2 个 Image 小部件做同样的事情。
让我们在其部分中选择我们的内部部分 包装内容，让我们修改 最小高度 河畔 225.
我们还以智能手机模式显示我们的页面，先验它不会出现任何问题。 但是，如果它显示任何内容，让我们在其部分中选择我们的内部部分 包装内容，让我们修改最小高度。
现在让我们将中间列复制 2 次，然后删除另外 2 个空列。
让我们修改这些列的标题，然后更改图像
您将必须有一个宏伟的部分，其中的结果如下：
好了，您刚刚轻松完成了这项任务。
立即获取Elementor Pro！
结论
就在那里！ 这就是本文向您展示如何创建具有投资组合效果的卡片的内容。 如果您对如何到达那里有任何疑虑，请告知我们 评论.
但是，您也可以咨询 我们的资源，如果您需要更多的元素来执行创建Internet网站的项目，请参考我们关于 WordPress博客创建 或者那个 Divi：有史以来最好的WordPress主题.
但与此同时， 在您不同的社交网络上分享此文章.
...
