كيفية استخدام Elementor Page Builder مع WordPress

عندما نتحدث عن منشئي صفحات WordPress ، فإن أكثرها شهرة والأكثر شهرة والتي لديها أكبر عدد من التركيبات النشطة وأكبر مجتمع هو بالتأكيد Elementor. حتى الآن ، يوجد حوالي 8 ملايين موقع تم إنشاؤها باستخدام Elementor. يوصى به من قبل العديد من الخبراء لسهولة استخدامه وسرعته وإمكانياته الهائلة عند إنشاء مواقع WordPress.

لقد اختبرت الإصدار الاحترافي من Elementor وأنشأت صفحة مقصودة. يأتي مزودًا بوظيفة السحب والإفلات ويعمل مع أي سمة ويمكنك استخدام جميع عناصر واجهة المستخدم المجانية و Pro و WordPress في نفس الوقت. دعنا نقرأ هذه المقالة لمعرفة المزيد عن تثبيت Elementor وتكوينه باستخدام WordPress.

لماذا تختار Elementor Page Builder؟

يعد Elementor واحدًا من أوائل أدوات إنشاء صفحات WordPress وأكثرها تقدمًا في السوق في الوقت الحالي. كما أن لديها نظامًا بيئيًا ضخمًا حولها والعديد من المؤلفين الصغار يقومون ببناء إضافات وقوالب مفيدة يمكنك استخدامها لتقليل الوقت اللازم للنتيجة النهائية.

في حالة Elementor ، يمكن أن تكون النتيجة النهائية موقعًا رائعًا حقًا ، ومصمم جيدًا بجميع الوظائف التي تحتاجها أو قد تحتاجها. لن تجد أي نوع من مواقع WordPress التي لا يمكنك إنشاؤها باستخدام Elementor. إذا كنت بحاجة إلى بعض الوظائف الإضافية ، فيمكن تنفيذها بسهولة باستخدام الرموز القصيرة.

ميزات Elementor Page Builder

يأتي الإصدار المجاني من Elementor مع عدد محدود من Elements ولكن مع الإصدار Pro ، يمكنك الحصول على وظائف إضافية مثل QI و Ultimate Add Ons وما إلى ذلك ، بالإضافة إلى ذلك ، سيكون لديك مجموعة من العناصر والقوالب المفيدة لبناء موقعك بسهولة .

لن يكون من العدل تجاهل الوظيفة الإضافية Crocoblock لـ Gutenberg و Elementor ، والتي تعد واحدة من الأدوات المفضلة لمعظم مستخدمي Elementor لأنها توسع وظائف Elementor الأصلية.

قسمت Elementor ميزاتها إلى 4 فئات.

1. الحاجيات الأساسية

تأتي الأدوات الأساسية مع الإصدار المجاني وهي كافية تمامًا لإنشاء موقع ويب مذهل لا يتطلب خيارات متقدمة مثل جدول المحتويات أو المحفظة أو النموذج. أيضًا ، في الإصدار المجاني ، لا يمكنك إنشاء قائمة Header / Nav وقد تحتاج إلى العثور على بعض سمات WordPress الرائعة من خلال قائمة التنقل التي تريدها.

2. الحاجيات برو

تغطي Pro Widgets مع Elementor Pro كل جانب تقريبًا وكل عنصر واجهة مستخدم قد تحتاجه لإنشاء أي نوع من مواقع الويب. قم بإضافة واختيار منشورات من فئات مختلفة ، أنواع المنشورات أو ببساطة سرد أحدث المنشورات ، جداول الأسعار ، المعرض ، Flip Box ، تضمين شبكات التواصل الاجتماعي السهلة ، وسائل الإعلام الدوارة المتنوعة ، Lottie Widget ، و HotSpot (سأتحدث عن هذا لاحقًا).

3. عناصر الموضوع

تأتي Theme Elements أيضًا مع Elementor Pro وهي مهمة لبناء جميع صفحات القوالب وقالب المنشور الفردي بالطبع. كما تعلم ، هناك صفحات يتم ملؤها ديناميكيًا بمحتوى مثل الفئة والعلامة والمؤلف وما إلى ذلك.

بالنسبة لتلك الصفحات ، تحتاج إلى إنشاء قالب باستخدام عناصر النسق. ينطبق الأمر نفسه على المنشور الفردي ، حيث يمكنك تصميم قالب جميل لمنشوراتك ستستخدمه جميع المنشورات دون الحاجة إلى إنشائها في كل مرة. ما عليك سوى إضافة المحتوى كما اعتدت عليه وقد انتهيت.

4. WooCommerce Widgets

وأخيرًا وليس آخرًا ، WooCommerce Widgets. تتيح لك هذه الأدوات إنشاء مماثل لـ Theme Builder وصفحات القالب وقالب المنتج الفردي بسهولة باستخدام عناصر WooCommerce.

التسعير وخطط Elementor Page Builder

يأتي Elementor Pro مع 5 خطط مختلفة ، تحتوي جميعها على مُنشئ صفحات Elementor Pro نفسه وميزات مثل:

• قم بسحب وإفلات محرر البث المباشر
• الرسم المتجاوب
• 90+ الحاجيات الأساسية والاحترافية
• 300+ قالب أساسي واحترافي
• منشئ الموضوع

أقل خطة أساسية لموقع واحد بسعر 49 دولارًا. مع هذه الخطة ، تحصل على دعم مميز ، مما يعني أنه يمكنك توقع استجابة خلال 24 ساعة. الخطة التالية متقدمة وهي تغطي ترخيصًا لـ 3 مواقع بسعر 99 دولارًا مع نفس نوع الدعم.

ربما يكون الخبير الأكثر شيوعًا هو 199 دولارًا لـ 25 موقعًا. بالإضافة إلى ذلك ، ستحصل على ملف تعريف خبير Elementor ، حيث يمكنك نشر مشاريعك المكتملة في Elementor والحصول على بعض العملاء الجدد.

واحد قبل القمة هو Studio لـ 100 موقع بسعر 499 دولارًا وهناك ميزة إضافية لدعم VIP ، مما يعني أن لديك الأولوية وسيتم الرد على تذاكرك في غضون 30 دقيقة. نفس الشيء يأتي مع أغلى وكالة خطة لـ 1000 موقع بسعر 1000 دولار.

جميع الخطط سنوية ، وإذا كنت تتساءل عما يحدث للمواقع إذا انتهت صلاحية اشتراكك ، فإن الإجابة هي أن المواقع ستبدو كما كانت من قبل ولكن لن تتمكن من تحرير أو استخدام العناصر والقوالب من Elementro Pro.

متطلبات النظام / الاستضافة من Elementor

وفقًا لصفحة متطلبات نظام Elementor ، يجب أن تعمل حتى مع 128 ميجابايت من PHP أو MySQL 5.6 أو أعلى أو MariaDB 10.0 أو أعلى. أيضًا ، يجب أن يعمل مع أي PHP 7+. لأغراض الاختبار ، استخدمت VultrHF مع ذاكرة PHP بسعة 2 جيجابايت.

بالطبع ، ستحتاج إلى أحدث إصدار من WordPress وجميع المكونات الإضافية الأخرى محدثة.

تثبيت وتكوين Elementor Page Builder

تثبيت الإصدار المجاني من Elementor هو نفسه كما هو الحال مع أي مكون إضافي آخر في مستودع مكونات WordPress ، انتقل إلى لوحة معلومات WordPress → Plugins → Add New ، وتصفح للوصول إلى Elementor ، قم بتثبيت وتنشيط المكون الإضافي.

بالنسبة للإصدار الاحترافي ، تحتاج إلى شراء الخطة التي ستنشئ تلقائيًا حسابًا في Elementor. عند تسجيل الدخول هناك ، سترى زر التنزيل لتنزيل أحدث إصدار من Pro.

أثناء تسجيل الدخول إلى لوحة معلومات Elementor ، قم بتسجيل الدخول إلى لوحة معلومات WordPress → Plugins → Add New وحدد تحميل ، وتصفح ملف Elementor Pro الذي تم تنزيله من جهاز الكمبيوتر الخاص بك ، وقم بتثبيته وتنشيطه.

عند الانتهاء من الشريط الجانبي الأيسر على لوحة معلومات WordPress الخاصة بك ، انتقل إلى Elementor ← انقر فوق الترخيص ← انقر فوق زر الاتصال والتفعيل.

عند النقر عليه ، يتم إعادة توجيهك تلقائيًا إلى لوحة التحكم الخاصة بك على Elementor لتنشيطه. انقر فوق الزر "تنشيط" الأخضر وتكون قد انتهيت. تم توصيل Elementor Pro الخاص بك وتنشيطه.

بعد التنشيط ، سترى تأكيدًا بأن العنصر الخاص بك نشط. ومع ذلك ، إذا كنت قد أنشأت الموقع على مجال مرحلي ولا تريد شراء ترخيص آخر للبث المباشر ، فيمكنك بسهولة فصل الحساب عند التدريج وتنشيطه على المجال المباشر.

حان الوقت لبدء استخدام Elementor وبناء موقع الويب الخاص بك. اقتراحي هو استخدام Hello Theme بواسطة Elementor المصمم خصيصًا لـ Elementor.

للقيام بذلك ، لنبدأ بإنشاء صفحة "الصفحة الرئيسية" وتعديلها باستخدام Elementor. انتقل إلى Pages → Add New ، وقم بتسميتها Homepage وانشرها ، ثم انقر فوق الزر Edit With Elementor.

في صفحة التحرير ، سترى عناصر لا يمكنك تحريرها لأن التخطيط معيّن على الوضع الافتراضي. من أجل استخدام Elementor على قماش فارغ ، اختر Elementor Full Width أو Elementor Canvas من خلال النقر على رمز الترس في الزاوية اليسرى السفلية.

قبل البدء في إنشاء الموقع ، تأكد من النقر فوق رمز البرجر في الزاوية اليسرى العلوية وتعيين جميع الإعدادات العامة اللازمة لبقية المهمة.

إعدادات الموقع مشابهة تمامًا لإعداد السمة. هنا ، يمكنك تحديد الألوان العامة ، والخطوط التي ستستخدمها ، وطباعة الموقع الكاملة لكل علامة HTML.

إلى جانب ذلك ، يمكنك تعيين نمط الزر العام ، والرأس ، والتذييل ، و CSS المخصص إذا لزم الأمر ، وكل ما تحتاجه لتعيينها والاحتفاظ بها في جميع أنحاء الموقع للحفاظ على الاتساق أيضًا.

الخيار الثاني هو Theme Builder ، والذي يسمح لك بإنشاء صفحات القوالب وقوالب المنشورات / المنتجات الفردية ، والتي سيتم استخدامها تلقائيًا بواسطة الصفحة أو المنشور أو المنتج المحدد الذي تم إنشاؤه ديناميكيًا. مثل كل سمة WordPress تحتاج إلى ملفات قالب لعرض كل ما سبق ، سيتيح لك Elementor القيام بذلك دون كتابة سطر واحد من الكود.

الخيار الأخير هو تفضيلات المستخدم ، حيث يمكنك إعداد بيئة العمل الخاصة بك في Elementor ، ولا شيء يؤثر على الموقع نفسه سوى واجهة المستخدم الخاصة بك كمسؤول.

لبدء تشغيل موقعك ، يتم وضع جميع عناصر واجهة المستخدم المتاحة في الشريط الجانبي الأيسر ويمكن تحرير كل شيء بصريًا وعن طريق السحب والإفلات. إذا كنت ترغب في طريقة أسهل للقيام بذلك ، فيمكنك البدء باستخدام إحدى الكتل أو القوالب المعدة مسبقًا بالنقر فوق رمز المجلد.

سيفتح رمز المجلد نافذة منبثقة ، حيث يمكنك رؤية قوالب وقوالب مسبقة الصنع ، بالإضافة إلى تلك التي حفظتها من قبل. يمكنك أيضًا حفظ قالب أو قالب كامل قمت بإنشائه وإعادة استخدامه على بعض الصفحات الداخلية الأخرى. من الشائع جدًا استخدام الحظر المحفوظ للشهادات ، وبعض العبارات المحددة التي تحث المستخدم على اتخاذ إجراء والتي لا ينبغي عرضها في كل صفحة ولكن في بعضها.

هناك شيء آخر تحتاج إلى معرفته عند البدء في إنشاء موقع ويب دون أي خبرة سابقة ، فهو سهل الاستخدام وبديهي تمامًا وبدون أي خبرة سابقة في غضون أيام قليلة ، ستكون أكثر من قادر على بناء موقع ويب رائع لنفسك ، يمكنني القول أنه حتى ذو مظهر احترافي.

ومع ذلك ، يجب أن يبدو موقعك رائعًا على جميع أحجام الأجهزة ، وبنفس الطريقة التي قمت بتحرير إصدار سطح المكتب ، يمكنك تحرير جميع الأحجام الأخرى. يرجى ملاحظة أنه لا يمكن إضافة العناصر والأدوات إلا إلى إصدار سطح المكتب ومن ثم يمكنك خداع المظهر بأحجام أصغر.

أيضًا ، يمكنك بسهولة تعيين عنصر واجهة المستخدم أو رؤية القسم على أجهزة مختلفة ، بحيث يمكنك الحصول على محتوى مختلف في قسم مشابه من خلال ترك قسم واحد مرئيًا على سطح المكتب ولكنه مخفي على الكمبيوتر اللوحي والجوال. وبالمثل ، آخر مخفي من سطح المكتب ولكنه مرئي على الجهاز اللوحي والجوال.

لتعديل إصدارات الهاتف المحمول والكمبيوتر اللوحي ، انقر فوق وضع الاستجابة للأيقونة أسفل الشريط الجانبي الأيسر ، وسيعرض موقعك على الهاتف المحمول. وفي الجزء العلوي ، يمكنك التبديل بين أحجام الشاشات المختلفة.

لمزيد من الوضوح ، أضفت قسمين حيث يكون أحدهما مخفيًا على الهاتف المحمول والكمبيوتر اللوحي والقسم الآخر مخفيًا على سطح المكتب. يرجى الاطلاع على المثال أدناه.

النتيجة النهائية على الهاتف المحمول.

والنتيجة النهائية على سطح المكتب تحتوي على قسم واحد فقط ولكن قسم مختلف.

أداء Elementor Page Builder على Cloudways

يعمل Elementor بشكل جيد للغاية ويسجل 100 نقطة على GTMetrix وتُظهر أدوات الاختبار الأخرى أداءً رائعًا حقًا. يرجى ملاحظة أنني لم أقوم بتحسين أي صور للحصول على نفس حجم الصفحة والصور بالضبط لجميع الاختبارات التي أجريناها.

- نتائج Elementor على GTMetrix

- نتائج Elementor على أدوات Pingdom

- نتائج Elementor على WebPageTest

ملخص

إذا كنت بحاجة إلى منشئ صفحات بديهي وسهل الاستخدام ، فقد يغطي Elementor جميع الجوانب اللازمة لإنشاء موقع ويب لطيف. ليس من الصعب إنشاء مواقع مثالية للبكسل من التصميم إذا كان لديك أي معرفة بـ CSS.

مع المجتمع الضخم ومئات الوظائف الإضافية والمكونات الإضافية الخارجية التي تمد وظائف Elementor الأساسية ، لا يمكنني رؤية أي نوع من مواقع الويب التي لا يمكن إنشاؤها باستخدام Elementor.

غالبًا ما نرى كيف يتضخم Elementor ، ويتم تحميل الكثير من التعليمات البرمجية غير الضرورية ، ومن الصعب تحسينها ولكن كما ترون من الاختبارات ، يبدو أن Elementor يؤدي أداءً جيدًا على Cloudways. لقد اختبرت الصفحة المقصودة مع 25 صورة بالداخل و 7 أقسام + رأس وتذييل ، وهو أعلى من المتوسط ​​للصفحة الرئيسية.

شيء رائع آخر حول Elementor هو أن منحنى التعلم ليس شديد الانحدار ولكنه خفيف جدًا وفي غضون دقائق قليلة باستخدام بعض القوالب أو الكتل المعدة مسبقًا ، يمكنك الحصول على موقع ويب مصمم بشكل جيد وعصري المظهر.