12 ตัวอย่างการนำทางแนวตั้งของ Divi

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

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

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

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

1. Master en Diseno de Interiores

Master en Diseno de Interiores เป็นเว็บไซต์ที่น่าทึ่งที่เกี่ยวกับการออกแบบตกแต่งภายใน ในภาพด้านบน คุณจะเห็นว่าพวกเขาใช้เมนูแนวตั้งเพื่อเพิ่มความพิเศษให้กับเว็บไซต์ของตนได้อย่างไร

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

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

2. นางแบบออนท็อป

Model On Top เป็นเว็บไซต์การจัดการโมเดล เว็บไซต์นี้สร้างด้วย Divi ทำให้เกิดความสามัคคีและแสดงความเป็นมืออาชีพและความเชี่ยวชาญที่พวกเขาต้องการเชื่อมโยงไปยังบริษัทของพวกเขา

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

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

3. Art-On-The-Run Filmschool เบอร์ลิน

Art-On-The-Run Filmschool Berlin นำเสนอด้านศิลปะที่โรงเรียนภาพยนตร์ต้องการบนเว็บไซต์ของพวกเขาได้อย่างสมบูรณ์แบบ การนำทางแนวตั้งมีวัตถุประสงค์พิเศษในภาพรวม

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

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

4. อเล็กซ์ แบรนด์ส

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

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

5. รูปภาพ Devlin

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

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

6. ซอยรี เมคอัพ

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

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

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

7. นาธานเวลตันการถ่ายภาพ

Nathan Welton Photography เป็นเว็บไซต์การถ่ายภาพแห่งที่สองที่เราเลือกสำหรับโพสต์นี้ การใช้การนำทางแนวตั้งสำหรับเว็บไซต์การถ่ายภาพนั้นพบได้บ่อยกว่าเว็บไซต์อื่นๆ มักเป็นเพราะรูปภาพบนเว็บไซต์พูดเพื่อตัวเอง

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

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

8. การถ่ายภาพลิลลี่

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

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

การนำทางแนวตั้งคล้ายกับการนำทางแนวตั้งที่นาธาน เวลตันใช้ เรียบง่ายแต่ได้งานทำ

9. ภาพยนตร์พิตส์เบิร์ก

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

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

นอกจากการใช้การนำทางแนวตั้งแล้ว Film Pittsburgh ยังไม่ได้ใช้ขนาดหน้าจอทั้งหมดซึ่งทำให้พวกเขามีพื้นที่ว่างในการปรับปรุงการออกแบบด้วยภาพพื้นหลังที่เกี่ยวข้อง

10. ผสมผสานความรัก

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

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

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

11. Bon Appetit

Bon Appetit เป็นเว็บไซต์เบลเยียมที่เน้นการจัดเวิร์กช็อปที่เกี่ยวข้องกับรสชาติและกลิ่นมากมาย ตัวอย่างก่อนหน้านี้และตัวอย่างนี้แตกต่างในสิ่งหนึ่งอย่างแน่นอน เว็บไซต์ Bon Appetit ให้ความสำคัญกับเนื้อหาที่เป็นลายลักษณ์อักษรมากกว่าที่มองเห็นได้

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

12. ร้านอาหารอีทไทย

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

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

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

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

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

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