วิธีสร้างโฮมเพจการนำทางด้วย Divi

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

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

ผลลัพธ์บนเดสก์ท็อป

ผลลัพธ์ที่เราจะสร้างใหม่มีลักษณะดังนี้บนเดสก์ท็อป:

ผลลัพธ์บนมือถือ

ผลลัพธ์บนมือถือแตกต่างออกไปเล็กน้อยและมีลักษณะดังนี้:

วิธีสร้างโฮมเพจการนำทางด้วย Divi

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

สร้างเวอร์ชันเดสก์ท็อปใหม่

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

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

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

สร้างแถวการนำทางแรกขึ้นใหม่

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

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

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

ภาพพื้นหลัง

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

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

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

ขนาด

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

ระยะห่าง

ต่อไป เราต้องการเพิ่มพื้นที่สีขาวเล็กน้อยระหว่างรายการการนำทางแต่ละรายการ นั่นคือเหตุผลที่เราจะเพิ่มระยะขอบด้านบนและด้านล่างของ '5px' ให้กับแถว

ทัศนวิสัย

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

โมดูลข้อความสำหรับคำอธิบายหน้า

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

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

• แบบอักษรของข้อความ: Andika
• น้ำหนักแบบอักษรของข้อความ: ปกติ
• ขนาดตัวอักษร: 13px
• สีข้อความ: #000000
• ความสูงของบรรทัดข้อความ: 1.1em
• การวางแนวข้อความ: ซ้าย

ขนาด

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

ระยะห่าง

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

• ขอบบน: 150px
• ระยะขอบซ้าย: -20px
• ช่องว่างภายในด้านบน: 10px
• ช่องว่างภายในด้านล่าง: 10px

โมดูลแบ่ง

ทัศนวิสัย

ถัดไป เพิ่มโมดูลตัวแบ่งด้านล่างโมดูลข้อความ ภายในหมวดหมู่ย่อยการมองเห็น ให้เปิดใช้งานตัวเลือก 'แสดงตัวแบ่ง'

สี

จากนั้นไปที่แท็บ Design และเพิ่ม '#FFFFFF' เป็นสีตัวแบ่ง

สไตล์

ต่อไป เลือก 'ทึบ' เป็นรูปแบบตัวแบ่ง และ 'บนสุด' เป็นตำแหน่งตัวแบ่ง

ขนาด

สุดท้าย ทำการตั้งค่าต่อไปนี้กับหมวดหมู่ย่อยการปรับขนาด:

• น้ำหนักตัวแบ่ง: 5px
• ส่วนสูง: 23px
• ความกว้าง: 47%
• การจัดตำแหน่งโมดูล: ซ้าย

โมดูลข้อความสำหรับรายการเมนู

ลิงก์ข้อความในกล่องเนื้อหา

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

สีพื้นหลังไล่โทนสี

ขณะที่ยังอยู่บนแท็บเนื้อหา ให้ใช้การตั้งค่าพื้นหลังการไล่ระดับสีต่อไปนี้:

• สีแรก: #FFFFFF
• สีที่สอง: rgba(12,113,195,0.62)
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 108deg
• ตำแหน่งเริ่มต้น: 31%
• ตำแหน่งสุดท้าย: 21%

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

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

• แบบอักษรของลิงก์: Andika
• ลิงก์น้ำหนักแบบอักษร: ตัวหนา
• รูปแบบตัวอักษรของลิงก์: ตัวพิมพ์ใหญ่ & ขีดเส้นใต้
• รูปแบบการขีดเส้นใต้ของลิงก์: Solid
• ขนาดข้อความลิงก์: 100px
• ลิงค์สีข้อความ: #000000
• ความสูงของสายลิงก์: 1em

ระยะห่าง

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

• ขอบบน: -33px
• ขอบล่าง: 250px
• ระยะขอบซ้าย: -20px
• ช่องว่างภายในด้านบน: 80px
• ช่องว่างภายในด้านล่าง: 80px

โคลนแถวการนำทางครั้งแรกเท่าที่จำเป็น

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

เปลี่ยนพื้นหลังของแถว

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

เปลี่ยนโมดูลข้อความสำหรับรายการเมนู

เปลี่ยนลิงค์

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

เปลี่ยนพื้นหลังไล่ระดับตามความยาวของข้อความ

สุดท้ายนี้ คุณจะต้องเปลี่ยนพื้นหลังการไล่ระดับสีของโมดูลข้อความนี้ด้วย เปลี่ยนสีการไล่ระดับสีที่สองเป็น 'rgba(224,43,32,0.62)' และเปลี่ยนค่าตำแหน่งเริ่มต้นตามความยาวของรายการการนำทางใหม่ของคุณ หากคุณมีรายการการนำทางที่ค่อนข้างยาว คุณจะต้องเปลี่ยนเปอร์เซ็นต์ของตำแหน่งเริ่มต้นเป็นค่าที่สูงขึ้นจนกว่าคุณจะเห็นว่าเข้าที่

สร้างเวอร์ชันมือถือขึ้นมาใหม่

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

สร้างแถวการนำทางแรกขึ้นใหม่

เริ่มต้นด้วยการเพิ่มแถวอื่นในส่วนที่เราได้สร้างขึ้นในตอนต้นของโพสต์นี้

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

คอลัมน์นี้ต้องการเพียงคอลัมน์เดียวเช่นเดียวกับเวอร์ชันเดสก์ท็อป

ขนาด

ขนาดของแถวนี้มีดังต่อไปนี้:

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

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

ทัศนวิสัย

และสุดท้าย ปิดการใช้งานแถวนี้บนเดสก์ท็อปเพราะเรามีแถวอื่นที่จะแสดงบนเดสก์ท็อปแทน

โมดูลข้อความสำหรับคำอธิบายหน้า

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

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

• แบบอักษรของข้อความ: Andika
• น้ำหนักแบบอักษรของข้อความ: ปกติ
• ขนาดตัวอักษร: 13px
• สีข้อความ: #000000
• ความสูงของบรรทัดข้อความ: 1.1em
• การวางแนวข้อความ: ศูนย์

ขนาด

จากนั้น เปิดหมวดหมู่ย่อย Sizing และใช้ความกว้าง '71%' และการจัดตำแหน่งโมดูลตรงกลาง

ระยะห่าง

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

โมดูลข้อความสำหรับรายการเมนู

ลิงก์ข้อความในกล่องเนื้อหา

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

สีพื้นหลังไล่โทนสี

พื้นหลังไล่ระดับสีที่เราจะใช้สำหรับโมดูลข้อความนี้เหมือนกับเดสก์ท็อปเวอร์ชันหนึ่ง:

• สีแรก: #FFFFFF
• สีที่สอง: rgba(12,113,195,0.62)
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 108deg
• ตำแหน่งเริ่มต้น: 31%
• ตำแหน่งสุดท้าย: 21%

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

ใช้การตั้งค่าต่อไปนี้สำหรับหมวดข้อความย่อย:

• แบบอักษรของลิงก์: Andika
• ลิงก์น้ำหนักแบบอักษร: ตัวหนา
• ขนาดตัวอักษร: 65px
• สีข้อความ: #000000
• ความสูงของบรรทัดข้อความ: 1em
• การวางแนวข้อความ: ซ้าย

ระยะห่าง

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

โมดูลรูปภาพ

อัพโหลดภาพ

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

โคลนแถวการนำทางครั้งแรกเท่าที่จำเป็น

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

เปลี่ยนโมดูลข้อความสำหรับรายการเมนู

เปลี่ยนลิงค์

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

เปลี่ยนพื้นหลังไล่ระดับตามความยาวของข้อความ

จากนั้น คุณยังสามารถเปลี่ยนสีการไล่ระดับสีที่สองเป็น 'rgba(224,43,32,0.62)' และเปลี่ยนค่าตำแหน่งเริ่มต้นตามความยาวของข้อความของคุณ

เปลี่ยนโมดูลรูปภาพ

สุดท้ายนี้ คุณยังสามารถเปลี่ยนรูปภาพของ Image Module ภายในแถวนั้นได้อีกด้วย

ผลลัพธ์

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

ผลลัพธ์บนเดสก์ท็อป

ผลลัพธ์บนมือถือ

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

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

อย่าลืมสมัครรับจดหมายข่าวทางอีเมลและช่อง YouTube ของเรา เพื่อที่คุณจะได้ไม่พลาดประกาศสำคัญ เคล็ดลับที่เป็นประโยชน์ หรือ Divi freebie!

ภาพเด่นโดย LanKogal / shutterstock.com