12 أمثلة على التنقل العمودي لديفي

عند إنشاء موقع ويب ، هناك الكثير من الأشياء المختلفة التي يجب مراعاتها. يبدأ عادةً بالطريقة التي تريد أن يظهر بها الشكل العام لموقع الويب الخاص بك ويشعر به. تريد أن يتطابق مع المحتوى الموجود على موقع الويب الخاص بك من أجل تمكين الرسالة التي تحاول إرسالها.

تعد القائمة الأساسية أحد العوامل التي تلعب دورًا رئيسيًا في كيفية تأثير موقع الويب الخاص بك على سلوك الزوار. مع 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 Brands هو موقع ويب للتجارة الإلكترونية لشركة Divi يبيع جميع أنواع الأشياء للأطفال ؛ من الفنون والحرف اليدوية إلى الأثاث والألعاب. يظهر الموقع على الفور نوع الشعور الذي يريدون تمثيله ؛ مرحة وجذابة.

تم اختيار التنقل العمودي في هذه الحالة أيضًا بشكل متعمد. هناك الكثير من الصفحات المختلفة ، إذا اختاروا القائمة العلوية ، فسيتم فقد الهيكل ولن تكون هناك مساحة كافية.

5. صور ديفلين

ربما يكون موقع Delvin Photos هو الموقع الأكثر أناقة بين كل المواقع المذكورة في هذا المنشور. تستخدم Delvin Photos موقعها على الويب لعرض جميع أعمالها بطريقة أصلية وجذابة لجذب عملاء جدد للخدمات التي تقدمها.

استخدموا التنقل العمودي للتأكيد على الأناقة التي يستخدمونها في بقية مواقعهم على الويب ومن خلال تضمين أيقونات الوسائط الاجتماعية في قائمتهم الأساسية ؛ يتأكدون أيضًا من أن الأشخاص يمكنهم الوصول إلى قنوات التواصل الاجتماعي في أي وقت أثناء إقامتهم على الموقع.

6. مكياج سواريه

Soiree Makeup هو موقع على شبكة الإنترنت يدور حول الماكياج. تم تصميم الموقع خصيصًا لتقديم خدمات الماكياج لفنان الماكياج. يُظهر الموقع على الفور البساطة والأناقة المتوقعة من كل فنان مكياج. ليس الكثير من الإسراف ولكن من الجميل أن ننظر إليه.

لا يشغل موقع الويب بشكل عام الشاشة بأكملها مما يجعل المحتوى أكثر تركيزًا. في التنقل العمودي ، يتجه معظم الانتباه إلى الشعار ومربع الاتصال.

يتيح تضمين مربع الاتصال في التنقل العمودي لفنان الماكياج التأكيد على أهم غرض موقع الويب ؛ الحصول على عملاء محتملين جدد وعملاء جدد وحجوزات جديدة.

7. ناثان ويلتون فوتوغرافي

Nathan Welton Photography هو ثاني موقع للتصوير الفوتوغرافي اخترناه لهذا المنشور. يعد استخدام التنقل العمودي لموقع التصوير الفوتوغرافي أكثر شيوعًا من مواقع الويب الأخرى. هذا عادة لأن الصور الموجودة على الموقع تتحدث عن نفسها.

يستخدم مالكو مواقع الويب الخاصة بالتصوير تنقلًا رأسيًا بسيطًا للحفاظ على التركيز على الصور من خلال وجود قائمة سهلة الاستخدام ولا تشتت الانتباه.

الصور التي استخدمها ناثان ويلتون على موقعه على الإنترنت هي بالضبط تلك ؛ إنهم مليئون بالمغامرة ويخبرون قصتهم الخاصة. يتوفر التنقل العمودي فقط للأغراض العملية ولا يقاطع الصفحة كما تفعل القائمة العلوية.

8. ليلي فوتوغرافي

Lilly Photography هو آخر موقع للتصوير الفوتوغرافي اخترناه لهذا المنشور. إن الشيء العظيم في هذا الموقع هو أنه يستخدم معرضًا على الصفحة الرئيسية.

يعرض المعرض العمل الذي تم القيام به في الماضي لخلق شعور معين بالتجربة. لأنه في النهاية ؛ يبحث الأشخاص عن مصور يلتقط صورًا تتماشى مع ما يتوقعونه.

يشبه التنقل العمودي التنقل العمودي الذي يستخدمه Nathan Welton ؛ تبسيطي ولكن إنجاز المهمة.

9. فيلم بيتسبرغ

فيلم بيتسبرغ هي منظمة لعرض الأفلام. أحد الأشياء اللطيفة التي قاموا بها هو إنشاء قائمة ثانية في الجزء العلوي من صفحتهم تسمح للزائرين بالحصول على المعلومات العملية.

على العكس من ذلك ، فإن التنقل العمودي مفيد إلى حد ما ولكنه يساعد الزائرين على فهم قصتهم ومهمتهم من خلال توجيههم إلى الصفحات الصحيحة. يساعد فصل الصفحات العملية والصفحات السردية عن بعضها البعض في سرد ​​القصص في القائمة الأساسية.

إلى جانب استخدام التنقل العمودي ، لم يستخدم Film Pittsburgh الحجم الكامل للشاشة مما ترك لهم مساحة لتحسين تصميمهم باستخدام صورة خلفية مناسبة.

10. بليندلوف

BlendLove هو متجر أطعمة يقع في أستراليا. لقد أنشأوا موقعًا على شبكة الإنترنت لإعلام عملائهم بجميع المعلومات العملية التي يحتاجون إلى معرفتها.

واحدة من الإضافات اللطيفة التي يقدمونها على موقعهم الإلكتروني هي فرصة شراء كتاب إلكتروني مليء بالطعام الصحي الذي يصنعونه. إنها طريقة لطيفة للتعامل مع العملاء ، والتعرف على من هم وحتى تحقيق الربح.

يحتوي موقع الويب نفسه على لوحة ألوان داكنة تخلق تباينًا رائعًا مع الشعار الذي لديهم. لقد تأكدوا من تناسق الألوان في جميع أنحاء موقع الويب الخاص بهم ، في التنقل العمودي أيضًا. من المهم التأكد من وجود تناسق لأن التنقل العمودي يشغل جزءًا كبيرًا نسبيًا من الشاشة ، في حين أن القائمة العلوية لا يمكن ملاحظتها عادةً.

11. بون أبيتيت

Bon Appetit هو موقع بلجيكي يركز على تنظيم ورش العمل التي تتضمن الكثير من النكهات والروائح. الأمثلة السابقة وهذا المثال يختلفان في شيء واحد مؤكد. يركز موقع Bon Appetit على المحتوى المكتوب أكثر من التركيز على المظهر.

تم تقسيم القائمة العمودية إلى 3 أنواع من القطع ؛ الشعار والصفحات والخدمات الإضافية مثل خدمة العملاء والشحن. يمنح الاختلاف في الأسلوب بين الصفحات والخدمات الإضافية شعورًا منظمًا إضافيًا ولمسة للموقع.

12. أكل المطعم التايلاندي

مطعم Eat Thai هو المثال الأخير في هذا المنشور. إنه مطعم متنقل مملوك محليًا يصل إلى هذه النقطة. لا يحتوي موقع الويب الخاص بهم على صفحات متعددة. بل أخذوا صفحة واحدة وركزوا على الشيء الأكثر أهمية ؛ الطعام. يستخدم الموقع لإعادة توجيه الأشخاص الذين يرغبون في الطلب إلى موقع ويب للطلب.

الشيء الجميل في التنقل العمودي المستخدم في هذا المثال هو أنه ليس هناك حقًا للتنقل ولكن هناك المزيد للإبلاغ عنه. يتتبع التنقل العمودي الزائر طوال فترة إقامته على موقع الويب ، مما يعني أن المعلومات تفعل ذلك أيضًا. لقد قدموا جميع المعلومات ذات الصلة في القائمة ، جنبًا إلى جنب مع الرموز الاجتماعية و CTA "اطلب الآن".

افكار اخيرة

نأمل أن يمنحك هذا المنشور الكثير من الإلهام الذي يساعدك على التفكير في مفاهيم رائعة لمواقع الويب الحالية لديك أو مواقع الويب المستقبلية التي تنشئها. إذا كان لديك أي اقتراحات أو تعليقات ؛ لا تتردد في ترك تعليق في قسم التعليقات أدناه! وأثناء وجودك هناك ، أخبرنا ؛ ما نوع موقع الويب الذي ستستخدم التنقل العمودي له؟

تأكد من الاشتراك في النشرة الإخبارية عبر البريد الإلكتروني وقناة YouTube حتى لا يفوتك إعلان كبير أو نصيحة مفيدة أو Divi freebie!

صورة مميزة بواسطة LuckyDesigner / shutterstock.com