สร้างรายการการนำทางพอร์ตโฟลิโอที่สามารถเลื่อนได้ด้วยเอฟเฟกต์การเลื่อนของ Divi

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

อ่านต่อเพื่อสร้างการออกแบบใหม่หรือดาวน์โหลดไฟล์ JSON ได้ฟรี

ดูตัวอย่าง

ก่อนที่เราจะเริ่มต้นบทช่วยสอน มาดูการออกแบบหน้าจอขนาดต่างๆ กัน

เดสก์ทอป

มือถือ

โครงลวด

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

ดาวน์โหลดส่วนฮีโร่ฟรี

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

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

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

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

ดาวน์โหลด

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

1. สร้างส่วนใหม่

เพิ่มมาตรา

พื้นหลัง

เริ่มต้นด้วยส่วนปกติในหน้าใหม่หรือหน้าที่มีอยู่ ก่อนเพิ่มแถวหรือโมดูลใดๆ ให้เพิ่มสีพื้นหลังในส่วน

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

ระยะห่าง

เพิ่มระยะห่างเพียงพอในส่วนสำหรับเอฟเฟกต์การเลื่อนเพื่อทำเวทย์มนตร์เช่นกัน

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

2. สร้างรายการการนำทางพอร์ตโฟลิโอที่เลื่อนได้

เพิ่มแถว 1

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

เพิ่มแถวแรกและเลือกโครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

ปรับความกว้างของแถวถัดไป

• ความกว้าง: 90%
• ความกว้างสูงสุด: 2560px

ระยะห่าง

จากนั้นปรับการตั้งค่าระยะห่าง

• Padding ซ้าย
  • เดสก์ท็อป: 130px
  • แท็บเล็ตและโทรศัพท์: 50px

ป้ายผู้ดูแลระบบ

และติดป้ายแถว

• Admin Label: แถวที่ 1

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

เนื้อหา

เพิ่มโมดูลข้อความสำหรับชื่อเรื่อง แทรกเนื้อหา H1 ที่คุณเลือก

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

ไปที่แท็บออกแบบและจัดรูปแบบข้อความชื่อดังต่อไปนี้:

• ระดับหัวเรื่อง: H1
• แบบอักษร: Alata
• น้ำหนัก: หนา
• สี: #a3f7bf
• ขนาด
  • เดสก์ท็อป: 190px
  • แท็บเล็ต: 120px
  • โทรศัพท์: 50px
• การเว้นวรรคจดหมาย
  • เดสก์ท็อปและแท็บเล็ต: 7px
  • โทรศัพท์: 8px

เอฟเฟกต์เลื่อน

สุดท้ายแต่ไม่ท้ายสุด ให้เพิ่มเอฟเฟกต์เลื่อนเข้าและออกที่แท็บขั้นสูง

• เปิดใช้งานเอฟเฟกต์: เฟดเข้าและออก
• วิวพอร์ตด้านล่าง
  • ตำแหน่ง: 100%
  • ความทึบเริ่มต้น:100%
• ความทึบปานกลาง
  • ตำแหน่ง: 50%
  • กลาง: 100%
• วิวพอร์ตด้านบน
  • ตำแหน่ง: 80%
  • ความทึบสิ้นสุด: 20%

เพิ่มแถว2

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

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

ป้ายผู้ดูแลระบบ

ติดป้ายกำกับแถว

• Admin Label: แถว 2

ขนาด

ปรับการตั้งค่าการปรับขนาดด้วย

• ความกว้างของรางน้ำ: 1
• ความกว้าง: 80%
• ความกว้างสูงสุด: 1920px

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

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

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

• องค์ประกอบหลัก: ความกว้าง: 20% !important

width: 20% !important }

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

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

ทำเช่นเดียวกันสำหรับคอลัมน์ที่สอง

• องค์ประกอบหลัก: ความกว้าง: 80% !important

width: 80% !important }

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

เนื้อหา

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

• ข้อความปุ่ม: ดู

ลิงค์

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

• URL ลิงก์ของปุ่ม: #VB

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

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

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

ปุ่ม

จากนั้นจัดรูปแบบปุ่มตามนี้:

• รูปแบบที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดตัวอักษร
  • เดสก์ท็อป: 30px
  • แท็บเล็ต: 25px
  • โทรศัพท์: 20px
• สี: ขาว #ffffff
• พื้นหลัง: สีเทาเข้ม #222831
• ความกว้างของเส้นขอบ: 0px
• รัศมีเส้นขอบ: 0px
• ระยะห่างระหว่างตัวอักษร: 1px
• แบบอักษร: Alata
• แสดงไอคอนปุ่ม: ไม่

ระยะห่าง

ทำการเปลี่ยนแปลงการตั้งค่าการเว้นวรรคด้วย

• แผ่นรองด้านบน
  • เดสก์ท็อป: 25px
  • แท็บเล็ต: 15px
  • โทรศัพท์: 5px

เอฟเฟกต์เลื่อน

และเพิ่มเอฟเฟกต์การเลื่อนเข้าและออก

• เปิดใช้งานเอฟเฟกต์: เฟดเข้าและออก
• วิวพอร์ตด้านล่าง
  • ตำแหน่ง: 40%
  • ความทึบเริ่มต้น:0%
• ความทึบปานกลาง
  • ด้านล่าง: 45%
  • กลาง: 100%
  • ด้านบน: 55%
• วิวพอร์ตด้านบน
  • ตำแหน่ง: 60%
  • ความทึบสิ้นสุด: 0%

กล่องเงา

ก่อนไปยังโมดูลถัดไป ให้เพิ่มเงากล่องในการตั้งค่าโฮเวอร์ของปุ่ม

• กล่องเงา: ตัวเลือกที่ 4
• ตำแหน่งแนวนอน: 0px
• ตำแหน่งแนวตั้ง
  • วางเมาส์เหนือ: 5px
• ความชัดเจนของการเบลอ: 0px
• ความแรงของการแพร่กระจาย: 0px
• สีเงา: สีเขียวอควา #a3f7bf

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

เนื้อหา

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

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

ไปที่แท็บออกแบบและจัดรูปแบบข้อความชื่อดังต่อไปนี้:

• ระดับหัวเรื่อง: H3
• แบบอักษร: Alata
• สี
  • เดสก์ท็อป: สีขาว #ffffff
  • โฮเวอร์: อควากรีน #a3f7bf
• ขนาดตัวอักษร
  • เดสก์ท็อป: 80px
  • แท็บเล็ต: 65px
  • โทรศัพท์: 38px

เอฟเฟกต์เลื่อน

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

• เปิดใช้งานเอฟเฟกต์: เฟดเข้าและออก
• วิวพอร์ตด้านล่าง
  • ตำแหน่ง: 40%
  • ความทึบเริ่มต้น: 15%
• ความทึบปานกลาง
  • ด้านล่าง: 45%
  • กลาง: 100%
  • ด้านบน: 55%
• วิวพอร์ตด้านบน
  • ตำแหน่ง: 60%
  • ความทึบสิ้นสุด: 15%

ทำซ้ำแถว2

หากต้องการทำรายการการนำทางให้สมบูรณ์ ให้ทำซ้ำแถวนี้สามครั้ง แถวใหม่จะถูกจัดลำดับใหม่ 2, 3 และ 4

ปรับแถว 3

ป้ายชื่อผู้ดูแลแถว

เปลี่ยนป้ายกำกับผู้ดูแลระบบของแถวจาก 2 เป็น 3

• Admin Label: แถว 3

โมดูลปุ่ม

เปลี่ยนลิงก์สมอจาก #VB เป็น #WEB

• URL ลิงก์ของปุ่ม: #WEB

โมดูลข้อความ

เปลี่ยนเนื้อหา H3 ในโมดูลข้อความด้วย

• เนื้อความ: เว็บไซต์

ปรับแถว 4

ป้ายชื่อผู้ดูแลแถว

เปลี่ยนป้ายกำกับผู้ดูแลระบบของแถวจาก 2 เป็น 4

• Admin Label: แถวที่ 4

โมดูลปุ่ม

เปลี่ยนลิงก์สมอจาก #VB เป็น #MA

• URL ลิงก์ของปุ่ม: #MA

โมดูลข้อความ

เปลี่ยนเนื้อหา H3 ด้วย

• เนื้อความ: แอพมือถือ

ปรับแถว 5

ป้ายชื่อผู้ดูแลแถว

เปลี่ยนป้ายกำกับผู้ดูแลระบบของแถวจาก 2 เป็น 5

• Admin Label: แถวที่ 5

ระยะห่างแถว

เพิ่มระยะขอบด้านล่าง

• ขอบล่าง
  • เดสก์ท็อป 230px
  • แท็บเล็ต: 100px
  • โทรศัพท์: 60px

โมดูลปุ่ม

เปลี่ยนลิงก์สมอจาก #VB เป็น #UX

• URL ลิงก์ของปุ่ม: #UX

โมดูลข้อความ

และเปลี่ยนเนื้อหา H3 ที่นี่ด้วย

• เนื้อความ: การออกแบบ UX

3. สร้างรายการผลงาน

เพิ่มแถว 6

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

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

มาสร้างไอเท็มกันเถอะ เพิ่มแถวที่มีหนึ่งคอลัมน์

ป้ายผู้ดูแลระบบ

อย่าลืมติดป้ายกำกับแถวใหม่

• Admin Label: แถว 6

CSS ID & คลาส

แทรก CSS ID ที่ตรงกันในแท็บขั้นสูง

• CSS ID: VB

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

ทัศนวิสัย

เพิ่มตัวแบ่งที่มองไม่เห็นลงในคอลัมน์ของแถว

• แสดงตัวแบ่ง: ไม่

ซ้ำแถว 6

ทำซ้ำแถวนี้สามครั้ง แถวใหม่จะถูกจัดลำดับใหม่ 8, 10 และ 12

ปรับแถว8

ป้ายผู้ดูแลระบบ

เปลี่ยนป้ายผู้ดูแลระบบจาก 6 เป็น 8

• Admin Label: แถว 8

CSS ID & คลาส

เปลี่ยน CSS ID จาก VB เป็น WEB

• CSS ID: WEB

ปรับแถว10

ป้ายผู้ดูแลระบบ

เปลี่ยนป้ายผู้ดูแลระบบจาก 6 เป็น 10

• Admin Label: แถว 10

CSS ID & คลาส

เปลี่ยน CSS ID จาก VB เป็น MA

• CSS ID: MA

ปรับแถว 12

ป้ายผู้ดูแลระบบ

เปลี่ยนป้ายผู้ดูแลระบบจาก 6 เป็น 12

• Admin Label: แถว 12

CSS ID & คลาส

ป้ายผู้ดูแลระบบ

เปลี่ยน CSS ID จาก VB เป็น UX

• CSS ID: UX

เพิ่มแถว 7

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

ปล่อยให้สี่แถวมีตัวแบ่งตรงที่สำหรับตอนนี้ เพิ่มแถวใหม่ที่มีหนึ่งคอลัมน์

พื้นหลัง

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

• ภาพพื้นหลัง: ภาพถ่าย
  • การผสมผสานภาพ: ทวีคูณ
• พื้นหลังไล่โทนสี
  • สี 1: เทาเข้ม #222831
  • สี 2: โปร่งใส
  • ประเภท: เชิงเส้น
  • ทิศทาง: 90deg
  • ตำแหน่งเริ่มต้น: 50%
  • ตำแหน่งสุดท้าย: 100%
  • วางการไล่ระดับสีเหนือภาพพื้นหลัง: ใช่

ป้ายผู้ดูแลระบบ

ติดป้ายกำกับแถว

• Admin Label: แถว 7

ขนาด

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

• ความกว้าง: 80%
• ความกว้างสูงสุด: 2560px
• การจัดตำแหน่ง: ศูนย์

ชายแดน

เพิ่มมุมโค้งมนด้วย

• มุมโค้งมน: 25px

เอฟเฟกต์เลื่อน

และเปิดใช้งานเอฟเฟกต์การเลื่อนเข้าและออก

• เปิดใช้งานเอฟเฟกต์: เฟดเข้าและออก
  • ความทึบเริ่มต้น: 0%
  • ความทึบปานกลาง: 100%
    • ตำแหน่ง: 80%
  • ความทึบสิ้นสุด: 20%

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

เนื้อหา

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

• ชื่อเรื่อง: Visual Branding
• ปุ่ม: ค้นหาข้อมูลเพิ่มเติม
• เนื้อหา: ข้อความอธิบาย

พื้นหลัง

ลบสีพื้นหลังเริ่มต้น

• ความเป็นมา: ไม่มี

ลิงค์

เพิ่มลิงค์ไปยังหน้าที่เกี่ยวข้อง เราจะใส่ # สำหรับตอนนี้

• ลิงค์: #

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

จัดรูปแบบข้อความชื่อเรื่องถัดไป

• ระดับหัวเรื่อง: H2
• แบบอักษร: Alata
• สี: ขาว #ffffff
• ขนาด
  • เดสก์ท็อป: 70px
  • แท็บเล็ต: 60px
  • โทรศัพท์: 48px
• ระยะห่างระหว่างตัวอักษร: 1px

เนื้อความ

จัดรูปแบบข้อความเนื้อหาด้วย

• แบบอักษร: Lato
• สี: ขาว #ffffff
• ขนาด
  • เดสก์ท็อป: 19px
  • แท็บเล็ต: 20px
  • โทรศัพท์: 18px
• ความสูงของสาย: 1.8em

ปุ่ม

ไปที่การตั้งค่าปุ่มและใช้การเปลี่ยนแปลงต่อไปนี้:

• สไตล์ที่กำหนดเอง: ใช่
• ขนาดตัวอักษร: 20px
• สีข้อความ: เทาเข้ม #222831
• พื้นหลัง: Aqua Green #a3f7bf
• รัศมีเส้นขอบ: 9px
• ระยะห่างระหว่างตัวอักษร: 1px
• แบบอักษรของปุ่ม: Alata
• ขอบบน: 35px

ขนาด

ปรับขนาดของโมดูลด้วย

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

ระยะห่าง

เพิ่มช่องว่างภายในโมดูลด้วย

• ช่องว่างภายในด้านซ้าย:
  • เดสก์ท็อป: 90px
• ช่องว่างภายในซ้ายและขวา:
  • แท็บเล็ต: 50px
  • โทรศัพท์: 40px

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

สุดท้ายแต่ไม่ท้ายสุด เพิ่มโค้ด CSS หนึ่งบรรทัดให้กับชื่อโปรโมชันในแท็บขั้นสูง

• ชื่อโปรโมชัน: padding-bottom: 30px;

padding-bottom: 30px; }

ซ้ำแถว7

ทำซ้ำแถว 7 สามครั้ง แถวใหม่จะถูกจัดลำดับใหม่ 9, 11 และ 13

ปรับแถว 9

พื้นหลัง

เปลี่ยนภาพพื้นหลังและเปลี่ยนทิศทางของการไล่ระดับสี

• ภาพพื้นหลัง: รูปภาพใหม่
• พื้นหลังไล่โทนสี
  • สี 1: โปร่งใส
  • สี 2: เทาเข้ม #222831
  • ตำแหน่งเริ่มต้น: 0%
  • ตำแหน่งสุดท้าย: 50%

ป้ายผู้ดูแลระบบ

อัปเดตป้ายกำกับผู้ดูแลระบบของแถวจาก 7 เป็น 9

• Admin Label: แถวที่ 9

ปรับโมดูลการเรียกร้องให้ดำเนินการในแถวที่ 9

เนื้อหา

อัปเดตเนื้อหาของโมดูล

• ชื่อเรื่อง: เว็บไซต์
• เนื้อหา: ข้อความอธิบายใหม่

ลิงค์

อัพเดทลิงค์ด้วยนะครับ

• ลิงค์: ลิงค์ใหม่

ขนาด

เปลี่ยนการจัดตำแหน่งของโมดูลจากซ้ายไปขวา

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

ระยะห่าง

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

• ช่องว่างภายในด้านขวา
  • เดสก์ท็อป: 90px

ปรับแถว 11

พื้นหลัง

เปลี่ยนภาพพื้นหลังในแถวใหม่

• ภาพพื้นหลัง: อีกภาพ

ป้ายผู้ดูแลระบบ

อัปเดตป้ายกำกับผู้ดูแลระบบของแถวจาก 7 เป็น 11

• ป้ายผู้ดูแลระบบ: แถวที่ 11

ปรับโมดูลการเรียกร้องให้ดำเนินการในแถว 11

เนื้อหา

เปลี่ยนเนื้อหาภายในโมดูลการเรียกร้องให้ดำเนินการ

ลิงค์

แก้ไขลิงค์ด้วยนะครับ

• ลิงค์: ลิงค์ใหม่

ปรับแถว13

พื้นหลัง

เปลี่ยนภาพพื้นหลังและเปลี่ยนทิศทางของการไล่ระดับสี

• ภาพพื้นหลัง: ภาพถ่ายใหม่
• พื้นหลังไล่โทนสี
  • สี 1: โปร่งใส
  • สี 2: เทาเข้ม #222831
  • ตำแหน่งเริ่มต้น: 0%
  • ตำแหน่งสุดท้าย: 50%

ป้ายผู้ดูแลระบบ

เปิดแท็บป้ายกำกับผู้ดูแลระบบและอัปเดตหมายเลขแถวเป็น 13

ปรับโมดูลการเรียกร้องให้ดำเนินการในแถวที่ 13

เนื้อหา

อัปเดตเนื้อหาของโมดูล

• ชื่อเรื่อง: UX Design
• เนื้อหา: ข้อความอธิบายใหม่

ลิงค์

อัพเดทลิงค์ด้วยนะครับ

• ลิงค์: ลิงค์ใหม่

ขนาด

เปลี่ยนการจัดตำแหน่งของโมดูลจากซ้ายไปขวา

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

ระยะห่าง

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

• ช่องว่างภายในด้านขวา
  • เดสก์ท็อป: 90px

จัดเรียงแถวใหม่

ย้ายแถว 7, 9 และ 11

วางแถวในลำดับที่ถูกต้องตามป้ายกำกับของผู้ดูแลระบบ

เปรียบเทียบ Wireframe ของคุณ

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

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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