คุณต้องการสร้างแผนผังองค์กรใน Divi หรือไม่?
รู้วิธีสร้างเค้าโครงผังงานใน Divi เปิดโอกาสมากมายในการสื่อสารกระบวนการและแนวคิดเกี่ยวกับ a เว็บไซต์เว็บ. ในบางกรณี ผังงานสามารถใช้เพื่ออธิบายแนวคิดที่ซับซ้อนอย่างยิ่งซึ่งเกี่ยวข้องกับองค์ประกอบจำนวนมาก
บน เว็บไซต์เว็บอย่างไรก็ตาม ผังงานที่ซับซ้อนมากขึ้นเหล่านี้อาจทำได้ยาก โดยเฉพาะอย่างยิ่งหากคุณต้องการให้มีการตอบสนอง
ในบทช่วยสอนนี้ เราจะแสดงวิธีสร้างเค้าโครงผังงานที่มีประโยชน์ซึ่งคุณสามารถใช้กับของคุณได้ เว็บไซต์เว็บเรียบง่าย มีประสิทธิภาพ และตอบสนองได้ดี
นอกจากนี้ เราจะใช้ตัวเลือกในตัวของ Divi เท่านั้นในการสร้าง ดังนั้นคุณจึงไม่ต้องกังวลกับการเพิ่มโค้ดหรือปลั๊กอินที่กำหนดเอง
ขอเริ่มต้น!
การสำรวจ
ต่อไปนี้คือภาพรวมคร่าวๆ เกี่ยวกับการออกแบบผังงานที่เราจะสร้างในบทช่วยสอนนี้
สร้างหน้าใหม่ด้วย Divi Builder
ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:
จากแดชบอร์ด WordPress ให้ไปที่ หน้า> เพิ่มใหม่ เพื่อสร้างเพจใหม่
ตั้งชื่อเรื่องที่เหมาะกับคุณแล้วคลิก ใช้ Divi Builder
จากนั้นคลิกที่ เริ่มสร้าง (สร้างจากรอยขีดข่วน)
หลังจากนั้นคุณจะมีผืนผ้าใบว่างเปล่าเพื่อเริ่มออกแบบใน Divi
วิธีสร้างเค้าโครงผังงานใน Divi
ขั้นตอนที่ 1: สร้างแถวที่มีข้อความแจ้งตรงกลาง
ในการเริ่มสร้างเลย์เอาต์ผังงานใน Divi เราจะเริ่มต้นด้วยการสร้างแถวที่มีการนำเสนอตรงกลาง นี่จะเป็นองค์ประกอบแรกของผังงาน
ส่วนเสริม
ขั้นแรก เปิดการตั้งค่าส่วนสำหรับส่วนเริ่มต้น และตั้งค่าช่องว่างภายในด้านล่างเป็น 0px
- ช่องว่างภายใน (ด้านล่าง): 0px
ไลน์
ภายในส่วน ให้เพิ่มแถวลงในคอลัมน์
เปิดการตั้งค่าบรรทัดและอัปเดตการตั้งค่าการออกแบบต่อไปนี้:
- ความกว้างของรางน้ำ: 1
- ช่องว่างภายใน (บนและล่าง): 0px
การออกแบบ Blurb Mod
ในการสร้างองค์ประกอบผังงานแรกของเรา เราจะใช้โมดูล Blurb
แทรกโมดูล Blurb แบบอินไลน์
การตั้งค่าโมดูล
เปิดการตั้งค่าโมดูล Blurb ภายใต้แท็บ คอนเทนต์คุณสามารถเก็บชื่อเริ่มต้นและข้อความเนื้อหาไว้ได้
จากนั้นอัปเดตรูปภาพด้วยรูปภาพไอคอนขนาดเล็กหรือใช้ไอคอน Divi ในตัว สำหรับบทช่วยสอนนี้ เราใช้ไอคอนจาก แพ็กเค้าโครงการระดมทุน .
จากนั้นให้โมดูลเป็นสีพื้นหลัง:
- พื้นหลัง: #f8f8f8
ภายใต้แท็บ ออกแบบ, ปรับปรุงสิ่งต่อไปนี้:
- การจัดตำแหน่งข้อความ: กึ่งกลาง
- ความกว้างสูงสุด: 400px (เดสก์ท็อปและแท็บเล็ต), 90% (โทรศัพท์)
- โมดูลการจัดตำแหน่ง: Center
- ช่องว่างภายใน: 6% (บนและล่าง), 3% (ซ้ายและขวา)
ถัดไป กำหนดเส้นขอบให้กับโมดูล Blurb ดังนี้:
- ความกว้างของเส้นขอบ: 2px
ขั้นตอนที่ 2: สร้างเส้นเชื่อมต่อด้วยเส้นแนวตั้งและลูกศร
สำหรับส่วนถัดไปของเค้าโครงแผนผังลำดับงาน เราจะสร้างแถวของตัวเชื่อมต่อที่มีเส้นแนวตั้งและลูกศรตรงกลาง เส้นนี้จะใช้เชื่อมต่อสายของ เนื้อหา ของแผนผังองค์กรซึ่งควรดำเนินต่อไปที่ด้านล่างของหน้า
ในกรณีนี้ เราต้องการเริ่มผังงานโดยเพิ่มบรรทัดและลูกศรใต้บรรทัดก่อนหน้าโดยให้โมดูล Blurbn อยู่ตรงกลาง
สร้างบรรทัดใหม่และคัดลอก/วางสไตล์จากบรรทัดก่อนหน้า
เมื่อต้องการทำเช่นนี้ ให้เพิ่มแถวใหม่ลงในคอลัมน์ด้านล่างแถวก่อนหน้า
ใช้ " การตั้งค่าโมดูลอื่น ๆ (หรือคลิกขวาที่ตัวเลือก) คัดลอกสไตล์จากแถวก่อนหน้าด้านบนแล้ววางลงในแถวใหม่
การสร้างตัวคั่นเส้นแนวตั้ง
ในการสร้างตัวคั่นเส้นแนวตั้ง ให้เพิ่มโมดูลตัวแบ่งใหม่เข้ากับเส้น
ภายใต้การตั้งค่าตัวแบ่ง ให้อัปเดตการตั้งค่าการออกแบบดังนี้:
- สีเส้น: #333333
- ตำแหน่งบรรทัด: ด้านล่าง
- น้ำหนักตัวแบ่ง: 150px
- ความกว้าง: 2px
- โมดูลการจัดตำแหน่ง: Center
- ระยะขอบ: -1px(ล่าง)
ภายใต้แท็บ ระดับสูง, ซ่อนโอเวอร์โฟลว์ดังนี้:
- แนวนอนล้น: ซ่อน
- ล้นแนวตั้ง: ซ่อน
สร้างลูกศรด้วยโมดูล Blurb
ต่อไป เราจะสร้างไอคอนลูกศรที่จะอยู่เหนือเส้นแบ่งโดยใช้โมดูลการนำเสนอ
ในการสร้างลูกศร ให้เพิ่มโมดูล Blurb ใหม่ใต้ตัวแบ่ง
การตั้งค่า Blurb Mod
ภายใต้การตั้งค่าโมดูล ลบชื่อเริ่มต้นและข้อความเนื้อหาแล้วคลิก ใช้ไอคอน จากนั้นเลือกไอคอนลูกศร (ดูภาพหน้าจอ)
ภายใต้แท็บ ออกแบบ, ปรับปรุงสิ่งต่อไปนี้:
- สีไอคอน: #bbbbbb
- การจัดตำแหน่งรูปภาพ/ไอคอน: center
- ใช้ขนาดตัวอักษรของไอคอน: ใช่
- ขนาดตัวอักษรของไอคอน: 50px (เดสก์ท็อป), 40px (แท็บเล็ตและโทรศัพท์)
- ความกว้างสูงสุด: 50%
- โมดูลการจัดตำแหน่ง: center
- ความสูง: 50px (เดสก์ท็อป), 40px (แท็บเล็ตและโทรศัพท์)
ภายใต้แท็บ ระดับสูง, เพิ่ม CSS ต่อไปนี้ใน นำเสนอภาพ :
margin-bottom: 0px;
background: #ffffff;
หากต้องการวางตำแหน่งลูกศรเหนือเส้น ให้อัปเดตสิ่งต่อไปนี้:
- ตำแหน่ง: Absolute
- ที่ตั้ง: Center
- ดัชนี Z: 10
ขั้นตอนที่ 3: การสร้างเส้นสำหรับส่วนที่อยู่ติดกันของผังงาน
เมื่อแถวของตัวเชื่อมต่อเสร็จสมบูรณ์ เราจะเพิ่มแถวของโมดูล Blurb หลายแถวที่อยู่ติดกันเพื่อดำเนินการออกแบบผังงานต่อไป
ในการเพิ่มบรรทัด ให้คัดลอกและวางบรรทัดแรก (บรรทัดที่มีการนำเสนอกึ่งกลางที่เราสร้างขึ้นที่ด้านบนของเลย์เอาต์) ใต้บรรทัดเชื่อมต่อ
เปิดการตั้งค่าบรรทัดและอัปเดตสิ่งต่อไปนี้:
- ความกว้างสูงสุด: 50%
- ความกว้างของเส้นขอบ: 2px
ด้านซ้ายของผังงาน
เมื่อเพิ่มเส้นขอบของเราลงในเส้นแล้ว เราจะวางโมดูล Blurb ไว้เหนือเส้นขอบด้านซ้าย
เมื่อต้องการทำเช่นนี้ ปรับปรุงการตั้งค่าการออกแบบต่อไปนี้:
- โมดูลการจัดตำแหน่ง: ซ้าย
- ระยะขอบ: 70px (บนและล่าง)
- แปลงแกน X แปล: -50%
นี่เป็นกุญแจสำคัญสำหรับโมดูล Blurb ที่จะจัดกึ่งกลางในแนวนอนเหนือเส้นขอบ
ด้านขวาของผังงาน
หากต้องการเพิ่มโมดูล Blurb อื่นบนเส้นขอบด้านขวา ให้ทำซ้ำข้อความแจ้งที่มีอยู่
ในการวางตำแหน่งการนำเสนอบนเส้นขอบด้านขวา ให้ไปที่แท็บ ระดับสูง และให้ตำแหน่งที่แน่นอน:
- ตำแหน่ง: Absolute
- ที่ตั้ง: กลางขวา
ถัดไป อัปเดตตัวเลือกต่อไปนี้:
- ขอบ: ไม่มี
- แปลงแกนแปล Y: -50%
- แปลงแกน X แปล: 50%
เพิ่มลูกศรที่มุมของเส้นขอบแต่ละเส้น
เพื่อให้ผังงานชัดเจนขึ้นเกี่ยวกับทิศทางของแถวที่กำลังดำเนินไป เราจะเพิ่มไอคอนลูกศรเพิ่มเติมบนแถวเส้นขอบของแถว
ลูกศรบนซ้าย
ในการเพิ่มลูกศรไปที่แถวขอบด้านซ้ายบน ให้ทำซ้ำโมดูล Blurb ของลูกศรที่เราสร้างขึ้นในแถวตัวเชื่อมต่อแล้วลากลงในแถวที่มีโมดูล Blurb ที่อยู่ติดกัน
เปิดโมดูล Duplicate Arrow Blurb และเปลี่ยนไอคอนเป็นลูกศรชี้ซ้าย
ถัดไป อัปเดตตำแหน่งของตำแหน่งโมดูล:
- ตำแหน่ง: บนซ้าย
สุดท้าย อัปเดตตัวเลือกการแปลการแปลงดังนี้:
- แปลงแกนแปล Y: -50%
ลูกศรบนขวา
ในการสร้างลูกศรที่อยู่บนเส้นขอบขวาบน ให้ทำซ้ำลูกศร " ที่มุมบนซ้าย ที่เราเพิ่งสร้างขึ้น จากนั้นเปิดการตั้งค่าและเปลี่ยนตำแหน่งตำแหน่ง:
- ตำแหน่ง: บนขวา
อัปเดตไอคอนลูกศรด้วยลูกศรชี้ขวาด้วย
ลูกศรลงซ้าย
หากต้องการสร้างลูกศรที่เส้นขอบล่างซ้าย ให้ทำซ้ำลูกศร " บนขวา ที่เราเพิ่งสร้างขึ้น
จากนั้นเปิดการตั้งค่าและเปลี่ยนตำแหน่งตำแหน่ง:
- ตำแหน่ง: ล่างซ้าย
ถัดไป อัปเดตตัวเลือก Transform Translate:
- แปลงแกนแปล Y: 50%
ลูกศรลงขวา
หากต้องการสร้างลูกศรที่เส้นขอบล่างขวา ให้ทำซ้ำลูกศร " ที่ด้านล่างซ้าย ที่เราเพิ่งสร้างขึ้น
จากนั้นเปิดการตั้งค่าและเปลี่ยนตำแหน่งตำแหน่ง:
- ตำแหน่ง: ล่างขวา
อัปเดตไอคอนลูกศรด้วยลูกศรชี้ซ้ายด้วย
เมื่อวางลูกศรทั้งหมดแล้ว คุณสามารถอัปเดตป้ายกำกับสำหรับแต่ละรายการได้โดยใช้ปุ่ม มุมมองชั้น .
ขั้นตอนที่ 4: การเพิ่มสายเชื่อมต่ออื่น
เมื่อเราเสร็จสิ้นบรรทัดที่มีสองส่วนที่อยู่ติดกันของผังงานและลูกศรทั้งหมดแล้ว เราสามารถดำเนินการต่อในผังงานโดยเพิ่มสายเชื่อมต่ออื่น
ในการทำเช่นนี้ ให้ทำซ้ำบรรทัดตัวเชื่อมต่อที่เราสร้างไว้ด้านบนแล้ววางลงใต้บรรทัดที่มีโมดูล Blurb จากส่วนที่อยู่ติดกันของผังงาน
ขั้นตอนที่ 5: ปรับแต่งโฟลว์ด้วยตัวเชื่อมต่อเส้นตรง
ในการออกแบบโฟลว์ชาร์ตที่มีอยู่ โฟลว์เริ่มต้นด้วยองค์ประกอบด้านบน จากนั้นแยกกิ่งไปทางองค์ประกอบที่อยู่ติดกันทางขวาและด้านซ้าย จากนั้นกลับไปที่องค์ประกอบตรงกลางและไปที่องค์ประกอบตรงกลางถัดไป
ในการปรับแต่งโฟลว์ เราจะทำซ้ำส่วนเพื่อให้เราสามารถปรับแต่งโฟลว์ชาร์ตให้หยุดที่องค์ประกอบการนำเสนอที่อยู่ติดกันทางด้านซ้าย และดำเนินการต่อจากองค์ประกอบการนำเสนอทางด้านขวา
ส่วนซ้ำ
เมื่อต้องการทำเช่นนี้ ขั้นแรกให้ทำซ้ำทั้งส่วนที่มีผังงาน
เพิ่มโมดูล Blurb ซ้ายอีกอัน
ในส่วนที่ซ้ำกัน (ด้านล่าง) ให้ค้นหาโมดูล Blurb ด้านซ้ายในแถวที่มีสองโมดูลที่อยู่ติดกัน จากนั้นทำซ้ำคำประกาศทางด้านซ้ายเพื่อสร้างใหม่ด้านล่าง
ลบลูกศรด้านล่างและเส้นขอบ
ถัดไป ลบลูกศรซ้ายล่างและลูกศรขวาล่าง
เปิดการตั้งค่าบรรทัดสำหรับบรรทัดที่มีข้อความแจ้งหลายรายการและลบขอบด้านล่างออก:
- ความกว้างขอบล่าง: 0px
สร้างเส้นด้วยตัวเชื่อมต่อเส้นขอบตรง
ตอนนี้ เราต้องการปรับแต่งการออกแบบผังงานด้วยตัวเชื่อมต่อเส้นขอบด้านขวาที่จะเชื่อมต่อเส้นขอบด้านขวาของเส้นกับเส้นเชื่อมต่อด้านล่าง
ในการทำเช่นนี้ เราจะสร้างอีกบรรทัดหนึ่งและเพิ่มเส้นแบ่งที่กำหนดเองและลูกศรเค้าร่างที่ด้านขวา
เพิ่มแถวใหม่หนึ่งคอลัมน์ใต้แถวที่มีอยู่ด้วยสามรูปแบบ
อัปเดตการตั้งค่าแถวดังนี้ ใต้ tab ออกแบบ :
- ความกว้างของรางน้ำ: 1
- ความกว้างสูงสุด: 50%
- ช่องว่างภายใน: 0px (บนและล่าง)
ถัดไป เพิ่มเส้นขอบตรงให้กับเส้น
- ความกว้างของเส้นขอบขวา: 2px
จากนั้นเพิ่มโมดูลตัวแบ่งบรรทัด
อัปเดตการตั้งค่าตัวแบ่งดังนี้:
- สีเส้น: #333333
- ตำแหน่งบรรทัด: ด้านล่าง
- น้ำหนักตัวแบ่ง: 2px
- ความกว้าง: 50%
- ระยะขอบ: -2px(ล่าง)
ใต้แท็บขั้นสูง ให้อัปเดตตำแหน่งของตัวคั่น:
- ตำแหน่ง: Absolute
- ตำแหน่ง: ล่างขวา
ด้วยตัวแบ่ง ให้คัดลอกโมดูล Blurb จากลูกศรขวาล่างของแถวที่สามของส่วนแรก และวางลงในแถวที่มีเส้นแบ่งด้านขวา
เปิดการตั้งค่าโมดูล Blurb ของลูกศรที่คุณเพิ่งทำซ้ำและย้าย และอัปเดตสิ่งต่อไปนี้:
- ตำแหน่ง: Default
- โมดูลการจัดตำแหน่ง: right
หยุดไหลแนวชายแดนซ้าย
ปัจจุบัน ขอบด้านซ้ายบางส่วนแสดงอยู่ใต้ข้อความแจ้งที่ด้านล่างซ้าย หากต้องการซ่อนเพียงลบขอบด้านล่างของประกาศด้านล่างนี้
ขั้นตอนที่ 6: การอัปเดตเส้นด้วยตัวเชื่อมต่อเส้นขอบด้านซ้าย
ผังงานของคุณอาจต้องมีตัวเชื่อมต่อเส้นขอบด้านซ้าย ในการสร้างเราสามารถอัปเดตเส้นด้วยตัวเชื่อมต่อเส้นขอบด้านขวาได้ดังนี้:
- ความกว้างด้านซ้าย: 2px
- ความกว้างของขอบขวา: 0
อัปเดตตัวคั่นภายในบรรทัดด้วยตำแหน่งใหม่:
- ตำแหน่ง: ล่างซ้าย
ถัดไป อัปเดตการจัดตำแหน่งลูกศร:
- โมดูลการจัดตำแหน่ง: ซ้าย
และเปลี่ยนไอคอนเป็นลูกศรขวา
ผลสุดท้าย
ตรวจสอบผลลัพธ์สุดท้าย
ดาวน์โหลด DIVI ทันที !!!
สรุป
ในบทช่วยสอนนี้ เราได้สร้างเค้าโครงผังงานที่มีประโยชน์ซึ่งทุกคนสามารถใช้เพื่อสื่อสารกระบวนการและแนวคิดได้ ผู้เข้าชม ด้วยการออกแบบที่ตอบสนองได้อย่างน่าทึ่ง
ใช้เพื่อแสดงบริการหรือกระบวนการออกแบบ สร้างอินโฟกราฟิก หรือแนะนำลูกค้าตลอดกระบวนการ เนื้อหา ในรูปแบบใหม่
เราหวังว่าบทช่วยสอนนี้จะสร้างแรงบันดาลใจให้คุณสำหรับโครงการ Divi ครั้งต่อไปของคุณ หากคุณมีข้อกังวลหรือข้อเสนอแนะ หาเราใน ส่วนความเห็น เพื่อหารือเกี่ยวกับมัน
ปรึกษาได้นะคะ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณ
อย่าลังเลที่จะปรึกษาคำแนะนำของเราเกี่ยวกับ การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.
แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.
...
