WordPress divi主题

下载 Divi 的免费和高级客户端展示悬停/单击设计

by | May 9, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

人与其他人相关。 这就是为什么在您访问的几乎所有网站上,您都会看到面孔出现。 从以前的客户到团队成员等等; 你越早向客户和公司背后的人展示,你就越有可能让他们相信你的公司、品牌或产品是合适的。 在这篇文章中,我们将专注于以一种美丽而先进的方式展示您的客户。 您还可以免费下载 JSON 文件!

google广告开户

让我们开始吧!

预览

在深入学习本教程之前,让我们快速浏览一下不同屏幕尺寸的结果。

桌面

客户展示

移动的

客户展示

免费下载客户端展示悬停/单击设计

要掌握免费的客户端展示悬停/点击设计,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

让我们开始重建吧!

添加新部分

您需要做的第一件事是向您正在处理的页面添加一个新的常规部分。

客户展示

添加新行

立柱结构

继续使用以下列结构添加新行:

客户展示

WordPress divi主题

浆纱

在添加任何模块之前,打开行设置并让行占据屏幕的整个宽度。

  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 均衡柱高:是
  • 宽度:100%
  • 最大宽度:100%

客户展示

间距

删除下一行的默认顶部和底部填充。

  • 顶部填充:0px
  • 底部填充:0px

客户展示

第 2 列设置

继续打开第二列的设置。

客户展示

间距

向列添加一些自定义填充值。

  • 顶部填充:9vw
  • 底部填充:9vw
  • 左填充:8vw
  • 右填充:8vw

客户展示

将文本模块添加到第 1 列

添加H3和段落内容

完成行和列设置后,继续将文本模块添加到第 1 列。将客户信息添加到内容框。

客户展示

fiverr建站WordPress程序员

渐变背景

接下来转到背景设置并应用以下渐变背景:

  • 颜色1:rgba(43,135,218,0)
  • 颜色 2:rgba(0,0,0,0.55)
  • 在背景图像上方放置渐变:是

客户展示

背景图片

上传背景图片。

客户展示

文字设置

转到设计选项卡并相应地更改文本设置:

独立站选品工具
  • 文字字体:Lato
  • 文字颜色:#dbdbdb
  • 文字大小:1vw(桌面)、1.8vw(平板电脑)、2.3vw(手机)
  • 文本行高:1.5vw(桌面)、2vw(平板电脑)、2.5vw(手机)

客户展示

标题 3 文字设置

也对 H3 文本设置进行一些更改。

  • 标题 3 字体:Playfair 显示
  • 标题 3 字体粗细:粗体
  • 标题 3 文本颜色:#ffffff
  • 标题 3 文本大小:3vw(桌面)、4vw(平板电脑)、5vw(手机)
  • 标题 3 行高:1.6em

客户展示

间距

继续进行间距设置并相应地设置模块的形状和位置:

  • 最高边距:9vw
  • 底边距:9vw
  • 左边距:7vw(桌面)、16vw(平板电脑)、17vw(手机)
  • 右边距:7vw(桌面)、16vw(平板电脑)、17vw(手机)
  • 顶部填充:32vw(台式机)、55vw(平板电脑)、49vw(手机)
  • 底部填充:3vw(桌面)、6vw(平板电脑和手机)
  • 左填充:2vw(桌面)、4vw(平板电脑)、5vw(手机)
  • 右填充:2vw(桌面)、4vw(平板电脑)、5vw(手机)

客户展示

高质量外链购买

盒子阴影

我们还添加了一个彩色盒子阴影。

  • 盒子阴影水平位置:0px
  • 盒子阴影垂直位置:0px
  • 盒子阴影传播强度:7vw
  • 阴影颜色:#ffcf0f

客户展示

CSS ID

通过添加 CSS ID 完成模块设置。

客户展示

克隆文本模块五次

完成第一个文本模块后,继续克隆它 5 次。

JasperAI 10000字免费额度试用

客户展示

更改每个副本的内容和背景图像

更改每个副本中的内容和背景图像。

客户展示

更改每个副本的框阴影颜色

连同盒子的影子。

客户展示

WordPress备份工具updrafplus

更改每个重复的 CSS ID 并添加 CSS 类

第 1 列中的每个文本模块都需要一个唯一的 CSS ID。 列中的第一个文本模块包含“photo-display-1”CSS ID,第二个需要“photo-display-2”,第三个需要“photo-display-3”,依此类推。 也为每个重复的文本模块添加一个 CSS 类(确保您没有向原始文本模块添加一个)。

  • CSS ID:photo-display-2(从 2 到 6)
  • CSS 类:photo-hide-first(第 1 列中的每个文本模块,第一个除外)

客户展示

将文本模块 #1 添加到第 2 列

添加H2含量

完成第 1 列中的所有 6 个模块后,您可以进入第二列。 在那里,我们需要的第一个模块是一个带有一些 H2 内容的文本模块。

客户展示

H2 文本设置

转到设计选项卡并相应地修改 H2 文本设置:

  • 标题 2 字体:Playfair 显示
  • 标题 2 文字颜色:#636363
  • 标题 2 文字大小:3vw(桌面)、6vw(平板电脑和手机)
  • 标题 2 字母间距:0.1vw
  • 标题 2 行高:1.2em

客户展示

将文本模块 #2 添加到第 2 列

添加内容

将另一个文本模块添加到第 2 列,其中包含您选择的一些段落内容。

客户展示

文字设置

转到设计选项卡并相应地更改文本设置:

  • 文字字体:Lato
  • 文本对齐:对齐
  • 文字大小:0.9vw(桌面)、2vw(平板电脑)、2.7vw(手机)
  • 文本行高:2.1em

客户展示

间距

修改间距设置中的边距值。

  • 最高边距:2vw
  • 底边距:2vw
  • 右边距:7vw

客户展示

将分隔模块添加到第 2 列

能见度

进入下一个模块,即分频器模块。 确保启用了“显示分隔线”选项。

客户展示

线

转到设计选项卡并更改线条颜色。

客户展示

间距

接下来修改不同屏幕尺寸的边距值。

  • 底边距:7vw
  • 左边距:14vw(台式机)、39vw(平板电脑)、38vw(手机)
  • 右边距:14vw(桌面)、39vw(平板电脑)、38vw(手机)

客户展示

变换旋转

旋转分频器模块。

客户展示

转换翻译

并使用一些自定义转换转换值在不同的屏幕尺寸上重新定位它。

  • 右:2vw(台式机)、3vw(平板电脑和手机)
  • 底部:-17.3vw(台式机)、-43vw(平板电脑和手机)

客户展示

将文本模块 #3 添加到第 2 列

添加内容

我们需要的下一个模块是另一个文本模块。 确保将相应的客户端名称添加到内容框中(将其与第 1 列中的第一个文本模块匹配)。

客户展示

文字设置

转到设计选项卡并相应地修改文本设置:

  • 文字字体:Lato
  • 文本字体样式:大写
  • 文字大小:1.3vw(桌面)、2.5vw(平板电脑)、3vw(手机)
  • 文字字母间距:1px
  • 文字行高:1.2em

客户展示

间距

接下来添加一些自定义顶部和底部边距。

  • 最高边距:1em
  • 底边距:1em

客户展示

CSS ID

转到设计选项卡并添加一个 CSS ID。 确保编号与第 1 列中相应的文本模块相同。

客户展示

克隆文本模块 #3 五次

完成第一个客户端文本模块后,将其克隆 5 次。

客户展示

更改每个重复项的内容(与第 1 列中的文本模块匹配)

在每个重复的文本模块中更改客户端名称。

客户展示

更改每个重复项的 CSS ID

并将每个副本的 CSS ID 与第 1 列中的文本模块匹配。

  • CSS ID:photo-click-2(从 2 到 6)

客户展示

将代码模块 #1 添加到第 2 列

插入 CSS 代码

本教程的最后一部分侧重于使悬停功能起作用。 将第一个代码模块添加到第 2 列并插入以下 CSS 代码行:

<style>
.photo-hide-first {
display: none;
}
</style>

客户展示

将代码模块 #2 添加到第 2 列

插入 jQuery 代码

在前一个代码模块的正下方添加另一个代码模块并插入以下 jQuery 代码以使悬停功能起作用:

<script>
jQuery(function($){

$('#photo-click-1').css({'color': '#ffcf0f', 'font-weight': 'bold', 'padding-left': '0.5em'});

$('[id*="photo-click"]').hover(function() {

var selector1 = $(this).attr('id').replace('click', 'display');
var $photo = $('#' + selector1);
var $photoColor = $photo.css('box-shadow').replace(/^.*(rgba?([^)]+)).*$/,'$1')

$photo.siblings().hide();
$photo.show();

$('[id*="photo-click"]').css({'color': '', 'font-weight': '', 'padding-left': ''});
$(this).css({'color': $photoColor, 'font-weight': 'bold', 'padding-left': '0.5em'});

});
});
</script>

客户展示

预览

现在我们已经完成了所有步骤,让我们最终看看不同屏幕尺寸的结果。

桌面

客户展示

移动的

客户展示

最后的想法

在这篇文章中,我们向您展示了如何创建一个漂亮的客户展示,您可以在您创建的任何网站上使用它。 我们将 Divi 的内置选项与一些 jQuery 代码相结合,以使该方法有效。 您还可以免费下载 JSON 文件! 如果您有任何问题或建议,请务必在下面的评论部分发表评论。

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品,请务必订阅我们的电子邮件通讯和 YouTube 频道,这样您将永远是第一批了解并从这些免费内容中受益的人之一。

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题