سبد خرید شما خالی است.
ویجت اتمیک در المنتور
5دقیقه
آنچه در این مقاله میخوانید [پنهانسازی]
مقدمه: انقلاب اتمیک در دنیای صفحهسازها
اگر تا به حال با صفحهساز المنتور کار کرده باشید، حتماً با ویجتهای سنتی آن آشنایی دارید. اما با انتشار نسخه ۴ المنتور، دنیای طراحی وبسایت با وردپرس دستخوش تغییرات اساسی شده است. ویجتهای اتمیک (Atomic Widgets) قلب این تحول هستند.
المنتور نسخه ۴ که از فروردین 405 بهعنوان نسخه پیشفرض برای سایتهای جدید معرفی شد، معماری جدیدی را معرفی کرده است که بر پایه سیستم CSS-first، کلاسهای قابل استفاده مجدد، متغیرها و کامپوننتها بنا شده است. اما ویجتهای اتمیک دقیقاً چیستند و چه تفاوتی با ویجتهای کلاسیک دارند؟ در این مقاله به طور کامل به این سؤالات پاسخ خواهیم داد.
ویجت اتمیک (Atomic Widget) چیست؟
ویجتهای اتمیک، نسل جدید المانهای المنتور هستند که برای ویرایشگر اتمیک (Atomic Editor) طراحی شدهاند، نه اینکه از نسخه ۳ بازنویسی شده باشند. این ویجتها برخلاف ویجتهای قدیمی که ساختاری یکپارچه و سنگین داشتند، به صورت بلوکهای ساختمانی کوچک و مدولار طراحی شدهاند.
به بیان ساده، در نسخه ۳ هر ویجت مانند یک «جعبه سیاه» بود که استایل، HTML و منطق خاص خود را داشت. اما در نسخه ۴، هر ویجت اتمیک از یک تگ HTML ساده تشکیل شده است که نتیجه آن کاهش ۱۵ تا ۲۰ درصدی گرههای DOM در صفحات پیچیده است.
چهار مفهوم کلیدی در ویرایشگر اتمیک
برای درک کامل ویجتهای اتمیک، باید با چهار مفهوم اساسی آشنا شوید:
عناصر اتمیک (Atomic Elements): بلوکهای ساختمانی جدید و سبکتر. به جای دهها ویجت با استایلهای از پیش تعیینشده، مجموعه کوچکی از عناصر تمیز در اختیار دارید که خودتان آنها را استایل میدهید.
کلاسها (Classes): استایلهای قابل استفاده مجدد با نام مشخص. یک استایل را یک بار تعریف کنید، به المانهای متعدد اعمال کنید و با ویرایش یک کلاس، همه المانها را بهروزرسانی کنید.
متغیرها (Variables): مقادیر ذخیرهشده برای رنگها، تایپوگرافی و فاصلهگذاری. با تغییر یک متغیر، تمام المانهای مرتبط با آن بهروزرسانی میشوند.
کامپوننتها (Components): گروههای قابل استفاده مجدد از المانها که میتوانید یک بار بسازید و در سراسر سایت استفاده کنید.
انواع ویجتهای اتمیک در المنتور ۴
المنتور نسخه ۴ مجموعه کاملی از ویجتهای اتمیک را ارائه میدهد که هرکدام کاربرد خاصی دارند:
۱. ویجتهای پایه (Basic Elements)
Heading (عنوان): دیگر فقط یک ویجت متن ساده نیست. اکنون بخشی از سیستم طراحی است که تایپوگرافی، فاصلهگذاری، رنگها و پاسخگویی با استفاده از متغیرها و کلاسها کنترل میشود.
Paragraph (پاراگراف): برای نمایش متنهای بلند با قابلیت اعمال کلاسهای تایپوگرافی جهانی.
Button (دکمه): با قابلیت استفاده از کلاسهای سراسری، متغیرها و افکتهای هاور یکسان در سراسر سایت.
Image (تصویر): نمایش تصاویر با کنترل کامل بر ابعاد، فاصلهگذاری و پاسخگویی.
SVG: برای نمایش فایلهای برداری مقیاسپذیر.
۲. ویجتهای ساختاری (Layout Elements)
Div Block: یک بلوک سبک و سریع برای ایجاد بخشهای مختلف صفحه.
Container: کانتینرهای مبتنی بر Flexbox با خروجی تمیزتر و پاسخگویی بهتر.
Flexbox: برای چیدمانهای انعطافپذیر و دقیق.
۳. ویجتهای پیشرفته (Advanced Elements)
Atomic Tabs (تبهای اتمیک): این ویجت انقلابی، ساختار تبها را به عناصر اتمیک جداگانه شکسته است که هرکدام را میتوان به طور مستقل استایل و پیکربندی کرد. امکان قرار دادن هر نوع محتوایی درون تبها وجود دارد.
Atomic Form (فرم اتمیک): برخلاف سایر ویجتها، این ویجت بهعنوان یک رپر (wrapper) عمل میکند که شامل عناصر اتمیک دیگری مانند Label، Input، Textarea، Checkbox، Radio، Date Picker، Select و دکمه ارسال است.
Atomic Loop (حلقه اتمیک): امکان ساخت چیدمانهای پویا و تکراری مانند نمایش پستهای وبلاگ یا محصولات ووکامرس را فراهم میکند.
تفاوت ویجتهای اتمیک با ویجتهای کلاسیک
برای درک بهتر ارزش ویجتهای اتمیک، مقایسه آنها با ویجتهای کلاسیک نسخه ۳ ضروری است:
| ویژگی | ویجتهای کلاسیک (V3) | ویجتهای اتمیک (V4) |
|---|---|---|
| معماری | مبتنی بر ویجت، ساختار یکپارچه | مبتنی بر اتم، ساختار مدولار |
| ساختار HTML | چندین div، خروجی سنگینتر | یک div، سبکتر و سریعتر |
| روش استایلدهی | استایل ویجت به ویجت، تکرار دستی | CSS-first، مبتنی بر کلاس، استایلهای آبشاری |
| سیستم طراحی | رنگها و فونتهای جهانی محدود | متغیرهای کامل (رنگ، تایپوگرافی، اندازهها) |
| کلاسهای CSS | پشتیبانی نمیشد | پشتیبانی کامل از کلاسهای سراسری |
| ویرایش متن | فقط از طریق پنل | کلیک مستقیم روی بوم برای ویرایش |
| تبها | یک ویجت یکپارچه | کاملاً مدولار، هر تب قابل استایلدهی مستقل |
| انیمیشن | سیستمی ابتدایی | انیمیشنهای ورودی با کنترل دقیق |
مزایای ویجتهای اتمیک برای سئو و عملکرد سایت
۱. بهبود سرعت بارگذاری و Core Web Vitals
یکی از مهمترین مزایای ویجتهای اتمیک، کاهش حجم DOM است. از آنجایی که هر ویجت اتمیک فقط از یک تگ HTML ساده تشکیل شده است، مرورگر برای رندر کردن صفحه به پردازش کمتری نیاز دارد. این موضوع تأثیر مستقیمی روی نمره سرعت و تجربه کاربری دارد.
۲. کد HTML تمیزتر برای خزندههای گوگل
خزندههای گوگل صفحات وب را بر اساس ساختار HTML تحلیل میکنند. ویجتهای اتمیک با تولید کد تمیزتر و بدون لایههای اضافی، فرآیند ایندکسشدن را برای گوگل آسانتر میکنند.
۳. مدیریت آسانتر محتوا در سایتهای بزرگ
با استفاده از کلاسها و متغیرها، میتوانید یک سیستم طراحی منسجم در سراسر سایت ایجاد کنید. این یعنی:
تغییر یک رنگ در سراسر سایت با ویرایش یک متغیر
اعمال یک استایل به دهها دکمه با یک کلاس
ساخت کامپوننتهای قابل استفاده مجدد برای تیمهای بزرگ
نحوه فعالسازی و استفاده از ویجتهای اتمیک
فعالسازی در سایتهای جدید
در هر نصب جدید المنتور، ویژگیهای اتمیک بهصورت پیشفرض فعال هستند و ویجتهای اتمیک در بالای پنل المانها قرار میگیرند.
فعالسازی در سایتهای موجود
برای فعالسازی در سایتهای قدیمی:
۱. به مسیر WP Admin > Elementor > Editor > Settings > Atomic Editor بروید
۲. ویژگیهای اتمیک را فعال کنید
۳. ویجتهای کلاسیک و اتمیک میتوانند در کنار هم در یک صفحه استفاده شوند
نکته مهم برای سایتهای موجود
سایتهای موجود بهطور خودکار به نسخه ۴ مهاجرت نمیکنند. صفحات V3 شما دقیقاً مانند قبل کار میکنند و شما کنترل کامل بر زمان پذیرش V4 دارید.
ویجتهای اتمیک در مقابل افزونههای شخص ثالث
علاوه بر ویجتهای اتمیک داخلی المنتور، افزونههای متعددی نیز در این حوزه فعالیت میکنند. برای مثال:
Atomic Elements: یک افزونه جامع شامل ویجتهای رایگان و حرفهای مانند Accordion، Brand Carousel، Creative Button، Slider و Hover Box
Atomic Addons: افزونهای مشابه برای توانمندسازی المنتور با ویجتهای قدرتمند
توجه داشته باشید که یک افزونه واقعاً سازگار با نسخه ۴ باید به کلاسها و متغیرهای سراسری احترام بگذارد و DOM را تمیز نگه دارد.
جمعبندی و توصیه نهایی
ویجتهای اتمیک در المنتور ۴، تحولی اساسی در روش طراحی وبسایت با وردپرس ایجاد کردهاند. این ویجتها با معماری CSS-first، ساختار مدولار و قابلیتهای پیشرفته مانند کلاسها، متغیرها و کامپوننتها، راه را برای ساخت سایتهای سریعتر، مقیاسپذیرتر و قابل مدیریتتر هموار کردهاند.
توصیه ما: اگر در حال راهاندازی یک سایت جدید هستید، حتماً از ویجتهای اتمیک استفاده کنید. اگر سایت موجودی دارید، میتوانید بهتدریج و با خیال راحت، ویجتهای اتمیک را در کنار ویجتهای کلاسیک به کار بگیرید و از مزایای آن بهرهمند شوید.
