معرفی المنتور 3.32: انیمیشن‌های ترنزیشن، تغییر شکل (Transform)، متغیرهای اندازه و امکانات پیشرفته دیگر

نسخه جدید Elementor 3.32 منتشر شد! این آپدیت با تمرکز بر ویرایشگر نسخه 4 آلفا (Editor V4 Alpha)، امکاناتی نظیر کنترل‌های Transform برای تغییر شکل المان‌ها، ترنزیشن‌های چندلایه (Layered Transitions)، متغیرهای اندازه در سطح سیستم (System-wide Size Variables) و مدیریت ساده‌تر کلاس‌ها (Streamlined Class Management) را ارائه می‌دهد.
با این نسخه، می‌توانید وب‌سایت‌هایی سازگارتر، پویا‌تر و حرفه‌ای‌تر بسازید و تجربه طراحی خود را به سطحی بالاتر ارتقا دهید.

این به‌روزرسانی المنتور، گامی مهم در جهت ایجاد یک محیط طراحی مدرن و سریع است؛ جایی که کنترل دقیق‌تر، انعطاف‌پذیری بالا و یکپارچگی طراحی، به شما کمک می‌کند وب‌سایت‌هایی چشم‌نواز و حرفه‌ای خلق کنید.

ویرایشگر نسخه 4 آلفا (Editor V4 Alpha) – طراحی سریع‌تر و مقیاس‌پذیرتر

ویژگی‌های اصلی در این نسخه بخشی از پروژه‌ی Editor V4 هستند؛ بازطراحی کامل ساختار المنتور که اصولی همچون استایل‌دهی مبتنی بر CSS (CSS-first styling)، طراحی اتمیک (Atomic Design Principles) و رویکرد کلاس‌محور (Class-driven Workflow) را معرفی می‌کند.

توجه: نسخه‌ی Editor V4 هنوز در مرحله‌ی آلفا قرار دارد و تنها باید روی سایت‌های آزمایشی یا استیجینگ (staging) مورد استفاده قرار گیرد.

برای فعال‌سازی Editor V4 Alpha، کافیست المنتور را به آخرین نسخه به‌روزرسانی کنید، سپس در پیشخوان وردپرس به مسیر
Elementor > Settings > تب Editor V4 رفته و روی گزینه‌ی “Activate” کلیک کنید.

اکنون زمان آن رسیده که بازخورد خود را با ما در میان بگذارید!
اگر می‌خواهید در شکل‌گیری و بهبود نسخه‌ی چهارم ویرایشگر المنتور نقش داشته باشید، به گفت‌وگو در GitHub بپیوندید.

طراحی با عمق و دقت بیشتر با استفاده از Transform در المنتور

در ویرایشگر نسخه 4 المنتور (Editor V4)، قابلیت جدیدی با نام Transform Controls معرفی شده که به شما امکان می‌دهد تغییرات بصری CSS Transform را به‌صورت مستقیم روی هر المان اعمال کنید. با استفاده از این ویژگی، می‌توانید به‌راحتی حرکات و انیمیشن‌های طبیعی و حرفه‌ای را در طراحی خود پیاده‌سازی کنید.

با قابلیت Transform شما می‌توانید:

• المان‌ها را جابجا (Move)، بزرگ‌ یا کوچک (Scale)، چرخش (Rotate) و کج (Skew) کنید.
• برای هر State (حالت) مانند Hover، Focus یا Active، نوع متفاوتی از Transform تعیین کنید.
• المان‌ها را در محور Z (عمق) حرکت دهید یا بچرخانید و از کنترل‌های Perspective (زاویه دید) برای ایجاد افکت‌های سه‌بعدی و عمقی استفاده کنید.
• به‌راحتی ترتیب Transformها را مدیریت و سازمان‌دهی کنید.

با ترکیب Transform و States، می‌توانید تعاملات کوچک و روانی ایجاد کنید که تجربه کاربری (UX) را به‌شکل چشم‌گیری ارتقا می‌دهند و رابط کاربری (UI) شما را پویا، زنده و کاربرپسند می‌سازند.

• در حالت Hover: دکمه را کمی بزرگ‌تر (Scale Up) کنید.
• در حالت Focus: فیلد ورودی را کمی به سمت بالا (Move Up) منتقل کنید.
• در حالت Active: کارت را کمی بچرخانید (Rotate) تا حس لمس و تعامل واقعی ایجاد شود.

ایجاد تعاملات حرفه‌ای با استفاده از Transitions در المنتور

در نسخه‌ی آلفای ویرایشگر ۴ (V4 Alpha Editor)، کنترل جدیدی به نام Transitions معرفی شده که به شما اجازه می‌دهد نحوه‌ی انیمیشن‌ عناصر هنگام تغییر بین حالت‌های مختلف مانند Normal، Hover، Focus و Active را به‌صورت دقیق تنظیم کنید.

به جای اینکه تغییرات به‌صورت ناگهانی رخ دهند، با استفاده از Transition می‌توانید این تغییرات را نرم، روان و طبیعی نمایش دهید.

بدون استفاده از Transition، افکت‌های چندلایه در حالت‌های Hover یا Focus ممکن است خشک و ناگهانی به نظر برسند. اما با کنترل مدت زمان (Duration) و ویژگی‌ها (Properties)، می‌توانید میکرو اینتراکشن‌های حرفه‌ای بسازید که تجربه کاربری (UX) را بهبود داده و طراحی شما را با استانداردهای مدرن UI هماهنگ می‌کنند.

در نسخه‌ی Elementor Pro، شما می‌توانید تعیین کنید کدام ویژگی‌های CSS در طول Transition تغییر کنند؛ برای مثال:

• رنگ پس‌زمینه (background-color)
• انحنای حاشیه (border-radius)
• تغییر شکل (transform)
• شفافیت (opacity)

هر Transition در یک بلوک تکرارشونده (Repeater Block) مدیریت می‌شود؛ بنابراین شما می‌توانید:

• چندین Transition را روی یک المان پشت‌سرهم قرار دهید (Stack)،
• ترتیب آن‌ها را تنظیم (Reorder) کنید،
• یا در صورت نیاز حذف (Remove) نمایید.

در نسخه‌ی رایگان المنتور، می‌توانید یک Transition ترکیبی اعمال کنید که شامل همه‌ی ویژگی‌های استایل به‌صورت یکجا باشد.

همچنین زمانی‌که Transitions را با Transform و کلاس‌ها (Classes) ترکیب می‌کنید، می‌توانید آن‌ها را در سراسر سایت به‌صورت تکرارپذیر و یکپارچه استفاده کنید.

به‌عنوان مثال، یک کلاس با نام “primary-button” بسازید و در آن از Transform و Transitions استفاده کنید. سپس این کلاس را برای تمام دکمه‌های سایت به‌کار ببرید.

در نتیجه، اگر بعدها مدت زمان یا افکت‌ها را تغییر دهید، تمام دکمه‌ها به‌صورت یکپارچه و خودکار به‌روزرسانی می‌شوند.

[ویژه نسخه Pro] حفظ هماهنگی طراحی با استفاده از Size Variables در المنتور

در نسخه جدید Elementor Pro، سیستم Variables (متغیرها) گسترش یافته و اکنون نوع سومی به نام Size Variables (متغیرهای اندازه) نیز در دسترس است. پس از معرفی Color Variables (متغیرهای رنگ) و Font Variables (متغیرهای فونت) در نسخه 3.31، حالا می‌توانید مقادیر عددی اندازه را هم ذخیره و در سراسر سایت خود استفاده مجدد کنید.

در طراحی مدرن، هماهنگی در فاصله‌گذاری (Spacing)، اندازه تایپوگرافی (Typography Sizing) و ابعاد اجزا (Component Dimensions) یکی از اصول کلیدی و حرفه‌ای محسوب می‌شود. با استفاده از Size Variables، شما می‌توانید مقادیر را یک‌بار تعریف کرده و سپس در ویژگی‌های مختلف تکرار کنید؛ این کار باعث می‌شود خطاها کاهش یافته و اعمال تغییرات سراسری (Global Updates) بسیار ساده و سریع انجام شود.

برای مثال، به‌جای اینکه به‌صورت دستی در هر پاراگراف مقدار 12px را وارد کنید، یک متغیر با نام “text-size” ایجاد می‌کنید. سپس این متغیر را به همه‌ی متن‌های خود متصل می‌کنید. در آینده، اگر تصمیم بگیرید اندازه متن را به 16px افزایش دهید، فقط کافیست مقدار متغیر text-size را تغییر دهید؛ بلافاصله تمام المان‌های متصل به آن، به‌صورت خودکار و هماهنگ به‌روزرسانی می‌شوند.

این قابلیت نه‌تنها باعث افزایش سرعت طراحی می‌شود، بلکه به شما کمک می‌کند وب‌سایتی منسجم، یکپارچه و مطابق با اصول طراحی سیستماتیک (Design System) بسازید.

سازمان‌دهی و گسترش کلاس‌ها با فیلترها و تبدیل محلی در المنتور

در این نسخه، دو قابلیت مرتبط و کاربردی معرفی شده‌اند که به شما کمک می‌کنند استایل‌ها را بهتر مدیریت کرده و به‌صورت مؤثرتر در سراسر سایت استفاده مجدد کنید: یکی، ابزار تبدیل استایل‌های محلی به کلاس‌های سراسری (Global Classes) و دیگری، فیلترهای جدید در بخش مدیریت کلاس‌ها (Class Manager) برای حفظ نظم و پاکیزگی کتابخانه‌ی استایل‌هایتان.

• تبدیل استایل‌های محلی به کلاس سراسری (Global Class): استایل‌هایی را که به‌صورت محلی روی یک المان خاص اعمال شده‌اند، به‌سرعت به یک کلاس سراسری قابل استفاده مجدد تبدیل کنید. روی سه نقطه کنار کلاس محلی صورتی‌رنگ در نوار کلاس‌ها کلیک کرده و گزینه‌ی “Convert to Global Class” را انتخاب کنید.
• فیلترهای مدیریت کلاس‌ها (Class Manager Filters): از طریق آیکون جدید کنار نوار جست‌وجوی Class Manager قابل دسترسی هستند و مدیریت کلاس‌ها را ساده‌تر می‌کنند. اکنون می‌توانید موارد زیر را شناسایی کنید:
• کلاس‌های بدون استفاده (Unused Classes): به هیچ المانی اعمال نشده‌اند.
• کلاس‌های خالی (Empty Classes): هیچ ویژگی یا استایلی در آن‌ها تنظیم نشده است.
• کلاس‌های مخصوص صفحه (Page-specific Classes): فقط در صفحه‌ای که هم‌اکنون روی آن هستید استفاده شده‌اند.

اگر یک طرح کارت (Card Layout) را به‌صورت محلی (Local) استایل‌دهی کرده‌اید و بعد متوجه شده‌اید که می‌خواهید از همان طراحی در چندین صفحه مختلف استفاده کنید، اکنون می‌توانید تنها با یک کلیک، تمام آن استایل‌ها را به یک کلاس سراسری (Global Class) تبدیل کرده و در هر جای سایت به‌کار ببرید.

در همین زمان، قابلیت فیلترهای مدیریت کلاس‌ها (Class Manager Filters) به شما کمک می‌کند تا کلاس‌های بدون استفاده یا خالی را که در طول مراحل آزمایش و طراحی ایجاد شده‌اند، به‌راحتی شناسایی و پاک‌سازی کنید. این کار باعث می‌شود کتابخانه‌ی کلاس‌های شما همیشه تمیز، منظم و بهینه باقی بماند.

[ویژه نسخه Pro] سفارشی‌سازی درون‌ریزی و برون‌ریزی قالب‌های وب‌سایت در المنتور

قابلیت درون‌ریزی (Import) و برون‌ریزی (Export) قالب‌های وب‌سایت، به شما این امکان را می‌دهد که کل یک سایت را مجدداً استفاده کنید، تنظیمات و ساختارها را بین پروژه‌ها منتقل نمایید و تنها بخش‌هایی را که نیاز دارید، به‌صورت انتخابی وارد کنید.

در نسخه‌ی 3.32 المنتور پرو (Elementor Pro 3.32)، این ابزار با گزینه‌های پیشرفته‌تر برای سفارشی‌سازی و کنترل دقیق‌تر به‌روزرسانی شده است. اکنون شما می‌توانید فرآیند انتقال یا اشتراک قالب‌ها را به‌شکل انعطاف‌پذیرتر، هوشمندتر و متناسب با نیاز پروژه خود مدیریت کنید.

• نصب قالب: در صورت تمایل می‌توانید هنگام درون‌ریزی قالب سایت، قالب‌های عمومی وردپرس پشتیبانی‌شده را نیز وارد کنید.
• کنترل آزمایش‌ها: در فرآیند درون‌ریزی، می‌توانید تعیین کنید که آیا آزمایش‌های فعال (Active Experiments) اعمال شوند یا خیر.
• دارایی‌های سفارشی: قابلیت درون‌ریزی فونت‌های سفارشی، آیکون‌های اختصاصی و کدهای سفارشی (Custom Code) به‌همراه کیت سایت.
• پنل تنظیمات بهینه‌شده: امکان فعال یا غیرفعال‌سازی ساده‌ی رنگ‌های سراسری، فونت‌ها، تنظیمات سبک قالب، آزمایش‌ها و فایل‌های سفارشی از طریق کلیدهای سوئیچ (Toggles).
• انتخاب محتوای دقیق: می‌توانید صفحات سایت، منوها، نوع پست‌ها (Post Types) و تکسونومی‌ها (Taxonomies) را به‌صورت مجزا کنترل کنید؛ همچنین از انتخاب تکی صفحات یا گروه‌های محتوایی پشتیبانی می‌شود.
• تفکیک قالب‌ها: نمایش جداگانه‌ی قالب‌های سایت، بخش‌های Theme Builder و ویجت‌های سراسری (Global Widgets) برای کنترل بهتر در انتخاب محتوا.
• نمایش شفاف نسخه: در صورت ناسازگاری نسخه المنتور هنگام درون‌ریزی یا برون‌ریزی قالب، هشدار سازگاری نسخه برای جلوگیری از خطا و ناهماهنگی نمایش داده می‌شود.

اگر شما یک آژانس طراحی وب هستید و چندین وب‌سایت مشتری را مدیریت یا مهاجرت می‌دهید، اکنون می‌توانید هنگام درون‌ریزی، تنها استایل‌های سراسری (Global Styles) را به همراه قالب (Theme) و قالب‌های خاص موردنیاز وارد کنید، به‌جای اینکه همه‌چیز را به‌صورت کامل درون‌ریزی نمایید.

با این روش، از درون‌ریزی محتوای نمایشی (Demo Content) و افزونه‌های غیرضروری صرف‌نظر کرده و فرآیند راه‌اندازی سایت را با شروعی تمیزتر، سریع‌تر و کارآمدتر پیش می‌برید.

در نتیجه، زمان راه‌اندازی کاهش یافته و محیط کاری شما ساده‌تر و بدون شلوغی اضافی (Reduced Clutter) خواهد بود.

همین امروز ویرایشگر نسخه ۴ را امتحان کنید!

نسخه‌ی Elementor 3.32 یک گام بزرگ دیگر در مسیر توسعه‌ی ویرایشگر نسخه ۴ آلفا (Editor V4 Alpha) محسوب می‌شود. این نسخه، امکاناتی حرفه‌ای برای طراحی حرکات و انیمیشن‌ها (Motion Design) و یکپارچگی سیستم طراحی (Design System Consistency) را مستقیماً وارد جریان کاری شما می‌کند.

اکنون بهترین زمان برای فعال‌سازی V4، آزمایش ویژگی‌های جدید و ارائه بازخورد است تا در شکل‌گیری آینده‌ی این ویرایشگر نقش داشته باشید.

نکته: نسخه‌ی Editor V4 هنوز در مرحله‌ی آلفا (Alpha) قرار دارد و باید تنها در سایت‌های آزمایشی (Test) یا استیجینگ (Staging) استفاده شود. برای فعال‌سازی آن، ابتدا المنتور را به آخرین نسخه به‌روزرسانی کنید، سپس در پیشخوان وردپرس به مسیر Elementor > Settings > تب Editor V4 رفته و روی دکمه‌ی “Activate” کلیک کنید.