WooCommerce + Elementor: لنبني أشياء رائعة

نشرت: 2022-07-27

هل تريد تعديل موقع الويب الخاص بك على WordPress وتصميمه دون الاستعانة بمطور؟ خبر سار: إنه ممكن تمامًا مع المكونات الإضافية لمنشئ صفحات WordPress.

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

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

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

المكون الإضافي Elementor: نظرة عامة موجزة

Elementor عبارة عن مكوّن إضافي لمنشئ صفحات WordPress بالسحب والإفلات المرئي يتيح لك إنشاء صفحات ويب ومنشورات فريدة مقارنةً بقوالب الصفحات القياسية التي تأتي مع سمات WooCommerce أو WordPress.

لا يتطلب أي ترميز ويسمح لك بسهولة تكوين الإعدادات وتنظيم محتوى صفحتك وعناصرها باستخدام أدوات السحب والإفلات.

لنبدأ بمراجعة البرنامج المساعد من خلال النظر في كيفية عمل واجهة Elementor.

فهم واجهة البرنامج المساعد Elementor

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

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

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

إليك مدى بساطة سحب العناصر المطلوبة وإفلاتها على الصفحة:

عندما تقوم بإسقاط عنصر على صفحتك - يقسم Elementor العناصر إلى هيكلين للتخطيط ، معطياً عنصرين هيكليين مختلفين ، كما هو موضح أدناه.

تشمل هذه العناصر الهيكلية:

القسم: مميز باللون الأزرق.
العمود: يقع داخل القسم المميز باللون الأسود. يمكنك إضافة العديد من الأعمدة حسب الحاجة داخل القسم.

بمجرد إسقاط العنصر ، يمكنك بسهولة تخصيص تخطيطه عن طريق ضبط العرض وتغيير فجوة العمود وارتفاعه.

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

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

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

يمكنك أيضًا التنقل من علامات التبويب إلى الشريط الجانبي للعناصر بمجرد النقر فوق الرمز المربع المعروض في الزاوية اليمنى من الشريط الجانبي.

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

الآن دون قضاء الكثير من الوقت ، دعنا ننتقل مباشرة إلى ميزات منشئ صفحة Elementor.

أهم ميزات العنصر التي تجعله أداة إنشاء صفحات ممتازة لـ WooCommerce

فيما يلي بعض مزايا Elementor الممتازة التي تجعلها واحدة من أشهر منشئي الصفحات بين مواقع WordPress و WooCommerce.

مكتبة قوالب جاهزة واسعة النطاق

يوفر Elementor مجموعة واسعة من القوالب. انقر فوق أيقونة إضافة قوالب أدناه لإضافة قالب.

اختر من بين أكثر من 300 قالب من مكتبة قوالب Elementor وأضفهم إلى صفحتك بنقرة واحدة.

منذ إصدار Elementor 2.0 ، تأتي هذه القوالب بتنسيقين:

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

الصفحات - تقدم تصميمات كاملة الصفحة ، والتي يمكنك استيرادها بنقرة واحدة وتعديلها حسب الحاجة.

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

كما أنه يزيل عناء إنشاء تصميم صفحة جديد من البداية في كل مرة.

ضوابط تصميم متجاوبة ومعاينات متنقلة

يتزايد استخدام الأجهزة المحمولة باستمرار كل شهر ، ويعتقد حوالي 73.1٪ من مصممي الويب أن تصميم الصفحة غير المستجيب هو أحد أكبر الأسباب وراء التخلي عن موقع الويب.

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

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

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

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

خيارات تخصيص لا حدود لها

التخصيص لا حدود له مع Elementor ، ولا حدود لكيفية تصميم موقع الويب الخاص بك وعناصره.

توفر قوائم Style و Advanced في محرر Elementor الكثير من خيارات تخصيص النمط. يمكنك تصميم المحتوى وفقًا لعدة سمات ، بما في ذلك اللون والعرض والحجم ومرشحات CSS والحد.

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

ضوابط تخطيط مفصلة

بالتعمق في خيارات التخصيص ، يمنحك Elementor تحكمًا تفصيليًا في تصميم التخطيط الخاص بك ، لذلك لا يتعين عليك التنازل عن مرونة التصميم لديك بسبب عدم القدرة على كتابة كود مخصص.

يجعل Elementor من السهل وضع الأقسام وعناصر واجهة المستخدم والأعمدة الخاصة بك في المكان الذي تريده بالضبط مع العديد من خيارات التحكم البديهية.

باستخدام عناصر التحكم في التخطيط في القائمة المتقدمة ، يمكنك:

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

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

تاريخ المراجعة الكامل للتقدم مع التراجع / الإعادة عن التغييرات

تتمثل إحدى أفضل ميزات Elementor في أنه يتيح لك معاينة السجل الكامل لجميع التغييرات التي أجريتها ، وبالتالي تسجيل كل إجراء في السجل.

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

يترك وراءه رمزًا نظيفًا

إذا كنت ترغب في أي وقت مضى في إلغاء تنشيط Elementor في المستقبل لسبب ما ، فلا داعي للقلق بشأن تركه وراءه الكثير من الرموز القصيرة مثل Divi Builder.

Elementor يترك وراءه رمزًا نظيفًا ، مما يضمن الأداء الأمثل وسرعة الصفحة.

مراجعة Elementor Pro

في حين أن منشئ صفحة Elementor الأساسي مفتوح المصدر ومجاني ، يمكنك الترقية إلى إصدار Elementor Pro - الذي يوفر وظائف إضافية مفيدة.

فيما يلي نظرة سريعة على بعض ميزات المكون الإضافي Elementor Pro الجديد:

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

وبالتالي ، إذا كنت تريد المزيد من الميزات والقوالب المتميزة وعناصر واجهة المستخدم العالمية - يمكنك الانتقال إلى المكون الإضافي Elementor Pro ، بدءًا من 49 دولارًا فقط.

مراجعة تسعير العنصر

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

ومع ذلك ، لإنشاء مواقع ويب أكثر احترافية ، تقدم Elementor أربع خطط متميزة مع ميزات متميزة ، مثل دعم VIP و Elementor Expert Profile.

تبلغ تكلفة خطة Essential و Expert و Studio و Agency للمكوِّن الإضافي Elementor 49 دولارًا و 199 دولارًا و 499 دولارًا و 999 دولارًا سنويًا. وبالتالي ، فإن Elementor هو للجميع ، وسواء كنت مصمم ويب أو مطورًا أو مالك وكالة - يوفر Elementor ميزات لكل حاجة وكل طلب.

الخلاصة: الحكم النهائي

بعد هذه المراجعة الشاملة ، من الآمن القول أن Elementor يوفر جميع الميزات الأساسية المطلوبة لإنشاء موقع ويب WordPress أو WooCommerce.

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

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