วิธีสร้างแผนภูมิต้นไม้ครอบครัวด้วยการตั้งค่าการแปลงของ Divi

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

ไปกันเถอะ

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน มาดูผลลัพธ์คร่าวๆ ของหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

ดาวน์โหลดแผนผังต้นไม้ครอบครัวฟรี

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

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

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

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

ดาวน์โหลด

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

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

การวางตำแหน่งสมาชิกในครอบครัว

เพิ่มมาตราใหม่

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 8vw
• แผ่นรองด้านล่าง: 8vw

เพิ่มแถว #1

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

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

ขนาด

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

ระยะห่าง

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

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

เพิ่มโมดูลรูปภาพลงในคอลัมน์

อัพโหลดภาพ

ได้เวลาเริ่มเพิ่มโมดูลแล้ว! สิ่งแรกที่เราต้องการคือ Image Module อัปโหลดรูปภาพที่มีความกว้างและความสูง '180px'

การจัดตำแหน่ง

จากนั้นไปที่แท็บออกแบบและเปลี่ยนการจัดแนวรูปภาพ

• การจัดตำแหน่งภาพ: กึ่งกลาง

ขนาด

แก้ไขการตั้งค่าการปรับขนาดต่อไป

• ความกว้าง: 49%
• การจัดตำแหน่งโมดูล: ศูนย์

ชายแดน

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

เพิ่มโมดูลข้อความลงในคอลัมน์

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

ไปยังโมดูลถัดไป ซึ่งเป็นโมดูลข้อความ เพิ่มชื่อสมาชิกในครอบครัวที่นี่

สีพื้นหลัง

จากนั้นไปที่การตั้งค่าพื้นหลังและเปลี่ยนสีพื้นหลังเป็นสีขาว

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

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

แก้ไขการตั้งค่าข้อความถัดไป หากคุณต้องการสร้างรูปลักษณ์ใหม่ให้กับแผนภูมิต้นไม้ครอบครัว ลองใช้การตั้งค่าเหล่านี้ได้ตามสบาย

• แบบอักษรข้อความ: เปิด Sans
• สีข้อความ: #000000
• ขนาดตัวอักษร: 0.8vw (เดสก์ท็อป), 1.2vw (แท็บเล็ต), 1.9vw (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 0.4em
• การวางแนวข้อความ: ศูนย์

ระยะห่าง

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

• มาร์จิ้นสูงสุด: -0.5vw
• ระยะขอบซ้าย: 1vw
• ระยะขอบขวา: 1vw
• ด้านบน: 2vw (เดสก์ท็อป), 4vw (แท็บเล็ต), 5vw (โทรศัพท์)
• ช่วงล่าง: 2vw (เดสก์ท็อป), 4vw (แท็บเล็ต), 5vw (โทรศัพท์)

ชายแดน

ไปที่การตั้งค่าเส้นขอบและเพิ่มเส้นขอบด้านบนด้วย

• ความกว้างขอบด้านบน: 5px
• สีขอบบน: #000000

กล่องเงา

พร้อมกับ Box Shadow เพื่อสร้างความลึกให้กับหน้า

• ตำแหน่งแนวตั้งเงาของกล่อง: 10px
• ความแรงของกล่องเงาเบลอ: 50px
• เงาสี: rgba(0,0,0,0.17)

ดัชนี Z

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

• ดัชนี Z: 2

โคลนแถวสามครั้ง

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

ปรับแต่งแถว #1

โคลนทั้งสองโมดูล 7 ครั้ง

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

องค์ประกอบหลักของคอลัมน์ CSS

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

display: grid;
grid-template-columns: repeat(8, 12.5%);

ปรับแต่งแถว #2

โคลนทั้งสองโมดูล 3 ครั้ง

ต่อแถวสอง! ที่นี่ เราจะทำการโคลนทั้งสองโมดูล 3 ครั้ง

องค์ประกอบหลักของคอลัมน์

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

display: grid;
grid-template-columns: repeat(4, 25%);

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

ปรับแต่งแถว #3

โคลนทั้งสองโมดูล

ต่อแถวที่สาม! โคลนแต่ละโมดูลหนึ่งครั้ง

องค์ประกอบหลักของคอลัมน์

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

display: grid;
grid-template-columns: repeat(2, 50%);

ปรับแต่งแถว #4

ระยะห่างแถว

ไปแถวหน้าและแถวสุดท้าย! สิ่งเดียวที่เราต้องทำคือแก้ไขค่าการเติมแถว

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px
• ช่องว่างภายในด้านซ้าย: 31vw
• ช่องว่างภายในด้านขวา: 31vw

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

เพิ่มแถว #1

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

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

ขนาด

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

• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

ระยะห่าง

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

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

เพิ่มโมดูลรูปภาพลงในคอลัมน์

อัพโหลดภาพประกอบ

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

ขนาด

ไปที่การตั้งค่าขนาดของ Image Module และเปิดใช้งานตัวเลือก 'Force Fullwidth'

• บังคับเต็มความกว้าง: ใช่

ระยะห่าง

ตรวจสอบให้แน่ใจว่าคุณปิดใช้งานตัวเลือก 'แสดงช่องว่างใต้รูปภาพ' ในการตั้งค่าการเว้นวรรค

• แสดงช่องว่างด้านล่างภาพ: ไม่

โคลนแถวสองครั้ง & เปลี่ยนตำแหน่งของพวกเขา

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

ปรับแต่งแถว #1

โมดูลภาพโคลนสามครั้ง

กลับไปที่แถวแรกและโคลนโมดูล 3 ครั้ง

องค์ประกอบหลักของคอลัมน์

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

display: grid;
grid-template-columns: repeat(4, 25%);

ปรับแต่งแถว #2

โมดูลภาพโคลน

ย้ายไปยังแถวที่สองและโคลน Image Module หนึ่งครั้ง

องค์ประกอบหลักของคอลัมน์

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

display: grid;
grid-template-columns: repeat(2, 50%);

ปรับแต่งแถว #3

เปลี่ยนระยะห่าง

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

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px
• ช่องว่างภายในด้านซ้าย: 27vw
• ช่องว่างภายในด้านขวา: 27vw

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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