آموزش استفاده از قالب
برای استفاده از امکانات قالب اکستریم مشابه آموزش های عمل کنید.
نحوه افزودن کلاس ها به ویجت و یا کانتینر ها
جهت استفاده از انیمیشنها، پسزمینهها و سایر امکانات اختصاصی قالب در ویجتها یا کانتینرهای المنتور، ابتدا المان موردنظر را ویرایش کنید. نحوه دسترسی به تنظیمات ویرایش در تصاویر راهنما بهصورت کامل نمایش داده شده است.
پس از ورود به تنظیمات المان، به تب «پیشرفته» مراجعه کرده و در بخش «کلاسهای CSS»، کلاس موردنظر را از مستندات قالب کپی و بدون کاراکتر نقطه (.) در ابتدای آن، وارد نمایید.
📘 مستندات Xtrim
تمام کلاسها با پیشوند xtrim- شروع میشوند.
⬅️ تم دارک/لایت با کلاس dark-mode روی body کنترل میشود.
۱. انیمیشنهای اصلی (Core)
| کلاس | توضیح | سرعت |
|---|---|---|
xtrim-animate-float | شناوری عمودی | ۳s |
xtrim-animate-float-horizontal | شناوری افقی | ۳s |
xtrim-animate-shake | لرزش سریع | ۰.۵s |
xtrim-animate-pulse | ضربان | ۲s |
xtrim-animate-blink | چشمکزدن | ۱.۵s |
xtrim-animate-spin | چرخش ساعتگرد | ۲s |
xtrim-animate-spin-reverse | چرخش پادساعتگرد | ۲s |
xtrim-animate-bounce | جهش عمودی | ۱s |
xtrim-animate-swing | تاب خوردن | ۰.۸s |
xtrim-animate-wobble | تکان نامنظم | ۱s |
xtrim-animate-color-cycle | چرخه رنگی | ۴s |
xtrim-animate-glow | درخشش سایه | ۲s |
۲. انیمیشنهای ظاهر شدن (Entrance)
| کلاس | توضیح |
|---|---|
xtrim-animate-fade-in | محو شدن از ۰ به ۱۰۰ |
xtrim-animate-fade-out | محو شدن از ۱۰۰ به ۰ |
xtrim-animate-slide-in-left | ورود از چپ |
xtrim-animate-slide-in-right | ورود از راست |
xtrim-animate-slide-in-up | ورود از پایین |
xtrim-animate-slide-in-down | ورود از بالا |
xtrim-animate-zoom-in | بزرگنمایی |
xtrim-animate-zoom-out | کوچکنمایی |
۳. اصلاحکنندههای سرعت، تأخیر و حالت
| کلاس | تأثیر |
|---|---|
xtrim-animate-fast | سرعت ۰.۵s |
xtrim-animate-slow | سرعت ۴s |
xtrim-animate-slow-1 | سرعت ۸s |
xtrim-animate-delay-1 | تأخیر ۰.۵s |
xtrim-animate-delay-2 | تأخیر ۱s |
xtrim-animate-once | فقط یک بار |
xtrim-animate-alternate | جهت رفت و برگشت |
xtrim-animate-paused | مکث |
xtrim-animate-running | اجرا |
xtrim-animate-pause-on-hover | مکث با هاور |
xtrim-animate-bounce + xtrim-animate-slow + xtrim-animate-delay-1 + xtrim-animate-once)
۴. افکتهای فیلتر و محو
| کلاس | توضیح |
|---|---|
xtrim-gray | تصویر سیاهسفید (هاور رنگی) |
xtrim-blure-40 | بکدراپ بلور ۶.۹px |
xtrim-blur-10 | شیشهای بلور ۱۰px |
xtrim-blur-20 | شیشهای بلور ۲۰px |
xtrim-blur-30 | شیشهای بلور ۳۰px |
۵. افکتهای زمینه و پارتیکل
⚡ این کارتها از کلاسهای xtrim-ambient-particles، xtrim-particle-dust و xtrim-particle-csq استفاده میکنند.
- ترکیب کلاسها: میتوانید چند کلاس را با هم استفاده کنید (مثلاً
xtrim-animate-float xtrim-animate-slow xtrim-animate-delay-2). - انیمیشنهای ورود: نیازی به
xtrim-animate-onceندارند، زیرا خودشان حالت نهایی را باforwardsحفظ میکنند. - اولویت !important: کلاسهای اصلاحکننده (مانند
xtrim-animate-fast) از!importantاستفاده میکنند تا بهراحتی تنظیمات را override کنند. - کارایی: برای المانهای زیاد، از انیمیشنهای سنگین مثل
glowو پارتیکلها کمتر استفاده کنید.
امکان تغییر صفحات با المنتور
جهت استفاده از المنتور برای صفحات مقاله و صفحات در پیشخوان - تنظیمات المنتور را کلیک کنید.
مواردی که نیاز دارید با المنتور ادیت کنید تیک بزنید و ذخیره کنید.
درصورتی که نیازی به ادیت اون محتوا با المنتور ندارید تیک ها را بردارید تا المنتور در اون پست تایپ گزینه ویرایش با المنتور را نداشته باشه و اجرا نشه.
نمایش پروژه ها در مقالات
درصورتی که محتوای متنی است به صورت مقاله عادی اضافه کنید و برای نمایش نمونه کار های تصویری ،اسلایدی و ...
بر روی ویرایش با المنتور کلیک کنید.
دسته بندی ای به نام نمونه کار ها ایجاد کنید و برای عکس شاخص با سایز یکسان (۱۰۲۴*۱۰۲۴) تمام عکس شاخص ها را وارد کنید تا در ویجت های سایت ، نمایش مناسب داشته باشید.
نحوه نمایش
در تنظیمات نوشته نمایش پیش فرض فعال است و کافیست ویجت مورد نظر برای نمایش نمونه کار های خود را به این صفحه بکشید.
و اگر محتوایی متنی هم میان نمونه کار ها دارید از پیش فرض استفاده کنید تا جدول راهنمای محتوا هم داشته باشید.
در تنظیمات نوشته نمایش تمام عرض را فعال کنید تا نمایشی تمام عرض برای نمونه کار ها داشته باشید.
برای نمایش نمونه کار های خود از ویجت های اسلایدر ، گالری مورب ، ویجت آپارات یا ویدئو داخلی و هاست اسپات استفاده کنید.
از دیگر ویجت ها هم برای نمایش متنی و نمایش بهتر بهره ببرید.
