هل سبق لك أن رغبت في إنشاء مُتتبّع تقدّم عمودي بدلاً من شريط التمرير التقليدي؟ إن لم يكن كذلك، فاقرأ هذه المقالة حتى النهاية لتتعلم كيفية إنشائه باستخدام Elementor Pro.
ولكن قبل معالجة الموضوع الرئيسي ، دعنا نتذكر أولاً ما هو متتبع التقدم.
متتبع التقدم هو مؤشر تقدم يُعلم المستخدم بتقدم العملية الجارية ، مثل تثبيت أحد التطبيقات ، والتحديث ، وقراءة مقال ، وما إلى ذلك. وهناك نوعان:
- le تعقب التقدم الخطي
- le متتبع التقدم الدائري
يمكنك أيضًا قراءة: العنصر: كيفية إنشاء بطاقة تأثير من محفظة
في هذا البرنامج التعليمي ، سنوضح لك كيفية إدراج مؤشر تقدم عمودي خطوة بخطوة في قسم يحتوي على أرشيفات المنشورات.
قم بإنشاء متتبع التقدم
في علامة التبويب عناصر من لوحة أدوات Elementor، اكتب في شريط البحث متتبع التقدم. ثم اسحب القطعة إلى قسم.
ثم يظهر مؤشر التقدم. بشكل افتراضي ، يتم توجيهه أفقيًا. لكن لا تقلق ، سترى لاحقًا كيفية ترتيبها عموديًا.
تم إنشاء مؤشر التقدم ، لذلك دعونا نجري التغييرات اللازمة للحصول على النتيجة المرجوة.
انظر أيضا: العنصر: كيفية إنشاء بطاقة تأثير من محفظة
تحرير محتوى تعقب التقدم
هنا ستختار نوع المتتبع وما يرتبط به.
الإعدادات الرئيسية هي:
- تعقب نموذجي: هنا القيمة الافتراضية أفقي. ومع ذلك ، عند التمرير لأسفل القائمة ، اكتب منشور يتم تقديمه لك أيضًا. حافظ على الافتراضي.
- التقدم بالنسبة ل: في هذا الإعداد الثاني ، اختر القيمة قاطع. سيظهر هذا الاختيار إعدادًا إضافيًا: محدد.
- محدد: هذا الحقل مخصص لاستقبال معرف الكائن الذي سيتم إرفاق المتعقب به.
دعنا نحدد أرشيف المنشورات لأنه العنصر المرتبط به المتتبع.
في لوحة الإعدادات الخاصة به ، انتقل إلى علامة التبويب خيارات متقدمة ، ثم املأ قيمة في الحقل معرف CSS.
بعد ذلك، ارجع إلى لوحة التتبع وأكمل حقل المحدد في قائمة المحتوى.
أخيرًا ، اضبط اتجاه مؤشر التقدم إلى اليمين.
تغيير نمط تعقب التقدم
في هذه الخطوة ، سنقوم بتكوين معلمات مؤشر التقدم بالإضافة إلى خلفية الأخير.
ابدأ بتعيين مؤشر التقدم.
اقرأ أيضا: العنصر: كيفية إنشاء معرض الصور
- تعديل تقدم اللون يسمح لك بالاختيار بين التقدم الكلاسيكي والتقدم المتدرج. في مثالنا ، اختر الخيار الأول. مهما كان الاختيار ، فإنه يبدو الإعداد COULEUR.
- مجموعة لله لون باستخدام لوحة الألوان العامة أو منتقي الألوان.
- نوع الحدود: لديك هنا ستة مقترحات (لا شيء ، كامل ، مزدوج ، منقط ، منقط ، أخدود). اختر حدًا كاملًا.
- العرض: هذا لإعطاء سماكة لحدود مؤشر التقدم الخاص بك.
- نصف قطر الحد: بشكل افتراضي ، يبدو مؤشر التقدم وكأنه مستطيل. من خلال تعديل نصف قطرها ، تصبح أطرافها مستديرة.
أخيرًا ، قم بتعيين ملف منطقة الزحلقة إعدادات الخلفية. لاحظت أن نفس الإعدادات تقريبًا هي التي تعود. لذا ، حدد ما هو مذكور مسبقًا.
تغيير خيارات تعقب التقدم المتقدمة
لإكمال عملنا سنقوم بتعيين علامات التبويب التالية: تأثيرات الحركة والتحويل و CSS المخصص.
لنبدأ بعلامة التبويب أولاً عرف المغلق. حدده، ثم أدخل الكود التالي في الحقل المناسب. يسمح لك بتحديد عرض جهاز التعقب. لذا فهو يحدد العرض ليكون مساويًا لـ 50% من ارتفاع النافذة.
بعد ذلك ، قم بتدوير جهاز التعقب في الاتجاه الرأسي. للقيام بذلك ، حدد القائمة الفرعية محول، قم بتمكين الدوران ، ثم اكتب 90 في الحقل الفارغ. سيؤدي هذا إلى تدوير عنصر واجهة المستخدم بمقدار 90 درجة مما يمنحك الوضع الرأسي المطلوب.
لمحاذاة عنصر واجهة المستخدم الخاص بنا على نفس مستوى المشاركات الأولى ، قم بتطبيق إزاحة 145.
في هذه المرحلة، إذا قمنا بالتمرير إلى أسفل الصفحة، فسترى أن مؤشر التقدم يختفي أثناء التمرير عبر المحتوى الخاص بنا.
للتغلب على هذه المشكلة ، سوف تفتح علامة التبويب تأثيرات الحركة، ثم قم بإسقاط الأمر دبوس وحدد أون بس.
هذه المرة ، بالتمرير لأسفل ، يمكننا أن نرى متتبع التقدم الخاص بنا يتم نشره تدريجياً بينما نتحرك من خلال أرشيف المنشورات لدينا.
احصل على Elementor Pro الآن!
الخاتمة
لذا ! هذا كل شيء في هذه المقالة التي توضح لك كيفية إنشاء متتبع تقدم عمودي.
إضافة عناصر تفاعلية، مثل مؤشر التقدم العمودي، عند إنشاء موقعك الإلكتروني، تُحسّنه بشكل ملحوظ، إذ تجعله أكثر سهولة في الاستخدام. كما يُمكن ربطه بصفحة كاملة أو بمحتوى منشور، أو حتى بأي عنصر مُحدد آخر على الصفحة. معرفة كيفية استخدامه تُعدّ ميزة إضافية.
ومع ذلك ، يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...