您想创建一个团队成员部分吗? Elementor ?
好吧,你来对地方了。 今天我们将向您展示如何使用 生成器页面 Elementor.
要完成本教程,您需要一个 Elementor 专业版, 因为我们 使用自定义 CSS 代码 这只有专业版才有可能Elementor。 如果您还没有这样做,请更新它。
为了了解我们在本教程中讨论的内容,我们邀请您观看以下视频:
首先,创建一个页面并使用 Elementor 对其进行编辑。
然后在后者中插入一个具有3列的结构,然后在面板中的选项卡下 包装内容,将高度设置为最小高度并选择 VH 最小高度,然后将滑块设置为 100。
让我们选择中间列进行编辑,然后转到“高级”选项卡。 让我们将所有内部边距设置为 30。
让我们在此列中插入一个“内部部分”小部件,然后删除“内部部分”中包含的一列,然后在选项卡下的面板中 包装内容,我们还将高度设置为 Min Height,并将滑块设置为 450px。
在垂直对齐 选择 巴斯 和 溢出 选择 面具.
在标签中 样式 将背景更改为 经典 并从您的图库中选择一张图片。
阅读我们的指南: 如何使用 Elementor 创建产品卡片
南 职务 选择 高级居中, 附件文件 河畔 滚动, 再说一遍 河畔 不重复 et 尺寸 河畔 覆盖
在边界定义 边界 河畔 12.
让我们添加阴影效果。 在盒子的阴影中让我们修改 垂直 河畔 22, Flou 河畔 40 et 扩散器 河畔 -10.
让我们添加一个 标题小部件 在内部部分并给我们的会员起个名字和 中心 小部件。
另请参阅: 如何使用 Elementor 更改页面滚动的标题
在标签中 样式, 让我们修改它 文字颜色 和 活版印刷 选择 22 对于字体大小和 500 为 油脂, 转型 河畔 大写 et 字母间距 河畔 1.2
然后让我们复制 标题小部件 并修改第二个小部件的标题并在排版中选择 15 对于字体大小和 500 对于宽度,变换 故障 和字母间距 1.2
让我们去标签 先进 并定义 最高边距 河畔 -15. 让我们将社交媒体图标小部件添加到我们的内部部分。
让我们去标签 样式,将颜色改为自定义,使原色透明并设置内边距为0.30
在标签中 先进, 定义边距 -15 为高,20 为低
然后选择内部部分的列进行修改,并在选项卡中 样式 选择类型 经典 在颜色上让我们抓住 #FFFFFF28.
阅读: 如何使用 Elementor 滚动浏览投资组合的长图
然后选择内部部分的列进行修改,并在选项卡中 先进 在该领域 CSS 类,让我们抓住 会员信息
然后选择 内部部分 然后在标签中 先进 在该领域 自定义CSS,粘贴以下代码:
/* CSS 玻璃效果 */
选择器{
–高度:150px;
–底部:-150px;
溢出:隐藏!重要;
}
选择器 .member-info {
高度:var(-高度);
位置:绝对;
背景滤镜:模糊(15px);
底部:0
过渡:5 秒缓进出;
}
在第一个 CSS 代码之后,粘贴以下内容:
/ * CSS 在悬停时隐藏或显示 */
选择器 .member-info {
底部:var(-底部);
}
选择器:悬停 .member-info {
底部:0px;
}
现在,当您将鼠标悬停在图像上时,会出现成员信息。
复制该列 2 次并删除其他空列
然后选择内部部分并将背景图像更改为另一个团队成员的图像,更改他们的姓名和职业,对另一列执行相同操作。
在平板电脑和移动设备上预览您的作品,同时提高利润率等以获得更好的观看效果。
这就是您如何创建精彩的团队成员部分
立即获取Elementor Pro!
结论
所以 ! 本教程就是这样,向您展示如何创建团队成员部分。 如果您对如何到达那里有任何疑问,请在 评论.
但是,您也可以咨询 我们的资源,如果您需要更多的元素来执行创建Internet网站的项目,请参考我们关于 WordPress博客创建 或者那个 Divi:有史以来最好的WordPress主题.
但与此同时, 在您不同的社交网络上分享此文章.
...