كيفية استخدام تأثيرات الرأس والتمرير اللاصقة مع Elementor

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

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

أصبحت الرؤوس اللاصقة شائعة بشكل متزايد بين مصممي الويب لتنظيم وهيكلة موقع الويب لتحسين تنقل المستخدم.

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

تتيح الرؤوس الثابتة للمستخدمين عرض رأس الصفحة وقسم القائمة بغض النظر عن مدى التمرير لأسفل.

• الخطوة 1: إنشاء قائمة
• الخطوة 2: إنشاء رأسك في Elementor
• الخطوة 3: استخدام Elementor لإنشاء قالب رأس
• الخطوة 4: كيفية جعل رأس العنصر مثبتًا
• الخطوة 5: تخصيص CSS لدينا
• خاتمة

الخطوة 1: إنشاء قائمة

لإضافة رأس ثابت إلى موقع الويب الخاص بك، انتقل إلى wp-admin > المظهر > القوائم وقم بإنشاء قائمة رئيسية. في الرأس، اكتب القسم الذي تريد عرضه.

الخطوة 2: إنشاء رأسك في Elementor

انتقل إلى Elementor Templates > Theme Builder عند الانتهاء من إنشاء القائمة الرئيسية. حدد منطقة الرأس في صفحة منشئ السمات وانقر على " إضافة رأس جديد ".

قم بتسمية قالب الرأس وانقر على " إنشاء قالب " على الشاشة المنبثقة.

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

سنبدأ من الصفر باستخدام رأس Elementor الثابت في هذا البرنامج التعليمي.

يمكنك رؤية العديد من أدوات الرأس في محرر Elementor قبل أن نبدأ في تصميم القالب. يمكننا تصميم رأس بسرعة وسهولة باستخدام هذه الأقسام.

الخطوة 3: استخدام Elementor لإنشاء قالب رأس

إنشاء تخطيط من عمودين. تأكد من ضبط عرض محتوى القسم على " محاصر ".

في إعدادات عرض المحتوى في قسم تحرير العنصر، اضبط عرض العمود الأول على 20% ضمن عمود " تحرير ".

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

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

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

الخطوة 4: كيفية جعل رأس العنصر مثبتًا

الآن بعد أن أنشأنا رأس Elementor الأساسي، فقد حان الوقت لتحويله إلى رأس مثبت.

للقيام بذلك، انتقل إلى قسم التحرير (قسم الرأس بالكامل). حدد خيارات متقدمة > تأثيرات الحركة من القائمة المنسدلة.

حدد " ملتصق بالأعلى " ضمن تأثيرات الحركة، ثم " الأجهزة " حيث تريد أن يظهر الرأس اللاصق.

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

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

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

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

كما ترون، فإن استخدام Elementor لإنشاء رأس Sticky المخصص الخاص بك هو أمر بسيط وغير مؤلم!

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

يمكنك تخصيص ارتفاع الرأس الثابت ولون الخلفية والانتقال والتأثيرات اللاصقة هنا.

ارجع إلى منطقة التحرير لجعل رأسك اللاصق أكثر أناقة (قسم الرأس بالكامل). حدد خيارات متقدمة > تأثيرات الحركة من القائمة المنسدلة.

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

اضبط إزاحة الحركة على 100.

برجاء الأخذ في الاعتبار أن خيارات Offset Effects لن تعمل إلا إذا تم استخدام Custom CSS. وبالتالي، إذا كنت لا تقوم بإضافة أي CSS مخصص خاص بك، فيمكنك تخطي الخيار الأخير.

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

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

لقد أكملنا التنظيف؛ ننتقل الآن إلى تعقيدات الموقع، بما في ذلك إضافة رمز CSS المخصص. سنعرض الأساسيات والتقنيات المتقدمة للحصول على تأثيرات رأسية لاصقة مجانية لـ Elementor. إذا كنت تستخدم Elementor 2.9 أو أعلى، فيمكنك استخدام قواعد النمط العامة لدمج CSS هذا في موقعك.

اتبع الإجراءات الموضحة أدناه لتضمين CSS المخصص:

• للوصول إلى قائمة الهامبرغر، حدد موقعها في الزاوية العلوية اليسرى من قائمة Elementor وحدده.
• حدد اختيار أنماط السمات من القائمة المنسدلة الموجودة أسفل قسم النمط العام.
• حدد Custom CSS من القائمة المنسدلة في هذا القسم (سيتغير اللون إلى اللون الأزرق من اللون الأحمر الجيني السابق).

وبعد ذلك قم بلصق كود CSS أدناه.

header.sticky-header { --header-height: 90px; - العتامة: 0.90؛ --تقلص لي: 0.80؛ --لون الخلفية اللاصق: #0e41e5; --الانتقال: سهولة الدخول والخروج لمدة 3 ثوانٍ؛ الانتقال: لون الخلفية var(--transition)، صورة الخلفية var(--transition)، مرشح الخلفية var(--transition)، العتامة var(--transition)؛ } header.sticky-header.elementor-sticky--effacts { لون الخلفية: var(-sticky-background-color) !important; صورة الخلفية: لا شيء! مهم؛ العتامة: var(--opacity) !important; -مرشح خلفية webkit: تمويه (10 بكسل) ؛ مرشح الخلفية: طمس (10 بكسل)؛ } header.sticky-header > .elementor-container { انتقال: الحد الأدنى للارتفاع var(--transition); } header.sticky-header.elementor-sticky--effacts > .elementor-container { min-height: calc(var(--header-height) * var(--shrink-me))!important; الارتفاع: calc(var(--header-height) * var(--shrink-me)); } header.sticky-header .elementor-nav-menu .elementor-item { انتقال: الحشو var(--transition); } header.sticky-header.elementor-sticky--effacts .elementor-nav-menu .elementor-item { padding-bottom: 10px!important; الحشو العلوي: 10 بكسل! مهم؛ } header.sticky-header > .elementor-container .logo img {transition: max-width var(--transition); } header.sticky-header.elementor-sticky--effacts .logo img { max-width: calc(100% * var(--shrink-me)); } 

الخطوة 5: تخصيص CSS لدينا

سترشدك الإرشادات المذكورة أعلاه خلال عملية إنشاء رأس لاصق متناقص في Elementor. إذا كنت تريد معرفة المزيد من التفاصيل حول كيفية تخصيص الرأس بشكل أكبر، فيمكنك الاطلاع على كود CSS المتوفر أدناه، والذي سيسمح لك بأن تكون أكثر إبداعًا في تصميم الرأس. اعتمادًا على احتياجاتك، يمكنك تخصيص رأس Elementor الثابت عن طريق تغيير العديد من الإعدادات وجعله أكثر أو أقل ثباتًا. نوصي باستخدام محرر التعليمات البرمجية لدمج تغيير CSS هذا مباشرة في Elementor. يمكنك استخدام Visual Studio Code أو Atom، مما سيساعدك على تجميع التعليمات البرمجية معًا بسرعة وجني الفوائد. هذه المحررات مجانية الاستخدام ويمكن الوصول إليها من أنظمة مختلفة، بما في ذلك Windows وMac OS X وLinux.

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

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

فيما يلي متغيرات CSS الخمسة، مع إظهار القيم الافتراضية لكل متغير باللون الأحمر.

لون الخلفية الثابت هو #0e41e5 وارتفاع الرأس هو 90 بكسل. تتضمن خيارات التصميم الأخرى ما يلي: العتامة 0.90، والانكماش 0.80، والعتامة 0.90، وانتقال سهولة الدخول/التخفيف 300 مللي ثانية.

الخصائص المخصصة هي العناصر التي تظهر بعد الشرطة المزدوجة "-" في التعليمات amp الخاصة بنا، ويمكنك العثور عليها مدرجة في الجزء العلوي من التعليمات amp الخاصة بنا. كل ما هو مطلوب هو ضبط القيمة التي تظهر بعد النقطتين وقبل الفاصلة المنقوطة في الجملة.

على amp ، إذا كنت تريد زيادة ارتفاع الرأس إلى 100 بكسل، فإليك كيف سيبدو قبل تغيير الارتفاع وبعده:

في السابق، كان ارتفاع الرأس 90 بكسل؛ بعد ذلك، كان ارتفاع الرأس 100 بكسل.

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

يتضمن Elementor مجموعة متنوعة من قوالب الرؤوس؛ كل منها مميز وأنيق ويساعد المشاهدين في التنقل على موقع الويب الخاص بك.

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

فيما يلي بعض amp على خيارات تصميم الرأس العديدة المتاحة لمستخدمي Elementor.

خاتمة

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

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