การสร้างแดชบอร์ดการนำทางที่โดดเด่นด้วยโครงสร้างคอลัมน์ใหม่ของ Divi

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

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

ไปกันเถอะ!

ดูตัวอย่าง

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

จานสี

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

แสงสว่าง

• สี #1: #f6f6f6 (พื้นหลังส่วน)
• สี #2: #ffffff (พื้นหลังคอลัมน์)
• สี #3: #333333 (สีข้อความชื่อเรื่อง)
• สี #4: #000000 (สีตัวแบ่ง)
• สี #5: #6F6B68 (ประกาศสีข้อความเนื้อหา)
• สี #6: #e5e5e5 (พื้นหลังคอลัมน์ 2)
• สี #7: #ffffff (สีพื้นหลังเบลอ)

มืด

• สี #1: #141414
• สี #2: #212121
• สี #3: #ffffff
• สี #4: #ffffff
• สี #5: #dddddd
• สี #6: #212121
• สี #7: #333333

หลากสี

• สี #7: #0457ff
• สี #8: #cc0432
• สี #9: #839e00
• สี #10: #c68e00

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

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

สีพื้นหลัง

เริ่มต้นด้วยการเพิ่มส่วนใหม่ในหน้าของคุณ จากนั้นเปิดการตั้งค่าส่วนและเพิ่มสีพื้นหลัง:

• สีพื้นหลัง: สี #1 (ค้นหาในจานสี)

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 100px
• ช่องว่างภายในด้านล่าง: 100px

เพิ่มแถว #1

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

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

คอลัมน์ 1 สีพื้นหลัง

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

• คอลัมน์ 1 สีพื้นหลัง: สี #2 (ค้นหาในจานสี)

ขนาด

ไปที่แท็บออกแบบถัดไปแล้วเปลี่ยนการตั้งค่าการปรับขนาดของแถวของคุณ:

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

ระยะห่าง

สุดท้าย เพิ่มช่องว่างภายในแถวและคอลัมน์แรก:

• ช่องว่างภายในด้านล่าง: 100px
• คอลัมน์ 1 ช่องว่างภายในด้านบน: 100px
• ช่องว่างภายในคอลัมน์ 1 ด้านล่าง: 100px
• คอลัมน์ 1 ช่องว่างภายในด้านซ้าย: 50px
• คอลัมน์ 1 ช่องว่างภายในด้านขวา: 50px

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

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

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

• น้ำหนักตัวอักษรของหัวเรื่อง: ตัวหนา
• การจัดตำแหน่งข้อความหัวเรื่อง: ซ้าย
• หัวเรื่องสีข้อความ: สี #3 (ค้นหาในจานสี)
• ขนาดข้อความหัวเรื่อง: 75px (เดสก์ท็อป), 55px (แท็บเล็ต), 36px (โทรศัพท์)

เพิ่มโมดูลตัวแบ่งในคอลัมน์ 1

ตัวแบ่งสี

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

• ตัวแบ่งสี: สี #4 (ค้นหาในจานสี)

ขนาด

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

• ความกว้าง: 27%

ระยะห่าง

เพิ่มช่องว่างที่ด้านบนของตัวแบ่งของคุณด้วย:

• ขอบบน: 50px

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

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

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

• การวางแนวข้อความ: Justify

ขนาด

เปลี่ยนการตั้งค่าขนาดของโมดูลนี้ด้วย:

• ความกว้าง: 80% (เดสก์ท็อป), 100% (แท็บเล็ตและโทรศัพท์)

ระยะห่าง

และเพิ่มพื้นที่บางส่วนที่ด้านบนของโมดูลโดยใช้ระยะขอบที่กำหนดเอง:

• ขอบบน: 50px

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

ไอคอน

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

สีพื้นหลัง

ดำเนินการต่อโดยเพิ่มสีพื้นหลังให้กับโมดูล Blurb ของคุณ:

• สีพื้นหลัง: สี #7 (ค้นหาในจานสี)

ลวดลายพื้นหลัง

บันทึกรูปแบบเล็กๆ ต่อไปนี้ลงในคอมพิวเตอร์ของคุณ:

อัปโหลดเป็นภาพพื้นหลังพร้อมกับการตั้งค่าต่อไปนี้:

• ขนาดภาพพื้นหลัง: ขนาดจริง
• ตำแหน่งภาพพื้นหลัง: Center
• ทำซ้ำภาพพื้นหลัง: ทำซ้ำ

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

ไปที่แท็บ Design เปิดการตั้งค่า Image & Icon และเปลี่ยนการตั้งค่าตามนี้:

• ไอคอนสี: สี #7 (ค้นหาในจานสี)
• ไอคอนวงกลม: ใช่
• สีวงกลม: #FFFFFF
• ใช้ขนาดตัวอักษรของไอคอน: 33px

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

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

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

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

ชื่อของ Blurb Module ของเราต้องการการเปลี่ยนแปลงเพิ่มเติมเช่นกัน:

• น้ำหนักแบบอักษรของชื่อเรื่อง: Ultra Bold
• รูปแบบตัวอักษรของชื่อเรื่อง: ตัวพิมพ์ใหญ่

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 75px
• ช่องว่างภายในด้านล่าง: 75px
• ช่องว่างภายในด้านซ้าย: 30px
• ช่องว่างภายในด้านขวา: 30px

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

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

เปลี่ยนโมดูล Blurb ใหม่

เปลี่ยนไอคอน

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

เปลี่ยนสีพื้นหลัง

ในทำนองเดียวกัน คุณจะต้องเปลี่ยนสีพื้นหลังเป็นสีที่เลือกหรือสีใดสีหนึ่งในจานสี (สี #8, #9 หรือ #10)

เปลี่ยนสีไอคอน

เปลี่ยนสีไอคอนเป็นสีเดียวกับที่คุณใช้สำหรับพื้นหลัง

เพิ่มแถว #2

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

แถวที่สองต้องการโครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

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

• ทำให้แถวนี้เต็มความกว้าง: ใช่
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 2

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 50px
• ช่องว่างภายในด้านล่าง: 50px

เพิ่มโมดูลข้อความ

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

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

• ส่วนหัว 2 น้ำหนักแบบอักษร: ตัวหนา
• การจัดตำแหน่งข้อความหัวเรื่อง 2: ซ้าย
• หัวเรื่อง 2 สีข้อความ: สี #3 (ค้นหาในจานสี)
• ขนาดข้อความหัวเรื่อง: 32px

เพิ่มโมดูลตัวแบ่ง

ตัวแบ่งสี

ด้านล่างชื่อโมดูลข้อความ เพิ่มโมดูลตัวแบ่งด้วยสีต่อไปนี้:

• สี: สี #4 (ค้นหาในจานสี)

ขนาด

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

• ความกว้าง: 9%

ระยะห่าง

สุดท้าย เพิ่มพื้นที่บางส่วนที่ด้านบนของตัวแบ่งของคุณ:

• ช่องว่างภายในด้านบน: 20px

เพิ่มแถว #3

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

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

สีพื้นหลังของคอลัมน์

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

• สีพื้นหลังของคอลัมน์: สี #6 (ค้นหาในจานสี)

ขนาด

เพิ่มความกว้างของแถวของคุณต่อไป:

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

ระยะห่าง

และเพิ่มช่องว่างภายในด้วย:

• ช่องว่างภายในด้านบน: 100px
• ช่องว่างภายในด้านล่าง: 100px

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

ไอคอน

ตอนนี้เราสามารถเริ่มเพิ่มโมดูลต่างๆ ได้แล้ว เราจะเริ่มด้วย Blurb Module ในคอลัมน์แรก หลังจากเพิ่มเนื้อหาแล้ว ให้เลือกไอคอนที่คุณต้องการ

สีพื้นหลัง

กำหนดสีพื้นหลังของ Blurb Module ต่อไป:

• สีพื้นหลัง: สี #7 (ค้นหาในจานสี)

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

ไปที่แท็บออกแบบและเปลี่ยนการตั้งค่าไอคอน:

• สีไอคอน: #ffffff
• ไอคอนวงกลม: ใช่
• วงกลมสี: สี #7 (ค้นหาในจานสี)
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 33px

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

เปลี่ยนการวางแนวข้อความของโมดูล Blurb ของคุณด้วย:

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

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

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

• น้ำหนักแบบอักษรของชื่อเรื่อง: Ultra Bold
• รูปแบบตัวอักษรของชื่อเรื่อง: ตัวพิมพ์ใหญ่
• ชื่อข้อความสี: สี #3 (ค้นหาในจานสี)

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

เนื้อหาของโมดูล Blurb ต้องการสีอื่นด้วย:

• Body Text Color: Color #5 (ค้นหาในจานสี)

ระยะห่าง

สุดท้าย เพิ่มการตั้งค่าการเว้นวรรคแบบกำหนดเองให้กับโมดูล Blurb ของคุณ:

• ช่องว่างภายในด้านบน: 50px
• ช่องว่างภายในด้านล่าง: 50px
• ช่องว่างภายในด้านซ้าย: 30px
• ช่องว่างภายในด้านขวา: 30px

เพิ่มโมดูลปุ่มไปที่คอลัมน์ 1

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

ด้านล่างโมดูล Blurb ให้เพิ่มโมดูลปุ่ม เปิดการตั้งค่าและเปลี่ยนการจัดตำแหน่งปุ่ม:

• การจัดตำแหน่งปุ่ม: กึ่งกลาง

การตั้งค่าปุ่ม

เปลี่ยนลักษณะที่ปรากฏของปุ่มถัดไป:

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 15px
• สีข้อความของปุ่ม: สี #3
• ความกว้างของขอบปุ่ม: 0px
• รัศมีเส้นขอบของปุ่ม: 0px
• น้ำหนักแบบอักษร: Ultra Bold
• รูปแบบตัวอักษร: ตัวพิมพ์ใหญ่

ระยะห่าง

เพิ่มระยะขอบที่ด้านล่างของโมดูลปุ่มของคุณด้วย:

• ขอบล่าง: 30px

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

โคลนทั้งสองโมดูลในคอลัมน์แรกสามครั้ง และวางไว้ในคอลัมน์ที่เหลือของแถวของคุณ

เปลี่ยนโมดูล Blurb ใหม่

เปลี่ยนไอคอน

เปลี่ยนไอคอนของโมดูล Blurb ที่ซ้ำกันเป็นไอคอนใหม่ที่เลือก

เปลี่ยนสีไอคอน

เปลี่ยนสีไอคอนด้วย อย่าลังเลที่จะใช้หมายเลข #8, #9 และ #10 ของจานสี

โคลนโรว์

ค้นหา & โคลนแถว

หากต้องการแสดงคุณลักษณะทั้งหมด แทนที่จะแสดงเฉพาะส่วนที่ไฮไลต์ เราจะโคลนแถวที่มีชื่อเรื่อง

วางแถว

จากนั้น เราจะวางไว้ด้านล่างแถวสุดท้ายที่เราสร้าง

โคลนโรว์

ค้นหา & โคลนแถว

ทำสิ่งเดียวกันกับแถวที่มีโมดูล Blurb ที่ไฮไลต์

วางแถว

และวางไว้ใต้ชื่อใหม่ของคุณ

เปลี่ยนโครงสร้างคอลัมน์

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

เพิ่มสีพื้นหลังคอลัมน์ 5 คอลัมน์

เพิ่มสีพื้นหลังของคอลัมน์ให้กับคอลัมน์ใหม่ของคุณด้วย:

• สีพื้นหลังของคอลัมน์: สี #6 (ค้นหาในจานสี)

โคลน Blurb และโมดูลปุ่ม & วางในคอลัมน์ 5

โคลนโมดูล Blurb อันใดอันหนึ่งในแถวของคุณและเติมช่องว่างโดยวางสำเนาในคอลัมน์ 5 เปลี่ยนสีไอคอนและไอคอนด้วย

โคลนแถว 5 คอลัมน์

สุดท้ายแต่ไม่ท้ายสุด โคลนแถว 5 คอลัมน์นี้เพื่อสร้างสองแถวพร้อมคุณสมบัติทั้งหมดที่คุณต้องการนำเสนอ เท่านี้ก็เสร็จเรียบร้อย!

ดูตัวอย่าง

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

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

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