كيفية تغيير رأس الصفحة في التمرير باستخدام Elementor

هل تحتاج إلى تغيير الرأس في تمرير الصفحة باستخدام Elementor؟

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

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

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

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

---

محتويات

لماذا تغيير الرأس في التمرير؟

يعد تغيير الرأس في التمرير إحدى تقنيات تصميم مواقع الويب التي توفر العديد من الفوائد الملحوظة من حيث الوظيفة والجماليات. وإليك سبب أهمية هذه الميزة لموقعك:

1. تحسين الملاحة

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

2. زيادة تفاعل المستخدم

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

3. تحسين جمالية الموقع

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

4. تحسين المساحة البصرية

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

5. تعزيز هوية العلامة التجارية

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

6. جعل التحويل أسهل

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

7. إنهالتكيف مع احتياجات المستخدم

يفضل بعض المستخدمين الرؤوس التي تظل مرئية لسهولة التنقل، بينما قد يفضل البعض الآخر الرؤوس التي يتم سحبها لتوفير رؤية واضحة للمحتوى. من خلال تقديم خيارات قابلة للتخصيص، فإنك تلبي التفضيلات المتنوعة لزوار موقعك، وبالتالي تزيد من رضاهم وراحة التصفح.

---

كيفية تغيير رأس الصفحة في التمرير باستخدام Elementor

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

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

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

ولكن لتحقيق هذه الغاية، ستحتاج إلى الإصدار Pro من Elementor الذي يدعم CSS المخصص.

لقراءة أيضا: كيفية إنشاء رأس مخصص في WordPress باستخدام Elementor

فيما يلي مثال على رأس يتغير أثناء تمرير الصفحة.

الخطوة 1: إنشاء رأس مخصص

قبل أن تبدأ ، تأكد من ترقية Elementor الخاص بك إلى الإصدار المحترف لأن Theme Builder متاح فقط في Elementor Pro. يمكنك الحصول على الإصدار الاحترافي من Elementor Pro على ملف الموقع الرسمي.

بمجرد أن تصبح جاهزًا:

1. احصل على القوالب -> مُنشئ القوالب على لوحة تحكم WordPress الرئيسية الخاصة بك.
2. في لوحة معلومات أداة إنشاء السمات، ضع المؤشر على علامة التبويب رأس
3. انقر على الأيقونة + لإنشاء قالب رأس جديد.

4. في مكتبة القوالب التي تظهر ، يمكنك تحديد قالب رأس محدد مسبقًا تريده. أو ، إذا كنت تريد إنشاء الرأس من البداية ، يمكنك فقط إغلاق مكتبة القوالب لفتح محرر Elementor.

اكتشف أيضًا: كيفية إنشاء أشكال مخصصة في Elementor

في هذه المقالة ، سننشئ قالب الرأس من البداية.

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

بمجرد إضافة العناصر الضرورية وإنشاء الأنماط،

7. انتقل إلى علامة التبويب متقدم. 
8. تحت الكتلة متقدم، اضبط مؤشر Z على 100
9. أدخل فئة CSS header-1

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

11. تحرير رأس مكرر. يمكنك إضافة المزيد من العناصر أو إزالة العناصر الموجودة. يمكنك أيضًا تغيير الخلفية. أياً كان ما تريد.

بمجرد اكتمال تخصيص النمط:

12. انتقل إلى علامة التبويب متقدم. 
13. تحت الكتلة إعدادات متقدمة، أعد تسمية فئة CSS إلى header-2.

ثم افتح الكتلة آثار الحركة. 

14. تعيين القائمة المنسدلة لزج، في ★★★★. يمكنك تحديد إزاحة التأثيرات في الحقل إزاحة التأثيرات. ستحدد القيمة التي تحددها هنا عمق التمرير قبل أن يحدث التأثير (ثابت في هذه الحالة).

بمجرد الانتهاء من تعديل كلتا حاويتي الرأس:

15. تغيير ترتيبهم.

16. قم بتحرير الحاوية الأولى عن طريق تعيين هامش سلبي بحيث تكون أعلى الحاوية العلوية. للقيام بذلك، الوصول علامة التبويب خيارات متقدمة وقم بتعيين الهامش العلوي إلى حوالي -76.

1. أضف حالة العرض من خلال النقر على الزر أضف حالة. 
2. كليكر سور لي بوتون احفظ وأغلق بمجرد الانتهاء من ضبط حالة العرض.

الخطوة 2: إضافة CSS مخصص

يتم استخدام CSS أدناه للتحكم في تأثير الانتقال. يمكنك إضافة CSS إلى أداة تخصيص السمة.

1. احصل على المظهر -> التخصيص على لوحة القيادة الخاصة بك وورد.
2. في لوحة معلومات أداة تخصيص السمات، افتح الكتلة كس إضافية ولصق CSS التالية.

مقتطف CSS:

.header-2 {
 transform: translatey(-80px);
 -moz-transition: all .3s ease!important;
 -webkit-transition: all .3s ease!important;
 transition: all .3s ease!important;
}
.elementor-sticky--effects.header-2  {
 height: auto!important;
 transform: translatey(0px);
}
.elementor-sticky--effects.header-1 {
 display: none!important;
}

3. كليكر سور لي بوتون للنشر لتطبيق التغيير.

وهنا، سيتغير رأسك عند التمرير.

باختصار

يأتي Elementor Pro مزودًا بميزة Theme Builder حيث يمكنك إنشاء قوالب مخصصة لأجزاء من القالب الخاص بك، مثل الرأس.

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

اقرأ أيضا: كيفية إنشاء صفحة 404 في WordPress باستخدام Elementor

يوفر تغيير العنوان في صفحة التمرير نفسها بعض المزايا.

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

---

الأسئلة الشائعة

---

موارد أخرى على Elementor

• كيفية إتقان Elementor على WordPress: التثبيت والاستخدام والميزات المتقدمة - 
• مراجعة Elementor - شيء واحد فقط يهم، لا شيء آخر
• كيفية إنشاء نموذج باستخدام Free Elementor
• كيفية تخصيص نموذج الاتصال 7 مع الإضافات الأساسية

وفي الختام

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

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

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

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

استمر في استكشاف إمكانيات Elementor وقم بتحويل موقعك باستخدام رؤوس مؤثرة وعملية!

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

...