วิธีสร้างเค้าโครงแผนผังลำดับงานใน Divi

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

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

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

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ ของการออกแบบผังงานที่เราจะสร้างในบทช่วยสอนนี้

ดาวน์โหลดเค้าโครงฟรี

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

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

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

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

ดาวน์โหลด

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

ในการนำเข้าเค้าโครงส่วนไปยังไลบรารี Divi ของคุณ ให้ไปที่ Divi Library

คลิกปุ่มนำเข้า

ในป๊อปอัปการพกพา ให้เลือกแท็บนำเข้าและเลือกไฟล์ดาวน์โหลดจากคอมพิวเตอร์ของคุณ

จากนั้นคลิกปุ่มนำเข้า

เมื่อเสร็จแล้ว เค้าโครงส่วนจะพร้อมใช้งานใน Divi Builder

ไปกวดวิชากันเถอะ

สิ่งที่คุณต้องการเพื่อเริ่มต้น

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi
2. สร้างหน้าใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)
3. เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"

หลังจากนั้น คุณจะมีผืนผ้าใบเปล่าเพื่อเริ่มออกแบบใน Divi

วิธีสร้างเค้าโครงแผนผังลำดับงานใน Divi

ขั้นตอนที่ 1: สร้างแถวที่มีข้อความแจ้งตรงกลาง

ในการเริ่มต้นสร้างเค้าโครงแผนผังลำดับงานใน Divi เราจะเริ่มต้นด้วยการสร้างแถวที่มีการนำเสนอที่อยู่ตรงกลาง นี่จะเป็นรายการแรกในผังงาน

ส่วนเสริม

ขั้นแรก เปิดการตั้งค่าส่วนสำหรับส่วนเริ่มต้น และตั้งค่าช่องว่างภายในด้านล่างเป็น 0px

แถว

ภายในส่วน ให้เพิ่มแถวหนึ่งคอลัมน์

เปิดการตั้งค่าแถวและอัปเดตการตั้งค่าการออกแบบต่อไปนี้:

• ความกว้างของรางน้ำ: 1
• ช่องว่างภายใน: 0px บน, 0px ด้านล่าง

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

การออกแบบโมดูล Blurb

ในการสร้างรายการผังงานแรกของเรา เราจะใช้โมดูลการนำเสนอ

เพิ่มโมดูลการนำเสนอใหม่ลงในแถว

การตั้งค่า Blurb

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

จากนั้นอัปเดตรูปภาพด้วยรูปภาพไอคอนขนาดเล็กหรือใช้ไอคอน Divi ในตัว สำหรับบทช่วยสอนนี้ ฉันจะใช้ไอคอนจาก Crowdfunding Layout Pack

จากนั้นกำหนดสีพื้นหลังให้การนำเสนอ:

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

ภายใต้แท็บการออกแบบ ให้อัปเดตสิ่งต่อไปนี้:

• การจัดตำแหน่งข้อความ: กึ่งกลาง
• ความกว้างสูงสุด: 400px (เดสก์ท็อปและแท็บเล็ต), 90% (โทรศัพท์)
• การจัดตำแหน่งโมดูล: ศูนย์
• เบาะ: 6% บน 6% ล่าง 3% ซ้าย 3% ขวา

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

ถัดไป กำหนดขอบประกาศดังต่อไปนี้:

• ความกว้างของเส้นขอบ: 2px

ขั้นตอนที่ 2: การสร้างแถวตัวเชื่อมต่อด้วยเส้นแนวตั้งและลูกศร

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

ในกรณีนี้ เราต้องการเริ่มโฟลว์ชาร์ตโดยเพิ่มเส้นและลูกศรใต้แถวก่อนหน้าด้วยโมดูลการนำเสนอที่อยู่ตรงกลาง

สร้างแถวใหม่และคัดลอก/วางลักษณะแถวจากแถวก่อนหน้า

เมื่อต้องการทำเช่นนี้ ให้เพิ่มแถวหนึ่งคอลัมน์ใหม่ภายใต้แถวก่อนหน้า

ใช้เมนู "ตัวเลือกเพิ่มเติม" (หรือตัวเลือกคลิกขวา) คัดลอกลักษณะแถวจากแถวก่อนหน้าด้านบนแล้ววางลงในแถวใหม่

การสร้างตัวแบ่งเส้นแนวตั้ง

ในการสร้างตัวแบ่งเส้นแนวตั้ง ให้เพิ่มโมดูลตัวแบ่งใหม่ลงในแถว

ภายใต้การตั้งค่าตัวแบ่ง ให้อัปเดตการตั้งค่าการออกแบบดังนี้:

• สีเส้น: #333333
• ตำแหน่งบรรทัด: ด้านล่าง
• น้ำหนักตัวแบ่ง: 150px
• ความกว้าง: 2px
• การจัดตำแหน่งโมดูล: ศูนย์
• ขอบ: -1px ด้านล่าง

ภายใต้แท็บขั้นสูง ซ่อนโอเวอร์โฟลว์ดังนี้:

• แนวนอนล้น: ซ่อน
• ล้นแนวตั้ง: ซ่อน

การสร้างลูกศรด้วย Blurb Module

ต่อไปเราจะสร้างไอคอนลูกศรเพื่อวางบนเส้นแบ่งโดยใช้โมดูลการนำเสนอ

หากต้องการสร้างลูกศร ให้เพิ่มโมดูลการนำเสนอใหม่ใต้ตัวแบ่ง

การตั้งค่าลูกศร Blub

ภายใต้การตั้งค่าการนำเสนอ ให้นำชื่อเริ่มต้นและข้อความเนื้อหาออก แล้วคลิกเพื่อใช้ไอคอนลูกศรด้านล่าง (ดูภาพหน้าจอ)

ภายใต้แท็บการออกแบบ ให้อัปเดตสิ่งต่อไปนี้:

• สีไอคอน: #bbbbbb
• การจัดตำแหน่งรูปภาพ/ไอคอน: center
• ขนาดตัวอักษรของไอคอน: 50px (เดสก์ท็อป), 40px (แท็บเล็ตและโทรศัพท์)

• ความกว้างสูงสุด: 50%
• การจัดตำแหน่งโมดูล: ศูนย์
• ความสูง: 50px (เดสก์ท็อป), 40px (แท็บเล็ตและโทรศัพท์)

ภายใต้แท็บขั้นสูง เพิ่ม CSS ต่อไปนี้ใน Blurb Image:

margin-bottom: 0px;
background: #ffffff;

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

ในการวางตำแหน่งลูกศรไว้บนสุดของบรรทัด ให้อัปเดตสิ่งต่อไปนี้:

• ตำแหน่ง: Absolute
• ที่ตั้ง: Center
• ดัชนี Z: 10

ขั้นตอนที่ 3: การสร้างแถวด้วย Blurbs และ Arrows แผนผังลำดับงานที่อยู่ติดกัน

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

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

เปิดการตั้งค่าแถวและอัปเดตสิ่งต่อไปนี้:

• ความกว้างสูงสุด: 50%
• ความกว้างของเส้นขอบ: 2px

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

การสร้าง Flow Chart Blurb บนเส้นขอบด้านซ้าย

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

เมื่อต้องการทำเช่นนี้ ปรับปรุงการตั้งค่าการออกแบบต่อไปนี้:

• การจัดตำแหน่งโมดูล: ซ้าย
• ขอบ: บน 70px, ด้านล่าง 70px

• แปลงแกน X แปล: -50%

นี่คือกุญแจสำคัญในการทำให้การนำเสนออยู่ในแนวนอนที่ด้านบนของเส้นขอบ

การสร้าง Blurb แผนภูมิการไหลที่อยู่ติดกันบนเส้นขอบด้านขวา

หากต้องการเพิ่มการนำเสนออื่นบนเส้นขอบด้านขวา ให้ทำซ้ำข้อความแจ้งที่มีอยู่

ในการวางตำแหน่งการนำเสนอบนเส้นขอบด้านขวา ให้ไปที่แท็บขั้นสูงแล้วกำหนดตำแหน่งที่แน่นอน:

• ตำแหน่ง: Absolute
• ตำแหน่ง: Right Center

จากนั้นอัปเดตระยะขอบและแปลงตัวเลือกการแปลดังนี้:

• ขอบ: ไม่มี
• แปลงแกนแปล Y: -50%
• แปลงแกน X แปล: 50%

การเพิ่ม Arrow Blurbs ไปที่มุมบนเส้นขอบแต่ละเส้น

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

ลูกศรซ้ายบน

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

เปิดคำประกาศลูกศรที่ซ้ำกันและเปลี่ยนไอคอนเป็นลูกศรซ้าย

จากนั้นอัปเดตตำแหน่งตำแหน่งของประกาศลูกศร:

• ตำแหน่ง: บนซ้าย

สุดท้าย อัปเดตตัวเลือกการแปลการแปลงดังนี้:

• แปลงแกนแปล Y: -50%

ลูกศรขวาบน

ในการสร้างลูกศรที่อยู่บนเส้นขอบขวาบน ให้ทำซ้ำลูกศร "บนซ้าย" ที่เราเพิ่งสร้างขึ้น จากนั้นเปิดการตั้งค่าและเปลี่ยนตำแหน่งตำแหน่ง:

• ตำแหน่ง: บนขวา

อัปเดตไอคอนลูกศรด้วยลูกศรขวาด้วย

ลูกศรซ้ายล่าง

ในการสร้างลูกศรที่อยู่บนเส้นขอบล่างซ้าย ให้ทำซ้ำลูกศร "บนขวา" ที่เราเพิ่งสร้างขึ้น

จากนั้นเปิดการตั้งค่าและเปลี่ยนตำแหน่งตำแหน่ง:

• ตำแหน่ง: ล่างซ้าย

ถัดไป อัปเดตตัวเลือกการแปลการแปลง:

• แปลงแกนแปล Y: 50%

ลูกศรขวาล่าง

ในการสร้างลูกศรที่อยู่บนเส้นขอบล่างขวา ให้ทำซ้ำลูกศร "ล่างซ้าย" ที่เราเพิ่งสร้างขึ้น

จากนั้นเปิดการตั้งค่าและเปลี่ยนตำแหน่งตำแหน่ง:

• ตำแหน่ง: ล่างขวา

อัปเดตไอคอนลูกศรด้วยลูกศรซ้ายด้วย

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

ขั้นตอนที่ 4: การเพิ่มอีกแถวตัวเชื่อมต่อ

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

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

ขั้นตอนที่ 5: ปรับแต่งโฟลว์ด้วยตัวเชื่อมต่อเส้นขอบด้านขวา

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

มาตราซ้ำ

เมื่อต้องการทำเช่นนี้ ขั้นแรกให้ทำซ้ำทั้งส่วนของเนื้อหาแผนผังลำดับงาน

เพิ่มรายการประกาศด้านซ้ายอีกรายการ

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

ลบลูกศรและเส้นขอบด้านล่าง

ถัดไป ให้ลบลูกศรซ้ายล่างและลูกศรขวาล่างเบลอ

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

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

สร้างแถวด้วยตัวเชื่อมต่อเส้นขอบขวา

ตอนนี้ เราต้องการปรับแต่งการออกแบบของโฟลว์ชาร์ตด้วยตัวเชื่อมต่อเส้นขอบด้านขวาที่จะเชื่อมต่อเส้นขอบด้านขวาของแถวกับแถวตัวเชื่อมต่อด้านล่าง

ในการทำเช่นนี้ เราจะสร้างอีกแถวหนึ่งและเพิ่มเส้นแบ่งที่กำหนดเองและคำประกาศลูกศรทางด้านขวา

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

อัปเดตการตั้งค่าการออกแบบของแถวดังนี้:

• ความกว้างของรางน้ำ: 1
• ความกว้างสูงสุด: 50%
• ช่องว่างภายใน: 0px บน, 0px ด้านล่าง

ถัดไป เพิ่มเส้นขอบด้านขวาให้กับแถว

• ความกว้างของเส้นขอบขวา: 2px

จากนั้นเพิ่มโมดูลตัวแบ่งในแถว

อัปเดตการตั้งค่าตัวแบ่งดังนี้:

• สีเส้น: #333333
• ตำแหน่งบรรทัด: ด้านล่าง
• น้ำหนักตัวแบ่ง: 2px
• ความกว้าง: 50%
• ระยะขอบ: -2px ด้านล่าง

ใต้แท็บขั้นสูง ให้อัปเดตตำแหน่งตัวแบ่ง:

• ตำแหน่ง: Absolute
• ตำแหน่ง: ล่างขวา

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

เปิดการตั้งค่าของประกาศลูกศรที่คุณเพิ่งทำซ้ำและย้ายและอัปเดตสิ่งต่อไปนี้:

• ตำแหน่ง: ค่าเริ่มต้น

• การจัดตำแหน่งโมดูล: right

หยุดการไหลของเส้นเขตแดนด้านซ้าย

ขณะนี้ มีเส้นขอบด้านซ้ายบางส่วนปรากฏอยู่ใต้ข้อความแจ้งด้านล่างซ้าย หากต้องการซ่อน ให้ดึงขอบด้านล่างของข้อความด้านล่างออกอย่างง่าย

ขั้นตอนที่ 6: การอัปเดตแถวด้วยตัวเชื่อมต่อเส้นขอบด้านซ้าย

ผังงานของคุณอาจต้องมีตัวเชื่อมต่อเส้นขอบด้านซ้ายด้วย ในการสร้างเราสามารถอัปเดตแถวด้วยตัวเชื่อมต่อเส้นขอบด้านขวาได้ดังนี้:

• ความกว้างของเส้นขอบด้านซ้าย: 2px
• ความกว้างของขอบขวา: 0

อัปเดตตัวแบ่งภายในแถวด้วยตำแหน่งใหม่:

• ตำแหน่ง: ล่างซ้าย

จากนั้นอัปเดตการจัดตำแหน่งของประกาศลูกศร:

• การจัดตำแหน่งโมดูล: ซ้าย

และเปลี่ยนไอคอนเป็นลูกศรขวา

ผลสุดท้าย

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

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

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

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!