การสร้างการนำทางด้านข้างของคอลัมน์แบบกำหนดเองสำหรับหนึ่งเพจเจอร์ด้วย Divi

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

ดาวน์โหลดเค้าโครงการนำทางด้านข้างคอลัมน์ฟรี

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

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

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

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

ดาวน์โหลด

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

มาเริ่มสร้างใหม่กันเถอะ!

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

สร้างหน้าเปล่าใหม่

สิ่งแรกที่คุณต้องทำคือสร้างหน้าเปล่าใหม่ เมื่อคุณทำเสร็จแล้ว ให้เปลี่ยนไปใช้ Visual Builder

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

สีพื้นหลัง

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

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

ระยะห่าง

ลบช่องว่างด้านบนและด้านล่างเริ่มต้นทั้งหมดของส่วน

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

เพิ่มแถวใหม่

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

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

ขนาด

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

• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%
• ส่วนสูง: 100vh

ระยะห่าง

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

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

คอลัมน์ 1 การตั้งค่า

เมื่อคุณตั้งค่าแถวทั่วไปเสร็จแล้ว ให้เปิดการตั้งค่าคอลัมน์ 1

สีพื้นหลัง

เพิ่มสีพื้นหลังสีขาว

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

กล่องเงา

พร้อมด้วยกล่องเงาที่ละเอียดอ่อน

• ตำแหน่งแนวนอนของกล่องเงา: 80px
• ความชัดเจนของเงากล่อง: 75px
• เงาสี: rgba(0,0,0,0.07)

แปลงมาตราส่วน

เรากำลังลดขนาดคอลัมน์บนเดสก์ท็อปด้วย

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

แปลงแปล

เปลี่ยนตำแหน่งของคอลัมน์โดยใช้การตั้งค่าการแปลการแปลงแบบกำหนดเองต่อไป

• ด้านล่าง: -5vw (เดสก์ท็อป), 0px (แท็บเล็ตและโทรศัพท์)
• ขวา: 0px

การตั้งค่าคอลัมน์ 2

ดำเนินการต่อโดยเปิดการตั้งค่าคอลัมน์ 2

ระยะห่าง

ไปที่แท็บออกแบบและเพิ่มค่าการเติมด้านซ้ายและขวาต่อไปนี้ในขนาดหน้าจอต่างๆ:

• Padding ซ้าย: 2vw (เดสก์ท็อป), 4vw (แท็บเล็ต), 5vw (โทรศัพท์)
• Padding ขวา: 2vw (เดสก์ท็อป), 4vw (แท็บเล็ต), 5vw (โทรศัพท์)

CSS Class

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

• CSS Class: scroll-column

ทัศนวิสัย

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

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

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

เพิ่มสำเนา

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

เพิ่มลิงค์

เพิ่มลิงก์สมอไปยังรายการเมนู

• URL ลิงค์โมดูล: www.yourwebsite.com/yourpage/#home

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

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

• แบบอักษรของข้อความ: มอนต์เซอร์รัต
• การจัดตำแหน่งข้อความ: กึ่งกลาง
• สีข้อความ: #383838
• ขนาดตัวอักษร: 3vw
• ระยะห่างของตัวอักษรข้อความ: -3px (เดสก์ท็อป), -2px (แท็บเล็ต), -1px (โทรศัพท์)

ระยะห่าง

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

• ขอบบน: 23vw (เดสก์ท็อป), 3vw (แท็บเล็ตและโทรศัพท์)
• ระยะขอบล่าง: 3vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 1vw (โทรศัพท์)

โคลนรายการเมนูสองครั้ง

เมื่อคุณทำรายการเมนูแรกเสร็จแล้ว ให้ทำการโคลนสองครั้ง

เปลี่ยนเนื้อหาของทั้งสองรายการที่ซ้ำกัน

เปลี่ยนเนื้อหารายการเมนูของทั้งสองรายการที่ซ้ำกัน

เปลี่ยนลิงค์ของทั้งสองรายการที่ซ้ำกัน

พร้อมกับสมอลิงค์

• ซ้ำ 1: /#about
• ซ้ำ 2: /#services

เปลี่ยนระยะห่างของทั้งสองรายการที่ซ้ำกัน

ทำสำเนาให้สมบูรณ์โดยเปลี่ยนค่าการเว้นวรรคตามลำดับ:

• ขอบบน: 3vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 1vw (โทรศัพท์)
• ระยะขอบล่าง: 3vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 1vw (โทรศัพท์)

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

ทัศนวิสัย

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

• แสดงตัวแบ่ง: ใช่

เส้น

เปลี่ยนสีเส้นต่อไป

• สีเส้น: #ffebc9

ขนาด

พร้อมกับการตั้งค่าการปรับขนาด

• ตัวแบ่งน้ำหนัก: 1vw
• ส่วนสูง: 0px

โมดูลตัวแบ่งโคลน

โคลนโมดูลตัวแบ่งและวางสำเนาไว้ด้านล่างโมดูลข้อความที่สอง

เพิ่มโมดูลการติดตามโซเชียลมีเดียในคอลัมน์ 1

เพิ่มโซเชียลเน็ตเวิร์ก

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

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

จากนั้นไปที่แท็บการออกแบบและเปลี่ยนการจัดตำแหน่งโมดูล

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

ระยะห่าง

แก้ไขค่ามาร์จิ้นต่อไป

• ขอบบน: 12vw (เดสก์ท็อป), 5vw (แท็บเล็ตและโทรศัพท์)
• ขอบล่าง: 3vw (แท็บเล็ตและโทรศัพท์)

ชายแดน

และเพิ่ม '50vw' ให้กับแต่ละมุมเพื่อสร้างรูปทรงกลม

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

อัพโหลดภาพ

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

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

ไปที่แท็บออกแบบแล้วเลือกการจัดตำแหน่งรูปภาพด้านซ้าย

• การจัดตำแหน่งภาพ: ซ้าย

ขนาด

เปลี่ยนการตั้งค่าขนาดต่อไป

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

ระยะห่าง

และเพิ่มช่องว่างภายในที่เหมาะสม

• ช่องว่างภายในด้านขวา: 20vw

CSS ID

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

• CSS ID: หน้าแรก

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

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

ไปยังโมดูลถัดไป ซึ่งเป็นโมดูลข้อความ ป้อนเนื้อหา H2 ที่คุณเลือก

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

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

• หัวข้อ 2 แบบอักษร: มอนต์เซอร์รัต
• การจัดตำแหน่งข้อความหัวเรื่อง 2: ซ้าย
• หัวเรื่อง 2 สีข้อความ: #383838
• หัวเรื่อง 2 ขนาดข้อความ: 2vw (เดสก์ท็อป), 4vw (แท็บเล็ต), 5vw (โทรศัพท์)
• หัวเรื่อง 2 ระยะห่างตัวอักษร: -1px

ระยะห่าง

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

• ขอบบน: 6vw (เดสก์ท็อป), 10vw (แท็บเล็ต), 12vw (โทรศัพท์)
• ระยะขอบล่าง: 2vw (เดสก์ท็อป), 4vw (แท็บเล็ต), 6vw (โทรศัพท์)

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

ทัศนวิสัย

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

• แสดงตัวแบ่ง: ใช่

เส้น

แก้ไขสีของเส้น

• สีเส้น: #ffebc9

ขนาด

และเปลี่ยนการตั้งค่าการปรับขนาดตาม:

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

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

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

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

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

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

• แบบอักษรของข้อความ: Roboto
• การจัดตำแหน่งข้อความ: Justify
• สีข้อความ: #a8a8a8
• ขนาดตัวอักษร: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
• ระยะห่างของตัวอักษรข้อความ: 1px
• ความสูงของบรรทัดข้อความ: 2vw (เดสก์ท็อป), 3.5vw (แท็บเล็ต), 4.5vw (โทรศัพท์)

ระยะห่าง

เพิ่มค่าการเว้นวรรคที่กำหนดเองต่อไป

• ขอบบน: 3vw (เดสก์ท็อป), 5vw (แท็บเล็ต), 7vw (โทรศัพท์)
• ขอบล่าง: 3vw (เดสก์ท็อป), 5vw (แท็บเล็ต), 7vw (โทรศัพท์)
• ระยะขอบขวา: 20vw (เดสก์ท็อปและแท็บเล็ต), 5vw (โทรศัพท์)

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

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

ดำเนินการต่อโดยเพิ่มโมดูลปุ่มพร้อมสำเนาที่คุณเลือก

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

เลือกการจัดตำแหน่งปุ่มซ้ายในแท็บการออกแบบ

• การจัดตำแหน่งปุ่ม: ซ้าย

ปุ่ม

เปลี่ยนการตั้งค่าปุ่มตามลำดับ:

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
• สีข้อความของปุ่ม: #ffffff
• สีพื้นหลังของปุ่ม: #0072ff
• ความกว้างของขอบปุ่ม: 0px
• รัศมีเส้นขอบของปุ่ม: 0px
• แบบอักษรของปุ่ม: มอนต์เซอร์รัต
• น้ำหนักแบบอักษรของปุ่ม: กึ่งหนา

ระยะห่าง

และเล่นกับค่าการเว้นวรรคด้วย

• ขอบบน: 4vw (เดสก์ท็อป), 6vw (แท็บเล็ต), 8vw (โทรศัพท์)
• ขอบล่าง: 4vw (เดสก์ท็อป), 6vw (แท็บเล็ต), 8vw (โทรศัพท์)
• ด้านบน: 1.5vw (เดสก์ท็อป), 3vw (แท็บเล็ต), 4vw (โทรศัพท์)
• Padding ด้านล่าง: 1.5vw (เดสก์ท็อป), 3vw (แท็บเล็ต), 4vw (โทรศัพท์)
• Padding ซ้าย: 3vw (เดสก์ท็อป), 6vw (แท็บเล็ต), 8vw (โทรศัพท์)
• Padding ขวา: 3vw (เดสก์ท็อป), 6vw (แท็บเล็ต), 8vw (โทรศัพท์)

โคลนโมดูลทั้งหมดในคอลัมน์ 2 สองครั้ง & วางในลำดับเดียวกัน

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

เปลี่ยนโมดูลรูปภาพที่ซ้ำกัน #1 CSS ID

เปลี่ยน CSS ID ของ Image Module ที่ซ้ำกันครั้งแรก

• CSS ID: about

เปลี่ยนโมดูลรูปภาพที่ซ้ำกัน #2 CSS ID

ทำเช่นเดียวกันกับ Image Module ที่ซ้ำกันครั้งที่สอง

• CSS ID: บริการ

ซ่อนแถบเลื่อน & เพิ่มการเลื่อนแบบเรียบ

เปิดการตั้งค่าหน้า

ตอนนี้ เพื่อสร้างเอฟเฟกต์การเลื่อนที่ราบรื่นและซ่อนแถบเลื่อนของคอลัมน์ 2 เราจะเพิ่มโค้ด CSS สองสามบรรทัด เปิดการตั้งค่าหน้า

เพิ่ม CSS ที่กำหนดเอง

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

.scroll-column::-webkit-scrollbar {
display: none;
}

.scroll-column {
scroll-behavior: smooth;
}

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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