วิธีการออกแบบนามบัตรที่น่าดึงดูดด้วยแอนิเมชั่นพลิกบน Divi

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

ตัวอย่างการออกแบบ

วันนี้เราจะสร้างการออกแบบนี้ ดูน่าสนใจใช่มั้ย

ส่วนที่ 1: การออกแบบนามบัตรที่พลิกเมื่อคลิก

เพิ่ม: แถว 1

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

อัปเดตการตั้งค่าต่อไปนี้

สร้างเว็บไซต์ที่น่าทึ่ง

ด้วย Elementor ตัวสร้างหน้าฟรีที่ดีที่สุด

เริ่มเลย

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

เปิดการตั้งค่าคอลัมน์และเพิ่มช่องว่างภายใน

การขยายความ

• เดสก์ท็อป - 30px ที่ด้านบนและด้านล่าง 50px ทางซ้ายและขวา
• แท็บเล็ต - 30px ที่ด้านบนและด้านล่าง 50px สำหรับซ้ายและขวา
• โทรศัพท์ - 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*60px

CSS Class

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

ตำแหน่ง

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

เพิ่ม: ชื่อผู้ถือบัตร

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

ทำสิ่งต่อไปนี้เปลี่ยนแปลงบนแท็บการออกแบบ

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

เพิ่ม: ตำแหน่งงาน

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

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

เพิ่ม: ชื่อบริษัท

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

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

เพิ่ม: เบอร์ติดต่อ

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

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

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

เพิ่ม: ที่อยู่อีเมล

ทำซ้ำโมดูลประกาศก่อนหน้าและอัปเดตเนื้อหาเนื้อหาเป็นที่อยู่อีเมล จากนั้นอัปเดตไอคอนเป็นซองจดหมาย

เพิ่ม: เว็บไซต์

ทำเช่นเดียวกับที่เราทำในส่วนอีเมล คัดลอกโมดูลประกาศก่อนหน้าและเปลี่ยนเนื้อหา

เพิ่ม: ไอคอนโซเชียลมีเดีย

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

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

นอกจากนี้ จากแท็บการออกแบบ ให้จัดแนวโซเชียลมีเดียตามไอคอนทางด้านขวา

เพิ่ม: คลาสเดียวกันกับทุกโมดูล

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

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

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

การสร้างการ์ดด้านหน้า

การ์ดหลังของเราเสร็จแล้ว และตอนนี้เราจะทำงานกับการ์ดด้านหน้า ซึ่งจะแทนที่การ์ดด้านหลังและซ่อนเนื้อหาไว้ด้านหลัง เราจะออกแบบการ์ดด้านหน้าผ่านโมดูลรูปภาพในคอลัมน์ 2 ซึ่งจะแทนที่การ์ดในคอลัมน์ 1 ในตอนแรก เราจะเพิ่มโมดูลรูปภาพในคอลัมน์ 2 และเพิ่มโลโก้ (60px*60px) บนโมดูล

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

ตอนนี้เปิดการตั้งค่ารูปภาพสำหรับการ์ดด้านหน้าแล้ววาง

จากส่วนการออกแบบ ปรับปรุงระยะห่างของรูปภาพดังนี้:

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

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

จากแท็บขั้นสูง ให้รูปภาพนี้เป็นคลาส CSS

• CSS Class: front-card

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

height: 100%;
width: 100%;

อัปเดตการตั้งค่าตำแหน่งด้วย

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

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

ส่วนที่ 2: การเพิ่มรหัสที่กำหนดเอง

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

เพิ่ม: รหัส 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

เพิ่มโค้ด JQuery ด้านล่างโค้ด CSS อย่าลืมเก็บไว้ในแท็ก สคริปต์

(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);

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

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

ตอนนี้ปรับเปลี่ยนการ์ดทุกใบตามทุกคนที่คุณต้องการนำเสนอที่นี่

มุมมองสุดท้าย

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

บทสรุป

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