معرفی نسخه 4.0: ویجت های پایه اتمی جدید برای ساخت وب‌ سایت‌ های مقیاس‌ پذیر

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

با المنتور 4.0،  نصب المنتور  روی سایت جدید با ویژگی‌ های Atomic که به طور پیش‌فرض فعال هستند، از جمله عناصر اتمی، متغیر ها، کلاس‌ ها و کامپوننت‌ ها آغاز می‌شوند.

برای وب سایت های موجود، به روز رسانی به 4.0 تنظیمات فعلی را تغییر نمی دهد. ویژگی‌ های اتمی را می‌توان به صورت دستی از اطلاعیه جدید در پنل عناصر فعال کرد و از قسمت مدیریت وردپرس – المنتور – ویرایشگر – تنظیمات – ویرایشگر اتمیک غیرفعال کرد.

قابلیت‌های اضافی Atomic به گسترش و عرضه در نسخه‌های بعدی ادامه خواهند داد. نقشه راه را در اینجا دنبال کنید.

استایل‌ها را یک بار با کلاس‌ها تنظیم کنید

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

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

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

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

کلاس های خود را با مدیر کلاس کنترل و سازماندهی کنید

مدیر کلاس یک مرکز فرماندهی برای حفظ یک استایل ثابت در سراسر سایت شما فراهم می کند و به شما اجازه می دهد:

• حذف یا تغییر نام کلاس ها از یک مکان مرکزی
• اولویت و سلسله مراتب کلاس را با کشیدن و رها کردن تغییر دهید
• همه کلاس های عمومی خود را در یک نمای سازمان یافته مشاهده کنید

ایجاد سیستم های طراحی سازگار با متغیرها

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

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

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

یک بار بسازید، همه جا با کامپوننت ها دوباره استفاده کنید [Pro]

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

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

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

به همراه Variables، Classes و معماری جدید استایل‌ دهی، Components روشی منظم‌ تر برای ساخت و نگهداری وب‌سایت‌ ها معرفی می‌کنند، به‌طوری‌ که پروژه‌ ها با افزایش اندازه و پیچیدگی مواجه می‌شوند.

به طور مداوم کار کنید و روند کار خود را با تب استایل یکپارچه ساده‌سازی کنید.

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

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

• تنظیمات محتوا و قابلیت‌ ها در برگه عمومی باقی می‌مانند.
• تمام گزینه‌های استایل بصری در برگه استایل موجود است.
• سیستم را یکبار بیاموزید و در همه جا به کار ببرید.
• به ویژگی‌ های قدرتمند طراحی به‌ طور مؤثر در تمام عناصر دسترسی داشته باشید.

عملکرد سایت خود را با استفاده از wrapper های تک div بهبود ببخشید.

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

• کد تمیز تر و رندر سریعتر
• بهبود رتبه سئو
• تجربه ای بهتر برای بازدیدکنندگان شما

هر ویژگی استایل را بر حسب دستگاه کنترل کنید.

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

در Atomic Elements، هر ویژگی استایل می‌تواند به‌ طور خاص برای هر دستگاه تنظیم شود، بدون هیچ استثنایی. به سادگی در نوار بالایی بین دستگاه‌ ها جابه‌جا شوید تا تنظیمات هدفمندی انجام دهید که تنها بر اندازه صفحه‌ن مایش خاصی که در حال ویرایش آن هستید تأثیر می‌گذارد. هیچ استثنایی وجود ندارد. این بدان معناست که می‌توانید استایل‌ های کاملا متفاوتی برای موبایل و دسکتاپ داشته باشید بدون اینکه حتی یک خط CSS بنویسید.

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

فرم‌ها را با کنترل اتمی کامل بسازید [Pro]

فرم‌های اتمی جدید با ترکیب عناصر فردی فیلد درون یک کانتینر فرم ساخته می‌شوند. هر فیلدی مانند Label، Input، Textarea، Checkbox یا Submit Button، یک عنصر قابل جابجایی است که به‌ طور مستقل وجود دارد و می‌تواند مستقیما به ساختار فرم منتقل شود.

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

زیرا هر فیلد یک عنصر مستقل است، می‌توانید فرم‌ های خود را به‌ صورت بصری بر روی canvas ساختاردهی و تنظیم کنید، به‌ جای این‌ که آنها را در یک پنل ویجت پیکربندی کنید.

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

نسخه‌ های آینده سیستم را با قابلیت‌ های اضافی مانند منطق شرطی پیشرفته‌ تر گسترش خواهند داد.

ایجاد تعاملات پیشرفته برای تجربیات پویا [Pro]

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

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

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

تعاملات می توانند همچنین بر اساس breakpoint پیکربندی شوند، که به شما این امکان را می دهد تا حرکت را به صورت متفاوت برای دسکتاپ، تبلت و موبایل طراحی کنید. این امر اطمینان حاصل می کند که انیمیشن ها به طور مناسب در تمام دستگاه ها عمل می کنند. به عنوان مثال، می توان از افکت های پیچیده تر مرتبط با اسکرول در صفحه های بزرگتر استفاده کرد در حالی که بعضی از تعاملات را در موبایل ساده تر یا غیر فعال می کنیم تا عملکرد و قابلیت استفاده حفظ شود.