كيفية إنشاء صفحات تسوق WooCommerce باستخدام Elementor
نشرت: 2020-09-22تم طلب أول منتج على الإطلاق عبر الإنترنت على موقع أمازون في عام 1995 - كتاب "المفاهيم السائلة والمقارنات الإبداعية".
بعد حوالي 25 عامًا ، حققت صناعة التجارة الإلكترونية حوالي 3.5 تريليون دولار أمريكي من المبيعات ومن المتوقع أن تصل إلى 4.9 تريليون دولار بحلول عام 2021 في جميع أنحاء العالم.
لذلك ، إذا لم تكن قد أطلقت موقع التجارة الإلكترونية الخاص بك بعد ، فهذا هو أفضل وقت للبدء. باستخدام الأدوات المناسبة والإعداد الصحيح ، يمكنك بسهولة إنشاء أول متجرك عبر الإنترنت من البداية وتحديثه بالمحتوى ذي الصلة. لا يتطلب خبرة فنية سابقة!
سنوجهك اليوم خلال العملية الكاملة خطوة بخطوة لتصميم موقع التجارة الإلكترونية الخاص بك باستخدام WooCommerce و Elementor. ونعد بأن الأمر لن يستغرق أكثر من 30 دقيقة لإجراء التكوين بالكامل!
لكن قبل ذلك دعونا نجيب على السؤال-
لماذا تصمم متجرك الإلكتروني باستخدام Elementor؟
التصميم هو حجر الزاوية في موقع التجارة الإلكترونية الناجح. بفضل WordPress - عززت تجربة تطوير الويب للأشخاص بما في ذلك مجموعة واسعة من إمكانات التخصيص وضمان أمان الموقع أيضًا. إضافة حصرية أخرى إلى WordPress هي أدوات إنشاء صفحات مواقع الويب مثل Elementor.
يساعدك Elementor على إنشاء صفحات ويب مذهلة بغض النظر عن أي معرفة فنية. باستخدام هذا المحرر المرئي ، يمكن لأي شخص إنشاء مواقع ويب ديناميكية في دقائق. لا يمكنك فقط السحب والإفلات لتصميم موقع الويب الخاص بك ، بل يتيح لك Elementor استعراض التغييرات مباشرة دون تبديل علامة تبويب المتصفح. أيضًا ، يمكنك بسهولة نسخ المقاطع والكتل ولصقها أثناء تصميم موقع WordPress الخاص بك داخل Elementor.
لهذا السبب يستخدم أكثر من 5 ملايين شخص بنشاط Elementor Page Builder على موقع WordPress الخاص بهم.
بصرف النظر عن كل شيء ، يحتوي Elementor على مجموعة غنية من الوظائف الإضافية المفيدة. حتى تحصل على خيارات لا حصر لها لتهيئة موقع الويب الخاص بك بطريقة تناسب علامتك التجارية بدقة.
إذا كنت تخطط لبناء متجر التجارة الإلكترونية الخاص بك باستخدام Elementor ، فهناك أخبار جيدة أخرى لك! مُنشئ صفحة WordPress هذا مدعوم بالكامل مع WooCommerce- أفضل مكون إضافي للتجارة الإلكترونية لـ WordPress.
نصيحة احترافية: ومع ذلك ، يمكنك تحويل موقع WordPress الخاص بك إلى متجر إلكتروني يعمل بكامل طاقته باستخدام WooCommerce بنقرات قليلة فقط. بينما يسمح لك Elementor بجعل تصميم متجرك أكثر جاذبية للزائرين دون تطبيق أي رمز.
كيفية إنشاء موقع للتجارة الإلكترونية في WordPress
كما وعدت ، سوف نعرض لك أسهل عملية وبأسعار معقولة لإنشاء موقع للتجارة الإلكترونية باستخدام WooCommerce Elementor pro. هيريس كيفية القيام بذلك -
هذه هي المتطلبات المسبقة لإنشاء متجرك عبر الإنترنت:
- موقع ووردبريس
- WooCommerce (مجاني)
- Elementor (مجاني)
- Elementor (Pro)
- HappyAddons - إضافات عنصر (مجاني)
بادئ ذي بدء ، تحتاج إلى شراء المجال الخاص بك والاستضافة. ثم قم بتكوين موقع WordPress الخاص بك وقم بتثبيت جميع المكونات الإضافية المطلوبة مثل WooCommerce و Elementor و HappyAddons وما إلى ذلك.
في هذه الأثناء ، إذا كنت تريد دليلًا سريعًا لتبدأ باستخدام Elementor & WooCommerce ، فانتقل إلى دليل المبتدئين هذا.
يظهر أسفل الفيديو كيفية تكوين صفحة وإعدادات WooCommerce الأساسية. ألق نظرة سريعة عليها!
ملاحظة مهمة: يأخذك تثبيت WooCommerce في جولة قصيرة لجميع خيارات الإعداد المطلوبة مثل الدفع والشحن والتعاون في المكونات الإضافية الأخرى ، إلخ.
بمجرد الانتهاء من التكوين الأساسي ، يصبح موقع WooCommerce جاهزًا للطيران. يمكنك الآن إضافة منتجات إلى متجرك عبر الإنترنت. يبدو التخطيط الأساسي لصفحة متجر WooCommece كما يلي:
على الرغم من أن WooCommerce يحتوي على جميع الوظائف المطلوبة التي تتوقعها من متجر التجارة الإلكترونية ، إلا أن خيارات التصميم محدودة هنا. أحيانا معقدة أيضا! هناك يأتي Elementor يتيح لك تعديل تصميم متجرك في طريقك.
قد ترغب أيضًا في قراءة: كيفية استخدام Elementor: طريقة سهلة للبدء.
صمم صفحات منتجك باستخدام Elementor
يحتوي مُنشئ صفحات WordPress هذا على عدد من القوالب الجاهزة الرائعة المناسبة لموقع WooCommerce. أيضًا ، يدعم Elementor أكثر من 10 عناصر واجهة مستخدم WooCommerce تساعدك على التحكم الشامل في متجرك عبر الإنترنت بسهولة بالغة. لذلك لن تشعر أبدًا بأنك مقيد بعدد عناصر WooCommerce ، والأكثر من ذلك ، يمكنك تصويره.
قبل الدخول في عملية التصميم ، تأكد من تثبيت أحدث إصدار من Elementor و Elementor pro وتفعيل WooCommerce 3.4 أو أعلى على موقع الويب الخاص بك بنجاح. إلا أنك لن تتمكن من الوصول إلى قوالب منتجات Elementor.
الخطوة الأولى: إنشاء نموذج منتج واحد
في البداية ، انتقل إلى - WordPress Admin Dashboard → Templates → Add New
سترى نموذج مشروط لإنشاء قالب Elementor. هنا ، حدد نوع النموذج الذي تريد إنشاءه. لتصميم المتاجر ، يجب تحديد نوع المتجر الفردي.
أدخل اسمًا للقالب الخاص بك. اضغط على زر إنشاء قالب.
بعد ذلك ، تدخل مكتبة قوالب Elementor. دعنا نختار القالب لصفحة متجر WooCommerce الخاصة بك-
الخطوة الثانية: أدخل قالب Elementor
في هذه الخطوة ، يجب عليك اختيار التصميم الذي تريد تخصيصه لمتجرك عبر الإنترنت باستخدام Elementor. بدلاً من ذلك ، يمكنك البدء من البداية وتصميم صفحتك بإدراج عناصر واجهة مستخدم وميزات مختلفة محددة.
الخطوة الثالثة: تجميل متجرك باستخدام أدوات المنتج
يمكنك تخصيص صفحة متجرك بطريقتين - ملء النموذج بالمحتوى الخاص بك أو تعديل التخطيط بشكل أكبر قبل إضافة أي محتوى. إذا اخترت الخيار الثاني ، فتذكر أنه من السهل جدًا تخصيص عنصر التصميم الداخلي الخاص بك.
لحسن الحظ ، يوفر Elementor عددًا قليلاً من الأدوات المصممة لغرض وحيد هو إنشاء صفحات WooCommerce. باستخدام أدوات WooCommerce هذه ، يمكنك تخصيص كل جزء من متجرك عبر الإنترنت.
الحاجيات المتاحة التي تحتاجها صفحة منتجك:
- عنوان المنتج ووصفه
- إضافة إلى زر عربة التسوق
- سعر المنتج
- صورة المنتج
- يوبسل
- تصنيف المنتج
- علامات تبويب بيانات المنتج
- ميتا والمعلومات الإضافية
- محتوى المنتج
- فتات الخبز
- المنتجات ذات الصلة
- مخزون المنتج
الآن ، يمكنك تصميم متجر أحلامك عبر الإنترنت باستخدام أدوات WooCommerce هذه بصريًا دون معرفة أي رمز.
الخطوة الرابعة: تكوين زر إضافة إلى عربة التسوق
يعد زر CTA أحد أهم العناصر في صفحة المنتج. يجب عليك تصميمه بشكل جذاب ووضع الزر في النقطة المركزية حتى يتمكن أي شخص من ملاحظة ذلك بسهولة. يوفر Elementor خيارين لأزرار Add-to-Cart: عادي ومخصص.
باستخدام محرر Elementor ، يمكنك تخصيص نمط الزر وفقًا لهوية علامتك التجارية. ستحصل على العديد من خيارات التصميم مثل تغيير الألوان والطباعة والحدود والشكل وتأثيرات التمرير وما إلى ذلك.
ومع ذلك ، إذا كنت تريد التحكم الكامل في زر Add-to-cart ، فعليك استخدام خيار Add-to-Cart المخصص.
لديك المرونة لوضع هذا الزر في أي مكان تريده على صفحة المنتج الخاص بك. يمكنك أيضًا اختيار نوع الزر (افتراضي ، معلومات ، نجاح ، تحذير ، خطر) ، التسمية ، اللون ، المحاذاة ، الحجم ، الأيقونة ، الموضع والتباعد. بالإضافة إلى ذلك ، يمكنك تعيين معرّف زر لتتبع الأحداث في تحليلاتك.
بعد ذلك ، دعنا نرى كيفية تصميم صفحة أرشيف منتجك باستخدام WooCommerce Elementor Pro.
الخطوة الخامسة: تخصيص صفحة أرشيف منتجك باستخدام WooCommerce Elementor Pro
أعلاه ، أوضحنا لك كيفية تخصيص صفحة منتجك الفردية داخل Elementor. الآن ، سنقوم بشرح خطوات تصميم أرشيفات المنتج باستخدام Elementor Pro.
مثل صفحة منتج واحد ، انتقل إلى WordPress Admin Dashboard → Templates → Add New.
هذه المرة حدد Product Achieve من القائمة المنسدلة وقم بتسمية القالب الخاص بك.
بعد ذلك ، اضغط على زر إنشاء نموذج وانتظر حتى يتم تحميل المحرر.
مرة أخرى ، يمكنك تحديد قالب تم إنشاؤه مسبقًا أو بدء العمل على صفحة فارغة. إلى جانب جميع أدوات Elementor العادية هنا ، ستحصل على بعض أدوات أرشيف WooCommerce المحددة. مثل-
- عنوان الأرشيف
- أرشيف المنتجات
- منتجات
- وصف الأرشيف
- فتات الخبز WooCommerce
- إضافة مخصصة إلى عربة التسوق
- صفحات WooCommerce
- فئات المنتجات
- عربة القائمة
باستخدام هذه الأدوات وأدوات التصميم الأخرى ، يمكنك بسهولة ترتيب متجرك عبر الإنترنت بالطريقة التي تريدها.
الخطوة السادسة: قم بترقية أدوات التصميم الخاصة بك باستخدام HappyAddons
على الرغم من أن Elementor نفسها هي واحدة من أكثر المكونات الإضافية ثراءً بالميزات لتصميم موقع أحلامك دون امتلاك أي مهارات في البرمجة. لا تزال تستخدم HappyAddons ، يمكنك استكشاف المزيد من إمكانات التصميم وتوسيع المكون الإضافي الأساسي بشكل أكبر.
نظرًا لأن Happy Addons تجعل يديك أكثر قوة في تقديم عدد من الأدوات والميزات المفيدة. مثل التأثيرات العائمة ، والنص المتحرك ، ولصق النسخ عبر المجالات ، والكتل السعيدة ، وما إلى ذلك. تساعدك عناصر التصميم الحصرية هذه على جعل منتجك يبدو أكثر جاذبية. حتى تتمكن من جذب أكبر عدد من العملاء إلى متجر التجارة الإلكترونية الخاص بك.
هنا ، نستخدم "Card Widget" من HappyAddons لإلقاء نظرة فريدة على صفحة المنتج.
قد ترغب أيضًا في قراءة: كيفية إنشاء صفحات تسوق باستخدام Elementor & HappyAddons.
الخطوة السابعة: تعيين الشروط ونشر صفحة التسوق الخاصة بك
بمجرد الانتهاء من جميع التخصيصات ، اضغط على زر نشر. ولكن قبل ذلك ، قم بتعيين الشروط التي يجب أن تظهر صفحة منتجك بموجبها.
يمكنك تكوين هذا لجميع المنتجات ، لفئة معينة و / أو فئة فرعية ، علامة ، أو فقط للمنتجات من قبل مؤلف معين. الشروط الأكثر تعقيدًا قابلة للتطبيق أيضًا.
وضع اللمسات الأخيرة على كل شيء وحفظه. أخيرًا ، انشر التصميم الجديد للعيش. هذه هي الطريقة التي يمكنك بها تكوين موقع التجارة الإلكترونية الأول الخاص بك باستخدام WooCommerce Elementor Pro
خصص متجرك الإلكتروني في دقائق وزد مبيعاتك بشكل جذري
أعادت التجارة الإلكترونية تنظيم التجزئة تدريجياً. ليس هناك من عودة الآن! علاوة على ذلك ، ظهر جائحة كوفيد -19 على أنه نعمة لأصحاب المشاريع التجارية الإلكترونية. ويتوقع الخبراء أن تأثير الفيروس التاجي لن يكون فقط دفعة قصيرة الأجل لصناعة التجارة الإلكترونية ، بل ستكون موجودة لتبقى.
في هذه الحالة ، قد يكون بدء موقع التجارة الإلكترونية قرارًا يغير حياتك. وما الذي يمكن أن يكون أكثر روعة إذا كان بإمكانك إنشاء موقع الويب الخاص بك بنفسك بدلاً من الاستعانة بمحترف؟ باستخدام WooCommerce ، يمكنك إنشاء متجر أحلامك عبر الإنترنت في لمح البصر. علاوة على ذلك ، يعد Elementor أداة مفيدة لجعل تصميم متجرك أكثر روعة.
اجعل هذا السرد مفيدًا لك لجذب المشترين وزيادة المبيعات في متجر التجارة الإلكترونية الخاص بك.
استخدم قسم التعليقات أدناه إذا كان لديك أي استفسار آخر أو واجهت أي مشكلة أثناء إنشاء متجرك عبر الإنترنت.
