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