วิธีออกแบบนามบัตรด้วยแอนิเมชั่นพลิกเมื่อคลิกเพื่อแสดงทีมของคุณใน Divi

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

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

มาเริ่มกันเลยดีกว่า!

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ เกี่ยวกับการออกแบบที่เราจะสร้างในบทช่วยสอนนี้

ดาวน์โหลดเค้าโครงฟรี

หากต้องการใช้การออกแบบจากบทช่วยสอนนี้ คุณจะต้องดาวน์โหลดโดยใช้ปุ่มด้านล่างก่อน ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

ดาวน์โหลด

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

ในการนำเข้าเค้าโครงส่วนไปยังไลบรารี Divi ของคุณ ให้ไปที่ Divi Library

คลิกปุ่มนำเข้า

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

จากนั้นคลิกปุ่มนำเข้า

เมื่อเสร็จแล้ว เค้าโครงส่วนจะพร้อมใช้งานใน Divi Builder

ไปกวดวิชากันเถอะ

สิ่งที่คุณต้องการเพื่อเริ่มต้น

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi
2. สร้างหน้าใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)
3. เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"

หลังจากนั้น คุณจะมีผืนผ้าใบเปล่าเพื่อเริ่มออกแบบใน Divi

การออกแบบนามบัตรที่พลิกเมื่อคลิกใน Divi

การตั้งค่าแถวและคอลัมน์

ในการเริ่มต้น ให้สร้างแถวหนึ่งคอลัมน์ในส่วนปกติ

เปิดการตั้งค่าแถวและอัปเดตสิ่งต่อไปนี้:

• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่
• ความกว้าง: 90%
• ความกว้างสูงสุด: 1200px

เปิดการตั้งค่าสำหรับคอลัมน์และกำหนดช่องว่างภายในดังนี้:

• Padding (เดสก์ท็อปและแท็บเล็ต): บน 30px, 30px ล่าง, 50px ซ้าย, 50px ขวา
• Padding (โทรศัพท์): บน 15px, ล่าง 15px, ซ้าย 15px, 15px ขวา

ภายใต้แท็บขั้นสูง เพิ่มคลาส CSS ต่อไปนี้ในคอลัมน์:

• CSS Class: การ์ดคอลัมน์

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

คอลัมน์ซ้ำ

ตอนนี้เรามีการตั้งค่าคอลัมน์หนึ่งคอลัมน์แล้ว ให้ทำซ้ำคอลัมน์เพื่อให้เรามีรูปแบบสองคอลัมน์โดยแต่ละคอลัมน์มีช่องว่างภายในและคลาส CSS เหมือนกัน

สร้างการ์ดหลัง

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

เปิดการตั้งค่าตัวแบ่งแล้วคลิกเพื่อไม่ให้มองเห็นตัวแบ่ง เราใช้ตัวแบ่งสำหรับภาพพื้นหลังสำหรับนามบัตรเท่านั้น

จากนั้นอัปเดตตัวเลือกต่อไปนี้:

สีพื้นหลัง

• สีพื้นหลัง: #322b3f

พื้นหลังไล่โทนสี

• พื้นหลังไล่ระดับสีซ้าย: rgba(50,43,63,0.72)
• ไล่สีพื้นหลังด้านขวา: #322b3f
• ประเภทการไล่ระดับสี: เรเดียล
• ตำแหน่งสุดท้าย: 34%
• วางการไล่ระดับสีเหนือภาพพื้นหลัง: ใช่

ภาพพื้นหลัง

• ภาพพื้นหลัง: [อัปโหลดรูปภาพหรือภาพเหมือนของสมาชิกในทีม]
• ขนาดภาพพื้นหลัง: fit
• ตำแหน่งภาพพื้นหลัง: Center

ขนาด

• ความกว้าง: 100%
• ความสูงขั้นต่ำ: 300px
• ส่วนสูง: 100%

กล่องเงา

• กล่องเงา: ดูภาพหน้าจอ
• ตำแหน่งแนวตั้งเงาของกล่อง: 0px
• ความแรงของกล่องเงาเบลอ: 50px

คลาส CSS และตำแหน่งแอบโซลูท

ถัดไปเพิ่มคลาส CSS ต่อไปนี้ให้กับตัวแบ่ง:

• CSS Class: back-card

และอัปเดตตำแหน่งเป็นสัมบูรณ์:

• ตำแหน่ง: Absolute

การสร้างโลโก้ด้านหลังการ์ด

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

เพิ่มโมดูลรูปภาพภายใต้โมดูลการ์ดแบ่ง/ด้านหลัง

จากนั้นอัปโหลดภาพโลโก้ที่มีขนาดประมาณ 60px x 60px

จากนั้นอัปเดตรูปภาพด้วยคลาส CSS และตำแหน่งที่แน่นอนดังนี้:

CSS Class

• CSS Class: การ์ดเนื้อหา

ตำแหน่ง

• ตำแหน่ง: Absolute
• ออฟเซ็ตแนวตั้ง: 30px (เดสก์ท็อปและแท็บเล็ต), 15px (โทรศัพท์)
• ออฟเซ็ตแนวนอน: 50px (เดสก์ท็อปและแท็บเล็ต), 10px (โทรศัพท์)

ชื่อ

หากต้องการสร้างชื่อสำหรับนามบัตร ให้เพิ่มโมดูลข้อความใหม่ใต้ภาพโลโก้

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

ภายใต้แท็บออกแบบ ให้อัปเดตตัวเลือกลักษณะข้อความของย่อหน้าดังนี้:

• แบบอักษรของข้อความ: Poppins
• สีข้อความ: #ffffff
• ขนาดข้อความ: 28px (เดสก์ท็อปและแท็บเล็ต), 22px (โทรศัพท์)
• ระยะห่างระหว่างตัวอักษร: 1px
• การจัดตำแหน่งข้อความ: ขวา

ตำแหน่งงาน (หรือบทบาท)

ในการเพิ่มตำแหน่ง (หรือบทบาท) ของบุคคลบนการ์ด ให้ทำซ้ำโมดูลข้อความก่อนหน้าด้วยชื่อ

จากนั้นอัปเดตเนื้อหาร่างกายด้วยตำแหน่ง (หรือบทบาท) ของบุคคล

จากนั้นอัปเดตการตั้งค่าการออกแบบสำหรับโมดูลข้อความตำแหน่งดังนี้:

• รูปแบบตัวอักษรของข้อความ: TT
• ขนาดข้อความ: 16px (เดสก์ท็อปและแท็บเล็ต), 14px (โทรศัพท์)
• ระยะขอบ: ด้านล่าง 15px

บริษัท

ในการเพิ่มชื่อบริษัทลงในนามบัตร ให้ทำซ้ำโมดูลข้อความ (ตำแหน่ง) ก่อนหน้า

จากนั้นอัปเดตเนื้อหาด้วยชื่อของบริษัท

จากนั้นอัปเดตการตั้งค่าข้อความของบริษัทดังนี้:

• น้ำหนักแบบอักษรของข้อความ: เบา
• รูปแบบตัวอักษรของข้อความ: default
• ขนาดตัวอักษร: 22px (เดสก์ท็อปและแท็บเล็ต), 18px (โทรศัพท์)
• การจัดตำแหน่งข้อความ: ซ้าย

หมายเลขโทรศัพท์

หากต้องการสร้างหมายเลขโทรศัพท์สำหรับนามบัตร ให้เพิ่มโมดูลข้อความแจ้งภายใต้โมดูลข้อความ (บริษัท)

อัปเดตเนื้อหาในข้อความแจ้ง (โทรศัพท์) ด้วยหมายเลขโทรศัพท์ที่คุณต้องการให้แสดงบนการ์ด

คลิกเพื่อใช้ไอคอนโทรศัพท์สำหรับการนำเสนอ

ภายใต้การตั้งค่าการออกแบบ ให้อัปเดตสิ่งต่อไปนี้:

• ไอคอนสี: rgba(162,71,232,0.6)
• ตำแหน่งรูปภาพ/ไอคอน: ซ้าย
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 20px
• แบบอักษรของร่างกาย: Poppins
• สีข้อความ: #ffffff
• ขนาดข้อความเนื้อหา: 16px
• ขอบ: 10px ด้านล่าง

ที่อยู่อีเมล

หากต้องการแสดงที่อยู่อีเมลบนการ์ด ให้ทำซ้ำโมดูลประกาศ (โทรศัพท์) และอัปเดตเนื้อหาเนื้อหาด้วยที่อยู่อีเมล

จากนั้นอัปเดตไอคอนเป็นไอคอนซองจดหมาย

เว็บไซต์

หากต้องการแสดงเว็บไซต์บนการ์ด ให้ทำซ้ำโมดูลประกาศ (โทรศัพท์) และอัปเดตเนื้อหาเนื้อหาด้วยเว็บไซต์

จากนั้นอัปเดตไอคอนด้วยไอคอนที่เหมาะสมยิ่งขึ้น

โซเชียลมีเดียติดตามไอคอน

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

ในโมดอลตามการตั้งค่าโซเชียลมีเดีย อัปเดตแต่ละเครือข่ายโซเชียลด้วยพื้นหลังโปร่งใส

(คุณสามารถเพิ่ม URL ของลิงค์ได้ตามต้องการในภายหลัง)

จากนั้นให้โมดูลมีการจัดตำแหน่งที่ถูกต้อง

เพิ่มคลาส CSS เดียวกันให้กับโมดูลเนื้อหาการ์ดทั้งหมด

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

• CSS Class: การ์ดเนื้อหา

เราจะกำหนดเป้าหมายโค้ด CSS ที่กำหนดเองสำหรับคลาสนี้เพื่อซ่อนและแสดงเนื้อหาก่อนและหลังภาพเคลื่อนไหวพลิกการ์ดด้านหน้า

เดอะฟรอนท์การ์ด

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

ขั้นแรก เพิ่มโมดูลรูปภาพในคอลัมน์ 2

อัปโหลดรูปภาพโลโก้เดียวกัน (60px x 60px) ที่ใช้สำหรับโลโก้การ์ดด้านหลังเพื่อใช้เป็นรูปภาพ

จากนั้นเปิดการตั้งค่าสำหรับโมดูลแบ็คการ์ด (ตัวแบ่ง) และคัดลอกการออกแบบพื้นหลัง

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

ใต้แท็บออกแบบ ให้อัปเดตระยะห่างของรูปภาพดังนี้:

• ช่องว่างภายใน (เดสก์ท็อปและแท็บเล็ต): ด้านบน 30px ด้านซ้าย 50px
• Padding (โทรศัพท์): บน 15px, เหลือ 10px

ตั้งค่าขั้นสูง

ภายใต้แท็บขั้นสูง ให้รูปภาพมีคลาส CSS ต่อไปนี้:

• CSS Class: front-card

เพิ่ม CSS ที่กำหนดเองต่อไปนี้ในองค์ประกอบหลัก:

[/css]
ความสูง: 100%;
ความกว้าง: 100%;
[/css]

อัปเดตตัวเลือกตำแหน่ง:

• ตำแหน่งแอบโซลูท
• ดัชนี Z: 13

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

อย่าลืมเปลี่ยนภาพพื้นหลังเป็นภาพใหม่ ในกรณีนี้ ฉันใช้รูปคนคนเดียวกันคนละแบบ

เมื่อเสร็จแล้ว ให้ลากโมดูลอิมเมจการ์ดด้านหน้าไปที่คอลัมน์ 1 โดยควรปิดการ์ดด้านหลังให้สนิท

รหัสที่กำหนดเอง

ขั้นตอนสุดท้ายคือการเพิ่ม CSS และ JQuery ที่กำหนดเองเพื่อให้ฟังก์ชันการทำงานของการสร้างภาพเคลื่อนไหวพลิกนามบัตรเมื่อคลิก

หากต้องการเพิ่มโค้ด ให้เพิ่มโมดูลโค้ดด้านล่างโมดูลติดตามโซเชียลมีเดียภายในคอลัมน์ 1

CSS ที่กำหนดเอง

วางโค้ด CSS ต่อไปนี้ระหว่างแท็ก สไตล์ :

.card-column {
  perspective: 1400px;
}
.front-card:hover {
  cursor: pointer;
}

.front-card,
.back-card {
  transition: all 500ms ease-in-out;
  transform-style: preserve-3d;
}

.back-card {
  transform: rotateX(-180deg) rotateY(0deg) rotateZ(0deg) !important;
}

.divi-transform-active .back-card {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important;
}

.divi-transform-active .front-card {
  transform: rotateX(180deg) rotateY(0deg) rotateZ(0deg);
  transform-origin: 50% 50%;
}

.card-content {
  transition: all 300ms ease-out 0ms;
}

.divi-transform-active .card-content {
  transition: all 300ms ease-out 500ms;
  opacity: 1 !important;
}

.divi-transform-active .front-card {
  opacity: 0;
  visibility: hidden;
}

JQuery

ภายใต้ CSS ให้วาง JQuery ต่อไปนี้ระหว่างแท็ก สคริปต์

(function ($) {
  $(document).ready(function () {
    $cardColumn = $(".card-column");
    $cardContent = $(".card-content");

    $cardContent.css("opacity", "0");

    $cardColumn.on("click", function (e) {
      $(this).addClass("divi-transform-active");
      e.stopPropagation();
    });
    $(document).on("click", function (e) {
      if ($(e.target).is($cardColumn) === false) {
        $cardColumn.removeClass("divi-transform-active");
      }
    });
  });
})(jQuery);

การสร้างนามบัตรเพิ่มเติม

หากต้องการสร้างนามบัตรเพิ่มเติม สิ่งที่คุณต้องทำคือทำซ้ำคอลัมน์ที่มีโมดูลทั้งหมดที่เราเคยสร้าง เมื่อคุณทำซ้ำคอลัมน์ คุณจะต้องลบโมดูลโค้ดพิเศษ การมีโมดูลโค้ดสองโมดูลที่มีโค้ดซ้ำกันจะไม่ทำงาน

เมื่อคอลัมน์/การ์ดซ้ำกัน เพียงแค่อัปเดตรูปภาพพื้นหลังและเนื้อหาการ์ดโดยใช้โมดูลตามที่จำเป็นสำหรับนามบัตรใหม่

ผลสุดท้าย

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

ความคิดสุดท้าย

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

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!