صفحات WooCommerce مع Elementor
نشرت: 2021-11-23يجعل WordPress حياتنا أسهل من خلال ميزاته المذهلة لبناء موقع الويب الخاص بك ، وخاصة متاجر الويب WooCommerce. لا يوجد شيء أسهل من تصميم صفحات WooCommerce الخاصة بك باستخدام Elementor حيث لن تضطر إلى التعامل مع الأكواد على الإطلاق.
لكن ربما لا تزال تتساءل ، لماذا Elementor؟ حسنًا ، هذا لأنه الأداة المثالية لتصميم مواقع التسوق عبر الإنترنت في WooCommerce والتي يمكن حتى لأي شخص غير تقني القيام بها. يجعل Elementor ذلك ممكنًا من خلال اصطحابك من خلال تجربة بناء موقع ساحقة.
إذن ، هل أنت مستعد لتصميم صفحات WooCommerce باستخدام Elementor؟ دعنا نوجهك بخطوات دقيقة حول مدى سهولة الحصول على صفحات WooCommerce الديناميكية باستخدام منشئ الصفحة Elementor.
هيا بنا نبدأ!
هل Elementor متوافق مع WooCommerce؟ لماذا تذهب معها؟
للحصول على موقع ويب WooCommerce ناجح ، فإن تصميم الويب مهم جدًا. يتطلب واجهة موقع جذابة تمامًا وميزات معبأة بدقة لجذب انتباه عملائك إلى عملك.
يعد WordPress بالفعل نظامًا أساسيًا رائعًا حيث يمكنك بسهولة تصميم مواقع الويب. لكن Elementor يجعل من السهل إنشاء مواقع ويب رائعة في غضون دقائق. يعد المكون الإضافي قويًا للغاية ويأتي مزودًا بأدوات تساعد على إضافة ميزات ووظائف إلى موقع الويب الخاص بك.
ولكن ، هل Elementor متوافق مع WordPress؟ نعم إنه كذلك. في الواقع ، Elementor متوافق بشكل كبير مع WordPress وكل ما بداخله. يعد تصميم صفحات WooCommerce باستخدام Elementor أمرًا سهلاً ومرنًا وقطعة من الكعكة حتى بالنسبة للمبتدئين.
فقط لأن أي شخص بغض النظر عن معرفة الترميز يمكنه تصميم مواقع الويب باستخدام Elementor ، فإنه يجعل أفضل أداة في السقيفة لتستخدمها. ليس من المستغرب أن يستخدم أكثر من 5 ملايين شخص Elementor لإنشاء مواقع الويب الخاصة بهم اليوم.
لذا ، هل أنت مستعد للعرض الرئيسي؟ دعني أرشدك إلى الطريقة الصحيحة لبناء صفحات WooCommerce وتخصيصها باستخدام Elementor أدناه.
قم بإنشاء صفحات WooCommerce باستخدام Elementor
كما قلنا ، فإن إنشاء صفحات WooCommerce الخاصة بك باستخدام Elementor ليس مهمة صعبة. أصبح كل شيء سهلًا باستخدام WordPress وكذلك الإجراء الكامل لهذه المهمة. إذن ، إليك كيف فعلنا ذلك-
أولاً ، تحتاج إلى إجراء استعدادات مثل تثبيت المكونات الإضافية المطلوبة لـ WordPress-
- موقع WordPress الخاص بك
- Elementor Page Builder (مجاني واحترافي)
- WooCommerce (مجاني)
- Element Pack Lite (مجانًا)
بعد الانتهاء من الإعداد الأولي مثل شراء النطاق والاستضافة ، وتكوين WordPress على موقع الويب الخاص بك ، وتثبيت المكونات الإضافية Elementor ، و WooCommerce ، و Element Pack Lite ، وما إلى ذلك ، قد يستغرق هذا بعض الوقت لتهيئة كل ما هو ضروري لتشغيل موقع الويب الخاص بك.
على وجه الخصوص ، يتطلب إعداد WooCommerce بضع دقائق وتحتاج إلى ملء جميع أنواع المعلومات بما في ذلك معلومات الدفع والشحن وجهات الاتصال الشخصية وما إلى ذلك.
بمجرد عودتك إلى لوحة القيادة ، يتم التهيئة وتصبح جاهزًا لإنشاء صفحات WooCommerce باستخدام Elementor.
لاحظ أن كل من Elementor و WooCommerce يحتويان على عدد جيد من الأدوات لإضافة وظائف WooCommerce إلى موقع الويب الخاص بك. ولكن مع ذلك ، هذه ليست كافية للانغماس بشكل كامل في الوظائف المناسبة لـ WooCommerce أو تصميم الويب.
لهذا السبب نحتاج إلى مكون إضافي لليد المساعدة مثل Element Pack Lite لإثراء موقع الويب من خلال التصميم والميزات. الآن ، دعنا نمضي قدمًا في مرحلة التصميم.
تخصيص صفحات WooCommerce باستخدام Elementor بسهولة
نظرًا لأن منشئ صفحات Elementor يسمح لك باستيراد قوالب جاهزة ، فمن السهل جدًا العمل مع القوالب ثم ببساطة استدعاءها داخل الصفحات والبدء في تخصيصها. أيضًا ، يحتوي Elementor بالفعل على أكثر من 10 عناصر واجهة مستخدم بسيطة لـ WooCommerce لإنشاء قاعدة لصفحة متجرك.
ولكن بمجرد حصولك على جميع المكونات الإضافية الضرورية ، بما في ذلك Element Pack Pro ، ستحصل على أكثر من عناصر واجهة مستخدم كافية لتغطية الأرضية الكاملة لموقع WooCommerce الخاص بك. لذلك ، ليس هناك مجال للشعور بالقمع أثناء تصميم صفحات الويب الخاصة بك.
ولكن قبل ذلك ، تأكد من تحديث المكونات الإضافية ما لم تكن لا تعمل بالطريقة التي ينبغي أن تكون عليها.
الخطوة 1: لنقم بإنشاء قالب صفحة WooCommerce
بالنسبة للمبتدئين ، انتقل إلى قسم إنشاء القوالب من موقع WordPress الخاص بك. ما عليك سوى الانتقال إلى لوحة التحكم> النماذج> إضافة جديد
سيؤدي النقر فوق الزر "إضافة جديد" إلى عرض نافذة منبثقة حيث تحتاج إلى إنشاء النموذج. هناك العديد من الخيارات المتاحة هنا وعليك اختيار الخيار الذي يُقرأ على أنه "منتج فردي". نظرًا لأننا سننشئ صفحة WooCommerce للمنتجات ، فهذا هو الإعداد الذي سنعمل عليه.
بالإضافة إلى ذلك ، تأكد من تثبيت Elementor Pro لديك. خلاف ذلك ، لن تكون هذه الخيارات مرئية.
ما عليك سوى إضافة اسم قالب بعد ذلك لتحديد القالب بسهولة للاستخدام في المستقبل.
ثم اضغط على زر "إنشاء نموذج" وابدأ في وضع العناصر في الصفحة لإنشاء صفحات WooCommerce التالية باستخدام Elementor.
الخطوة 2: إدراج قوالب الصفحة
الآن بعد أن أصبحت جاهزًا لإنشاء قالب صفحة WooCommerce الخاص بك ، هناك طريقتان يمكنك القيام بذلك ، إما القيام بذلك من البداية أو أخذ نموذج جاهز وتخصيصه.
لا يوجد فرق كبير بين الخيارين ، فقط الوقت المطلوب لإكمال النموذج. لسهولة الاستخدام ، دعنا نضيف نموذجًا جاهزًا أولاً.
ما عليك سوى النقر على أيقونة مكتبة قالب حزمة العناصر لفتح المكتبة داخل محرر الصفحة.
كل ما عليك فعله هو التنقل في مكتبة القوالب واختيار تصميم الصفحة المناسب الذي يتناسب مع سمة متجرك. بمجرد العثور على نموذج ، ما عليك سوى التمرير فوق النموذج والنقر فوق الزر "إدراج".
لاحظ أنه يمكنك أيضًا استخدام قوالب صفحة WooCommerce من Elementor Pro. بمجرد تخصيص قالب ، سيكون تصميمًا فريدًا لن يكون مشابهًا للقالب نفسه.
الخطوة 3: إضافة وتخصيص الميزات
من المهم جدًا معرفة الميزات التي سيستمتع بها عملاؤك قبل البدء في صب الأدوات في صفحة النموذج. يمكنك دائمًا البحث عن محتوى جديد أو تخصيص التخطيط الحالي لمزيد من التحسينات.
هناك مجموعة من الأدوات المصغّرة التي يوفرها Elementor والتي ستضيف المزيد من التوابل إلى موقع WooCommerce الخاص بك. باستخدام هذه الأدوات ، يمكنك بسهولة تصميم جزء من صفحة WooCommerce جزئيًا وإنشاء موقع ويب كامل.
دعونا نرى الحاجيات المتاحة أولاً-
- عنوان المنتج
- وصف
- أضف إلى السلة
- سعر المنتج
- صورة
- تقييم
- كمية المنتج
- ميتا
- فتات الخبز
- منتجات ذات صله
- منتجات المخزون والمخزون
إليك صفحة منتج WooCommerce مخصصة باستخدام عناصر من القائمة أعلاه.
إنه تكتيك جيد للحفاظ على الحد الأدنى من تصميم صفحة المنتج من أجل جعل زوارك يركزون على المنتجات أكثر. على أي حال ، يمكنك الآن التمييز بين الميزات ومعرفة كيفية تصميم صفحتك.
الخطوة 4: زر عربة التسوق لصفحات WooCommerce
يعد وجود زر CTA نشط كافٍ على موقع WooCommerce على الويب طريقة جيدة لإشراك زوارك وتكريم العملاء المحتملين. لا تجذب CTA العملاء فحسب ، بل تجعل موقعك يبدو جذابًا للزائرين أيضًا.
من السهل جدًا إضافة أزرار CTA أو "Add-to-cart" على صفحات WooCommerce باستخدام Elementor. ومع ذلك ، هناك نوعان من أزرار "Add-to-cart" المتاحة في Elementor ، واحدة ثابتة وأخرى ديناميكية.
يعد استخدام الثابت هو أسرع طريقة لإضافة CTA إلى صفحاتك ولكنه يفتقر إلى عناصر التحكم في الأنماط. نوصي باستخدام زر CTA الديناميكي باستخدام عنصر واجهة Element Pack لـ WooCommerce ، "WC- أضف إلى عربة التسوق".
هنا ، يمكنك تخصيص زر عربة التسوق لجعله يظهر بشكل جيد على عكس منتجاتك. يمكنك دائمًا تخصيص اللون والخلفية والحدود والحشو والمحاذاة والتسمية والرمز والحجم وما إلى ذلك للزر.
كل ما عليك فعله هو مطابقة ارتفاع الزر وفقًا لمستوى عين المستخدمين. ضع في اعتبارك أن موضع الزر مهم جدًا لأنه يؤثر على قرار المستخدمين تجاه شراء المنتج.
الخطوة 5: تكوين صفحات أرشيف منتج WooCommerce باستخدام العنصر
حتى الآن ، أكملت صفحات منتج واحدة على WooCommerce. الآن ، تحتاج إلى إنشاء صفحة أرشيف منتج لعرض منتجاتك بكميات كبيرة ومساعدة زوارك على التنقل بسهولة.
دعونا نصنع واحدة لأنفسنا الآن. تمامًا كما كان من قبل ، انتقل إلى لوحة معلومات WordPress الخاصة بك وادخل إلى قائمة النماذج وانقر على "إضافة جديد".
هذه المرة ، قم بالتمرير لأسفل وحدد خيار " أرشيف المنتجات " للقالب باسم لتحديده لاحقًا.
انتهي الآن من الضغط على زر إنشاء قالب . انتظر حتى تظهر صفحة محرر Elementor.
عندما ترى الصفحة الفارغة ، يمكنك البدء في العمل باستخدام قالب آخر جاهز لصفحة الأرشيف أو إنشاء قالب خاص بك من البداية. يحتوي Elementor على عدد كبير جدًا من عناصر واجهة المستخدم لتشكيل أجزاء وأجزاء صفحة الأرشيف.
ولكن ، يمكنك تخطي عملية العصف الذهني والانتقال إلى الأدوات المصغّرة من المكون الإضافي Element Pack Pro. يحتوي على بعض ميزات WooCommerce التي تجمع بين أجزاء متعددة من الواجهة لتكوين صورة كاملة.
ألق نظرة على القائمة أدناه-
- المكتبة الدائرية
- شريط تمرير الجهاز
- دائري مخصص
- WooCommerce Slider
- منتجات WooCommerce
- WooCommerce Carousel
- فئات WooCommerce
باستخدام هذه الأدوات ، يمكنك تطوير صفحات WooCommerce مذهلة باستخدام Elementor لأرشيف المنتج.
هذا مجرد مثال صغير. هناك المزيد من الأشياء التي يمكنك القيام بها ولا حدود لها سوى السماء.
الخطوة 6: تخصيص تصميم الصفحة باستخدام Element Pack Pro
حتى الآن ، كنت تقوم بإنشاء صفحات WooCommerce باستخدام Elementor باستثناء أنك لم تقم بإجراء أي تغييرات مهمة على التصميم. Elementor هي نفسها أداة رائعة لتخصيص الواجهة ، ولا تزال تفتقر إلى عناصر تحكم تصميم متطورة.
لكن لا تقلق بشأن ذلك ، فقد حصلت على Element Pack Pro لإنهاء المهمة غير المكتملة نيابة عنك. هذه الأداة مشهورة جدًا بعناصر التحكم في التخصيص لكل ميزة بها (أكثر من 200 ميزة). لذلك ، يمكنك الحصول على عنوان متحرك ، ومعرض متحرك ، وعربة عرض متحركة للمنتج ، وشبكة ، ومنزلق ، وتمويه القسم ، ورابط الغلاف ، والمزيد من الميزات المدهشة في مكان واحد.
على سبيل المثال ، دعنا نوضح كيف يمكن تخصيص WooCommerce Carousel لتناسب ذوقك.
الخطوة 7: نشر صفحات WooCommerce باستخدام Elementor
الآن بعد أن أصبح كل شيء جاهزًا ، أنشأنا صفحة المنتج الفردية ، وصفحة الأرشيف ، وانتهينا من إعداد تصميمات الصفحة ، حان الوقت لوضع الصفحات في موقع الويب المباشر.
بعد حفظ القوالب ، يمكنك فقط الانتقال إلى لوحة المعلومات ، في الصفحة حيث تريد وضع المنتجات أو الأرشيف ، واستدعاء القوالب هناك. بسيطة وسهلة. ليس عليك حتى تكرار الصفحة حيث يمكنك استخدام القوالب المحفوظة في أي وقت تريده.
هذه هي الطريقة التي تعمل بها مع القوالب لإنشاء صفحات WooCommerce مذهلة باستخدام Elementor.
استرخ أثناء تصميم صفحات WooCommerce المعقدة في دقائق
يعد تصميم صفحات WooCommerce باستخدام Elementor أقل إزعاجًا وأكثر متعة عندما تعرف بالضبط ما تفعله. كبرنامج صديق للمبتدئين ، يتيح لك Elementor إتقان الأساسيات بسرعة دون الحاجة إلى يد ثالثة.
هذا كل شئ!
استخدم قسم التعليقات لأي أسئلة متعلقة بهذه المقالة أو يمكنك استخدام خيار LiveChat للتحدث معنا مباشرة. شكرا لسهر.
ابق آمنا.