✨ ساخت ترنزیشن‌های CSS با پانداگراف

سه گزینه رایج دارید:
• المنتور: از منوی Site Settings → Custom CSS (توصیه‌شده برای سایت‌های المنتوری)
• وردپرس: Appearance → Customize → Additional CSS
• حرفه‌ای: فایل style.css قالب فرزند (پایدارتر در برابر به‌روزرسانی)

به ترتیب این موارد را بررسی کنید:
۱. کلاس تولیدشده (مثلاً pg-hover) را در Advanced → CSS Classes ویجت وارد کرده‌اید؟
۲. کد CSS را در محل صحیح قرار داده‌اید؟
۳. اگر افکت روی آیکون دکمه المنتور است، مطمئن شوید آیکون واقعاً در دکمه وجود دارد.
۴. کش سایت/مرورگر را پاک کنید (Ctrl+F5).
۵. اگر باز هم کار نکرد، احتمالاً قالب سایت شما CSS با specificity بالاتری دارد — به سؤال آخر مراجعه کنید.

:hover تا زمانی که نشانگر موس روی المان است فعال می‌ماند (پس از برداشتن موس افکت برمی‌گردد). :active فقط در لحظه‌ای که دکمه موس پایین است فعال است — مناسب برای بازخورد فوری «فشردن». اگر می‌خواهید افکت بعد از کلیک ماندگار شود، نیاز به جاوااسکریپت است (این ابزار فقط CSS تولید می‌کند).

دستگاه‌های لمسی «هاور» ندارند. روی موبایل، افکت :hover ممکن است هنگام لمس یک‌بار اجرا شود یا اصلاً اجرا نشود. راه‌حل: در تنظیمات ابزار، نوع رویداد را روی «کلیک (:active)» یا «هاور + کلیک» بگذارید تا تجربه لمس هم روان باشد.

۱. ویجت دکمه المنتور را انتخاب کنید.
۲. در تب Advanced → CSS Classes کلاس ابزار (مثلاً pg-hover) را تایپ کنید.
۳. کد تولیدشده را در Site Settings → Custom CSS پیست کنید.
۴. صفحه را ذخیره و پیش‌نمایش بگیرید.
آیکون با .elementor-button-icon و متن با .elementor-button-text هدف می‌گیرد.

اگر آیکون شما به‌صورت SVG باشد، ویژگی color روی آن اثر ندارد. باید از fill استفاده کنید. در کد تولیدشده، افکت‌های تغییر رنگ آیکون را این‌گونه اصلاح کنید:
.pg-hover .elementor-button-icon svg { fill: #ffd700 !important; }

ابزار یک reset خودکار برای opacity، filter، transform و text-decoration می‌سازد، اما اگر قالب شما قانون background یا color با !important دارد، باید خودتان آن را خنثی کنید:
.your-button.pg-hover:hover { background: #4f6df5 !important; }
رنگ پایه دکمه را جایگزین کنید تا هاور پیش‌فرض خنثی شود.

چون قالب‌ها و المنتور معمولاً استایل‌هایی با specificity بالا روی دکمه‌ها و لینک‌ها اعمال می‌کنند. بدون !important، افکت شما ممکن است هرگز دیده نشود. این یک راه‌حل عملی است، اما اگر کنترل کاملی روی CSS قالب خود دارید، می‌توانید آن‌ها را حذف و با سلکتورهای دقیق‌تر جایگزین کنید.

بله. دو راه دارید:
• همان کلاس: کلاس pg-hover را به هر تعداد ویجت بدهید — همه افکت می‌گیرند.
• سلکتور ترکیبی: در کد، سلکتور را با کاما گسترش دهید، مثلاً:
.pg-hover, .my-card, .my-icon { transition: all .3s ease; }

بله. این ابزار هر بار یک افکت می‌سازد، اما می‌توانید کد چند افکت را در کنار هم قرار دهید (مثلاً هم تغییر رنگ، هم بزرگ شدن). فقط دقت کنید که هر دو افکت روی یک property مشترک نباشند (مثلاً دو transform که دومی اولی را لغو می‌کند). برای ترکیب چند transform، آن‌ها را در یک خط بیاورید: transform: scale(1.1) rotate(5deg);