اضافه کردن افکت در المنتور

احتمالاً شما هم دوست دارید که صفحاتی که ایجاد می کنید جذابیت و زیبایی خاصی داشته باشد تا نظر بازدید کنندگان را به خود جلب کند.برای پاسخ به این نیاز شما می توانید از امکان اضافه کردن افکت در المنتور استفاده کنید تا پایان این مقاله آموزش افزونه المنتور با همراه باشید تا به صورت کامل این ویژگی را فرا بگریم.

افکت های شناور در المنتور

افکت های شناور را می توان روی ابزارک ها، ستون ها و هر بخش دیگری اعمال کرد و روی آن ها تغییرات نا محدودی ایجاد کرد.
هر کجا که شما دکمه های عادی – Normal و هاور – Hover  را مشاهده کردید ، گزینه های اضافه کردن افکت های شناور هم در اختیار شما قرار می گیرد. کافی است روی بخش مورد نظر کلیک کرده و در این دو قسمت تغییرات را اعمال کنید.

افکت های ماوس – مسیر ماوس

با این امکان افکت المنتور می توانید عناصر موجود در صفحه را طوری تنظیم کنید تا با حرکت ماوس بازدید کننده، افکت های خاصی روی عناصر اجرا شوند.
برای اینکار ابتدا قسمت مورد نظر را انتخاب کرده و به مسیر پیشرفته – Advanced >موشن افکت – Motion Effects بروید سپس:

1.  افکت موس – Mouse Effects را در حالت روشن- ON قرار بدهید.
2. روی آیکون مداد مسیر ماوس – Mouse Track کلیک نمایید.
3. مسیر حرکت – Mouse Track: یک گزینه در مقابل – Opposite یا مستقیم – Direct را انتخاب نمایید. گزینه در مقابل عنصر را در خلاف حرکت ماوس حرکت می دهد و و گزینه مستقیم عنصر را در همان جهت ماوس حرکت می دهد.
4. سرعت – Speed: سرعت حرکت را از بین 0 تا 10 تنظیم کنید.
5. اعمال افکت روی -Apply Effects On :برای اجرا شدن افکت در دسکتاپ، تبلت و موبایل، نوع دستگاه ها را در این قسمت وارد کنید.
6. جلوه های نسبی – Effects Relative To: برای انتخاب صفحه پیش فرض گزینه Viewport  یا Entire Pageرا انتخاب نمایید.

 نکته: در صورتی که در مرورگر سافاری – Safari افکت های ماوس را مشاهده نمی کنید یا مشکل ناپدید شدن عناصر را دارید این به این خاطر است که از نسخه قدیمی جی کوئری استفاده می کند که توسط وردپرس پشتیبانی نمی شود. برای رفع این مشکل می توانید یا افکت های حرکتی روی ابزارک ها را حذف نمایید یا افکت های که هم زمان افکت اسکرول و افکت ماوس روی آن فعال است را حذف نمایید.

افکت های اسکرول در المنتور

نوعی دیگر از افکت در المنتور، افکت اسکرول است که با استفاده از آن می توانید در صفحه بر روی عناصر افکت های اعمال کنید تا با اسکرول کردن عمودی بازدید کننده در صفحه افکت های در جهت و سرعت تعین شده اجرا شوند که این خود جذابیت نمایش عناصر را به مقدار زیادی بالا می برد.
برای دسترسی به این امکان در پنل کناری صفحه به مسیر پیشرفته – Advanced > موشن افکت – Motion Effects بروید سپس:

1.  افکت اسکرول – Scrolling Effects را روی حالت روشن – ON قرار دهید.
2.  روی آیکون مداد اسکرول عمودی – Vertical Scroll کلیک نمایید.
3. مسیر حرکت – Direction: جهت اسکرول کردن را روی حالت بالا یا پایین قرار بدهید.
4. سرعت – Speed: سرعت اجرای افکت را از 0 تا 10 تنظیم کنید.
5. Viewport : با استفاده از این گزینه تعین کنید که برای اجرای افکت چه میزان از ارتفاع قابل مشاهده صفحه دستگاه باید اسکرول شود. به عنوان مثل اگر Viewport روی 50% تا 100% تنظیم شده باشد افکت بعد از اسکرول کردن نیمی از ارتفاع نمایشی صفحه اجرا می شود.
6.  اعمال افکت روی -Apply Effects On :برای اجرا شدن افکت در دسکتاپ، تبلت و موبایل، نوع دستگاه ها را در این قسمت وارد کنید.
7.  جلوه های نسبی – Effects Relative To: برای انتخاب صفحه پیش فرض گزینه Viewportیا Entire Pageرا انتخاب نمایید.

نکته : توجه داشته باشید که میزان درصد اسکرولی که در قسمت Viewport تنظیم می کنید باید با توجه به ارتفاع دید (اندازه قابل مشاهده در صفحه ) باشد نه به اندازه کل صفحه ای که شما ساختید. این حالت برای تمامی موارد بجز بخش های که موقعیت آن ثابت است درست کار می کند. برای درک این موضوع تصویر زیر را مشاهده فرمایید.

افکت اسکرول کردن – تغیر شفافیت

این افکت به شما این امکان ر ا می دهد که به نسبت میزان اسکرول کردن بازدیدکننده عناصر را بیشتر شفاف تر یا نمایان تر کنید. به عنوان مثال در مثال پایین با اسکرول در صفحه میزان وضوح تصویر کاهش پیدا می کند.

برای اینکار به مسیر پیشرفته – Advanced > موشن افکت – Motion Effects بروید سپس :

1.  افکت اسکرول – Scrolling Effects: را روی حالت فعال قرار بدهید.
2.  شفافیت – Transparency: روی آیکون مداد ویرایش کلیک نمایید.
3. مسیر حرکت – Direction: یکی از چهار حالت مختلف شفافیت را انتخاب کنید.
4. Fade In: در این نوع در هنگام شروع عنصر به حالت شفاف نمایش داده می شود و به تدریج قابل مشاهده تر می شود.
5. Fade Out: در این نوع در هنگام شروع عنصر به حالت کامل نمایش داده می شود و به تدریج شفافیت آن بیشتر می شود.
6. Fade Out In: در این نوع هنگام شروع به حالت کامل نمایش داده می شود سپس میزان شفافیت آن بیشتر می شود و در آخر دوباره به صورت کامل نمایش داده می شود.
7. Fade In Out: در این نوع هنگام شروع به حالت شفاف نمایش داده می شود سپس میزان نمایانی آن بیشتر می شود و در آخر دوباره به صورت کامل شفاف می شود.
8. سطح – Level: میزان شفافیت را در بین 0 تا 10 تنظیم کنید.
9. Viewport: با استفاده از این گزینه تعین کنید که برای اجرای افکت چه میزان از ارتفاع قابل مشاهده صفحه دستگاه باید اسکرول شود.

افکت اسکرول کردن – تغیر مقیاس

هر عنصر را در مقیاس بزرگ یا کوچک شدن تنظیم کنید تا تا هنگامی که کاربر در صفحه به بالا یا پایین حرکت می کند عناصر تغییر مقیاس داشته باشند.

برای اینکار به مسیر پیشرفته – Advanced > موشن افکت – Motion Effects بروید سپس :

1.  افکت اسکرول – Scrolling Effects: را روی حالت فعال قرار بدهید.
2. مقیاس – Scale: روی آیکون مداد ویرایش کلیک نمایید.
3. مسیر حرکت – Direction: یکی از چهار حالت مختلف را انتخاب کنید.
4. سرعت – Speed: میزان سرعت اجرای مقیاس را در بین 0 تا 10 تنظیم کنید.
5. Viewport : با استفاده از این گزینه تعین کنید که برای اجرای افکت چه میزان از ارتفاع قابل مشاهده صفحه دستگاه باید اسکرول شود.
6. X Anchor Point: موقعیت محور افقی را در یکی از حالت های راست، مرکز یا چپ قرار دهید تا مقیاس از آن موقعیت تغییر کند.
7. y Anchor Point: موقعیت محور عمودی را در یکی از حالت های راست، مرکز یا چپ قرار دهید تا مقیاس از آن موقعیت تغییر کند.
8. اعمال افکت بر روی – Apply Effects On: دستگاه های (موبایل، تبلت، دسکتاپ) که می خواهید افکت در آن ها اجرا شود را وارد نمایید.
9. Effects Relative To: یکی از گزینه های Default, Viewport, or Entire Page را انتخاب کنید.

افکت اسکرول کردن – چرخش

با استفاده از این افکت ، هنگامی که کاربر در صفحه به بالا یا پایین حرکت می کند عنصر به سمت راست یا چپ چرخش می کند.

برای اینکار به مسیر پیشرفته – Advanced > موشن افکت – Motion Effects بروید سپس :

1. افکت اسکرول – Scrolling Effects: را روی حالت فعال قرار بدهید.
2. چرخش – Rotate: روی آیکون مداد ویرایش کلیک نمایید.
3. مسیر حرکت – Direction: یکی از چهار حالت مختلف را انتخاب کنید.
4. سرعت – Speed: میزان سرعت اجرای مقیاس را در بین 0 تا 10 تنظیم کنید.
5. Viewport: با استفاده از این گزینه تعین کنید که برای اجرای افکت چه میزان از ارتفاع قابل مشاهده صفحه دستگاه باید اسکرول شود.
6. X Anchor Point: موقعیت محور افقی را در یکی از حالت های راست، مرکز یا چپ قرار دهید تا مقیاس از آن موقعیت تغییر کند.
7. y Anchor Point: موقعیت محور عمودی را در یکی از حالت های راست، مرکز یا چپ قرار دهید تا مقیاس از آن موقعیت تغییر کند.
8. اعمال افکت بر روی – Apply Effects On: دستگاه های (موبایل، تبلت، دسکتاپ) که می خواهید افکت در آن ها اجرا شود را وارد نمایید.
9. Effects Relative To: یکی از گزینه های Default, Viewport, or Entire Page را انتخاب کنید.

افکت اسکرول کردن – بلور
افکت بلور – Blur باعث می شود که به تدریج عناصر با اسکرول کردن بازدیدکننده تارتر می شوند. به عنوان مثال در تصویر زیر با اسکرول کردن به پایین تصویر به مرور تار می شود. تنظیمات این قسمت مانند مرحله قبل است با این تفاوت که باید روی آیکون مداد ویرایش بلور – Blur کلیک نمایید.

انیمیشن هنگام ورود در المنتور

نوع دیگری از افکت در المنتور وجود دارد که به شما این امکان را می دهد که برای ابزارک ها،بخش ها و ستون ها انمیشین قرار بدهید تا هنگامی که کاربر وارد صفحه مورد نظر می شود و به سمت پایین اسکرول می کند عناصر به صورت انیمشین ظاهر شوند.

1. روی دسته ابزارک، ستون یا بخش کلیک راست کرده و گزینه ویرایش را انتخاب نمایید
2. به تب پیشرفته – Advanced > موشن افکت – Motion Effects بروید.
3.  از قسمت کشویی گزینه انیمشین هنگام ورود – Entrance Animation یک انیمیشن را انتخاب کنید. توجه داشته باشید که برای دستگاه های که می خواهید اجرای انیمیشن در آن غیر فعال باشد پس از انتخاب نوع دستگاه، حالت انیمشین را روی هیچ – None قرار بدهید.

برای این بخش 37 انیمشین مختلف ارائه شده است که عبارتند از:

1. Fading: انیمشین محو شدن در بالا، پایین، چپ و راست
2.  Zooming: انیمشین بزرگ نمایی به بالا، پایین، چپ و راست
3. Bouncing:انیمشین جهش از بالا، پایین ، راست یا چپ
4. Sliding: انیمشین اسلاید از بالا، پایین ، راست یا چپ
5. Rotating: انیمیشن چرخش از پایین چپ، پایین راست، بالا راست یا بالا چپ
6. Attention seekers: در زیر مجموعه این قسمت هم انیمشین های Bounce, flash, pulse, rubber band, shake, head shake, swing, tada, wobble, jello وجود دارد.

افکت های ماوس با کجی سه بعدی

با استفاده از این ویژگی می توانید عناصر را طوری تنظیم کنید تا با حرکت ماوس بازدید کننده به صورت سه بعدی کج شوند.

برای اینکار به قسمت پیشرفته – Advanced > موشن افکت – Motion Effects مراجعه کنید سپس :

1.  افکت ماوس – Mouse Effects: را روی حالت فعال قرار بدهید.
2. کاشی سه بعدی – 3D Titt: برای ویرایش روی آیکون مداد کلیک نمایید.
3. مسیر حرکت – Direction: نوع حرکت را روی یکی از حالت های در مقابل – Direct یا مستقیم – Opposite قرار بدید. در حالت در مقابل عنصر را در خلاف جهت حرکت ماوس کج می کند اما در حالت مستقیم عنصر را در همان جهت کج می کند.
4. سرعت – Speed: سرعت را هم می توانید بین 1 تا 10 تنظیم کنید.