كيفية إضافة شريط أعلى في WordPress مع Elementor

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

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

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

ما هو الشريط العلوي؟

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

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

ما هو Top Bar المدعو على موقع ويب؟

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

• شريط الإعلان - يستخدم لتبادل الإعلانات وإخطارات الأحداث والتحديثات المهمة.

• شريط الإخطار- يعرض العروض المحدودة للوقت ، وأخبار صيانة النظام ، والرسائل العاجلة.

• بار ترويجي - يبرز العروض الترويجية الخاصة ، والخصومات الحصرية ، والحملات لزيادة المبيعات.

• شريط المعلومات - يعرض أرقام الاتصال وتفاصيل التسوق والعناوين المحلية وساعات العمل.

• شريط Sticky - يبقى ثابتًا في الجزء العلوي من الموقع حتى عندما يقوم المستخدمون بالتمرير والصفحات.

• شريط عائم - يتحرك عند التمرير والصفحات لضمان وجود ملحوظ.

كيفية إضافة شريط أعلى في WordPress مع Elementor

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

المتطلبات المسبقة: تثبيت elementor أو Happyaddons

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

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

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

• عنصر
• Happyaddons

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

الخطوة 01: انتقل إلى HappyAddons موضوع باني

انتقل إلى Happyaddons> باني موضوع . مثل المكون الإضافي Elementor ، يمكنك إنشاء رأس ، تذييل ، قالب منشور المدونة ، وصفحة الأرشيف مع Builder of the Happyaddons.

الخطوة 02: انتقل إلى قسم الرأس

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

تعلم كيفية إنشاء محتوى خارج canvas في Elementor.

الخطوة 03: أضف حاوية جديدة فوق الرأس

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

الخطوة 04: تخصيص الشريط العلوي وإضافة محتوى إليه

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

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

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

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

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

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

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

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

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

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

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

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

إليك دليل حول كيفية إنشاء صفحة ويب infographic مع Elementor.

الخطوة 05: تكوين الإعدادات المتقدمة للشريط العلوي

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

الخطوة 06: إخفاء الشريط العلوي على نوع الجهاز

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

الخطوة 07: اجعل الشريط العلوي مستجيبًا للهاتف المحمول

انقر فوق خيار الوضع المتجاوب على تذييل لوحة Elementor. ثم ، حدد وضع Portrait Mobile .

يمكنك أن ترى أن محتوى الشريط العلوي يظهر في ثلاثة أسطر وليس محاذاة مثالية ، على عكس كيفية رؤيته في وضع سطح المكتب.

لجعل النص يبدو جيدًا لحجم الشاشة ، قم بالتخصيصات التي تحتاجها من خلال البقاء على وضع صورة المحمول.

لقد قمنا بمحاذاة النصوص مركزية. ألا تبدو أفضل الآن؟ يمكنك تخصيصها بأي طريقة تريدها.

الخطوة 08: نشر/تحديث التغييرات

عند الانتهاء من جميع التخصيصات ، انقر فوق الزر "نشر/تحديث" في أسفل لوحة Elementor للحفاظ على جميع التغييرات.

استكشف كيفية إنشاء Lightbox في WordPress مع Elementor.

الخطوة 09: معاينة الشريط العلوي على الموقع الإلكتروني

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

وبالتالي ، يمكنك بسهولة إنشاء شريط أعلى على WordPress باستخدام المكون الإضافي Elementor مجانًا.

الأفكار النهائية

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

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

إذا كان لا يزال لديك أي ارتباك أو استفسارات في الاعتبار ، فأخبرنا بها من خلال مربع التعليق أدناه.