如何使用点击创建个人模块

在这篇文章中，我们将向您展示如何创建一个点击 bio 的人物模块。 一旦您单击同一行中的另一个人模块，生物中的文本就会更改。 您可以随时通过再次单击人员模块来关闭个人简介。

例如，您可以使用它在您公司的网站上显示有关您员工的一些附加信息。 这个概念可以帮助您做两件事：与访问者互动并在您的网站上保存位置。 个人简介实际显示的唯一时间是访问者表现出兴趣并决定单击人员模块中的元素。

点击 Bio 的结果人员模块

在我们深入探讨您需要遵循的不同步骤来实现点击 bio 的人员模块之前，让我们先看看桌面上的最终结果：

以及手机和平板电脑上的最终结果：

对于手机，如果打开一个 bio，其他两个 bios 将自动关闭。 您将始终只打开一个个人简介部分，尽管每个个人简介都有自己的部分。

个人模块与生物点击桌面

订阅我们的 YouTube 频道

为了让一切顺利进行，我们需要制作两个版本：一个用于台式机，一个用于平板电脑和手机。 这些版本中的每一个都需要自己的 jQuery 代码。 我们将从桌面版本开始，在文章的下一部分，我们将向您展示如何制作适用于平板电脑和手机的版本。

添加具有三列行的人员标准部分

我们需要做的第一件事是添加一个包含人员模块的部分。

打开一个新页面（或您想要添加带有 bio 的 Person 模块的页面）并添加一个新的标准部分。 在该部分中，放置一行三列。 当然，您也可以使用其他数量的列，但我们将使用的代码考虑了 3 个人员模块。 如果您想为其他类型的行创建相同的内容，则必须对我们将在本文后面提供的 jQuery 代码进行一些修改。

行设置

打开行设置并在内容选项卡中，添加“#e5e5e5”作为每列的背景颜色。

然后，转到“高级”选项卡并将以下框阴影插入到三行中每一行的主要元素中：

添加人员模块

您需要做的下一件事是将人员模块添加到行的第一列。

内容标签

在该模块的“内容”选项卡中，输入信息和社交媒体链接并上传图像。

高级选项卡

我们不会对此模块的“设计”选项卡进行任何修改（之后可以随意对外观进行任何更改）。 相反，我们将立即转到“高级”选项卡，在那里我们将添加到行列的相同框阴影添加到成员图像。

克隆人模块

您需要做的下一件事是克隆 Person 模块两次并将其放置在其他两列中。 我们需要回到本节来添加不同的 CSS 类。 但在我们这样做之前，我们将首先添加 bio 部分。

添加带有全宽行的生物标准部分

在您创建的上一个部分的正下方添加另一个标准部分。 在本节中，我们需要添加链接到各种人员模块的不同文本模块。 打开该部分的设置并使用“#a0a0a0”颜色作为背景颜色。

添加两个文本模块

根据您希望人员模块的生物具有多少文本模块，您可以添加文本模块。 在这种情况下，我们将为每个人模块添加两个文本模块。

第一个文本模块

在第一个文本模块中键入一些文本，然后转到“设计”选项卡。 在“设计”选项卡中，对“文本”子类别进行以下更改：

• 文字方向：居中
• 文字字体大小：31
• 文字颜色：#FFFFFF
• 文本行高：1.7em

第二个文本模块

添加另一个文本模块并对“设计”选项卡的“文本”子类别进行以下更改：

• 文字方向：居中
• 文字字体大小：16
• 文字颜色：#FFFFFF
• 文本行高：1.7em

克隆每个模块两次

这两个文本模块对于每个 bios 都是相同的。 这就是为什么你应该克隆每个文本模块两次。 这是页面后端的最终结构：

不同的 CSS 类

将 CSS 类分配给 Person 模块

转到每个人员模块的高级选项卡并分配以下 CSS 类：

• 第一人称模块： person1
• 第二人称模块： person2
• 第三人称模块： person3

将 CSS 类分配给该部分

打开放置您的bios的部分的设置。 转到“高级”选项卡并在 CSS 类中写下“section_1”。

为文本模块分配 CSS 类

现在，通过以下方式将 CSS 类添加到您创建的文本模块中：

• 链接到第一个人模块： div_text_1
• 链接到第二个人模块： div_text_2
• 链接到第三人模块： div_text_3

将显示 CSS 代码添加到部分和所有文本模块

您需要做的下一步是转到该部分的高级选项卡和所有文本模块。 然后，将以下 CSS 代码行添加到该部分的 Main Element 中：

display: none;

在手机和平​​板电脑上禁用

现在，禁用您为移动设备和平板电脑创建的两个部分。

适用于平板电脑和手机的带有 Bio on Click 的人员模块

既然我们已经向您展示了如何在桌面上创建带有 bio on click 的 person 模块，我们将向您展示如何为平板电脑和手机制作它。 我们已经为手机和平板电脑禁用了前面的部分。 这是桌面在后端的布局：

这就是我们平板和手机版本所需要的结构。

添加六个新部分

因此，继续向页面添加六个新部分。 然后，克隆人员模块并将每个模块单独放在一个部分中。 确保在两者之间留出一个部分，这就是生物最终会出现的地方。

接下来，添加克隆文本模块并将它们放置在包含人员模块的每个部分下方的部分中。 默认情况下，个人简介将显示在手机和平​​板电脑上的人员模块下方。

.

不同的 CSS 类和 ID

将所有部分和模块放置到位后，就可以开始添加 CSS 类了。

将 CSS 类分配给 Person 模块

首先分别打开每个人模块并将高级选项卡中的 CSS 类更改为：

• 第一人称模块： mobile_person1
• 第二人称模块： mobile_person2
• 第三人称模块： mobile_person3

为部分分配 CSS 类

接下来，打开所有不同的生物部分并将以下内容分配给每个部分：

• 第一个生物部分： section_mobile_1
• 第二个生物部分： secton_mobile_2
• 第三个生物部分： section_mobile_3

为文本模块分配 CSS 类

您需要放置的最后一个 CSS 类是链接到不同 bio 部分中的文本模块的那些。 根据 bio 部分，将以下 CSS 类分配给该部分中的文本模块：

• 链接到第一个人模块： div_mobile_text_1
• 链接到第二个人模块： div_mobile_text_2
• 链接到第三人模块： div_mobile_text_3

将显示 CSS 代码添加到部分

继续前进，您必须使所有生物部分都不可见。 转到每个部分的“高级”选项卡，并将以下 CSS 代码行复制并粘贴到主元素中：

display: none;

确保在每个文本模块的主要元素中删除这行 CSS 代码。 在桌面版本中，我们需要让它们不可见，但这对于手机和平板电脑来说不是必需的。

在桌面上禁用

现在，在您完成所有修改之后，在添加代码之前还有一件事要做：禁用桌面上的三个 bio 部分。 继续并打开每个部分，然后转到“高级”选项卡。 在高级选项卡的可见性子类别中，禁用桌面上的部分。

添加 jQuery 代码

现在我们已经对 Divi 构建器进行了所有实际更改，是时候进行最后一步了； 添加jQuery代码。

添加新的代码模块

将代码添加到页面的最简单方法是通过代码模块。 您可能会在仅单击一页时使用带有 bio 的此人模块。 通过使用代码模块，您将确保仅当有人在该页面上时才加载代码。 将两个 jQuery 单独代码复制并粘贴到同一个代码模块中。

将桌面 jQuery 代码放入您的代码模块中

将以下 CSS 代码行复制并粘贴到您的代码模块中，以使桌面生物点击版本正常工作：

<script text="text/javascript">
jQuery(function ($) {
var text_1_visible = 0;
var text_2_visible = 0;
var text_3_visible = 0;

var section_1 = $(".section_1");
var text_img_1 = $(".div_text_1");
var text_img_2 = $(".div_text_2");
var text_img_3 = $(".div_text_3");

$(".person1").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "block");
text_img_1.css("display", "block");
text_img_2.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 1;
text_2_visible = 0;
text_3_visible = 0;
}

else if (text_2_visible == 1 || text_3_visible == 1) {
section_1.css("display", "block");
text_img_1.css("display", "block");
text_img_2.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 1;
text_2_visible = 0;
text_3_visible = 0;
}

else {
section_1.css("display", "none");
text_img_1.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});

$(".person2").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "block");
text_img_2.css("display", "block");
text_img_1.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 1;
text_3_visible = 0;
}

else if (text_1_visible == 1 || text_3_visible == 1) {
section_1.css("display", "block");
text_img_2.css("display", "block");
text_img_1.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 1;
text_3_visible = 0;
}

else {
section_1.css("display", "none");
text_img_2.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});

$(".person3").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "block");
text_img_3.css("display", "block");
text_img_1.css("display", "none");
text_img_2.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 1;
}

else if (text_1_visible == 1 || text_2_visible == 1) {
section_1.css("display", "block");
text_img_3.css("display", "block");
text_img_1.css("display", "none");
text_img_2.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 1;
}

else {
section_1.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});
});
</script>

将平板电脑和手机 jQuery 代码放入您的代码模块中

以及以下几行代码使平板电脑和手机的版本正常工作：

<script text="text/javascript">
jQuery(function ($) {
var text_1_visible = 0;
var text_2_visible = 0;
var text_3_visible = 0;

var section_1 = $(".section_mobile_1");
var section_2 = $(".section_mobile_2");
var section_3 = $(".section_mobile_3");

var text_img_1 = $(".div_mobile_text_1");
var text_img_2 = $(".div_mobile_text_2");
var text_img_3 = $(".div_mobile_text_3");

$(".mobile_person1").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "block");
text_img_1.css("display", "block");
section_2.css("display", "none");
text_img_2.css("display", "none");
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 1;
text_2_visible = 0;
text_3_visible = 0;
}

else if (text_2_visible == 1 || text_3_visible == 1) {
section_1.css("display", "block");
text_img_1.css("display", "block");
section_2.css("display", "none");
text_img_2.css("display", "none");
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 1;
text_2_visible = 0;
text_3_visible = 0;
}

else {
section_1.css("display", "none");
text_img_1.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});

$(".mobile_person2").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "none");
text_img_1.css("display", "none");
section_2.css("display", "block");
text_img_2.css("display", "block");
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 1;
text_3_visible = 0;
}

else if (text_1_visible == 1 || text_3_visible == 1) {
section_1.css("display", "none");
text_img_1.css("display", "none");
section_2.css("display", "block");
text_img_2.css("display", "block");
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 1;
text_3_visible = 0;
}

else {
section_2.css("display", "none");
text_img_2.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});

$(".mobile_person3").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "none");
text_img_1.css("display", "none");
section_2.css("display", "none");
text_img_2.css("display", "none");
section_3.css("display", "block");
text_img_3.css("display", "block");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 1;
}

else if (text_1_visible == 1 || text_2_visible == 1) {
section_1.css("display", "none");
text_img_1.css("display", "none");
section_2.css("display", "none");
text_img_2.css("display", "none");
section_3.css("display", "block");
text_img_3.css("display", "block");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 1;
}

else {
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});
});
</script>

最后结果

一旦您按照本文中的所有步骤进行操作，让我们最后看看结果。 这是它在桌面上的样子：

在手机和平​​板电脑上：

包起来

在这篇文章中，我们向您展示了如何创建一个带有 bio 的人物模块，该模块在点击时隐藏和显示。 通过应用此方法，您将能够在您的网站上保存一些位置，并且仅在访问者表现出兴趣后才向他们展示。 如果您有任何问题或建议，请随时在下面的评论部分发表评论！

请务必订阅我们的电子邮件通讯和 YouTube 频道，这样您就不会错过重大公告、有用提示或 Divi 免费赠品！