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

ستساعدك المقالة التالية: برادلي تايلور قم بتخصيص تجربتك في الواجهة الأمامية مع منشئي صفحات WooCommerce اقرأ المقال

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

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

لماذا قد تحتاج إلى منشئ صفحات WooCommerce

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

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

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

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

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

مزيد من التحكم

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

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

سهولة الاستعمال

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

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

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

كفاءة

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

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

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

تحسين تجربة الهاتف المحمول

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

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

أهم منشئي صفحات WooCommerce

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

العنصر

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

من بين مجموعة العناصر العديد من الخيارات لمتاجر WooCommerce. تتضمن بعض وحدات WooCommerce الأكثر فائدة:

• عنوان المنتج
• صور المنتج
• سعر المنتج
• تصنيف المنتج
• فئات المنتجات
• عربة التسوق
• الدفع
• حسابي
• فتات الخبز
• منتجات ذات صله

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

يمكنك إنشاء التخطيط الخاص بك باستخدام أدوات WooCommerce أو استخدام أحد القوالب المعدة مسبقًا.

هناك العديد من الامتدادات المفيدة لإضافة عناصر واجهة مستخدم إضافية إلى Elementor. على سبيل المثال ، يأتي المكون الإضافي Essential Addons for Elementor مع عشرات العناصر مثل Woo Checkout و Woo Cart التي يمكنك إضافتها إلى صفحات Elementor الخاصة بك.

إنشاء صفحة الخروج مخصصة مع Elementor

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

في هذا المثال ، سنستخدم عنصر Woo Checkout من الإضافات الأساسية للعنصر.

عند إعداد المكون الإضافي لأول مرة ، يمكنك اختيار العناصر التي تريد تمكينها. وهي مقسمة إلى أقسام مختلفة على أساس الفئة. قم بالتمرير لأسفل وصولاً إلى WooCommerce Elements.

سيتم تعطيل Woo Checkout افتراضيًا. قم بتمكينه مع Woo Cart ، ثم حدد التالي لإنهاء إعداد البرنامج المساعد.

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

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

سيؤدي هذا إلى إنشاء مسودة للقالب وينقلك إلى محرر Elementor. تحتوي القائمة اليمنى على العناصر التي يمكنك سحبها وإفلاتها في تصميم صفحتك. أدخل “Woo” في حقل البحث وسيقوم البرنامج المساعد بتصفية العناصر لإظهار النتائج المتطابقة فقط.

حدد Woo Checkout واسحبه إلى المربع الذي يقول اسحب القطعة هنا.

عند إضافة الأداة ، سترى التخطيط الافتراضي التالي:

لتخصيص التصميم وفقًا لاحتياجاتك ، حدد الأداة وانتقل إلى المحرر في القائمة اليمنى. ابدأ بعلامة التبويب “المحتوى” لإدخال الصياغة التي تظهر على الصفحة.

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

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

نمط صفحة الخروج الخاصة بك

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

عندما تنتهي من تصميم صفحة الخروج ، احفظ التغييرات وقم بمعاينة الإصدار النهائي قبل التحديد ينشر.

تغيير صفحة الخروج

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

ديفي

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

• أقسام المنتج
• أسعار المنتجات
• معارض المنتجات
• تقييمات المنتج
• أضف إلى سلة التسوق الأزرار

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

إنشاء صفحة منتج مخصصة مع Divi

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

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

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

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

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

داخل Visual Builder ، سترى جميع عناصر WooCommerce التي يمكنك تخصيص التصميم. هذا يتضمن:

• Woo Breadcrumb
• Woo أضف إلى السلة
• وصف Woo
• وو ميتا
• علامات وو

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

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

في علامة التبويب Use On ، حدد جميع المنتجات لتطبيق النموذج على كل صفحة من صفحات منتجك.

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

ختامية الأفكار حول منشئي صفحات WooCommerce

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