در المنتور نسخه 4 با کلاسها، استایلها را یکبار تعریف و بارها استفاده کنید
تصور کنید سایتی با دهها دکمه میسازید که همگی باید طراحی یکسانی داشته باشند. در گذشته، لازم بود استایل هر دکمه را جداگانه تنظیم کنید یا از روشهای جایگزین کمک بگیرید. اکنون با سیستم جدید کلاسها در المنتور نسخه 4 میتوانید:
- مجموعهای از استایلهای قابل استفاده مجدد بسازید و آن را روی چندین عنصر اعمال کنید.
- استایلها را در یک محل تغییر دهید و نتیجه را در تمام عناصر دارای آن کلاس ببینید.
- هماهنگی طراحی را در سراسر سایت حفظ کنید.
با حالتها1States، استایلهای تعاملی را بدون کدنویسی تعریف کنید
با استفاده از حالتها یا شبهکلاسها2Pseudo-Classes در ویرایشگر اتمیک المنتور، عناصر تعاملی بسازید و به سایت خود جان بدهید. برای هر کلاس میتوانید ظاهر عناصر را هنگام قرار گرفتن نشانگر ماوس روی آنها3Hover، دریافت فوکوس4Focus و فعالشدن5Active مشخص کنید. به این ترتیب، دقیقاً تعیین میکنید که عناصر هنگام تعامل بازدیدکنندگان چه ظاهری داشته باشند و بدون نوشتن حتی یک خط کد، تجربهای جذاب و تعاملی ایجاد میکنید.
البته ما قبلاً در مقاله «برجسته کردن تولید محتوا با تعاملیکردن آن» به فواید تعامل مشتری با سایت و اهمیت آن در طراحی سایت و تولید محتوا، اشاره کردهایم. خوشبختانه با ویژگی جدید المنتور، میتوانید این کار را (در برخی زمینههای طراحی) راحتتر انجام دهید.
کلاسهای خود را با مدیریت کلاسها6Class Manager کنترل و سازماندهی کنید
بخش مدیریت کلاسها در ویرایشگر اتمیک المنتور، مرکزی برای ساماندهی کلاسها و حفظ هماهنگی استایلها در سراسر سایت است. در این بخش میتوانید:
- کلاسها را از یک محل مشخص حذف کنید یا نام آنها را تغییر دهید.
- اولویت و ترتیب کلاسها را با کشیدن و رها کردن تغییر دهید.
- تمام کلاسهای سراسری7Global Classes را در یک نمای منظم ببینید.
با متغیرها، یک سیستم طراحی هماهنگ بسازید
با معرفی متغیرها8Variables در المنتور نسخه 4، طراحی سایت در مقیاس بزرگتر بسیار سادهتر میشود. بهجای اینکه استایل هر عنصر را بهصورت دستی تنظیم کنید، میتوانید رنگها، خانوادههای فونت و اندازهها را یکبار تعریف کنید و در سراسر سایت بهصورت هماهنگ به کار ببرید.
البته اگر نمیدانید «دیزاین سیستم چیست؟»، بهتر است ابتدا آشنایی مختصری با مفهوم آن بهخصوص در المنتور پیدا کنید. در المنتور نسخه 4 سعی شده است که این ویژگی به شکل بهتری مدیریت شود.
فرض کنید در چندین کلاس سراسری و بخشهای مختلف سایت، از رنگها، اندازهها و فونتهای یکسان استفاده میکنید. در ویرایشگر اتمیک المنتور، بهجای تنظیم مجدد پسزمینه، رنگ متن، اندازه متن و خانواده فونت، کافی است این ویژگیها را به متغیرهایی مانند primary-color، button-font و accent-text متصل کنید.
حالا اگر پالت رنگ برند شما تغییر کند، کافی است متغیر مربوط به آن را بهروزرسانی کنید تا این تغییر در تمام کامپوننتها، کلاسها و عناصری که از آن متغیر استفاده میکنند، اعمال شود.
با کامپوننتها، یکبار بسازید و همهجا استفاده کنید (نسخه پرو)
کامپوننتها9Components در المنتور نسخه 4 به شما امکان میدهند بخشهایی با چیدمان قابل استفاده مجدد بسازید که در سراسر سایت هماهنگ باقی میمانند. منظورمان همان لی اوت در طراحی وب است.
در عین حال، میتوانید هر نمونه را در چارچوبی مشخص شخصیسازی کنید. کافی است هر کانتینر را به یک کامپوننت تبدیل کنید و نامی مشخص به آن بدهید تا شناسایی و استفاده مجدد از آن آسان باشد.
با ویرایش یک کامپوننت، تمام نمونههای آن در سراسر سایت بهصورت خودکار بهروزرسانی میشوند و ساختار و استایل آنها هماهنگ باقی میماند. به همین دلیل، کامپوننتها برای بخشهای مشترک مانند بنرها، فراخوانهای اقدام10CTA، چیدمانهای شبکهای معرفی ویژگیها، هدرها و الگوهای تکرارشوندهای مناسباند که باید در طول زمان یکپارچه بمانند.
کامپوننتها همچنین امکان ویرایش کنترلشده محتوا را فراهم میکنند. شما مشخص میکنید کدام بخشهای محتوایی در هر نمونه قابل ویرایش باشند. به این ترتیب، ویراستاران و مشتریان فقط میتوانند همان موارد را تغییر دهند، درحالیکه چیدمان و ساختار اصلی حفظ میشود و در سراسر سایت هماهنگ میماند. این تعادل میان یکپارچگی و انعطافپذیری، کامپوننتها را به ابزاری کاربردی برای فرآیندهای کاری حرفهای، همکاری تیمی و تحویل سایت به مشتری تبدیل میکند.
کامپوننتها در کنار متغیرها، کلاسها و معماری جدید استایلدهی در ویرایشگر اتمیک المنتور، روشی منظمتر برای ساخت و نگهداری سایتها فراهم میکنند. روشی که با بزرگتر و پیچیدهتر شدن پروژهها، مدیریت آنها را آسانتر میکند.
تب یکپارچه استایل در المنتور نسخه 4
المنتور نسخه 4 یک تب یکپارچه برای استایلدهی معرفی میکند که در تمام عناصر اتمیک ساختار مشترکی دارد. در مقابل، در ویجتهای کلاسیک نسخه 3، هر ویجت گزینهها و ساختار مخصوص خود را برای تنظیم استایل داشت.
مهمترین مزایای تب یکپارچه استایل در ویرایشگر اتمیک المنتور عبارتاند از:
- تنظیمات محتوا و عملکرد در تب عمومی11General قرار دارند.
- تمام گزینههای مربوط به ظاهر عناصر در تب استایل12Style در دسترس هستند.
- کافی است کار با این سیستم را یکبار یاد بگیرید و در همه عناصر از آن استفاده کنید.
- قابلیتهای پیشرفته استایلدهی با ساختاری یکسان در تمام عناصر در دسترس شما هستند.
با یک لایه DIV برای هر عنصر، عملکرد سایت را بهبود دهید
ویرایشگر اتمیک المنتور ساختار DOM بسیار سادهتر و مرتبتری ارائه میکند که مستقیماً بر عملکرد سایت تأثیر میگذارد. در المنتور نسخه 4، هر عنصر تنها از یک لایه دربرگیرنده DIV استفاده میکند، درحالیکه نسخههای قبلی چندین DIV تودرتو داشتند.
منظور از DIV یا همان div، یکی از تگ های HTML است که بعد از ایجاد و بهکارگیری عناصر در ویرایشگر المنتور، در صفحه سایت شما (هنگام لود) برای ارائه ساختار کد HTML به کار میروند (این مسئله به صورت خودکار توسط خود المنتور مدیریت و سازماندهی میشود).
این ساختار سادهتر، خروجی HTML تمیزتری تولید میکند، حجم کلی صفحه را کاهش میدهد و پردازش موردنیاز مرورگر برای نمایش صفحات را سبکتر میکند. نتیجه این تغییرات عبارت است از:
- کد تمیزتر و نمایش سریعتر صفحات
- کمک به بهبود رتبه سایت در نتایج جستوجو
- تجربه بهتر برای بازدیدکنندگان سایت
به عنوان مثال، ما یک ویجت دکمه را یکبار در یک container در نسخههای قبلتر المنتور تست کردیم. شکل ساده بهکارگیری این دکمه درون ویجت کانتینر را در ادامه مشاهده میکنید:
در این حالت که از نسخههای قدیمیتر المنتور استفاده شده است، اگر در مرورگر خود در تب Elements، ساختار HTML صفحه لودشده را بررسی کنید، احتمالاً با چنین المانهایی روبهرو میشوید:
همانطور که ملاحظه میکنید، حدود 5 تگ دیو برای این ساختار در DOM شما ایجاد شده است. اما اگر از المنتور نسخه 4 و ویرایشگر اتمیک آن استفاده کنید، قضیه متفاوت خواهد بود. ما از یک ویجت دیو در المنتور استفاده کردیم و همان دکمه را درون آن به کار بردیم. خروجی ساختار HTML را در تصویر زیر مشاهده میکنید. تنها «دو تگ div» برای رندرشدن این ساختار المانها به کار گرفته شده است:
تمام ویژگیهای استایل را برای هر دستگاه جداگانه تنظیم کنید
المنتور نسخه 4 با رویکردی جامع به طراحی واکنشگرا، کنترل بیشتری در اختیار شما میگذارد و محدودیت ویجتهای نسخه 3 را برطرف میکند. در نسخه قبلی، فقط برخی از تنظیمات، گزینههای واکنشگرا داشتند.
در عناصر اتمیک، تمام ویژگیهای استایل، بدون استثنا، برای هر دستگاه قابل تنظیم هستند. کافی است از نوار بالای ویرایشگر بین دستگاهها جابهجا شوید و تغییرات دلخواه را برای اندازه صفحه نمایشی که در حال ویرایش آن هستید، اعمال کنید.
به این ترتیب، در ویرایشگر اتمیک المنتور میتوانید بدون نوشتن حتی یک خط کد CSS، برای موبایل و دسکتاپ استایلهایی کاملاً متفاوت طراحی کنید.
وقتی از انتخابگر دستگاه در نوار بالا استفاده میکنید، علاوه بر مشاهده پیشنمایش سایت، وارد محیط ویرایش مخصوص همان دستگاه میشوید.
با کنترل کامل اتمیک، فرم بسازید (نسخه پرو)
فرمهای اتمیک جدید در المنتور نسخه 4 با کنار هم قرار دادن عناصر مستقل در یک کانتینر فرم ساخته میشوند. هر عنصر، مانند برچسب13Label، کادر ورودی14Input، کادر متن چندخطی15Textarea، چکباکس یا دکمه ارسال، مستقل است و میتوانید آن را با کشیدن و رها کردن مستقیماً به ساختار فرم اضافه کنید.
عناصر فرم مانند سایر عناصر در ویرایشگر اتمیک المنتور عمل میکنند. یعنی میتوانید ظاهر آنها را از طریق تب یکپارچه استایل تنظیم کنید و با استفاده از کلاسها، متغیرها، کامپوننتها و دیگر قابلیتها، آنها را با سیستم طراحی سایت هماهنگ نگه دارید.
ازآنجاکه هر فیلد یک عنصر مستقل است، میتوانید ساختار و چیدمان فرم را بهصورت بصری و مستقیماً در فضای طراحی تنظیم کنید، بهجای اینکه همه تنظیمات را در پنل یک ویجت انجام دهید.
همچنین میتوانید عناصر دیگری مانند متن، آیکون، تصویر و کانتینرهای چیدمان را داخل فرم قرار دهید. این امکان، انعطاف بیشتری در طراحی فرمها به شما میدهد و حتی میتوانید فرمهایی با چیدمان چندستونه بسازید.
در نسخههای آینده، قابلیتهای بیشتری مانند منطق شرطی و فرآیندهای پیشرفتهتر برای مدیریت فرمها، به این سیستم اضافه خواهد شد.
با تعاملات پیشرفته در المنتور نسخه 4 آشنا شوید!
اکنون در المنتور نسخه 4 میتوانید تعاملاتی طراحی کنید که به نحوه استفاده بازدیدکنندگان از سایت واکنش نشان دهند. دیگر به انیمیشنهای ورود محدود نیستید. عناصر میتوانند به رفتار واقعی کاربران و حرکت صفحه نیز پاسخ دهند.
محرکها16Triggers امکان ساخت تجربههایی جذابتر و پویاتر را فراهم میکنند. برای مثال، عناصری که هنگام اسکرول نمایان میشوند، کارتهایی که با قرار گرفتن نشانگر ماوس روی آنها واکنش نشان میدهند یا کامپوننتهایی که با کلیک کاربر تغییر میکنند، همگی از امکانات جدید المنتور نسخه 4 هستند.
برای طراحی این تعاملات، افکت سفارشی جدید17Custom کنترل دقیقی بر نحوه حرکت و تغییر عناصر در اختیار شما میگذارد. بهجای انتخاب یک انیمیشن آماده، خودتان مشخص میکنید که عناصر هنگام جابهجایی بین حالتهای مختلف، دقیقاً چگونه تغییر کنند.
در ویرایشگر اتمیک المنتور، میتوانید تعاملات را برای هر نقطه شکست18Breakpoint نیز جداگانه تنظیم کنید و رفتار انیمیشنها را متناسب با دسکتاپ، تبلت و موبایل طراحی کنید.
برای مثال، در صفحهنمایشهای بزرگتر از افکتهای پیشرفتهتر وابسته به اسکرول استفاده کنید و در موبایل، برای حفظ سرعت و سهولت استفاده، برخی تعاملات را سادهتر یا غیرفعال کنید.
جمعبندی
المنتور نسخه 4 با معرفی متغیرها، کلاسها، کامپوننتها و سیستم یکپارچه استایلدهی، طراحی و مدیریت سایت را منظمتر میکند. ویژگی اتمیک المنتور به شما کمک میکند از تنظیمات و بخشهای طراحیشده دوباره استفاده کنید، تغییرات را هماهنگ پیش ببرید و ظاهر سایت را برای دستگاههای مختلف با دقت بیشتری تنظیم کنید.
ویرایشگر اتمیک المنتور با ساختار سبکتر و امکانات انعطافپذیر، مسیر توسعه سایت را هموارتر میکند. اگر سایتی با نسخههای قبلی دارید، میتوانید بدون بازسازی چیدمانهای موجود، بهتدریج از عناصر اتمیک در کنار ویجتهای فعلی استفاده کنید و متناسب با نیاز پروژه، از قابلیتهای جدید بهره ببرید.
توجه داشته باشید که برخی از این ویژگیها تنها در نسخه پیشرفته افزونه وجود دارند. برای تهیه المنتور نسخه 4 پیشرفته میتوانید به سایتهای مختلفی از جمله این سایت خرید افزونه وردپرس، مراجعه کنید.
