معرفی ویرایشگر V4 آلفا: آینده‌ی وب‌سایت‌سازی با المنتور

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

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

• عدم یکپارچگی: مشکل در هماهنگ‌سازی استایل چندین عنصر مختلف در سراسر سایت.
• کارهای تکراری: به‌روزرسانی یک استایل مشخص در چندین بخش به صورت مکرر.
• محدودیت در واکنش‌گرایی: نیاز به استفاده از CSS سفارشی یا مخفی کردن عناصر برای نمایش صحیح در دستگاه‌های مختلف.
• کاهش سرعت: عملکرد کندتر وب‌سایت هنگام استفاده از طرح‌بندی‌های (Layouts) پیچیده.
• رابط‌های کاربری ناهماهنگ: تفاوت ظاهری و عملکردی در ویجت‌های گوناگون.

ویرایشگر V4 با ارائه یک فریم‌ورک قدرتمند مبتنی بر CSS (CSS-first)، به تمام این چالش‌ها پاسخ می‌دهد و قابلیت‌هایی در سطح حرفه‌ای را بدون نیاز به نوشتن حتی یک خط کد، در اختیار شما قرار می‌دهد.

اولین نسخه آلفای ویرایشگر V4 هم اکنون به صورت یک قابلیت اختیاری (Opt-in) در دسترس است. این نسخه به شما فرصت می‌دهد تا با سرعت و روال دلخواه خود، قابلیت‌های جدید را بررسی و کشف کنید. شما می‌توانید ویژگی‌های جدید را تست کرده، بازخوردتان را با ما در میان بگذارید و همزمان به استفاده از امکانات آشنای نسخه V3 ادامه دهید.

برای شروع استفاده از ویرایشگر V4 آلفا، ابتدا افزونه المنتور را به نسخه ۳.۲۹ به‌روزرسانی کنید، سپس به مسیر زیر بروید و مراحل فعال‌سازی را دنبال کنید:
المنتور > تنظیمات > ویرایشگر V4

هشدار مهم: لطفا توجه داشته باشید که این یک نسخه آلفای اولیه است. این نسخه باید فقط روی سایت‌های آزمایشی (Staging) یا تستی استفاده شود و به هیچ عنوان نباید آن را روی یک سایت اصلی و فعال (Production) نصب کنید.

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

تصور کنید در حال ساخت وب‌سایتی با ده‌ها دکمه هستید که همگی باید طراحی یکسانی داشته باشند. در گذشته، مجبور بودید هرکدام را جداگانه استایل‌دهی کنید یا از راه‌حل‌های جایگزین استفاده نمایید. اما با سیستم جدید کلاس‌ها (Classes) در ویرایشگر V4، شما می‌توانید:

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

این سیستم دو نوع کلاس را معرفی می‌کند:

• کلاس محلی (Local Class)
  هر عنصر به طور خودکار یک «کلاس محلی» منحصر به فرد دریافت می‌کند (که با رنگ صورتی نمایش داده می‌شود). این کلاس بالاترین اولویت را در استایل‌دهی دارد و قابل حذف نیست. این ویژگی تضمین می‌کند که استایل‌های مخصوص یک عنصر، توسط کلاس‌های دیگر بازنویسی (override) نشوند.
• کلاس‌های سراسری (Global Classes)
  شما می‌توانید کلاس‌های دلخواه خود را بسازید و نام‌گذاری کنید (که با رنگ سبز نمایش داده می‌شوند) تا به هر عنصری که باید از آن استایل‌ها پیروی کند، اعمال نمایید. وقتی یک کلاس سراسری را ویرایش می‌کنید، تغییرات به طور خودکار روی تمام عناصری که از آن کلاس استفاده می‌کنند، اعمال می‌شود. همچنین می‌توانید این کلاس‌ها را از یک عنصر حذف کنید، بدون آنکه خود کلاس پاک شود؛ این ویژگی، آزمودن و پیاده‌سازی طراحی‌های مختلف را بسیار آسان می‌کند.

با حالت‌ها (States)، استایل‌های تعاملی را بدون نیاز به کدنویسی تعریف کنید

با استفاده از حالت‌ها (States / Pseudo-Classes)، به وب‌سایت خود جان ببخشید و عناصر تعاملی طراحی کنید. با ایجاد حالت‌های hover (قرار گرفتن ماوس)، focus (انتخاب عنصر) و active (در حال کلیک) برای هر کلاس، می‌توانید ظاهر دقیق عناصر را هنگام تعامل بازدیدکنندگان با آن‌ها مشخص کنید. این قابلیت به شما امکان می‌دهد تا تجربیات تعاملی جذابی را بدون نوشتن حتی یک خط کد خلق کنید.

برای افزودن یک حالت (State)، کافیست روی آیکون سه‌نقطه در کنار کلاسی که می‌خواهید، کلیک کرده و از میان گزینه‌های hover، active یا focus یکی را انتخاب نمایید. از این پس، تغییراتی که اعمال می‌کنید فقط برای حالت انتخاب‌شده ذخیره خواهد شد.

تغییر در یک حالت روی حالت‌های دیگر تأثیری نمی‌گذارد و این ویژگی به شما کنترلی دقیق بر عناصر تعاملی‌تان می‌دهد. بهترین بخش این است که با ترکیب حالت‌ها (States) و کلاس‌های سراسری (Global Classes)، می‌توانید این تعاملات را به صورت کاملا یکپارچه در سرتاسر وب‌سایت خود پیاده‌سازی کنید.

کنترل و سازماندهی کلاس‌ها با Class Manager

ابزار Class Manager به عنوان یک مرکز فرماندهی برای حفظ یکپارچگی استایل‌ها در سراسر سایت شما عمل می‌کند و به شما اجازه می‌دهد تا:

• کلاس‌ها را از یک پنل متمرکز حذف کرده یا تغییر نام دهید.
• اولویت و سلسله‌ مراتب کلاس‌ها را با قابلیت کشیدن و رها کردن (Drag and Drop) تغییر دهید.
• تمام کلاس‌های سراسری (Global Classes) خود را در یک نمای یکپارچه و سازمان‌یافته مشاهده کنید.

درک نحوه آبشاری شدن استایل‌ها با Class Indicators

هنگام کار با کلاس‌ها (Classes) و حالت‌ها (States)، نشانگرهای رنگی به شما نمایش داده می‌شوند تا درک نحوه آبشاری شدن استایل‌ها را آسان‌تر کنند. هر رنگ معنای خاصی دارد:

• نشانگر صورتی: استایل‌های مربوط به «کلاس محلی» (Local Class).
• نشانگر سبز: استایل‌های مربوط به «کلاس‌های سراسری» (Global Classes).
• نشانگر نارنجی: تداخل در استایل‌ها که نیاز به توجه و بازبینی دارد.
• نشانگر خاکستری: استایل‌های به ارث برده شده از سایر کلاس‌ها.

این راهنماهای بصری، بازخورد لحظه‌ای را در حین کار به شما ارائه می‌دهند و کمک می‌کنند تا منشأ هر استایل و نحوه تعامل آن‌ها با یکدیگر را به سادگی درک کنید.

یکپارچگی در طراحی و گردش کار بهینه با «تب استایل» یکپارچه

ویرایشگر V4 «تب استایل» (Style Tab) یکپارچه‌ای را معرفی می‌کند که برای تمام عناصر مشترک است؛ این در تضاد با پنل نسخه V3 است که در آن هر ویجت، گزینه‌ها و ساختار استایل‌دهی مخصوص به خود را داشت.

مزایای اصلی «تب استایل» یکپارچه جدید:

• تنظیمات مربوط به محتوا و عملکرد در تب عمومی (General Tab) باقی می‌مانند.
• تمام گزینه‌های استایل‌دهی ظاهری در تب استایل (Style Tab) قرار دارند.
• کافیست سیستم را یک بار یاد بگیرید و از آن در همه‌جا استفاده کنید.
• به قابلیت‌های استایل‌دهی قدرتمند به صورت یکپارچه برای تمام عناصر دسترسی دارید.

«تب استایل» یکپارچه شامل بخش‌های جامعی برای کنترل کامل شماست:

• طرح‌بندی (Layout): تعریف رفتار نمایش و ساختار عنصر.
• فاصله‌گذاری (Spacing): تنظیم مارجین (margin) و پدینگ (padding) با کنترل‌های پیوسته.
• اندازه (Size): تعریف عرض و ارتفاع دقیق همراه با محدودیت‌ها.
• موقعیت (Position): انتخاب شیوه‌های موقعیت‌یابی همراه با کنترل Z-Index.
• تایپوگرافی (Typography): دسترسی به گزینه‌های ضروری برای استایل‌دهی به متن.
• پس‌زمینه (Background): ایجاد طراحی‌های غنی و لایه‌لایه با پتانسیل نامحدود.
• کادر (Border): اعمال استایل‌های کادر به صورت یکپارچه یا متنوع.
• جلوه‌ها (Effects): افزودن چندین لایه سایه و دیگر جلوه‌های بصری.

بهبود عملکرد سایت با کاهش کدهای اضافه به صورت تک DIV

ویرایشگر V4 ساختار کدنویسی (DOM) بسیار تمیزتری را معرفی می‌کند که مستقیما بر عملکرد وب‌سایت شما تأثیر می‌گذارد. اکنون هر عنصر تنها از یک لایه پوششی (div) استفاده می‌کند، در حالی که در نسخه‌های قبلی چندین لایه‌ی تودرتو برای هر عنصر وجود داشت. این ساختار ساده‌شده، خروجی HTML تمیزتری تولید کرده، حجم کلی صفحه را کاهش می‌دهد و پیچیدگی پردازش برای مرورگرها هنگام نمایش صفحات را کم می‌کند. این امر منجر به نتایج زیر می‌شود:

• کدنویسی تمیزتر و بارگذاری سریع‌تر
• صفحات رتبه‌بندی بهتر در موتورهای جستجو (سئو)
• تجربه کاربری بهتر برای بازدیدکنندگان

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

کنترل کامل استایل‌ها در موبایل، تبلت و دسکتاپ

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

در ویرایشگر V4، تک‌تک ویژگی‌های استایل را می‌توان به تفکیک هر دستگاه تنظیم کرد؛ بدون هیچ استثنایی. کافیست از طریق نوار بالایی (Top Bar) بین دستگاه‌های مختلف جابجا شوید تا تنظیمات مورد نظر خود را فقط برای همان اندازه صفحه اعمال کنید. این یعنی شما می‌توانید استایلی کاملاً متفاوت برای موبایل و دسکتاپ داشته باشید، بدون آنکه حتی یک خط کد CSS بنویسید.

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

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

با «تکرارکننده‌های استایل»، به طراحی خود عمق و جزئیات بیشتری ببخشید

ویرایشگر V4 قابلیت «تکرارکننده‌های استایل» (Style Repeaters) را معرفی می‌کند که به شما اجازه می‌دهد ساختارهای لایه‌لایه برای پس‌زمینه و جلوه‌های بصری ایجاد کنید:

• افزودن چندین تصویر پس‌زمینه، گرادینت و رنگ به صورت لایه‌ای.
• ایجاد جلوه‌های سایه پیچیده با چندین لایه مختلف.
• تغییر ترتیب لایه‌ها با قابلیت کشیدن و رها کردن (Drag and Drop).
• کپی، مخفی یا حذف کردن هر لایه با یک کلیک.

علاوه بر این، ابزار گرادینت پیشرفته، کنترل‌های جدیدی را ارائه می‌دهد که به شما امکان می‌دهد تا هر تعداد «نقطه رنگی» (Color Stop) که نیاز دارید اضافه کرده و موقعیت دقیق آن‌ها را برای خلق جلوه‌های بصری خیره‌کننده تنظیم کنید.

در حال حاضر، قابلیت «تکرارکننده‌های استایل» برای بخش‌های پس‌زمینه (Background) و سایه کادر (Box Shadow) فعال است و گزینه‌های استایل‌دهی بیشتری نیز به زودی به آن اضافه خواهد شد.

عناصر جدید در ویرایشگر V4

نسخه آلفای ویرایشگر V4، هفت عنصر پایه‌ای و اتمی (Atomic) جدید را معرفی می‌کند:

• بلاک DIV
• فلکس‌باکس (Flexbox)
• عنوان (Heading)
• پاراگراف (Paragraph)
• تصویر (Image)
• دکمه (Button)
• تصویر SVG

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

با ادامه تکامل ویرایشگر V4، عناصر بسیار بیشتری در نسخه‌های آینده به آن اضافه خواهند شد.

سازگاری کامل و یکپارچه با نسخه V3

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

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

با این حال، ما درک می‌کنیم که مهاجرت به یک سیستم جدید زمان‌بر است و به همین دلیل، ویرایشگر V4 در حال حاضر به صورت کاملاً یکپارچه در کنار نسخه V3 کار می‌کند:

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

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

آغاز سفر به دنیای ویرایشگر V4 المنتور

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

نکته مهم: این نسخه آلفا صرفاً جهت بررسی و آزمایش ارائه شده است. شرکت المنتور اکیداً توصیه می‌کند که کاربران آن را فقط روی سایت‌های آزمایشی (Staging) استفاده کنند و هرگز روی یک سایت اصلی و فعال (Production) به کار نبرند.

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

در نسخه‌های بعدی می‌توان منتظر قابلیت‌هایی نظیر متغیرها (Variables)، ویژگی‌های سفارشی (Custom Attributes)، شناسه‌های CSS و امکانات بسیار دیگر بود.