如何使用點擊創建個人模塊

已發表: 2017-08-16

在這篇文章中，我們將向您展示如何創建一個點擊 bio 的人物模塊。一旦您單擊同一行中的另一個人模塊，生物中的文本就會更改。您可以隨時通過再次單擊人員模塊來關閉個人簡介。

例如，您可以使用它在您公司的網站上顯示有關您員工的一些附加信息。這個概念可以幫助您做兩件事：與訪問者互動並在您的網站上保存位置。個人簡介實際顯示的唯一時間是訪問者表現出興趣並決定單擊人員模塊中的元素。

點擊 Bio 的結果人員模塊

在我們深入探討您需要遵循的不同步驟來實現點擊 bio 的人員模塊之前，讓我們先看看桌面上的最終結果：

帶有生物的人模塊

以及手機和平板電腦上的最終結果：

帶有生物的人模塊

對於手機，如果打開一個 bio，其他兩個 bios 將自動關閉。您將始終只打開一個個人簡介部分，儘管每個個人簡介都有自己的部分。

個人模塊與生物點擊桌面

訂閱我們的 YouTube 頻道

為了讓一切順利進行，我們需要製作兩個版本：一個用於台式機，一個用於平板電腦和手機。這些版本中的每一個都需要自己的 jQuery 代碼。我們將從桌面版本開始，在文章的下一部分，我們將向您展示如何製作適用於平板電腦和手機的版本。

添加具有三列行的人員標準部分

我們需要做的第一件事是添加一個包含人員模塊的部分。

打開一個新頁面（或您想要添加帶有 bio 的 Person 模塊的頁面）並添加一個新的標準部分。在該部分中，放置一行三列。當然，您也可以使用其他數量的列，但我們將使用的代碼考慮了 3 個人員模塊。如果您想為其他類型的行創建相同的內容，則必須對我們將在本文後面提供的 jQuery 代碼進行一些修改。

行設置

打開行設置並在內容選項卡中，添加“#e5e5e5”作為每列的背景顏色。

person module with bio

然後，轉到“高級”選項卡並將以下框陰影插入到三行中每一行的主要元素中：

添加人員模塊

您需要做的下一件事是將人員模塊添加到行的第一列。

內容標籤

在該模塊的“內容”選項卡中，輸入信息和社交媒體鏈接並上傳圖像。

高級選項卡

我們不會對此模塊的“設計”選項卡進行任何修改（之後可以隨意對外觀進行任何更改）。相反，我們將立即轉到“高級”選項卡，在那裡我們將添加到行列的相同框陰影添加到成員圖像。

克隆人模塊

您需要做的下一件事是克隆 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 的 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 免費贈品！