การสร้างตารางบัตรคำถามแบบโต้ตอบสำหรับหน้าเกี่ยวกับหน้าถัดไปของคุณด้วย Divi

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

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

ไปกันเถอะ!

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน มาดูตารางการ์ดคำถามที่เราจะสร้างใหม่ตั้งแต่ต้น

เดสก์ทอป

มือถือ

มาเริ่มสร้างกันเลย!

สร้างเพจใหม่โดยใช้ About Page ของ ISP Layout Pack

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

ลบส่วนทั้งหมดระหว่างส่วนฮีโร่และส่วนท้าย

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

เพิ่มส่วนใหม่ในระหว่าง

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

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

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

ขนาด

เราจะลบช่องว่างเริ่มต้นทั้งหมดระหว่างคอลัมน์ เปิดการตั้งค่าแถวและทำการเปลี่ยนแปลงการตั้งค่าการปรับขนาด

• ทำให้แถวนี้เต็มความกว้าง: ใช่
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 10px
• ช่องว่างภายในด้านล่าง: 10px
• คอลัมน์ที่ 1 ช่องว่างภายในด้านซ้าย: 10px (เดสก์ท็อป), 5px (แท็บเล็ตและโทรศัพท์)
• คอลัมน์ 1 ช่องว่างภายในด้านขวา: 5px
• คอลัมน์ 2 ช่องว่างภายในด้านซ้าย: 5px
• คอลัมน์ 2 ช่องว่างภายในด้านขวา: 5px
• คอลัมน์ 3 ช่องว่างภายในด้านซ้าย: 5px
• คอลัมน์ 3 ช่องว่างภายในด้านขวา: 10px (เดสก์ท็อป), 5px (แท็บเล็ตและโทรศัพท์)

เพิ่มโมดูล Blurb ใหม่ในคอลัมน์ 1

เพิ่มเนื้อหา

ในการสร้างเอฟเฟกต์โฮเวอร์ โมดูลเดียวที่เราต้องการคือโมดูล Blurb เราจะเริ่มต้นด้วยการสร้างและโคลนในภายหลังเพื่อสร้างผลลัพธ์ทั้งหมด เพิ่ม Blurb Module ลงในคอลัมน์ที่หนึ่ง เพิ่มคำถามที่คุณต้องการตอบลงในช่องชื่อและคำตอบในกล่องเนื้อหา

เลือกไอคอน

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

การตั้งค่าไอคอนเริ่มต้น

ดำเนินการต่อโดยเปลี่ยนการตั้งค่าไอคอนในแท็บการออกแบบ

• สีไอคอน: #aaaaaa
• ตำแหน่งไอคอน: Top
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 40px

การตั้งค่าไอคอนโฮเวอร์

และปรับเปลี่ยนสีของไอคอนเมื่อวางเมาส์ไว้ เราใช้สีโปร่งใสทั้งหมดเมื่อวางเมาส์เหนือเพื่อให้ไอคอนหายไปเมื่อวางเมาส์ไว้

• ไอคอนสี: rgba(255,255,255,0)

การตั้งค่าข้อความ

ถัดไป เปลี่ยนการวางแนวข้อความในการตั้งค่าข้อความ

• การวางแนวข้อความ: ศูนย์

การตั้งค่าข้อความชื่อเริ่มต้น

ทำการเปลี่ยนแปลงการตั้งค่าข้อความชื่อเรื่องด้วย

• แบบอักษรของชื่อเรื่อง: Poppins
• น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
• ชื่อข้อความสี: #333333
• ขนาดข้อความชื่อเรื่อง: 40px
• ระยะห่างของตัวอักษรชื่อเรื่อง: -3px

วางเมาส์เหนือการตั้งค่าข้อความ

และเปลี่ยนสีข้อความชื่อเรื่องเมื่อวางเมาส์ไว้ เราใช้สีโปร่งใสทั้งหมดอีกครั้งเพื่อให้แน่ใจว่าคำถามจะไม่ปรากฏขึ้นเมื่อมีผู้วางเมาส์เหนือโมดูล Blurb

• ชื่อข้อความสี: rgba(255,255,255,0)

การตั้งค่าข้อความเนื้อหาเริ่มต้น

ดำเนินการต่อโดยเปลี่ยนการตั้งค่าข้อความเนื้อหา

• แบบอักษรของร่างกาย: เปิด Sans
• น้ำหนักแบบอักษรของร่างกาย: เบา
• สีข้อความ: rgba(255,255,255,0)
• ขนาดข้อความ: 25px
• ระยะห่างระหว่างตัวอักษร: -2px
• ความสูงของเส้นร่างกาย: 1.6em

วางเมาส์เหนือการตั้งค่าข้อความ

และเปลี่ยนสีข้อความเนื้อหาเมื่อวางเมาส์ไว้

• สีข้อความ: #000000

ระยะห่าง

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

• แผ่นรองด้านบน: 9vw
• แผ่นรองด้านล่าง: 9vw
• ช่องว่างภายในด้านซ้าย: 50px
• ช่องว่างภายในด้านขวา: 50px

มุมโค้งมนเริ่มต้น

นอกจากนี้เรายังให้โมดูลของเรา '30px' ของมุมโค้งมน

เลื่อนมุมโค้งมน

เรากำลังลบมุมโค้งมนเหล่านี้เมื่อวางเมาส์เหนือ

เส้นขอบเริ่มต้น

และเราจะเพิ่มเส้นขอบด้านล่าง

• ความกว้างขอบล่าง: 0px
• สีขอบล่าง: #0ffeb

โฮเวอร์ชายแดน

เปลี่ยนความกว้างของเส้นขอบด้านล่างเมื่อวางเมาส์ไว้เพื่อให้ปรากฏ

• ความกว้างขอบล่าง: 10px

กล่องเงา

เพื่อเพิ่มความลึก เราจะใช้เงากล่องด้วย

• เงาสี: rgba(0,0,0,0.05)

การเปลี่ยนผ่าน

สุดท้ายแต่ไม่ท้ายสุด เราจะลดระยะเวลาการเปลี่ยนแปลงในแท็บขั้นสูง

• ระยะเวลาการเปลี่ยนภาพ: 250ms

โคลนโมดูล Blurb สองครั้ง & วางในคอลัมน์ที่เหลือ

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

เปลี่ยนเนื้อหา

ตรวจสอบให้แน่ใจว่าคุณเปลี่ยนเนื้อหาของรายการที่ซ้ำกันแต่ละรายการ

เปลี่ยนสีขอบล่าง

พร้อมกับสีขอบล่าง

โคลนทั้งแถวสองครั้ง

คุณสามารถสร้างตารางบัตรคำถามโดยการโคลนแถวได้มากเท่าที่คุณต้องการ

เปลี่ยนเนื้อหา & สีด้านล่างสำหรับแต่ละรายการแยกกัน

แต่อย่าลืมเปลี่ยนเนื้อหาและสีด้านล่างเพื่อทำให้การ์ดคำถามแต่ละใบมีเอกลักษณ์เฉพาะตัว!

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์สุดท้ายในหน้าจอขนาดต่างๆ กัน

เดสก์ทอป

มือถือ

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

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