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

إعداد قالب زر عالمي في Elementor

ابدأ بإنشاء قالب جديد:

1. في لوحة تحكم ووردبريس، انتقل إلى "القوالب" > "إضافة جديد."

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

3. انقر فوق "إنشاء قالب" لفتح محرر Elementor.

4. الخروج من المكتبة: انقر فوق "X" في الزاوية العلوية اليمنى لإغلاق مكتبة القوالب.

إضافة الزر وتخصيصه:

1. اسحب "الزر" من الشريط الجانبي في القالب.

2. قم بتغيير نص الزر إلى "التمرير إلى الأعلى" أو استخدم رمز سهم لأعلى.

3. انتقل إلى معرض الأيقونات وحدد السهم لأعلى الأيقونة.

4. اختر زرًا مختلفًا النوع لحذف النص.

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

تغيير نمط الزر

1. استخدام الزوايا المستديرة
   • انتقل إلى الطراز في Elementor.
   • قم بتعيين نصف قطر الحدود إلى 10% لإنشاء زر مستدير تمامًا.
   • قم بتعديل الحشو لضبط التباعد داخل العنصر. يحدد هذا المسافة الداخلية بين المحتوى و حدود العنصر.

2. إضافة تأثير الظل
   • في صندوق الظل (توجد عادةً ضمن إعدادات النمط > الحدود)، أضف ظلًا خفيًا لخلق عمق. استخدم إعدادات مثل:
   • التعتيم: 10 بكسل
   • الانتشار: 0 بكسل
   • اللون: اختر اللون الرمادي الفاتح أو الأسود الشفاف لإضفاء ظل ناعم.

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

4. إضافة تأثير التحويم
   • في التحويم الإعدادات تحت الطراز علامة التبويب، يمكنك:
     • قم بتغيير لون الخلفية عند التحويم إلى ظل أفتح أو أغمق من لون الزر.
     • تحريك الرسوم المتحركة يسمح لك بالتحكم في سرعة الرسوم المتحركة والانتقالات.

5. إضافة رسم متحرك نبضي (اختياري)
   • في متقدم علامة التبويب، انتقل إلى CSS مخصص (متوفر في إليمنتور برو) وإضافة رسم متحرك نبضي:
   • استبدل #y5TyourButtonBID بمعرف الزر الخاص بك. سيؤدي ذلك إلى جعل الزر يكبر ويتقلص بمهارة، مما يلفت الانتباه إليه.

<الرمز@@ نبض الإطارات الرئيسية { 0% { التحويل: مقياس (1)؛ } 50% { التحويل: مقياس(1.05)؛ } } 100% { التحويل: مقياس(1)؛ } } } #P5TyourButtonBID { رسم متحرك: نبض 2 ثانية لانهائي؛ } }

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

ثبّت الزر في مكانه:

1. في "متقدم"، تحت علامة التبويب "التموضع," اختر "ثابت."

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

3. انقر فوق "النشر“. ضبط شروط العرض على "جميع الصفحات." سيضمن ذلك عرض الزر في كل صفحة، مما يوفر تجربة مستخدم متسقة.

إضافة مرساة في أعلى الصفحة

1. افتح الصفحة في Elementor:
   • انتقل إلى لوحة تحكم ووردبريس الخاصة بك، وانتقل إلى الصفحات أو المنشورات، وحدد الصفحة التي تريد تحريرها.
   • انقر فوق تحرير باستخدام Elementor لفتح الصفحة في محرر Elementor.

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

3. انتقل إلى علامة التبويب خيارات متقدمة:
   • عند تحديد العنصر العلوي، انتقل إلى العنصر متقدم في لوحة Elementor على اليسار.
4. تعيين معرف CSS:
   • ابحث عن معرّف CSS الحقل تحت متقدم علامة التبويب.
   • أدخل كلمة أعلى (أو أي كلمة بسيطة أخرى تفضلها، مثل ابدأ).

5. احفظ التغييرات التي أجريتها:
   • بمجرد تعيين معرف CSS، انقر فوق تحديث لحفظ التغييرات على الصفحة.

ملاحظة مهمة:

• تأكد من تطابق معرّف CSS الذي أدخلته مع المعرّف الموجود في زر "التمرير إلى الأعلى" الرابط. على سبيل المثال، إذا قمت بتعيين معرف CSS على أنه أعلى، يجب أن يكون رابط الزر #top.

أضف مرساة للزر:

1. افتح أي صفحة في Elementor وانقر على العنصر العلوي (مثل عنوان أو قسم).
2. ISضبط رابط الزر. في الرابط الحقل، أدخل #top (تأكد من تضمين # الرمز).

3. تابع القراءة لمعرفة النتائج.

الخاتمة

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

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

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

1. لماذا يجب إضافة زر "التمرير إلى الأعلى"؟

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

2. هل يمكنني إضافة المزيد من تأثيرات الرسوم المتحركة إلى الزر؟

بالتأكيد! تسمح لك مؤثرات الحركة في Elementor بإضافة رسوم متحركة مثل الارتداد أو الانزلاق لجعل الزر أكثر جاذبية.

3. هل هناك إضافات يمكنها القيام بذلك؟

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