تسليط الضوء على البرنامج المساعد Divi: Divi BodyCommerce

Divi BodyCommerce هو مكون إضافي تابع لجهة خارجية لـ Divi يمنحك التحكم في تصميم متجرك من صفحة المنتج إلى صفحة الخروج وكل شيء بينهما. إنه مصمم مع مراعاة التحويلات ويمنحك التحكم الكامل في تصميم متجرك باستخدام Divi Builder.

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

تثبيت وإعدادات Divi BodyCommerce

قم بتحميل وتنشيط البرنامج المساعد كالمعتاد. لتنشيط الترخيص ، انتقل إلى Divi Engine > BodyCommerce License في قائمة لوحة القيادة.

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

وحدات Divi BodyCommerce

تمت إضافة 53 وحدة جديدة إلى Divi Builder. هذه هي جميع العناصر التي تحتاجها لتصميم كل جانب من جوانب متجر WooCommerce الخاص بك بما في ذلك صفحات المنتج وصفحات الحساب وصفحات الأرشيف وعربة التسوق وما إلى ذلك. تظهر الألوان في الواقع الغرض من الوحدات. على سبيل المثال ، الوحدات الحمراء مخصصة لصفحات المنتج. يستخدم البعض التدرج اللوني لإظهار أنهم يعملون مع نوعين من الصفحات. تُظهر هذه الصورة أول 24 وحدة.

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

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

إنشاء وتخصيص صفحة

لنلقِ نظرة على كيفية إنشاء الصفحة وتعيينها كصفحة افتراضية لتلك الفئة. أولاً ، قم بإنشاء التخطيط في مكتبة Divi.

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

أمثلة Divi BodyCommerce

فيما يلي بعض الأمثلة التي قمت بإنشائها. هذه مجرد عينة صغيرة لما يمكن عمله مع هذا البرنامج المساعد.

صفحة متجر Divi BodyCommerce

بالنسبة لصفحة المتجر ، أضفت للتو وحدة صفحات أرشيف حلقات المنتج.

ها هي الصفحة ذات الإعدادات الافتراضية. يمكن تعديل كل عنصر باستخدام Divi Builder.

ها هو داخل تخطيط Tea Shop. هذه هي الإعدادات الافتراضية باستثناء الحد. لقد قمت بتعيينه لعرض 6 منتجات.

يمكنك ضبط بعض العناصر مباشرة.

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

هذا هو تصميم نمط المدونة. سيبدو رائعًا إذا كان لديك أوصاف أطول للمنتج.

صفحة منتج Divi BodyCommerce

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

إنه بسيط ، لكنه مكان جيد للبدء. يعرض عنوان المنتج ومعرضه وشريط التمرير.

ألقيت في عدد قليل من صفحات المنتجات والوحدات العالمية بشكل عشوائي.

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

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

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

عربة التسوق Divi BodyCommerce

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

إليك عربة التسوق باستخدام الإعدادات الافتراضية. لدي الوحدتان في تخطيط واحد من عمودين.

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

وثائق Divi BodyCommerce

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

سعر Divi BodyCommerce

لدى BodyCommerce ثلاثة تراخيص للاختيار من بينها:

• موقع واحد - 24 جنيهًا إسترلينيًا
• 5 مواقع - 50 جنيهًا إسترلينيًا
• مواقع غير محدودة - 96 جنيهًا إسترلينيًا

يمكنك شراء BodyCommerce من موقع المطور.

خواطر ختامية

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

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

يوفر BodyCommerce المزيد من الأدوات والتخصيصات أكثر من أي مكون إضافي WooCommerce / Divi رأيته حتى الآن. إذا كنت تستخدم WooCommerce مع Divi وتريد تخصيص صفحات WooCommerce الخاصة بك ، فإن BodyCommerce هي خيار سهل.

نريد أن نسمع منك. هل جربت BodyCommerce لـ Divi و WooCommerce؟ أخبرنا برأيك في التعليقات.

صورة مميزة عبر Letters-Shmetters / shutterstock.com