كيفية إنشاء وتطبيق زر "التمرير إلى الأعلى" في Elementor بدون ملحقات

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

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

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

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

2. اختر “Single Page” from the dropdown menu as the template type. Name it something like “زر التمرير إلى الأعلى“.

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

4. الخروج من المكتبة: Click the “X” at the top-right corner to close the template library.

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

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

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

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

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

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

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

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

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

3. اختر نظام ألوان متباين
   • Use colors that contrast with your website’s background. For example, if your background is light, opt for a bold color like blue, orange, or green.
   • بالنسبة للون الرمز، احرص على أن يكون أبيض أو لون آخر يبرز على خلفية الزر.

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

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

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

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

https://www.openbyt.com/wp-content/uploads/2024/10/Action-2024-10-18-14-19-07.mp4

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

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

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

3. انقر فوق "النشر". Set the display conditions to “جميع الصفحات.” This will ensure the button is displayed on every page, providing a consistent user experience.

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

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

2. حدد العنصر العلوي:
   • Choose an element near the top of the page where you want users to be directed when they click the “Scroll to Top” button. This is typically the الرأس قسم، أ العنوانأو القسم الأول من الصفحة
   • انقر على العنصر لتحديده.

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

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

ملاحظة مهمة:

• Make sure the CSS ID you entered matches the one in your “Scroll to Top” button’s الرابط. على سبيل المثال، إذا قمت بتعيين معرف CSS على أنه أعلى، يجب أن يكون رابط الزر #top.

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

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

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

https://www.openbyt.com/wp-content/uploads/2024/10/Action-2024-10-18-16-08-50.mp4

الخاتمة

Adding a “Scroll to Top” button in Elementor is a straightforward way to improve user experience on longer pages by allowing easy navigation back to the top. By creating a global button template, you ensure a consistent appearance across your entire site. The process includes designing the button, setting custom styles like rounded corners and shadow effects, and optionally adding animations like a pulse effect for added visibility.

Once the button is designed, you can fix it in place using the “Fixed” positioning and ensure it appears on all pages through display conditions. Additionally, by setting a CSS ID at the top of each page (such as “top”) and linking the button to this anchor (#top)، يمكن للمستخدمين التمرير بسرعة إلى أعلى الصفحة عند النقر على الزر.

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

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

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

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

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

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

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