اگر Elementor V4 یا نسخه المنتور 4 اتمیک را باز کرده‌اید و کلماتی مانند class، local، global و variable را دیده‌اید، طبیعی است که کمی احساس سردرگمی کنید. این موارد فقط برچسب های جدید نیستند آنها قلب شیوه مدیریت استایل در المنتور نسخه 4 هستند و درک عملکرد آنها اهمیت زیادی دارد.
خبر خوب اینکه کلاس ها و متغیرهای Elementor V4 بسیار ساده‌تر از آن چیزی هستند که به نظر می‌رسند. در این راهنمای توضیح می دهیم که آنها چه هستند، چه تفاوتی دارند و چرا ساعت‌ها در وقت شما صرفه‌جویی می‌کنند. در پایان این آموزش، کلاس‌های جهانی یا global، کلاس‌های local و متغیرها را به اندازه‌ای خوب خواهید فهمید که بتوانید از امروز بدون نیاز به کدنویسی از آنها استفاده کنید.
در المنتور ورژن ۴، Class مجموعه ای از استایل‌ها با قابلیت استفاده مجدد است که به عناصر اعمال می شود. و یک متغیر مقدار ذخیره شده ای (مثل رنگ برند یا فونت) است که در سایت خود چندین بار از آن استفاده می کنید. کلاس‌های محلی به یک ویجت استایل می دهند؛ کلاس‌های سراسری به چندین ویجت به طور همزمان استایل می دهند. یک کلاس سراسری یا یک متغیر را تغییر دهید و هر ویجتی که از آن استفاده می‌کند به طور خودکار به‌روزرسانی می‌شود. این کار سایت شما را سازگار، ویرایش راسریع تر و نگهداری آن را آسان تر می کند.
نکات کلیدی
- کلاس‌ها مجموعه سبک های قابل استفاده مجدد هستند – Elementor V4 این مفهوم (و کلمه class) را مستقیماً از CSS وام گرفته است.
- کلاس‌های محلی به یک عنصر واحد استایل می‌دهند؛ کلاس‌های سراسری در بسیاری از ویجت ها قابل استفاده مجدد هستند.
- متغیرها مقادیر ذخیره شده هستند که در همه جا دوباره می توانید کنید.
- یک بار ویرایش کنید، همه جا به‌روزرسانی می شود – یک کلاس یا متغیر سراسری را تغییر دهید و هر عنصری که از آن استفاده می‌کند، تغییر می کند.
چرا المنتور 4 کلاس‌ها و متغیرها را معرفی کرد؟
قبل از آموزش چگونگی، درک چرایی توسعه ادیتور ورژن 4 المنتور یا همان ویجت های اتمی المنتور مفید است.
در ادیتور قدیمی المنتور، شما هر ویجت را جداگانه استایل می‌دهید. اگر به فرض ده دکمه داشته باشید که باید با هم مطابقت داشته باشند؛ باید ده تا دکمه رو یک به یک استایل بدهید. و اگر نظرتان عوض شود، دوباره هر ده دکمه را ویرایش می کنید. با رشد سایت، برای حفظ هماهنگی سایت، این روش به یک کار طاقت فرسا تبدیل می شود و ناهماهنگی‌های کوچک به وجود می آیند.
و استایل‌بندی ناهماهنگ غیرحرفه ای به نظر می رسد. و از طرفی ویرایش دستی تمامی ویجت ها بسیار زمانبر است.
المنتور ورژن ۴ و اصول طراحی اتمی – ایده ایجاد عناصر کوچک و قابل استفاده مجدد – را اتخاذ می کند. در المنتور، این مجموعه‌های استایل قابل استفاده مجدد، کلاس نامیده می‌شوند که با واژه Class که در CSS استفاده می شود مطابقت دارد. متغیرها همین کار را برای یک ویجت و ویژگی هایی مانند رنگ‌ها و فونت‌ها انجام می‌دهند.
شما یک بار یک استایل یا مقدار را تعریف می‌کنید و آن را در همه جا دوباره استفاده می‌کنید. توسعه دهندگان المنتور مدعی هستند که استفاده صحیح از کلاس‌ها می‌تواند عملکرد وب‌سایت شما را بهبود بخشد، علاوه بر اینکه در زمان شما صرفه‌جویی نیز می کند.
کلاس‌ها در المنتور 4 (Elementor V4) چه هستند؟
کلاس، مجموعه ای نام گذاری شده از استایل‌هاست. مثل یک «دستورالعمل استایل» آن را در نظر بگیرید که قابلیت استفاده‌ی مجدد دارد. به‌جای اینکه رنگ، فاصله داخلی (padding) و فونت را مستقیماً روی یک عنصر تنظیم کنید، این تنظیمات را در قالب یک کلاس تعریف کرده و سپس آن کلاس را به مجموعه ویجت های مورد نظر اعمال کنید.
ایجاد کلاس‌ها به صورت خودکار انجام می شود. هر بار که ویجتی را در المنتور به صفحه اضافه می‌کنید، گزینه‌های آن در پنل کناری صفحه (سمت چپ در زبان انگلیسی و سمت راست در زبان فارسی) ظاهر می شوند. و در بالای زبانه Style، فیلدی به نام Class را می‌بینید که از پیش با کلاسی تحت عنوان local پر شده است؛ این همان نقطه شروع کار شماست.
تفاوت کلاس‌های محلی و کلاس‌های سراسری
این همان تمایزی است که هر فرد مبتدی باید آن را درک کند.
کلاس‌های محلی یا local Classes
به طور پیش‌فرض، هر ویجت یک استایل کلاس محلی دریافت می‌کند که فقط برای همان عنصر اعمال می‌شود. این حالت زمانی عالی است که استایلی فقط منحصر به همان ویجت باشد.
کلاس‌های سراسری یا Global Classes
وقتی می‌خواهید از یک استایل در چندین ویجت استفاده مجدد کنید، یک کلاس سراسری ایجاد می‌کنید. پس از استایل دهی به یک عنصر با کلاس محلی آن، المنتور به شما امکان می‌دهد آن ویژگی‌ها را به یک کلاس سراسری تبدیل کنید که میتوانید در جای دیگری اعمال کنید. و بعد بسادگی می توانید برای دوازده دکمه یک کلاس را به اشتراک بگذارید.
کلاس محلی (Local Class)
- کاربرد : برای استایل‌دهی اختصاصی یک المان
- محدوده تأثیر : معمولاً همان المانی که کلاس روی آن قرار دارد
- قابلیت استفاده مجدد : محدود
- تغییر استایل : تغییر روی همان المان انجام می‌شود
- مثال : تنظیم فاصله یک دکمه خاص
- مناسب برای : استایل‌های اختصاصی و موارد استثنا
- مدیریت مرکزی : محدود
- نمونه کاربرد : یک کارت با طراحی متفاوت
کلاس سراسری (Global Class)
- کاربرد : برای استفاده مجدد از یک استایل در چند المان
- محدوده تأثیر : تمام المان‌هایی که همان کلاس را دارند
- قابلیت استفاده مجدد : بالا
- تغییر استایل : با تغییر کلاس، تمام المان‌های استفاده‌کننده از آن به‌روزرسانی می‌شوند
- مثال : ساخت استایل مشترک برای تمام دکمه‌های سایت
- مناسب برای : استایل‌های تکرارشونده و طراحی یکپارچه
- مدیریت مرکزی : دارد
- نمونه کاربرد : تمام کارت‌های یک سایت با ظاهر یکسان
چگونه Local Class را به Global Class تبدیل کنیم؟
- یک Element را انتخاب کنید.
- در Style، Local Class را پیدا کنید.
- روی سه نقطه کنار Local کلیک کنید.
- گزینه Convert to global class را انتخاب کنید.
- نام Global Class را مشخص کنید.
- Class را روی Elements دیگر اعمال کنید.
متغیر در المنتور 4 (Elementor V4) چیست؟
متغیرها بخش دوم ماجرا هستند و شاید بتوان گفت درک آنها از همه آسان‌تر است.
به گفته خودِ المنتور، متغیر در واقع نامی مستعار برای یک مقدار مشخص هستند. برای مثال، اگر می‌خواهید متن اصلی شما با فونت ایران یکان نمایش داده شود، میتوانید متغیری به نام TextType ایجاد کرده و مقدار آن را روی IranYekan تنظیم کنید. سپس در سراسر سایت، به‌جای اینکه هر بار فونت ایران یکان را انتخاب کنید، تنظیمات متن را طوری قرار می‌دهید که از TextType استفاده کند.
حالا چرا مقدار را مستقیماً انتخاب نکنیم؟ به خاطر اتفاقی که هنگام تغییر نظر شما می‌افتد. اگر بعداً تصمیم بگیرید به‌جای ایران یکان از ایران‌سنس استفاده کنید، کافی است متغیر TextType را به iran Sans تغییر دهید تا این تغییر در کل سایت اعمال شود. اما بدون استفاده از متغیر، مجبور بودید تک‌تک ویجت ها را به صورت دستی ویرایش کنید.
متغیرها برای مقادیری که بیشترین استفاده را دارند (مانند رنگ‌های سازمانی، فونت‌ها و اندازه‌ها)، یک «منبع واحد و معتبر» در طراحی شما ایجاد می‌کنند. به این ترتیب، میتوانید در عرض چند ثانیه و با حفظ کامل یکپارچگی، برند خود را بازسازی یا طراحی خود را اصلاح کنید.
Class Manager در Elementor V4 چیست؟
این بخش در المنتور ورژن 4 برای مدیریت و کنترل همه کلاس های موجود استفاده می شود. با این ابزار میتوانید اقدامات زیر را انجام دهید:
- مشاهده کلاس‌های گلوبال یا سراسری
- تغییر نام کلاس‌ها
- حذف و مرتب‌سازی کلاس‌ها
Classes و Variables چگونه یک Design System در Elementor V4 می‌سازند؟
المنتور کلاس ها و متغیرها را در قالب یک Design System قرار می‌دهد. و امکان Import/Export کردن Design System شامل Classes و Variables بین سایت‌ها را نیز ارائه می کند.
سوالات متداول
کلاس‌ها و متغیرها در Elementor V4 چیستند؟
کلاس‌ها بسته‌های قابل استفاده مجدد از استایل‌هایی هستند که به ویجت ها اعمال می‌کنید. متغیرها مقادیر ذخیره شده‌ای (مانند رنگ برند یا فونت) هستند که در سایت خود دوباره استفاده می کنید.
تفاوت بین کلاس‌های محلی و سراسری چیست؟
یک کلاس محلی به یک ویجت استایل می‌دهد، در حالی که یک کلاس سراسری به طور همزمان به بسیاری از عناصر اعمال می شود و هنگام تغییر، استایل همه آنها بروزرسانی می شود.
آیا برای استفاده از کلاس‌ها و متغیرها باید CSS بلد باشم؟
خیر، Elementor V4 به شما امکان می‌دهد هر دو را به صورت بصری ایجاد و اعمال کنید، اگرچه اگر بخواهید عمیق‌تر شوید، این مفاهیم از CSS گرفته شده‌اند. و برای آموزش بیشتر در این خصوص میتوانید از دوره جامع طراحی سایت کمک بگیرید.
آیا استفاده از کلاس‌ها و متغیرها عملکرد سایت را بهبود می بخشد؟
بله، استفاده صحیح از Classes می‌تواند Performance یا عملکرد سایت را بهبود دهد. چون ویجت های اتمی به دلیل HTML ساده‌تر و wrapperهای کمتر می‌توانند به خروجی تمیزتر و بهبود Core Web Vitals المنتور کمک کنند. اما این موضوع الزاما به معنی «هر استفاده از Class = افزایش سرعت» نیست.
آیا Classes و Variables روی ویجت های قدیمی المنتور کار می‌کنند؟
کلاس ها و متغیرها مربوط به ویجت های اتمی یا Atomic Elements است. اما ادیتور ورژن 4 امکان سینک برخی Variables با Global Colors و Global Fonts در ویجت‌های قدیمی را فراهم کرده.
آیا می‌توان Classes و Variables را بین سایت‌های المنتوری منتقل کرد؟
بله. در المنتور 4 میتوانید Design System شامل Classes و Variables را از یک سایت Export و در سایت دیگری Import کنید. المنتور این اطلاعات را در قالب یک فایل ZIP منتقل می‌کند. البته باید دقت کنید که درحال حاضر امکان انتقال یک کلاس خاص وجود ندارد بلکه از کل Design System خروجی گرفته می شود.
