آیا تا به حال به دنبال ایجاد یک ردیاب پیشرفت عمودی به جای نوار اسکرول سنتی بوده اید؟ اگر نه، پس این مقاله را تا انتها مرور کنید تا با نحوه ایجاد آن آشنا شوید Elementor نرم افزار.
اما قبل از پرداختن به موضوع اصلی، اجازه دهید ابتدا به یاد بیاوریم که ردیاب پیشرفت چیست.
ردیاب پیشرفت یک نشانگر پیشرفت است که کاربر را از پیشرفت یک فرآیند در حال انجام، مانند نصب یک برنامه، به روز رسانی، خواندن مقاله و غیره مطلع می کند. و دو نوع است:
- le ردیاب پیشرفت خطی
- le ردیاب پیشرفت دایره ای
همچنین می توانید بخوانید: Elementor: نحوه ایجاد یک کارت افکت از یک نمونه کار
در این آموزش به شما نشان خواهیم داد که چگونه یک نشانگر پیشرفت عمودی را مرحله به مرحله در بخشی حاوی آرشیو پست قرار دهید.
یک ردیاب پیشرفت ایجاد کنید
در برگه عناصر از پانل ابزارElementor، در نوار جستجو تایپ کنید ردیاب پیشرفت. سپس ویجت را به یک بخش بکشید.
سپس یک نشانگر پیشرفت ظاهر می شود. به طور پیش فرض، جهت افقی است. اما نگران نباشید، بعداً نحوه چیدمان عمودی آن را خواهید دید.
نشانگر پیشرفت در حال ایجاد، اجازه دهید تغییرات لازم را برای به دست آوردن نتیجه مطلوب انجام دهیم.
همچنین ببینید: Elementor: نحوه ایجاد یک کارت افکت از یک نمونه کار
محتوای ردیاب پیشرفت را ویرایش کنید
در اینجا نوع ردیاب و ارتباط آن را انتخاب خواهید کرد.
تنظیمات اصلی عبارتند از:
- ردیاب معمولی: در اینجا مقدار پیش فرض است افقی. با این حال، هنگام اسکرول کردن لیست، نوع مدور نیز به شما پیشنهاد می شود. پیش فرض را حفظ کنید.
- پیشرفت نسبت به: در این تنظیم دوم، مقدار را انتخاب کنید منتخب. این انتخاب یک تنظیم اضافی را ایجاد می کند: انتخابگر.
- انتخابگر: این فیلد برای دریافت شناسه شی ای که ردیاب به آن متصل می شود در نظر گرفته شده است.
بیایید بایگانی انتشارات را انتخاب کنیم زیرا این عنصری است که ردیاب ما به آن متصل است.
در پنل تنظیمات آن، به تب Advanced بروید، سپس یک مقدار را در فیلد وارد کنید شناسه CSS.
سپس به پنل ردیاب بازگردید و قسمت Selector را در منو تکمیل کنید محتویات.
در نهایت جهت نشانگر پیشرفت را به سمت راست تنظیم کنید.
سبک ردیاب پیشرفت را تغییر دهید
در این مرحله، پارامترهای شاخص پیشرفت و همچنین پس‌زمینه دومی را پیکربندی می‌کنیم.
با تنظیم نشانگر پیشرفت شروع کنید.
دفعات بازدید: Elementor: چگونه یک گالری تصاویر بسازیم
- تنظیم رنگ پیشرفت به شما امکان می دهد بین یک پیشرفت کلاسیک و یک پیشرفت گرادیان یکی را انتخاب کنید. در مثال ما، گزینه اول را انتخاب کنید. با این حال، هر انتخابی که باشد، به نظر می رسد تنظیمات رنگ.
- را تنظیم کنیدرنگ دارد با استفاده از پالت رنگ جهانی یا انتخابگر رنگ.
- نوع حاشیه: شما اینجا شش پیشنهاد دارید (هیچ، پر، دوتایی، نقطه چین، نقطه چین، شیار). یک حاشیه کامل را انتخاب کنید.
- عرض: این برای دادن ضخامت به مرز نشانگر پیشرفت شما است.
- شعاع مرز: به طور پیش فرض، نشانگر پیشرفت مانند یک مستطیل به نظر می رسد. با تغییر شعاع آن، انتهای آن گرد می شود.
در نهایت، تنظیم کنید پیست تنظیمات پس زمینه متوجه می شوید که تقریباً همان تنظیماتی است که برمی گردد. بنابراین خود را به موارد ذکر شده از قبل محدود کنید.
گزینه های پیشرفته ردیاب پیشرفت را تغییر دهید
برای تکمیل کار خود، تب های زیر را تنظیم می کنیم: جلوه های حرکتی، تبدیل و CSS سفارشی.
بیایید ابتدا با تب شروع کنیم CSS سفارشی. آن را انتخاب کنید سپس کد زیر را در قسمت مربوطه وارد کنید. این اجازه می دهد تا عرض ردیاب را تعریف کنید. بنابراین، عرض را 50٪ ارتفاع پنجره تنظیم می کند.
سپس ردیاب را در جهت عمودی بچرخانید. برای انجام این کار، زیر منو را انتخاب کنید تبدیل کنندهچرخش را فعال کنید، سپس عدد 90 را در قسمت خالی تایپ کنید. این ویجت ما را 90 درجه می چرخاند و موقعیت عمودی مورد نظر را به شما می دهد.
برای تراز کردن ویجت ما در همان سطح پست های اول، یک افست 145 را اعمال کنید.
در این سطح، اگر صفحه خود را اسکرول کنیم، می بینید که در حالی که ما صفحه خود را اسکرول می کنیم، نشانگر پیشرفت ما ناپدید می شود محتویات.
برای غلبه بر این مشکل، تب را باز می کنید جلوه های حرکتی، سپس دستور را رها کنید سنجاق و انتخاب کنید پایین.
این بار، با اسکرول کردن به پایین، می‌توانیم مشاهده کنیم که ردیاب پیشرفت ما به تدریج در حال حرکت در آرشیو پست‌هایمان پر شده است.
اکنون Elementor Pro را دریافت کنید!
نتیجه
بنابراین ! این برای این مقاله است که به شما نشان می دهد چگونه یک ردیاب پیشرفت عمودی ایجاد کنید.
افزودن عناصر تعاملی مانند نشانگر پیشرفت عمودی هنگام ایجاد خود سایت اینترنتی واقعا می تواند آن را با شهودی تر کردن آن به سطح بعدی برساند. علاوه بر این، می توان آن را به کل صفحه یا به صفحه پیوند داد محتویات از یک نشریه و حتی به هر عنصر خاص دیگری از یک صفحه. بنابراین دانستن نحوه استفاده از آن یک مزیت اضافی خواهد بود.
با این حال ، شما همچنین می توانید مشورت کنید منابع مااگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.
اما در عین حال، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.
...
