24 أمثلة على رؤوس مواقع الويب واتجاهات ونصائح للتحويل

تختلف مواقع الويب من حيث الأسلوب والشكل والجودة. لكن هناك شيء واحد مشترك بينهم جميعًا؟ الرؤوس - هذا الشريط في الجزء العلوي لتسهيل التنقل.

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

في هذا المنشور ، سنشارك 24 مثالًا لرأس موقع الويب أثناء التقسيم:

• بالضبط ما هو رأس الموقع
• ما يجب تضمينه في عنوان موقع الويب الخاص بك
• أفضل الممارسات لتحسين التحويل

بهذه الطريقة ، يمكنك توفير تجربة مستخدم قوية مع دعم أهدافك التسويقية أيضًا.

ما هو رأس الموقع؟

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

إليك رأس موقع ويب أساسي جدًا ويمكن التعرف عليه على الفور:

كما أشرنا أعلاه ، فإن رؤوس مواقع الويب تتحمل مسؤولية مزدوجة:

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

ما الذي يجب أن يتضمنه رأس موقع الويب؟

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

شعار

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

روابط ملاحية

هذا أيضًا أساسي لأي عنوان موقع. عادةً ما تريد الاحتفاظ بخيارات التنقل الرئيسية بين 5-7 عناصر ، ولكن الصفحات التي ترتبط بها ستختلف وفقًا لمكانك. بالنسبة لبعض الشركات ، ترتبط قائمة التنقل بصفحة عنا ، أو صفحة المنتج أو الخدمات ، وصفحة الأسعار ، وصفحة الموارد ، وصفحة الاتصال بنا. بالنسبة للآخرين ، يتم الانتقال إلى صفحة الوظائف أو صفحة المرضى لأول مرة. كل هذا يتوقف على الصناعة.

تبدو معظم رؤوس SaaS ومواقع الويب التقنية كما يلي:

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

شريط البحث

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

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

عربة التسوق

عنصر أساسي في مواقع التجارة الإلكترونية ، يجب أن يكون CTA هذا في أعلى اليمين وإما عربة تسوق أو أيقونة حقيبة تسوق.

أزرار الوسائط الاجتماعية

على الرغم من أنها تُعرض بشكل أكثر شيوعًا في تذييل موقع الويب ، إلا أن بعض رؤوس مواقع الويب تتضمن روابط للقنوات الاجتماعية. هذا مثال:

مجال تسجيل الدخول

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

CTA

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

أمثلة رأس الموقع والاتجاهات

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

رأس أحادي الخط مع شعار بمحاذاة إلى اليسار

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

رأس من سطر واحد مع شريط إعلام

على الرغم من أن العنوان نفسه عادي جدًا ، إلا أن اللافتة الموجودة في الأعلى تهدف إلى جذب الانتباه إلى شيء جديد ومهم و / أو مثير. استخدم Elementor هذا مؤخرًا ليعلن أنه يقدم الآن استضافة سحابية لـ WordPress.

يستخدم تصنيف SE حاليًا شريط التنبيهات الخاص به لتعزيز الدعم لأوكرانيا:

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

رأس ذو مستويين

يمكن أن يساعد العنوان المكون من مستويين في تقديم المزيد من خيارات التنقل دون إغراق الزائرين بسطر واحد مستمر من الرموز.

رأس من طبقتين مع شريط الإعلام

أضافت Amplitude شريط إعلام فوق رأسها مزدوج الطبقات للترويج لمؤتمرها القادم. يتساوى طول شريط الإشعارات مع العنوان ، مما يجعله أقل تشوشًا ويشبه إلى حد بعيد قسمًا منفصلاً من الموقع.

رأس مع شريط أدوات (شريط لاصق)

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

يلتصق هذا العنوان بك حتى نهاية الموقع.

رأس عائم

كما هو موضح في الصفحة الرئيسية لـ Mixpanel ، فإن الرأس العائم يشبه الشريط اللاصق ، والفرق هو أنه عند التمرير لأسفل ، ترى صفحة الويب أسفل الرأس وفوقه ، مما يؤدي إلى إنشاء تأثير عائم.

Header مع قائمة ميجا

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

رأس مع التنقل متعدد المواقع

تُرى عادةً على مواقع البيع بالتجزئة والتجارة الإلكترونية ، تتيح الرؤوس متعددة التنقل للمستخدمين الانتقال بسهولة من موقع شركة شقيقة إلى موقع آخر.

رأس رأسي محاذاة إلى اليسار

أول أمثلة الرؤوس غير التقليدية ، ستجد العديد من عناصر قائمة التنقل نفسها معلقة عموديًا إلى اليسار.

رأس عمودي محاذاة لليمين

نفس المفهوم ولكن هذه المرة محاذاة رأسيًا على اليمين. أخذ هؤلاء الرجال خطوة إلى الأمام من خلال تعليق كل عنصر من عناصر القائمة عموديًا أيضًا.

همبرغر منزلق

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

هذا هو الشيء نفسه ، فقط على الجانب الآخر:

شريحة استحواذ كاملة

يمكنك أن تصبح جريئًا حقًا وتمديد القائمة على الشاشة بأكملها ، كما يفعل Vimeo:

أفضل ممارسات رأس موقع الويب

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

تجدر الإشارة إلى أنه إذا كنت في حاجة إليها ، فلن تضطر إلى فقد شريط البحث أو حتى زر CTA عند التحسين للجوال. إليك كيفية قيام Hubspot بذلك:

• التزم بالخطوط البسيطة. الوضوح هي كل شيء عندما يتعلق الأمر بتجربة المستخدم (وكما اتضح ، علم نفس كتابة النصوص أيضًا) ، وهي مهمة بشكل مضاعف عندما يتعلق الأمر بالعنصر الأساسي الأكثر قابلية للنقر في موقعك. يعتبر خط Sans Serif شائعًا في نص رأس موقع الويب لأنه مقروء للغاية.

الشيء الجيد أن Lemonade لم تستخدم خط شعارها لخط رأسها.

رؤوس مواقع الويب: شكل فني دقيق

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

عن المؤلف

Yoni Yampolsky هي مديرة التسويق في Elementor. مع أكثر من 10 ملايين مستخدم نشط ، يمكّن Elementor أي شخص تقريبًا من إنشاء مواقع WordPress مذهلة ، خالية من التعليمات البرمجية.