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

ولكن قبل معالجة الموضوع الرئيسي ، دعنا نتذكر أولاً ما هو متتبع التقدم.

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

  • le تعقب التقدم الخطي
  • le متتبع التقدم الدائري

يمكنك أيضًا قراءة: العنصر: كيفية إنشاء بطاقة تأثير من محفظة

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

Elementor كيفية إنشاء متتبع تقدم عمودي

قم بإنشاء متتبع التقدم

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

Elementor إنشاء تعقب التقدم
Elementor إنشاء تعقب التقدم

ثم يظهر مؤشر التقدم. بشكل افتراضي ، يتم توجيهه أفقيًا. لكن لا تقلق ، سترى لاحقًا كيفية ترتيبها عموديًا.

Elementor إنشاء تعقب التقدم

تم إنشاء مؤشر التقدم ، لذلك دعونا نجري التغييرات اللازمة للحصول على النتيجة المرجوة.

انظر أيضا: العنصر: كيفية إنشاء بطاقة تأثير من محفظة

تحرير محتوى تعقب التقدم

هنا ستختار نوع المتتبع وما يرتبط به.

Elementor تحرير محتوى تعقب التقدم

الإعدادات الرئيسية هي:

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

دعنا نحدد أرشيف المنشورات لأنه العنصر المرتبط به المتتبع.

Elementor تحرير محتوى تعقب التقدم

في لوحة الإعدادات الخاصة به ، انتقل إلى علامة التبويب خيارات متقدمة ، ثم املأ قيمة في الحقل معرف CSS.

Elementor تحرير محتوى تعقب التقدم

بعد ذلك، ارجع إلى لوحة التعقب وأكمل حقل المحدد في القائمة محتويات.

Elementor تحرير محتوى تعقب التقدم

أخيرًا ، اضبط اتجاه مؤشر التقدم إلى اليمين.

Elementor تحرير محتوى تعقب التقدم

تغيير نمط تعقب التقدم

في هذه الخطوة ، سنقوم بتكوين معلمات مؤشر التقدم بالإضافة إلى خلفية الأخير.

عنصر تغيير نمط تعقب التقدم

ابدأ بتعيين مؤشر التقدم.

اقرأ أيضا: العنصر: كيفية إنشاء معرض الصور

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

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

عنصر تغيير نمط تعقب التقدم

تغيير خيارات تعقب التقدم المتقدمة

لإكمال عملنا سنقوم بتعيين علامات التبويب التالية: تأثيرات الحركة والتحويل و CSS المخصص.

تغيير العنصر خيارات متقدمة تعقب التقدم

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

تغيير العنصر خيارات متقدمة تعقب التقدم

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

تغيير العنصر خيارات متقدمة تعقب التقدم

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

خيارات متقدمة لتعقب التقدم في العنصر 4

في هذا المستوى، إذا قمنا بتمرير صفحتنا، سترى أن مؤشر التقدم الخاص بنا يختفي أثناء قيامنا بالتمرير محتويات.

تغيير العنصر خيارات متقدمة تعقب التقدم

للتغلب على هذه المشكلة ، سوف تفتح علامة التبويب تأثيرات الحركة، ثم قم بإسقاط الأمر دبوس وحدد أون بس.

تغيير العنصر خيارات متقدمة تعقب التقدم

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

احصل على Elementor Pro الآن!

وفي الختام

لذا ! هذا كل شيء في هذه المقالة التي توضح لك كيفية إنشاء متتبع تقدم عمودي.

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

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

ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.

...