أفضل عادة تصميم رأس للعنصر | تعلم 10 حقائق قاتلة

نشرت: 2022-08-17

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

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

1. Bad Header falls down a company-01

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

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

ماذا تعتقد ستكون النتيجة؟ قطعا صفر!

لأن الحصول على منتج عالي الجودة بدون مقال جيد الإعداد للإعلان لا يؤتي ثماره.

Good header helps ranking up

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

ابق على اتصال حتى النهاية لمعرفة المزيد عن هذا.

لنبدأ!

what is an Elementor header

ما هو رأس العنصر؟

رأس Elementor أو رأس موقع الويب هو الجزء العلوي العلوي من موقع الويب حيث يكون الشعار والتنقل وأحيانًا معلومات أخرى مثل: نصوص وصور وصور متحركة ؛ تم العثور على الروابط والأزرار.

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

why header is important

لماذا الرأس مهم؟

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

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

فيما يلي بعض الأسباب التي تجعل العنوان مهمًا جدًا:

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

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

why is a header design needed

لماذا مطلوب تصميم رأس؟

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

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

لذلك ، يعد تصميم الرأس أمرًا ضروريًا لمساعدتك على تزيين رأسك بشكل أكثر دقة ودقة.

أنواع تصميمات الرأس التي نستخدمها عادةً في WordPress

هناك بعض تصميمات رؤوس مواقع الويب الشائعة التي نستخدمها في WordPress. يتم تقديمها أدناه:

elementor sticky header helps users read easily

-> تقلص الرأس اللاصق

إنه تصميم رأس موقع ويب يبدأ برأس عادي ، وعندما تبدأ في التمرير لأسفل ، يصبح العنوان أقصر أو أصغر قليلاً ، ثم يصبح شفافًا.

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

navigation bar or best navigation header help to catch the eyes of the visitors

-> رأس التنقل / أفضل رأس للتنقل

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

5. Mobile Header Design

-> تصميم رأس الجوال

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

hybrid header

-> رأس هجين

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

7. Vertical aligned Header

-> رأس محاذي رأسيًا

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

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

أجزاء من رأس مثالي لمواقع WordPress

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

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

دعنا نلقي نظرة على العناصر الأكثر شيوعًا التي يمكنك تضمينها في العنوان على موقع الويب الخاص بك:

  1. شعار
  2. قائمة التنقل
  3. أشرطة البحث
  4. أيقونات الوسائط الاجتماعية
  5. معلومات التواصل
  6. دعوة للعمل

الآن ، لمعلوماتك الكريمة ، سأتحدث بعمق عن هذه العناصر:

a logo

1. شعار

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

يجب أن يكون تصميم الشعار مختلفًا وساحرًا عن العناصر الأخرى في العنوان لجذب انتباه الزوار.

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

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

هناك مواقف شائعة ومقبولة تمامًا قد تعرفها:

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

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

simple script font helps navigating frequently

2. قائمة التنقل

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

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

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

9. Search Bars

3. أشرطة البحث

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

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

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

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

Social Icon GIF - BdThemes

4. أيقونات الوسائط الاجتماعية

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

contact information

5. معلومات الاتصال

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

11. Call to Action

6. دعوة للعمل

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

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

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

difference between a woocommerce site header and a normal site header

ما الفرق بين رأس موقع WooCommerce ورأس الموقع العادي؟

الآن ، يظهر هنا سؤال مهم: هل رأس موقع WooCommerce مشابه لرأس الموقع العادي؟ هل هناك أي اختلاف بينهما؟ حسنًا ، دعنا نكتشف ذلك أدناه:

رأس موقع WooCommerce:

  1. يحتوي على السياسة المتعلقة بالشركة.
  2. يُعلم الزوار بالمنتج.
  3. يحول الزوار إلى عملاء.
  4. يروج لجميع المنتجات والنوايا الحسنة للشركة.
  5. يغطي بشكل أساسي القسم المالي للشركة.
  6. يساعد على نمو شركة أكبر.
  7. إنه موجه نحو الهدف.

رأس موقع عادي:

  1. يحتوي على محادثة عامة أو دردشة شيت.
  2. انها لا تخبر الزوار عن أي منتج.
  3. لا يحول الزوار إلى عملاء.
  4. لا توجد عروض ترويجية حول أي منتج فيه.
  5. يناقش بشكل عام مواضيع مجهولة.
  6. إنه ليس مفيدًا لتوسيع شركة أكبر.
  7. انها ليست موجهة نحو الهدف.

10 حقائق قاتلة يجب أن تعرفها

كان لدينا ما يكفي من الحديث أعلاه! الآن ، اسمحوا لي أن أبلغكم عن الحقائق العشر القاتلة. هذه مذكورة أدناه:

the header clarifies your message to your audience

1. يوضح العنوان رسالتك إلى جمهورك

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

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

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

well-organized and well-structured header attracts visitors

2. عنوان جيد التنظيم وجيد التنظيم يجذب الزوار

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

  • صمم العنوان وفقًا لمبدأ "قانون المنطقة المشتركة" - حيث يظل الشعار والملاحة على منصة واحدة مع الحفاظ على مسافات متساوية ويعتبر كل منهما واحدًا.
  • احتفظ بـ CTA ، أي: اتصل بالمبيعات ، وتسجيل الدخول ، وجرب مجانًا ، في الزاوية اليمنى في العنوان الذي سيساعد الزائر على المضي قدمًا.
  • قم بطرح الأسئلة والنظرة العامة والميزات والتخطيط في التنقل الفرعي الذي سيجعل زوار موقعك مهتمين بموقعك.
  • قم بتمييز العنوان الرئيسي بإبقائه أكبر وأكثر سطوعًا باستخدام خطوط أكثر سمكًا وأكبر من الآخرين. سيجعل هذا التصميم الزائرين يركزون على العنوان ، ثم ينتقلون إلى معلومات إضافية.
Simple Fonts help visitors Easy To Read - BdThemes

3. الخطوط البسيطة تساعد الزوار على سهولة القراءة

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

يمكنك بحرية اختيار خط مكتوب بخط اليد أو مصنوع يدويًا للشعار لجعله فريدًا. عليك أن تتذكر هذه النقاط الثلاث حول الرأس:

  • لا تستخدم الخط المكتوب بخط اليد أو المصنوع في العنوان ، فسيكون من الصعب على الزوار قراءته. بدلاً من ذلك ، من الأفضل اختيار خط ويب serif أو sans serif للنص والمعلومات.
  • احتفظ بحجم الخط بحد أدنى 16 بكسل بحيث يتناسب مع منطقة الرأس.
  • يجب أن تكون نسبة تباين الألوان 4.5: 1 على الأقل بين الخطوط والخلفية.

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

white space makes reading easy

4. الفضاء الأبيض يجعل القراءة سهلة

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

  • حافظ على فجوة أساسية بين العناصر التي تجعل الشعار يلمع لتشجيع الزائرين على تسجيل الدخول.
  • احتفظ بغرفة مكافئة مع خطوط فاصلة دقيقة بين الروابط ، وهذا سيساعد الزائرين على التركيز عليها بشكل فردي.
  • امنح مساحة كافية في شريط البحث والتي ستساعد المستخدمين عمليًا في العثور على العناصر المطلوبة باستخدام منطقة واسعة.
  • يمكنك جعل خلفية الرأس كلها سوداء اللون ووضع كتلة بيضاء كبيرة في نهايتها تجذب الزوار ويمكن أن تكون CTA.
1. Shrinking sticky header - BdThemes

5. رأس مثبت الخطاف الزوار بشكل أسرع

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

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

  • عندما يبدأ الزائر في التمرير ، قم بتقليص حجمه.
  • قم بإحداث فرق واضح بين العنوان والمحتوى حتى يتمكن الزوار من التعرف عليهم.
  • استخدم الرسوم المتحركة ولكن اجعلها صغيرة.
elementor transparent header is good for navigation

6. الرأس الشفاف مفيد للتنقل

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

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

  • اجعل الشعار باللون الأبيض على اليسار وضع أيقونة قائمة الهامبرغر البيضاء على اليمين.
  • اجعل الفيديو أو الصورة غنية بلون يتباين جيدًا مع اللون الأبيض في أعلى كل صفحة.
  • حافظ على موقعك خفيف الوزن باستخدام العناصر المرئية الضرورية ولا تتنازل عن الشفافية في رؤية العنوان.
custom header design for mobile helps more engagement

7. تصميم رأس مخصص للجوال يساعد على زيادة المشاركة

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

لا جدال فيه ، ولكن يجب أن يحتوي العنوان الموجود على سطح المكتب على نفس العناصر الموجودة على الهاتف المحمول ، مما يعني أن تصميم الهاتف المحمول يجب أن يكون مختلفًا. ما عليك سوى جعل تصميم الرأس مناسبًا للجوّال.

لنقارن الفرق:

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

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

Visual element talk more than - BdThemes

8. العناصر المرئية تتحدث أكثر من النص

أنت تعلم جيدًا أن الصورة أقوى 100 مرة من كتلة النص. يمكنك الحصول على المزيد من حركة المرور من خلال تضمين العناصر المرئية في الرأس.

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

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

Animation to the Navigation makes the content user friendly - BdThemes

9. الرسوم المتحركة للملاحة تجعل المحتوى سهل الاستخدام

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

إليك عينة يمكنك الاستفادة منها:

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

انظر إلى هذا المثال الآخر:

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

دعنا نلقي نظرة على هذا المثال ، هنا يتم استخدام عنصر واجهة المستخدم Elementor:

  • يمكنك استخدام الرسوم المتحركة في التنقل باستخدام قالب جاهز في Elementor.
  • يمكنك إدراج قائمة التنقل على الصفحة من الملحق Elementor. الإضافات Elementor لها فائدة كبيرة هنا.
  • يمكنك أيضًا استخدام تأثيرات الحركة التي ستحرك قائمة التنقل بأكملها على الفور ، مما يجعل الصفحة المحددة تنبض بالحياة.
considering the header to content ratio drives more traffic

10. يؤدي النظر في نسبة الرأس إلى المحتوى إلى زيادة حركة المرور

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

دعنا نلقي نظرة على التنقل العمودي:

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

هناك مشكلة تتعلق بالفضاء يجب أن تأخذها في الاعتبار في التنقل العمودي.

الآن ، دعنا نلقي نظرة على التنقل الأفقي:

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

المكافأة: احصل على قوالب رأس مذهلة جاهزة في مكتبة قوالب Element Pack Pro

أخبار جيدة بالنسبة لك لإنشاء رأس ملفت للنظر!

ستسعد بمعرفة أن هناك العديد من قوالب الرؤوس الجاهزة في مكتبة قوالب Element Pack Pro حيث يمكنك العثور على العديد من التصميمات لإنشاء رؤوس مختلفة ساحرة. يمكنك استخدام هذه القوالب كما تحتاج فيما يتعلق بموقعك.

هذا ليس كل شيء ، يمكنك حتى تخصيص هذه القوالب لرأسك. يمكنك تخصيص رأس القالب كرأس ثابت لجذب الزوار.

يمكنك البحث في مكتبة قوالب Element Pack Pro لإنشاء رؤوس مذهلة تجذب المزيد من الزوار إلى موقعك.

اختر العنوان الخاص بك ، قيادة عملك

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

يمكنك ترسيخ مكانتك القوية في السوق عبر الإنترنت والمضي قدمًا في إبقاء منافسيك وراءك.

أتمنى أن يساعدك هذا كثيرًا. شكرا لك على قراءة هذا المقال بصبر. طاب يومك.