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

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

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

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

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

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

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

الخطوة 1: لعمل قائمة

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

الخطوة 2: إنشاء العنوان الخاص بك في Elementor

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

امنح قالب الرأس اسمًا وانقر فوق " إنشاء نموذج " في الشاشة المنبثقة.

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

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

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

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

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

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

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

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

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

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

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

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

حدد " sticky to the Top " ضمن تأثيرات الحركة ، ثم " الأجهزة " حيث تريد ظهور الرأس اللاصق.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

header.sticky-header {--header-height: 90px؛ - القدرة: 0.90 ؛ - شرنك لي: 0.80 ؛ - لون الخلفية اللاصق: # 0e41e5 ؛ - الانتقال: .3s سهولة في الخروج ؛ الانتقال: لون الخلفية var (- الانتقال) ، صورة الخلفية var (- الانتقال) ، مرشح الخلفية var (- الانتقال) ، التعتيم var (- الانتقال) ؛ } header.sticky-header.elementor-sticky - effects {background-color: var (- sticky-background-color)! important؛ صورة الخلفية: لا شيء مهم ؛ العتامة: var (- عتامة)! مهم ؛ -webkit-backdrop-filter: طمس (10 بكسل) ؛ مرشح الخلفية: طمس (10 بكسل) ؛ } header.sticky-header> .elementor-container {transfer: min-height var (- transfer)؛ } header.sticky-header.elementor-sticky - effects> .elementor-container {min-height: calc (var (- header-height) * var (- shrink-me))! important؛ الارتفاع: احسب (var (- header-height) * var (- shrink-me)) ؛ } header.sticky-header .elementor-nav-menu .elementor-item {transfer: padding var (- transfer)؛ } header.sticky-header.elementor-sticky - effects .elementor-nav-menu .elementor-item {padding-bottom: 10px! important؛ أعلى الحشو: 10 بكسل! مهم ؛ } header.sticky-header> .elementor-container .logo img {transfer: max-width var (- transfer)؛ } header.sticky-header.elementor-sticky - effects .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.

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

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

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

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

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

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

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

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

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

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

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

استنتاج

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

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