معرفی المنتور 3.31: ویرایشگر V4 جدید، متغیرها، فیلترها و امکانات بیشتر

نسخه 3.31 المنتور با ابزار های مدرن استایل‌ دهی و بهبود های قدرتمند در سیستم طراحی، ویرایشگر V4 را به سطح بالاتری می‌برد. از متغیر ها و فیلتر ها گرفته تا ویرایش ساده‌ تر و کارآمد تر و نشانه‌ گذاری معنایی (semantic markup)، این نسخه طراحی سایت‌ های زیبا، سریع و در دسترس را راحت‌ تر از همیشه می‌کند.

کنترل کامل با ویرایشگر V4 آلفا

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

از متغیرها و فیلترها گرفته تا امکانات دیگر، همه‌چیز طوری طراحی شده که تجربه ویرایشگر ساده‌ تر و شفاف‌ تر باشه.

توجه: ویرایشگر V4 هنوز در مرحله آزمایشی (Alpha) هست و توصیه می‌شه فقط روی سایت‌های تستی یا آزمایشی ازش استفاده کنید.

نحوه فعال‌سازی ویرایشگر V4 آلفا:

1. المنتور را به آخرین نسخه بروزرسانی کنید.
2. در پیشخوان وردپرس، به مسیر Elementor > Settings > Editor V4 بروید.
3. روی دکمه «فعال‌سازی» کلیک کنید.

ساخت سیستم‌های طراحی منسجم با متغیرهای رنگ و فونت

با اضافه شدن متغیرها (Variables) طراحی در مقیاس بزرگ خیلی راحت‌تر شده است. به جای اینکه برای هر المان به صورت دستی استایل تعریف کنید، می‌توانید یک بار مقدار موردنظر را در قالب متغیر مشخص کنید و در تمام بخش‌های سایت از همان استفاده کنید.

این قابلیت وقتی با کلاس‌های سراسری (Global Classes) ترکیب می‌شود، یک روند کاری منظم و قابل مدیریت ایجاد می‌کند که هم در زمان صرفه‌جویی می‌کند و هم ظاهر سایت را یکدست نگه می‌دارد. به زبان ساده، متغیرها مقدار را تعیین می‌کنند و کلاس‌ها محدوده استفاده از آن مقدار و دیگر استایل‌ها را مشخص می‌کنند.

فرض کنید در بخش‌های مختلف سایت و چندین کلاس سراسری از رنگ‌ها و فونت‌های یکسانی استفاده می‌کنید. به جای اینکه هر بار پس‌زمینه، رنگ متن یا فونت را جداگانه وارد کنید، می‌توانید آن‌ها را به متغیرهایی مثل primary-color، button-font و accent-text متصل کنید. حالا اگر رنگ‌بندی برند شما تغییر کند، فقط کافیست مقدار متغیر را ویرایش کنید تا تغییر در همه المان‌ها و کلاس‌ها اعمال شود.

کنترل کامل متغیرها در اختیار مدیران سایت (Admins) است. مدیران می‌توانند متغیرها را ایجاد، ویرایش و مدیریت کنند (دقیقاً مثل کلاس‌های سراسری). کاربران غیرمدیر مثل ویرایشگرها، نویسندگان یا مدیران فروشگاه فقط می‌توانند متغیرهای موجود را روی المان‌ها اعمال کنند، اما امکان ویرایش آن‌ها را ندارند.

اعمال افکت‌های تصویری لایه‌ای با فیلترها

المنتور 3.31 پشتیبانی کامل از فیلترها (Filters) را مستقیماً در ویرایشگر V4 اضافه کرده است. با این قابلیت می‌توانید بدون نیاز به کدنویسی، جلوه‌های بصری جذاب‌تری به سایت خود اضافه کنید.

در مجموع ۹ نوع فیلتر در دسترس شماست که می‌توانید آن‌ها را به‌صورت جداگانه یا ترکیبی استفاده کنید:

• Blur (تار کردن)
• Brightness (روشنایی)
• Contrast (کنتراست)
• Hue Rotate (چرخش رنگ)
• Saturate (اشباع رنگ)
• Grayscale (سیاه و سفید)
• Invert (معکوس کردن رنگ‌ها)
• Sepia (افکت قهوه‌ای/قدیمی)
• Drop Shadow (سایه)

مدیریت این فیلترها از طریق یک رابط کاربری ساده و کاربردی انجام می‌شود. شما می‌توانید چند فیلتر را روی هم قرار دهید، تغییرات را به‌صورت زنده مشاهده کنید و ترتیب آن‌ها را تغییر دهید یا هر زمان لازم بود حذفشان کنید.

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

ایجاد افکت‌ های پیشرفته مثل Glassmorphism با Backdrop Filters

Backdrop Filters به شما امکان می‌دهند تا افکت‌ های ظاهری را روی پس‌ زمینه پشت یک المان اعمال کنید، نه فقط خود المان. این قابلیت طراحی مدرن مانند Glassmorphism را آسان‌ تر می‌کند. حالا می‌توانید کانتینر های شفاف و لایه‌ ای ایجاد کنید که حتی روی پس‌ زمینه‌ های شلوغ هم خوانا باشند و هم ظاهر شیک و حرفه‌ ای داشته باشند.

با ترکیب شفافیت و کانتینرهای لایه‌ای، می‌توانید:

• پشت هدر نیمه‌شفاف، محتوای پشت آن را تار (Blur) کنید
• پنل‌های خوانا روی ویدئوها، تصاویر یا پس‌زمینه‌های شلوغ ایجاد کنید
• ظاهری مدرن و حرفه‌ای برای رابط کاربری بسازید بدون نیاز به هیچ CSS سفارشی

مثل فیلتر های معمولی، می‌توانید از ۹ افکت مختلف استفاده کنید، مانند تار کردن (Blur)، روشنایی (Brightness)، سیاه‌ و سفید (Grayscale) یا سایه (Drop Shadow). همچنین می‌ توانید چند Backdrop Filter را روی هم قرار دهید و آن‌ ها را روی کلاس‌ های V4 خود اعمال کنید.

نکته: برای استفاده مؤثر از Backdrop Filters، پس‌ زمینه المان باید شفاف باشد.

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

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

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

مشاهده سریع استایل‌ ها با مقادیر ارث‌ بری شده

یکی از چالش‌ های طراحی واکنش‌گرا و استایل‌ دهی مبتنی بر کلاس، فهمیدن این است که یک مقدار مشخص از کجا آمده است. ویرایشگر V4 آلفا با نمایش بصری مقادیر ارث‌ بری شده این مشکل را حل کرده است.

این مقادیر در کنترل پنل به‌ صورت کم‌ رنگ نمایش داده می‌ شوند و به شما نشان می‌دهند که یک استایل از کلاس، استایل پایه یا نقطه شکست واکنش‌گرا (responsive breakpoint) به ارث رسیده است.

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

افزودن نشانه‌گذاری معنایی با Attributes

کاربران حرفه‌ ای حالا می‌توانند کنترل کامل روی نشانه‌ گذاری المان‌ها داشته باشند با استفاده از Attributes Repeater. این قابلیت به شما اجازه می‌دهد هر تعداد Attribute یا ویژگی HTML را به المان‌ ها اضافه کنید؛ مانند:

• aria-* برای دسترسی بهتر (Accessibility)
• data-* برای تحلیل و آمارگیری
• role برای شفافیت معنایی

پنل Attributes برای کاربران Elementor Pro با پلن Advanced یا بالاتر در دسترس است و یک ابزار ضروری است، چه برای بهینه‌ سازی کد نویسی و عملکرد سایت و رعایت استاندارد ها و چه برای ساخت چارچوب‌ های دسترس‌ پذیرتر.

ساختار بصری منظم با المان جدید Divider

Divider ها (خط‌های جداکننده) اغلب نادیده گرفته می‌شوند، اما در طراحی چیدمان سایت نقش مهمی دارند. المان جدید Divider در ویرایشگر V4 یک <hr> معنایی است که بین بخش‌ ها جدایی واضح و تمیز ایجاد می‌کند بدون اینکه کد اضافی تولید کند. این المان واکنش‌گر است، به راحتی با کلاس‌ ها قابل استایل‌ دهی است و برای کسانی که سیستم‌ های طراحی مبتنی بر المان یا کلاس‌ های ابزارکی می‌سازند، ایده‌آل است. این بروزرسانی کوچک اما تأثیر زیادی در سبک‌ تر و قابل مدیریت‌ تر شدن ساختار DOM سایت دارد.

امروز ویرایشگر V4 را امتحان کنید

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

برای فعال‌سازی ویرایشگر V4 آلفا:

• المنتور را به آخرین نسخه به‌روزرسانی کنید.
• در پیشخوان وردپرس به مسیر Elementor > Settings > Editor V4 بروید.
• روی گزینه «فعال‌سازی» کلیک کنید.