▪️ یکی از محدودیتهای Elementor Free این است که امکان اضافهکردن Custom CSS مستقیماً از داخل تنظیمات هر المان را ندارید. بنابراین وقتی آموزشهایی میبینید که برای یک افکت Hover ساده، کد CSS را داخل تنظیمات Elementor قرار میدهند، ممکن است تصور کنید برای اجرای آن حتماً باید Elementor Pro داشته باشید.
اما اگر هدف فقط اجرای CSS است، یک راه سادهتر وجود دارد. میتوانید کلاس CSS را روی المان قرار دهید و کد را از طریق قابلیت CSS اضافی وردپرس به سایت اضافه کنید.
👇 مراحل کار:
ابتدا دکمه را در Elementor انتخاب کنید و از بخش Advanced → CSS Classes، یک کلاس برای آن بسازید. مثلاً:
btnstyleحالا از پیشخوان وردپرس وارد نمایش بعد سفارشیسازی و بعد CSS اضافی شوید و کد زیر را قرار دهید:
.btn a {
position: relative;
overflow: hidden;
}
.btn a i {
transition: all 0.3s ease;
}
.btn a:hover i {
transform: translateX(8px);
}✍️ کد بالا ساختار دکمه را هدف میگیرد، حرکت آیکون را با
transition نرم میکند و هنگام Hover، آیکون را کمی به سمت راست جابهجا میکند.در نهایت روی انتشار بزنید و صفحه را بررسی کنید.
🖥 این روش برای بسیاری از افکتهای CSS قابل استفاده است و نیازی به Elementor Pro ندارد. البته اگر بخواهید CSS را مستقیماً داخل تنظیمات هر المان Elementor مدیریت کنید، آن قابلیت همچنان در نسخه Pro قرار دارد.