إضافة زر في قائمة التنقل في الرأس

نشرت: 2021-06-22

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

فائدة إضافة زر في قائمة التنقل في العنوان

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

كيف يواجه الناس عادة قائمة التنقل الرئيسية

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

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

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

فائدة إضافة زر

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

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

نصائح التخصيص

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

كيفية إضافة زر في قائمة التنقل في الرأس

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

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

إضافة كود CSS

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

.menu-button {
لون الخلفية: # eb5e28 ؛
الحد: 1 بكسل ؛
نصف قطر الحدود: 3 بكسل ؛
-webkit-box-shadow: 1px 1px 0px 0px # 2f2f2f ؛
-moz-box-shadow: 1px 1px 0px 0px # 2f2f2f ؛
مربع الظل: 1px 1px 0px 0px # 2f2f2f ؛
}
.menu-button a،. menu-button a: hover،. menu-button a: active {
اللون: #fff! مهم ؛
}

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

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

وبهذا ، تكون قد انتهيت من إضافة زر في قائمة التنقل الرئيسية.

افكار اخيرة

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