كيفية إنشاء رأس لزج في Elementor (دليل 2026)

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

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

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

ما هو الرأس اللزج في الواقع

يتم تسمية سلوكين مختلفين بنفس الاسم، والخلط بينهما هو السبب وراء انتهاء الأمر بالناس بالبحث عن بيئة غير موجودة.

أ رأس ثابت يظهر على الشاشة منذ لحظة تحميل الصفحة وعدم مغادرتها أبدًا. هذا ما position: fixed يفعل، وهذا ما نبنيه هنا.

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

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

المشكلة: يتم تمرير رأسك بعيدًا

ها هي نقطة البداية. يوجد رأس Elementor عادي في أعلى الصفحة مثل أي حاوية أخرى.

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

هذه هي المشكلة برمتها التي يحلها الرأس اللزج.

قبل أن تبدأ

أنت بحاجة إلى Elementor مجاني، الإصدار 3.6 أو الأحدث، بحيث يتم تشغيل الحاويات.

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

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

الخطوة 1: افتح قالب الرأس الخاص بك في Elementor

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

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

قم بتمرير قالب الرأس واضغط تحرير باستخدام العنصر. يفتح الرأس على قماشه الخاص.

الخطوة 2: حدد حاوية الرأس

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

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

الخطوة 3: اضبط موضع الحاوية على ثابت

مع تحديد حاوية الرأس، افتح متقدم علامة التبويب وتوسيع تخطيط قسم. ال موضع يحتوي Dropdown على ثلاثة خيارات.

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

يختار ثابت، وتتوسع اللوحة باستخدام عناصر التحكم في الاتجاه.

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

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

الخطوة 4: رفع مؤشر z

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

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

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

الخطوة 5: النشر

يضرب ينشر.

افتح الموقع المباشر وقم بالتمرير. يظل الرأس مقفلاً في الجزء العلوي من الشاشة طوال الطريق لأسفل.

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

ثلاثة أشياء تكسر الرأس الثابت، والإصلاحات

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

1. يصبح الرأس شفافًا ويظهر المحتوى من خلاله

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

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

2. القسم الأول يختبئ خلف الرأس

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

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

3. يأكل الشاشة على الهاتف المحمول

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

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

هل يعمل هذا مع المكونات الإضافية للرأس الأخرى؟

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

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

بديل عدم القفز: وضع لزج مع CSS مخصص مجاني

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

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

selector {
    position: sticky;
    top: 0;
    z-index: 99;
}

selector هو اختصار Elementor للعنصر الذي تقوم بتحريره، لذلك لا تحتاج إلى معرف أو فئة. مسكتك واحدة: إذا كانت هناك أي حاوية أصلية overflow: hidden، يتوقف اللزج عن العمل بصمت، ومن الواضح جدًا أنه من السلف إذا رفض الرأس التثبيت. تم توثيق السلوك الكامل في مرجع MDN على موضع CSS.

مقارنة طرق الرأس اللزجة المجانية

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

إضافة تقليص أو تغيير اللون على التمرير

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

جعل الرأس يستحق التمسك

بمجرد لصقه على الشاشة، يصبح الرأس مرئيًا بنسبة 100% من الوقت، لذا فهو يستحق تمريرة ثانية.

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

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

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

الأسئلة المتداولة

إلتحاق بالركب

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

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

القراءة ذات الصلة: كيفية تحرير التذييل في WordPress باستخدام Elementor, كيفية إنشاء خلفية منحرفة في Elementor، و كيفية إنشاء موقع ويب بصفحة واحدة باستخدام Elementor.