วิธีสร้างโมดูลบุคคลด้วย Bio บน Click

ในโพสต์นี้ เราจะแสดงวิธีสร้างโมดูลบุคคลพร้อมประวัติเมื่อคลิก ทันทีที่คุณคลิกโมดูลบุคคลอื่นในแถวเดียวกัน ข้อความในประวัติจะเปลี่ยนไป คุณสามารถปิดประวัติโดยคลิกที่โมดูลบุคคลอีกครั้งเมื่อใดก็ได้

คุณสามารถใช้ข้อมูลนี้เพื่อ ตัวอย่างเช่น แสดงข้อมูลเพิ่มเติมเกี่ยวกับพนักงานของคุณบนเว็บไซต์ของบริษัทของคุณ แนวคิดนี้ช่วยให้คุณทำสองสิ่ง: โต้ตอบกับผู้เยี่ยมชมและบันทึกตำแหน่งบนเว็บไซต์ของคุณ ครั้งเดียวที่ประวัติจะปรากฏขึ้นจริงคือเมื่อผู้เข้าชมแสดงความสนใจและตัดสินใจที่จะคลิกที่องค์ประกอบภายในโมดูลบุคคล

โมดูลบุคคลผลลัพธ์พร้อมไบโอเมื่อคลิก

ก่อนที่เราจะเจาะลึกลงไปในขั้นตอนต่างๆ ที่คุณต้องปฏิบัติตามเพื่อให้ได้โมดูลบุคคลด้วยประวัติการคลิก มาดูผลลัพธ์สุดท้ายบนเดสก์ท็อปกันก่อน:

และผลลัพธ์สุดท้ายบนมือถือและแท็บเล็ต:

สำหรับมือถือ หากเปิดประวัติหนึ่ง อีกสองชีวประวัติจะปิดโดยอัตโนมัติ คุณจะเปิดส่วนประวัติไว้เพียงส่วนเดียวเสมอ แม้ว่าประวัติแต่ละรายการจะมีส่วนของตัวเองก็ตาม

โมดูลบุคคลพร้อมไบโอเมื่อคลิกสำหรับเดสก์ท็อป

สมัครสมาชิกช่อง Youtube ของเรา

เพื่อให้ทุกอย่างทำงานได้อย่างราบรื่น เราจะต้องสร้างสองเวอร์ชัน: รุ่นหนึ่งสำหรับเดสก์ท็อปและอีกรุ่นสำหรับแท็บเล็ตและโทรศัพท์ แต่ละเวอร์ชันเหล่านี้จะต้องมีรหัส jQuery ของตัวเอง เราจะเริ่มต้นด้วยเวอร์ชันเดสก์ท็อป และในส่วนถัดไปของโพสต์ เราจะแสดงวิธีสร้างเวอร์ชันสำหรับแท็บเล็ตและโทรศัพท์

เพิ่มส่วนมาตรฐานบุคคลด้วยแถวสามคอลัมน์

สิ่งแรกที่เราต้องทำคือเพิ่มส่วนที่มีโมดูลบุคคล

เปิดหน้าใหม่ (หรือหน้าที่คุณต้องการเพิ่มโมดูลบุคคลพร้อมประวัติ) และเพิ่มส่วนมาตรฐานใหม่ ภายในส่วนนั้น ให้วางแถวสามคอลัมน์ แน่นอน คุณสามารถใช้คอลัมน์อื่นได้เช่นกัน แต่รหัสที่เราจะใช้นั้นพิจารณาโมดูลบุคคล 3 คนด้วย หากคุณต้องการสร้างสิ่งเดียวกันสำหรับแถวประเภทอื่นๆ คุณจะต้องทำการแก้ไขบางอย่างในโค้ด jQuery ที่เราจะให้ในภายหลังในโพสต์นี้

การตั้งค่าแถว

เปิดการตั้งค่าแถวและภายในแท็บเนื้อหา ให้เพิ่ม '#e5e5e5' เป็นสีพื้นหลังของแต่ละคอลัมน์

จากนั้นไปที่แท็บขั้นสูงและแทรกเงาของกล่องต่อไปนี้ลงในองค์ประกอบหลักของแต่ละแถวจากสามแถว:

เพิ่มโมดูลบุคคล

สิ่งต่อไปที่คุณต้องทำคือเพิ่มโมดูลบุคคลในคอลัมน์แรกของแถว

แท็บเนื้อหา

ภายในแท็บเนื้อหาของโมดูลนั้น ให้พิมพ์ข้อมูลและลิงก์โซเชียลมีเดีย แล้วอัปโหลดรูปภาพ

แท็บขั้นสูง

เราจะไม่ทำการปรับเปลี่ยนใด ๆ กับแท็บการออกแบบของโมดูลนี้ (อย่าลังเลที่จะทำการเปลี่ยนแปลงลักษณะที่ปรากฏในภายหลัง) เราจะไปที่แท็บขั้นสูงแทนทันที โดยเราจะเพิ่มเงากล่องเดียวกันกับที่เราเพิ่มลงในคอลัมน์แถว ให้กับรูปภาพของสมาชิก

โคลนโมดูลบุคคล

สิ่งต่อไปที่คุณต้องทำคือโคลนโมดูลบุคคลสองครั้งแล้ววางลงในคอลัมน์อื่นอีกสองคอลัมน์ เราจะต้องกลับมาที่ส่วนนี้เพื่อเพิ่มคลาส CSS ต่างๆ แต่ก่อนที่เราจะทำอย่างนั้น เราจะเพิ่มส่วนประวัติก่อน

เพิ่มส่วนมาตรฐานชีวภาพด้วยแถวเต็มความกว้าง

เพิ่มส่วนมาตรฐานอื่นด้านล่างส่วนก่อนหน้าที่คุณสร้างขึ้น ในส่วนนี้ เราจะต้องเพิ่มโมดูลข้อความต่างๆ ที่เชื่อมโยงกับโมดูลบุคคลต่างๆ เปิดการตั้งค่าของส่วนและใช้สี '#a0a0a0' เป็นสีพื้นหลังของคุณ

เพิ่มโมดูลข้อความสองโมดูล

คุณสามารถเพิ่มโมดูลข้อความได้ ทั้งนี้ขึ้นอยู่กับจำนวนโมดูลข้อความที่คุณต้องการให้ชีวประวัติของโมดูลบุคคลมี ในกรณีนี้ เราจะเพิ่มโมดูลข้อความสองโมดูลต่อโมดูลบุคคล

โมดูลข้อความแรก

พิมพ์ข้อความลงในโมดูลข้อความแรกแล้วไปที่แท็บออกแบบ ภายในแท็บ ออกแบบ ทำการเปลี่ยนแปลงต่อไปนี้ในหมวดหมู่ย่อยข้อความ:

• การวางแนวข้อความ: ศูนย์
• ขนาดตัวอักษรข้อความ: 31
• สีข้อความ: #FFFFFF
• ความสูงของบรรทัดข้อความ: 1.7em

โมดูลข้อความที่สอง

เพิ่มโมดูลข้อความอื่นและทำการเปลี่ยนแปลงต่อไปนี้ในหมวดหมู่ย่อยข้อความของแท็บออกแบบ:

• การวางแนวข้อความ: ศูนย์
• ขนาดตัวอักษรข้อความ: 16
• สีข้อความ: #FFFFFF
• ความสูงของบรรทัดข้อความ: 1.7em

โคลนแต่ละโมดูลสองครั้ง

โมดูลข้อความทั้งสองนี้จะเหมือนกันสำหรับแต่ละไบออส นั่นเป็นเหตุผลที่คุณควรโคลนโมดูลข้อความแต่ละโมดูลสองครั้ง นี่คือลักษณะที่โครงสร้างสุดท้ายควรมีลักษณะที่ส่วนหลังของหน้า:

คลาส CSS ต่างๆ

กำหนดคลาส CSS ให้กับโมดูลบุคคล

ไปที่แท็บขั้นสูงของแต่ละโมดูลบุคคล และกำหนดคลาส CSS ต่อไปนี้:

• คนแรก Module: PERSON1
• โมดูลบุคคลที่สอง: person2
• โมดูลบุคคลที่สาม: person3

กำหนดคลาส CSS ให้กับ Section

เปิดการตั้งค่าของส่วนที่วางไบออสของคุณ ไปที่แท็บขั้นสูงและเขียน “section_1” ลงในคลาส CSS

กำหนดคลาส CSS ให้กับโมดูลข้อความ

ตอนนี้ เพิ่มคลาส CSS ให้กับโมดูลข้อความที่คุณสร้างด้วยวิธีต่อไปนี้:

• เชื่อมโยงกับโมดูลบุคคลแรก: div_text_1
• เชื่อมโยงกับโมดูลบุคคลที่สอง: div_text_2
• เชื่อมโยงกับโมดูลบุคคลที่สาม: div_text_3

เพิ่มโค้ด CSS ที่แสดงในส่วน & โมดูลข้อความทั้งหมด

ขั้นตอนต่อไปที่คุณต้องทำคือไปที่แท็บขั้นสูงของส่วนและโมดูลข้อความทั้งหมด จากนั้น เพิ่มบรรทัดของโค้ด CSS ต่อไปนี้ในองค์ประกอบหลักของส่วน:

display: none;

ปิดการใช้งานบนโทรศัพท์และแท็บเล็ต

ตอนนี้ ปิดการใช้งานทั้งสองส่วนที่คุณสร้างสำหรับมือถือและแท็บเล็ต

โมดูลบุคคลพร้อมไบโอเมื่อคลิกสำหรับแท็บเล็ตและโทรศัพท์

ตอนนี้เราได้แสดงวิธีสร้างโมดูลบุคคลด้วยประวัติการคลิกสำหรับเดสก์ท็อปแล้ว เราจะแสดงวิธีสร้างโมดูลสำหรับแท็บเล็ตและโทรศัพท์ด้วย เราได้ปิดการใช้งานส่วนก่อนหน้าสำหรับโทรศัพท์และแท็บเล็ตแล้ว นี่คือลักษณะเลย์เอาต์ของเดสก์ท็อปที่แบ็กเอนด์:

และนี่คือโครงสร้างที่เราต้องการสำหรับเวอร์ชันแท็บเล็ตและโทรศัพท์

เพิ่มหกส่วนใหม่

ดังนั้น ไปข้างหน้าและเพิ่มหกส่วนใหม่ในหน้า จากนั้นโคลนโมดูลบุคคลและวางแต่ละโมดูลไว้ในส่วนแยกกัน ตรวจสอบให้แน่ใจว่าคุณได้ทิ้งส่วนไว้ระหว่างนั้น นั่นคือที่มาของชีวประวัติในที่สุด

ถัดไป เพิ่มโคลนโมดูลข้อความและวางไว้ในส่วนด้านล่างแต่ละส่วนที่มีโมดูลบุคคล ตามค่าเริ่มต้น ประวัติจะแสดงด้านล่างโมดูลบุคคลบนมือถือและแท็บเล็ต

.

คลาสและรหัส CSS ที่แตกต่างกัน

เมื่อคุณวางส่วนและโมดูลทั้งหมดเข้าที่แล้ว ก็ถึงเวลาที่จะเริ่มเพิ่มคลาส CSS

กำหนดคลาส CSS ให้กับโมดูลบุคคล

เริ่มต้นด้วยการเปิดแต่ละโมดูลทีละคนและเปลี่ยนคลาส CSS ในแท็บขั้นสูงเป็น:

• โมดูลคนแรก: mobile_person1
• โมดูลบุคคลที่สาม: mobile_person2
• โมดูลบุคคลที่สาม: mobile_person3

กำหนดคลาส CSS ให้กับส่วนต่างๆ

ถัดไป เปิดส่วนชีวประวัติที่แตกต่างกันทั้งหมด และกำหนดสิ่งต่อไปนี้ให้กับแต่ละส่วน:

• ส่วนประวัติแรก: section_mobile_1
• ส่วนไบโอที่สอง: secton_mobile_2
• ส่วนประวัติที่สาม: section_mobile_3

กำหนดคลาส CSS ให้กับโมดูลข้อความ

คลาส CSS สุดท้ายที่คุณต้องระบุคือคลาสที่เชื่อมโยงกับโมดูลข้อความในส่วนชีวประวัติต่างๆ ตามส่วนประวัติ กำหนดคลาส CSS ต่อไปนี้ให้กับโมดูลข้อความภายในส่วนนั้น:

• เชื่อมโยงกับโมดูลบุคคลแรก: div_mobile_text_1
• เชื่อมโยงกับโมดูลบุคคลที่สอง: div_mobile_text_2
• เชื่อมโยงกับโมดูลบุคคลที่สาม: div_mobile_text_3

เพิ่มโค้ด CSS ที่แสดงในส่วนต่างๆ

ต่อไป คุณจะต้องทำให้ส่วนชีวภาพทั้งหมดไม่ปรากฏให้เห็น ไปที่แท็บขั้นสูงของแต่ละส่วนแล้วคัดลอกและวางโค้ด CSS ต่อไปนี้ลงในองค์ประกอบหลัก:

display: none;

ตรวจสอบให้แน่ใจว่าคุณลบโค้ด CSS บรรทัดนี้ในองค์ประกอบหลักของโมดูลข้อความแต่ละโมดูล ในเวอร์ชันเดสก์ท็อป เราต้องทำให้มองไม่เห็น แต่นั่นไม่จำเป็นสำหรับมือถือและแท็บเล็ต

ปิดการใช้งานบนเดสก์ท็อป

หลังจากที่คุณทำการปรับเปลี่ยนทั้งหมดแล้ว ยังมีอีกสิ่งหนึ่งที่ต้องทำก่อนที่จะเพิ่มโค้ด นั่นคือ ปิดใช้งานส่วนชีวภาพทั้งสามบนเดสก์ท็อป ไปข้างหน้าและเปิดแต่ละส่วนแล้วไปที่แท็บขั้นสูง ภายในหมวดย่อยการมองเห็นของแท็บขั้นสูง ให้ปิดใช้งานส่วนต่างๆ บนเดสก์ท็อป

เพิ่มรหัส jQuery

ตอนนี้เราได้ทำการเปลี่ยนแปลงที่ใช้งานได้จริงทั้งหมดกับตัวสร้าง Divi แล้ว ได้เวลาไปยังขั้นตอนสุดท้ายแล้ว เพิ่มรหัส jQuery

เพิ่มโมดูลโค้ดใหม่

วิธีที่ง่ายที่สุดในการเพิ่มโค้ดในเพจของคุณคือการใช้ Code Module คุณอาจใช้โมดูลบุคคลนี้พร้อมประวัติเมื่อคลิกในหน้าเดียวเท่านั้น เมื่อใช้โมดูลโค้ด คุณจะมั่นใจได้ว่าโค้ดจะโหลดได้ก็ต่อเมื่อมีคนอยู่ในหน้านั้นเท่านั้น คัดลอกและวางรหัส jQuery แยกกันสองรหัสลงในโมดูลรหัสเดียวกัน

วางโค้ด jQuery บนเดสก์ท็อปลงในโมดูลโค้ดของคุณ

คัดลอกและวางโค้ด CSS ต่อไปนี้ลงใน Code Module ของคุณเพื่อทำให้ประวัติเดสก์ท็อปในเวอร์ชันคลิกใช้งานได้:

<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>

ผลสุดท้าย

มาดูผลลัพธ์กันเป็นครั้งสุดท้ายเมื่อคุณทำตามขั้นตอนทั้งหมดตลอดทั้งโพสต์นี้แล้ว นี่คือลักษณะที่ปรากฏบนเดสก์ท็อป:

และบนมือถือและแท็บเล็ต:

ห่อ

ในโพสต์นี้ เราได้แสดงวิธีสร้างโมดูลบุคคลพร้อมประวัติที่ซ่อนและแสดงเมื่อคลิก เมื่อใช้วิธีนี้ คุณจะสามารถบันทึกสถานที่บนเว็บไซต์ของคุณและแสดงให้ผู้เข้าชมเห็นเมื่อพวกเขาแสดงความสนใจเท่านั้น หากคุณมีคำถามหรือข้อเสนอแนะโปรดแสดงความคิดเห็นในส่วนความคิดเห็นด้านล่าง!

อย่าลืมสมัครรับจดหมายข่าวทางอีเมลและช่อง YouTube ของเรา เพื่อที่คุณจะได้ไม่พลาดประกาศสำคัญ เคล็ดลับที่เป็นประโยชน์ หรือ Divi freebie!