您想创建一个团队成员部分吗? Elementor ?

好吧,你来对地方了。 今天我们将向您展示如何使用 生成器页面 Elementor.

要完成本教程,您需要一个 Elementor 专业版, 因为我们 使用自定义 CSS 代码 这只有专业版才有可能Elementor。 如果您还没有这样做,请更新它。

为了了解我们在本教程中讨论的内容,我们邀请您观看以下视频:

首先,创建一个页面并使用 Elementor 对其进行编辑。

然后在后者中插入一个具有3列的结构,然后在面板中的选项卡下 包装内容,将高度设置为最小高度并选择 VH 最小高度,然后将滑块设置为 100。

让我们选择中间列进行编辑,然后转到“高级”选项卡。 让我们将所有内部边距设置为 30。

让我们在此列中插入一个“内部部分”小部件,然后删除“内部部分”中包含的一列,然后在选项卡下的面板中 包装内容,我们还将高度设置为 Min Height,并将滑块设置为 450px。

使用 Elementor 创建团队成员部分

垂直对齐 选择 巴斯 溢出 选择 面具.

在标签中 样式 将背景更改为 经典 并从您的图库中选择一张图片。

阅读我们的指南: 如何使用 Elementor 创建产品卡片

职务 选择 高级居中, 附件文件 河畔 滚动, 再说一遍 河畔 不重复 et 尺寸 河畔 覆盖

使用 Elementor 创建团队成员部分

在边界定义 边界 河畔 12.

让我们添加阴影效果。 在盒子的阴影中让我们修改 垂直 河畔 22, Flou 河畔 40 et 扩散器 河畔 -10.

让我们添加一个 标题小部件 在内部部分并给我们的会员起个名字和 中心 小部件。

另请参阅: 如何使用 Elementor 更改页面滚动的标题

在标签中 样式, 让我们修改它 文字颜色活版印刷 选择 22 对于字体大小和 500 油脂, 转型 河畔 大写 et 字母间距 河畔 1.2

使用 Elementor 创建团队成员部分

然后让我们复制 标题小部件 并修改第二个小部件的标题并在排版中选择 15 对于字体大小和 500 对于宽度,变换 故障 和字母间距 1.2

使用 Elementor 创建团队成员部分

让我们去标签 先进 并定义 最高边距 河畔 -15. 让我们将社交媒体图标小部件添加到我们的内部部分。

使用 Elementor 创建团队成员部分

让我们去标签 样式,将颜色改为自定义,使原色透明并设置内边距为0.30

在标签中 先进, 定义边距 -15 为高,20 为低

使用 Elementor 创建团队成员部分

然后选择内部部分的列进行修改,并在选项卡中 样式 选择类型 经典 在颜色上让我们抓住 #FFFFFF28.

阅读: 如何使用 Elementor 滚动浏览投资组合的长图

然后选择内部部分的列进行修改,并在选项卡中 先进 在该领域 CSS 类,让我们抓住 会员信息

使用 Elementor 创建团队成员部分

然后选择 内部部分 然后在标签中 先进 在该领域 自定义CSS,粘贴以下代码:

/* CSS 玻璃效果 */

选择器{

    –高度:150px;

    –底部:-150px;

    溢出:隐藏!重要;

}

选择器 .member-info {

    高度:var(-高度);

    位置:绝对;

    背景滤镜:模糊(15px);

    底部:0

    过渡:5 秒缓进出;

}

使用 Elementor 创建团队成员部分

在第一个 CSS 代码之后,粘贴以下内容:

/ * CSS 在悬停时隐藏或显示 */

选择器 .member-info {

    底部:var(-底部);

}

选择器:悬停 .member-info {

    底部:0px;

}

现在,当您将鼠标悬停在图像上时,会出现成员信息。

复制该列 2 次并删除其他空列

然后选择内部部分并将背景图像更改为另一个团队成员的图像,更改他们的姓名和职业,对另一列执行相同操作。

在平板电脑和移动设备上预览您的作品,同时提高利润率等以获得更好的观看效果。

这就是您如何创建精彩的团队成员部分

立即获取Elementor Pro!

结论

所以 ! 本教程就是这样,向您展示如何创建团队成员部分。 如果您对如何到达那里有任何疑问,请在 评论.

但是,您也可以咨询 我们的资源,如果您需要更多的元素来执行创建Internet网站的项目,请参考我们关于 WordPress博客创建 或者那个 Divi:有史以来最好的WordPress主题.

但与此同时, 在您不同的社交网络上分享此文章.

...