دروس السلسلة: WordPress REST API · تأمين ووردبريس 2026 · تحسين أداء ووردبريس 2026
Elementor 4 والمحرّر الذرّي: ثورة هادئة في بناء المواقع
أطلقت شركة Elementor في مارس 2026 الإصدار الرابع من قابضها الشهير، حاملةً معها ما تسمّيه « Atomic Editor ». هذا ليس مجرّد ترقية واجهة؛ إنه إعادة كتابة جذريّة لطريقة التعامل مع العناصر، الأنماط، والمتغيّرات. المهام التي كانت تستغرق ساعات أو أيامًا، مثل تعديل لون رئيسي على مئات الصفحات، أصبحت تنجز بنقرة واحدة بفضل نظام التصميم العالمي الجديد.
اليوم، ومع وصول الإصدار 4.0.8 في مايو 2026، أصبح Atomic Editor مفعّلًا افتراضيًا على كل تثبيت جديد، ويعمل بسلاسة مع الإضافات القديمة. سيقودك هذا الدرس خطوة بخطوة من تثبيت أول مرّة إلى نشر قالب احترافي، مع التركيز على المتغيّرات العامّة، الفئات (Classes)، ومنشئ القوالب Theme Builder المتاح في النسخة المدفوعة.
الخطوة 1: التحضير قبل التثبيت
يتطلّب Elementor 4 ووردبريس 6.6 على الأقل، PHP 8.1 أو أعلى، وذاكرة 128 ميغابايت لتفادي بطء المحرّر. للحصول على الأداء الأمثل، يُنصح بتشغيل WordPress 6.9.4 مع PHP 8.3 LTS. تحقّق من إصدارك الحالي عبر الأدوات > صحّة الموقع > معلومات.
تأكّد كذلك من أنّ قالبك يدعم Elementor جيّدًا. القالب الرسمي « Hello Elementor » هو الأخفّ وزنًا والأكثر توافقًا. وزنه أقل من 6 كيلوبايت بعد التحميل، ولا يضيف أي CSS فائض. بالنسبة للقوالب الجاهزة الكبيرة مثل Astra أو OceanWP، فهي متوافقة لكنّها تضيف أنماطًا قد تتعارض مع تصاميمك. علامة النجاح: عرض شريط أدوات Elementor في رأس الصفحة الجديدة بعد التفعيل.
الخطوة 2: تثبيت Elementor وتفعيل Hello Elementor
توجّه إلى الإضافات > إضافة جديدة، ابحث عن « Elementor »، ثم اضغط « تثبيت » و »تفعيل ». ستنطلق فورًا معالج البداية (Onboarding) الجديد المدمج منذ الإصدار 4.0.0. اختر « تجربة Atomic Editor »، وحدّد قطاع نشاطك (تجارة، تعليم، خدمات…) ليقترح Elementor عليك قوالب جاهزة.
لتثبيت قالب Hello Elementor، ادخل المظهر > القوالب > إضافة جديد، ابحث عن « Hello Elementor »، ثبّت ثم فعّل. الحجم الإجمالي بعد تفعيل القالب والإضافة: حوالي 4 ميغابايت على القرص، وأقل من 30 كيلوبايت في التحميل الأول للصفحة. علامة النجاح: زيارة الواجهة الأماميّة تعرض موقعًا « فارغًا » نظيفًا، جاهزًا لاستقبال تصاميمك.
الخطوة 3: فهم المتغيّرات والفئات في Atomic Editor
هنا يكمن جوهر التحوّل. في الإصدارات السابقة، كنت تضبط ألوانًا « عامّة » تستخدمها يدويًا. الآن، Atomic Editor يقدّم نظامًا مزدوجًا: المتغيّرات (Variables) للقيم القابلة لإعادة الاستخدام (ألوان، خطوط، مسافات)، والفئات (Classes) لإعادة استخدام مجموعات أنماط كاملة، تمامًا كما في CSS الحديث أو Tailwind.
أنشئ صفحة جديدة، اضغط « تعديل بـ Elementor »، ثم في الشريط الجانبي اختر أيقونة الإعدادات > « Site Settings » > « Variables ». أضف متغيّرًا جديدًا مثل brand-primary بقيمة #0E63B7، وآخر brand-accent بقيمة #F39C12. كل عنصر في الصفحة يمكنه الآن استدعاء هذه القيم. عند تعديل المتغيّر لاحقًا، تتحدّث كل الصفحات والعناصر فورًا.
لإنشاء فئة قابلة لإعادة الاستخدام، اختر عنصرًا (زرّ مثلاً)، عدّل ألوانه ومسافاته كما تريد، ثم في الشريط الجانبي اضغط « Add Class »، سمّها btn-primary-cta. الآن تطبيق هذه الفئة على أي زرّ آخر في الموقع يعطيه نفس المظهر فورًا. علامة النجاح: تعديل الفئة من مكان واحد ينعكس على كل الأزرار التي تحملها.
الخطوة 4: استخدام مكتبة القوالب والـ Kits
توفّر Elementor مكتبة ضخمة تتضمّن أكثر من 300 قالب صفحة وأكثر من 100 Kit (طقم) لموقع كامل. للوصول إليها داخل المحرّر، اضغط أيقونة المجلّد في وسط الشاشة. النسخة المجانيّة تتيح الوصول لعشرات القوالب، أما النسخة المدفوعة فتفتح كل المكتبة بما فيها صفحات WooCommerce وصفحات الهبوط المتخصّصة.
الـ Kit يستورد دفعة واحدة: نظام ألوان، خطوط، صفحات نموذجيّة، رأس وتذييل، حتى منتجات WooCommerce تجريبيّة إذا كان موقعك متجرًا. اختر « Apply Kit »، اقبل بالمتغيّرات المقترحة، وانتظر دقيقتين. علامة النجاح: عرض موقعك في الواجهة الأماميّة بكامل التصميم الاحترافي مع روابط داخليّة فعّالة بين الصفحات.
الخطوة 5: بناء قالب رأس وتذييل عبر Theme Builder
هذه الخطوة تتطلّب Elementor Pro. توجّه إلى Elementor > My Templates > Theme Builder. هنا تجد كل « أجزاء » موقعك: Header، Footer، Single Post، Archive، 404، Search Results. اضغط « Add New Header »، اختر قالب جاهز أو ابدأ من الصفر.
داخل المحرّر، اسحب عنصر « Site Logo » إلى اليسار، ثم « Nav Menu » إلى اليمين. لاحظ أن العناصر « ديناميكيّة »: Site Logo يعرض الشعار المحدّد في Customizer، و Nav Menu يعرض القائمة المسجّلة في ووردبريس. هذا الفصل بين البيانات والتصميم هو ما يجعل Elementor حلًّا احترافيًا حقيقيًا.
عند الانتهاء، اضغط « Publish »، ثم في نافذة « Display Conditions » أضف شرط Entire Site. علامة النجاح: ظهور رأسك الجديد فوق كل صفحة من الموقع، بما فيها صفحة المدوّنة وأرشيف الفئات.
الخطوة 6: تصميم متجاوب بكسر النقاط المخصّص
منذ الإصدار 3.4، يدعم Elementor كسر نقاط (breakpoints) مخصّصة. في إعدادات الموقع، اضغط « Layout »، ثم « Breakpoints ». الإعداد الافتراضي يقدّم: Mobile (حتى 767 بكسل)، Tablet (768-1024)، Desktop (1025+). يمكنك إضافة « Mobile Extra » و « Tablet Extra » و « Widescreen » حتى ستّ نقاط مختلفة.
لتعديل عنصر لجهاز معيّن، اضغط أيقونة الجهاز أعلى المحرّر، اختر « Tablet »، ثم عدّل الخصائص. الإعدادات تنطبق فقط على هذا الكسر وأصغر منه (يرث Mobile من Tablet). نصيحة عملية: ابدأ دائمًا بتصميم Desktop ثم اضبط Mobile لاحقًا. علامة النجاح: معاينة الصفحة على هاتف حقيقي تُظهر تخطيطًا نظيفًا دون شريط تمرير أفقي.
الخطوة 7: إنشاء نموذج تواصل احترافي
اسحب عنصر « Form » إلى صفحتك (يتطلّب Elementor Pro). تجد افتراضيًا أربعة حقول: Name, Email, Message, Submit. لإضافة حقل هاتف بتنسيق دولي، اضغط « Add Item »، اختر « Tel »، فعّل خيار « Required ». أعد ترتيب الحقول بالسحب.
في تبويب « Actions After Submit »، أضف « Email » لإرسال نسخة إلى صندوق بريدك، و « Webhook » إذا أردت تمرير البيانات لخدمة خارجيّة مثل Zapier أو Make. للمواقع في المنطقة العربيّة التي تستخدم خدمات الدفع المحليّة (STC Pay، مدى، Vodafone Cash)، يمكنك دمج Webhook مع منصّة CRM مثل HubSpot أو Zoho لتتبّع العملاء.
أخيرًا، فعّل « Hidden Fields » لاستقبال معرّف الصفحة المرجع. علامة النجاح: تجربة إرسال نموذج، استلام البريد، ومشاهدة صف جديد في ورقة Google Sheets المتّصلة عبر Webhook.
الخطوة 8: تحسين الأداء وتقليل CSS
كان Elementor يعاني تاريخيًا من سمعة سلبية بسبب ثقل CSS. الإصدار 4 حلّ معظم هذه المشاكل. لتفعيل التحسينات، توجّه إلى Elementor > Settings > Features. فعّل:
- Optimized CSS Loading: يحمّل CSS الخاص بالعناصر فقط عند الحاجة بدلاً من ملف عملاق.
- Optimized DOM Output: يحذف عناصر
divغير الضرورية ويقلّل عمق الشجرة. - Inline Font Icons: يضمّن الأيقونات مباشرة في HTML بدلاً من مكتبة Font Awesome الكاملة.
- Element Caching: يخزّن HTML الناتج في ذاكرة الخادم لتسريع الزيارات اللاحقة.
اختبار حقيقي على موقع متوسط (15 صفحة، 50 صورة) يُظهر انخفاض Largest Contentful Paint من 3.2 ثانية إلى 1.8 ثانية بعد تفعيل هذه الخيارات الأربعة. علامة النجاح: زيارة « PageSpeed Insights » تعرض نتيجة 90+ على الموبايل.
الخطوة 9: المقارنة مع البدائل الناشئة
Elementor ليس الخيار الوحيد. منذ 2024، يحقّق Bricks Builder نموًّا متسارعًا بفضل أدائه المتفوّق وكوده الأنظف. يقدّم Bricks اشتراكًا سنويًا يبدأ من 79 دولار للموقع الواحد (Starter)، مع باقة « Ultimate Lifetime » بـ 599 دولار مرّة واحدة لعدد غير محدود من المواقع. يستهدف المطوّرين المتقدّمين الذين يكتبون أحيانًا CSS مخصّص.
على الجانب الآخر، Gutenberg المدمج في ووردبريس 6.9 مع Full Site Editing أصبح بديلًا جدّيًا للمواقع البسيطة. مجاني، سريع، ومتكامل تمامًا مع البنية الأساسيّة لووردبريس. عيبه الوحيد: مكتبة كتل أقل تنوّعًا، ومنحنى تعلّم أطول للمستخدم العادي.
التوصية العمليّة: Elementor للوكالات والشركات التي تحتاج سرعة تسليم؛ Bricks للمطوّرين الذين يهتمّون بالأداء فوق كل شيء؛ Gutenberg للمدوّنات والمواقع الشخصيّة البسيطة.
الخطوة 10: نشر الموقع وصيانته
قبل النقل إلى الإنتاج، استخدم Site Settings > Export Kit لتصدير نسخة كاملة من تصميمك. الملف الناتج بصيغة .zip يحتوي على المتغيّرات، الفئات، القوالب، والصفحات. هذا يجعل الانتقال من موقع تطوير إلى موقع إنتاج عمليّة مدّتها أقل من خمس دقائق.
للصيانة الدوريّة، فعّل التحديثات التلقائيّة فقط للنسخ الفرعيّة (Minor) عبر إعدادات Elementor. التحديثات الكبرى (مثل الانتقال من 4.0.8 إلى 4.1) تتطلّب اختبارًا على بيئة Staging قبل تطبيقها. علامة النجاح المستدامة: بعد ستّة أشهر من الإطلاق، الموقع لا يزال يحقّق Core Web Vitals خضراء ولا تعاني صفحات معيّنة من ثقل CSS تراكمي.
الخلاصة والمسار التالي
Atomic Editor في Elementor 4 ليس مجرّد ترقية بصريّة؛ إنه إعادة تفكير في كيفية بناء المواقع. المتغيّرات والفئات تجعل الصيانة طويلة الأمد أسهل بكثير، والتحسينات الأخيرة في الأداء حلّت مشاكل تاريخيّة. ابدأ بمشروع تجريبي بسيط، طبّق Hello Elementor، أنشئ ثلاثة متغيّرات لون وفئتين، ثم انطلق نحو مشاريع العملاء الحقيقيّة. السرعة التي ستكتسبها في التصميم بعد إتقان نظام التصميم العالمي ستوفّر عليك أيام عمل في كل مشروع.