วิธีสร้างการ์ดพลิกด้วยโมดูลใด ๆ ใน Divi โดยไม่ต้องใช้ปลั๊กอิน

Flip Cards เป็นวิธีที่สนุกสำหรับผู้ใช้ในการโต้ตอบกับเว็บไซต์ของคุณ ไม่เพียงแค่ให้แอนิเมชั่นพลิกกลับที่ยอดเยี่ยมเท่านั้น แต่ยังช่วยให้คุณนำเสนอข้อมูลเพิ่มเติมในที่เดียวที่กระชับ ในบทช่วยสอนนี้ ฉันจะแสดงวิธีเปลี่ยนโมดูล Divi เป็นการ์ดพลิกโดยไม่ต้องใช้ปลั๊กอิน! ด้วยวิธีนี้ คุณจะสามารถใช้โมดูล Divi หนึ่งอันเป็นด้านหน้าของการ์ด และโมดูล Divi อีกอันเป็นด้านหลังการ์ดได้ คุณยังสามารถออกแบบแต่ละโมดูล (ด้านหน้าและด้านหลัง) ได้ตามต้องการโดยใช้ตัวสร้าง Divi ฟังก์ชันนี้ทำได้โดยใช้ CSS เพียงไม่กี่ตัวอย่าง (ไม่มี jquery)

ฉันคิดว่าคุณจะแปลกใจว่าการสร้างการ์ดเหล่านี้ง่ายและสนุกเพียงใด

มาดำน้ำกันเถอะ!

แอบพีค

นี่คือตัวอย่างคร่าวๆ ของการออกแบบที่เราจะสร้างในวันนี้

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

สิ่งที่คุณต้องการสำหรับบทช่วยสอนนี้

สิ่งที่คุณต้องการสำหรับบทช่วยสอนนี้คือ Divi! ไม่จำเป็นต้องใช้ปลั๊กอิน เราจะใช้ App Developer Layout Pack ซึ่งให้บริการฟรีและพร้อมใช้งานใน Divi Builder

อธิบายแนวคิดพื้นฐาน

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

เลย์เอาต์ Divi ประกอบด้วยส่วนปกติที่มีสี่แถวหนึ่งคอลัมน์ ในแต่ละแถว ฉันได้เพิ่มโมดูลการนำเสนอสองโมดูลที่ซ้อนกัน (แม้ว่าโมดูล Divi ใด ๆ ก็ใช้งานได้เช่นกัน) การประกาศด้านบนทำหน้าที่เป็นด้านหน้าของฟลิปการ์ด และการประกาศด้านล่างทำหน้าที่เป็นด้านหลังของฟลิปการ์ด เมื่อใช้ “display:flex” กับส่วน แถวต่างๆ จะมีโครงสร้างในแนวนอนเหมือนกับคอลัมน์ วิธีนี้ช่วยให้การ์ดสามารถจัดวางเคียงข้างกันเป็นสี่คอลัมน์

นี่คือลักษณะของการตั้งค่าก่อนที่เราจะเพิ่ม CSS ที่กำหนดเอง

จากนั้นฉันก็เพิ่ม CSS ที่กำหนดเองในการตั้งค่าเพจ และเพิ่มคลาส CSS ที่สอดคล้องกันในแต่ละแถว คอลัมน์ และโมดูล

แค่นั้นแหละ!

การสร้างการ์ด Divi Flip โดยใช้เลย์เอาต์ที่สร้างไว้ล่วงหน้า

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

หากต้องการเริ่มดำเนินการ ให้สร้างหน้าใหม่ ตั้งชื่อหน้า แล้วคลิกเพื่อใช้ Divi Builder เลือกตัวเลือก “เลือกเค้าโครงล่วงหน้า” จากป๊อปอัปโหลดจากไลบรารี ให้เลือก App Developer Layout Pack จากนั้นคลิกเพื่อใช้เค้าโครงหน้า Landing Page สำหรับนักพัฒนาแอป

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

การตั้งค่าส่วน แถว และโมดูล

ภายใต้ส่วนแรกของเค้าโครง ให้เพิ่มส่วนปกติใหม่ที่มีแถวหนึ่งคอลัมน์ อย่าเพิ่งเพิ่มโมดูลใด ๆ เปิดการตั้งค่าแถวและอัปเดตสิ่งต่อไปนี้:

ระยะขอบที่กำหนดเอง: ด้านล่าง 20px
ช่องว่างภายในที่กำหนดเอง: ด้านบน 0px, ด้านล่าง 0px

บันทึกการตั้งค่า.

จากนั้นทำซ้ำแถวสามครั้งเพื่อให้คุณมีทั้งหมดสี่แถวในส่วน

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

display:flex;

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

การเพิ่มโมดูลในแถว

นี่คือที่ที่เลย์เอาต์ที่สร้างไว้ล่วงหน้าของเรามีประโยชน์สำหรับบทช่วยสอนนี้ เราจะใช้โมดูลการนำเสนอสี่แบบในส่วนบนสุดของเลย์เอาต์เพื่อเริ่มต้นการออกแบบฟลิปการ์ดของเรา ใช้ตัวเลือกคลิกขวาหรือปุ่มลัด ctrl+c และ ctrl+v (windows) และ cmd+c cmd+v (mac) คัดลอกและวางโมดูลที่สร้างไว้ล่วงหน้าในแต่ละแถวที่เราเพิ่งสร้างขึ้น ตรวจสอบให้แน่ใจว่าแต่ละแถวมีเวอร์ชันที่ซ้ำกันของโมดูลเดียวกัน

ตอนนี้ ส่วนของคุณควรมีลักษณะเช่นนี้

การออกแบบโมดูลการ์ดพลิกด้านหน้าและด้านหลัง

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

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

ตอนนี้ เราสามารถอัปเดตตัวเลือกการตั้งค่าองค์ประกอบเพื่อจัดรูปแบบการ์ดพลิกของเราได้ อัปเดตการตั้งค่าองค์ประกอบดังนี้:

เนื้อหา: “นี่คือคำอธิบาย”
สีพื้นหลัง: #00a2fa
สีข้อความ: เบา

การเพิ่มคลาส CSS และ CSS แบบกำหนดเอง

ตอนนี้ก็ถึงเวลาสำหรับ CSS แบบกำหนดเองที่จะให้ฟังก์ชันการทำงานของการ์ดพลิก เปิดการตั้งค่าหน้าและเพิ่ม CSS ที่กำหนดเองต่อไปนี้:

@media (min-width:981px){
.flip-box-row {
  background-color: transparent;
  width: 250px;
  height: 250px;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

.flip-box-column {
  position: relative;
  width:100%;
  height: 100%;
  -webkit-transition: transform 0.8s;
  transition: transform 0.8s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.flip-box-row:hover .flip-box-column {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.flip-box-front, .flip-box-back{
  position: absolute;
   width:100%;
  height: 100%;
  -webkit-transform: translate3d(0,0,0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-box-back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
}

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

การเพิ่มคลาส CSS ให้กับ Divi Elements

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

CSS Class: flip-box-front

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

CSS Class: flip-box-back

สุดท้าย ใช้การเลือกหลายรายการเพื่อเลือกทั้งสี่แถวและกำหนดคลาส CSS ต่อไปนี้ให้กับพวกเขา:

CSS Class: flip-box-row
คลาส CSS ของคอลัมน์: flip-box-column

การออกแบบขั้นสุดท้ายบนเดสก์ท็อป

ด้วยการเพิ่มคลาส CSS ทั้งหมดของเรา ฟลิปการ์ดของเราจึงทำงานได้อย่างสมบูรณ์ ตรวจสอบการออกแบบขั้นสุดท้ายบนเดสก์ท็อป

การปรับแต่งการออกแบบสำหรับมือถือ

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

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

ปิดการใช้งานบน: โทรศัพท์และสมาร์ทโฟน

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

flex-wrap:wrap;

เพื่อให้แน่ใจว่าแถวจะซ้อนกันบนมือถือ

ตอนนี้ มาดูการออกแบบขั้นสุดท้ายบนแท็บเล็ตและสมาร์ทโฟนกัน

ตัวเลือกโบนัส: การ์ดพลิกแนวตั้ง!

หากคุณต้องการให้พลิกการ์ดของคุณพลิกในแนวตั้งแทนที่จะเป็นแนวนอน คุณจะต้องเปลี่ยนตัวอักษรสองตัว (ตามตัวอักษร) ใน CSS ที่กำหนดเองเท่านั้น เปิดการตั้งค่าหน้าและค้นหาตำแหน่งสองแห่งที่มีการใช้ "แปลง: หมุน Y(180deg)" จากนั้นแทนที่ "Y" ด้วย "X" หากคุณยังไม่ได้เดา การดำเนินการนี้จะเปลี่ยนการหมุนให้หมุนบนแกน X แทนที่จะเป็นแกน Y

ของเด็ดเพียบ! ตรวจสอบผลลัพธ์

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

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

ฉันหวังว่านี่จะเป็นประโยชน์และหวังว่าจะได้รับการติดต่อจากคุณในความคิดเห็นด้านล่าง

ไชโย!