كيفية إنشاء موقع للتجارة الإلكترونية باستخدام WordPress و Elementor 2020

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

WordPress هو نظام CMS الأكثر استخدامًا لبناء جميع أنواع مواقع الويب ، بما في ذلك مواقع التجارة الإلكترونية. أيضًا ، ستتعلم استخدام منشئ الصفحات Elementor لإنشاء صفحات ويب مذهلة ، والتي تعد الآن منشئ الصفحات رقم 1 والأكثر شيوعًا في WordPress. يتحكم WordPress في أكثر من 1/3 من الإنترنت. تستخدم غالبية شركات التجارة الإلكترونية الكبيرة مثل Sony و Bata و eBay وغيرها الكثير لتطوير وصيانة موقع الويب الخاص بهم وأفضل جزء في استخدام WordPress هو أنك لست بحاجة إلى تعلم أي نوع من لغات البرمجة أو أي لغة أخرى المصطلحات التقنية لإنشاء موقع الويب الخاص بك. إنها منصة سحب وإفلات بسيطة توفر الكثير من القوالب والتخطيطات التي تحمل في ثناياه عوامل والتي تساعد في إنشاء موقع ويب جذاب وسهل الاستخدام. أيضًا ، سأوفر قوالب معدة مسبقًا يمكنك استيرادها بسهولة وإنشاء موقع التجارة الإلكترونية الخاص بك وتشغيله في غضون دقائق.

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

لذلك دعونا نبدأ في إنشاء موقع ويب للتجارة الإلكترونية باستخدام WordPress و Elementor 2020

مقدمة إلى موقع التجارة الإلكترونية

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

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

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

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

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

احصل على استضافة وتثبيت WordPress و Elementor

• شراء مجال NameHero

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

هناك العديد من مزودي الاستضافة في السوق ومعظمهم لديهم عروض مختلفة. لقد جربت العديد منهم واستقرت أخيرًا على NameHero لجميع مواقع الويب الخاصة بي. أستخدمه شخصيًا وقارنته بـ 22 استضافة أخرى ووجدتها الأفضل. كما ترى في الصورة ، لديهم 4 خيارات مختلفة وأنا أوصي بخيار Plus Cloud لموقع التجارة الإلكترونية. يمكنك استخدام الرابط الخاص بي للحصول على خصم. www.namehero.com/darrelwilson

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

• قم بتثبيت WordPress

لتثبيت WordPress على استضافتك ، انتقل إلى "منطقة العميل" في صفحة الاستضافة الخاصة بك ، وانقر فوق "Cloud Web Hosting". بعد ذلك ، لديك منتجاتي وخدماتي ، حيث سترى حزمة Plus Cloud مع اسم المجال الخاص بك ، انقر فوق الزر نشط بجوارها كما ترى في الصورة. بعد ذلك على اليسار ، سترى زر "Go to cpanel" وانقر فوقه. في الصفحة التالية كما ترى في الصورة ، قم بالتمرير لأسفل إلى فئة البرنامج وانقر فوق "WordPress Manager by Softaculous".

سيؤدي هذا إلى فتح مُثبِّت WordPress ، انقر فوق زر التثبيت الآن. سيتم فتح صفحة إعداد تحتوي على الإصدار واسم المجال الخاص بك والدليل كما ترى في الصورة. يرجى إزالة أي شيء مكتوب تحت الدليل. أيضًا على PROTOCOLCHOOSE "https: /". في إعدادات الموقع ، يمكنك تغيير اسم الموقع ووصفه. يمكننا القيام بذلك لاحقًا أيضًا. ضع تفاصيل المسؤول الخاصة بك مثل اسم المستخدم وكلمة المرور والبريد الإلكتروني ، والتي ستكون تفاصيل تسجيل الدخول إلى WordPress. في الصفحة التالية ، قم بالتمرير لأسفل القوالب لأننا لا نستخدمها وانقر فوق "تثبيت". انقر فوق رابط عنوان URL الخاص بالمسؤول الوارد في الصفحة التالية وسيتم إنشاء WordPress الجديد الخاص بك وبثه على الإنترنت. أنت الآن على لوحة تحكم WordPress الخاصة بك كما في الصورة حيث يمكنك تعديل موقع الويب الخاص بك.

• إعدادات WordPress العامة

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

لتسجيل الدخول إلى WordPress مرة أخرى بعد تسجيل الخروج ، تحتاج إلى كتابة عنوان URL الخاص بك في شريط العناوين متبوعًا بـ "/ wp-admin" والذي سينقلك إلى صفحة تسجيل الدخول إلى WordPress حيث يمكنك وضع اسم المستخدم وكلمة المرور لتسجيل الدخول.

إنشاء الصفحات والقائمة

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

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

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

تنزيل Elementor

نحتاج الآن إلى شراء منشئ الصفحات Elementor pro الذي سنستخدمه لبناء صفحات الويب الخاصة بموقع التجارة الإلكترونية الخاص بنا. يمكنك شرائه باستخدام الرابط الخاص بي www..darrelwilson.com/elementor من صفحتهم ، يمكنك التحقق من الحزم المختلفة المتاحة. لا يمكننا استخدام الإصدار المجاني لأننا نحتاج إلى خدمات منشئ السمات و Woocommerce builder. بمجرد شراء الحزمة الخاصة بك ، يتم فتحها على حسابك كما هو موضح في الصورة حيث يتعين عليك النقر فوق "تنزيل البرنامج المساعد" وسيتم تنزيل ملف مضغوط أثناء تنزيله.

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

ثبّت ثيمات WordPress

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

تحرير الصفحات باستخدام Elementor

الآن دعونا نتعلم كيفية تحرير صفحاتنا باستخدام Elementor. انتقل إلى الصفحة الرئيسية لموقع WordPress الخاص بك وانقر فوق "تحرير الصفحة" في الصف الأسود العلوي الذي سيفتح محرر الصفحة. أولاً ، دعنا نغير إعدادات الصفحة على الجانب الأيمن كما هو موضح في الصورة. قم بتغيير تخطيط المحتوى إلى "Full Width Stretch" وحدد "Disable Title" لأننا نريد هذا الإعداد لصفحتنا الرئيسية.

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

بمجرد النقر فوق أي وحدة نمطية في الصفحة ، سيظهر شريط أدوات التحرير الخاص بها على اليسار. هنا في الصورة ، نقوم بتحرير العنوان ، لذا ظهر "تحرير العنوان" الذي يحتوي على 3 علامات تبويب. ¹ هو المحتوى الذي يعطي خيارات مختلفة لمحتوى العنصر. ^الثاني هو النمط حيث يمكنك تصميم النمط مثل اللون والحجم والخط وما إلى ذلك للعنصر. ^{والثالث} هو متقدم حيث يمكنك وضع الرسوم المتحركة والأشياء الأخرى. وبالمثل ، يمكنك إضافة مربع نص وتحريره وتنميطه بنفس الطريقة أسفل العنوان.

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

الآن بدلاً من تصميم كل عنصر على حدة ، يمكننا استخدام القوالب المعدة مسبقًا والحظر بالنقر فوق رمز المجلد على Elementor. من المكتبة ، يمكنك تحديد صفحة كاملة أو أقسام أو كتل معينة. تتوفر جميع فئات الكتل حسب حاجتك. بالنسبة للصفحة المقصودة ، حدد أي كتلة من فئة Hero. لقد اخترت صوت المستقبل في المثال.

بناء الصفحة الرئيسية

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

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

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

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

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

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

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

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

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

ابتكار المنتجات

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

Woocommerce

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

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

الآن دعونا نبدأ في إنشاء المنتجات. أولاً سنقوم بإنشاء منتج بسيط من Woman Green Shirt كما هو موضح في الصورة.

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

بعد ذلك ، انقر فوق إعدادات "المخزون" أسفل "عام" حيث يمكنك وضع "توفر المخزون". يمكنك أيضًا السماح أو عدم السماح بـ Backorders هنا ، إذا قمت بوضع "Don't Allow" ، فلن يتم قبول أي طلبات إذا كان المنتج غير متوفر في المخزون. ضع "عتبة المخزون المنخفض" ليتم إعلامك عندما يكون المخزون منخفضًا.

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

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

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

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

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

انقر الآن على "السمات" حيث سنضيف سمات أو خصائص جديدة إلى منتجنا. انقر فوق "إضافة" للقيام بذلك. بعد ذلك ، كما هو موضح في الصورة ، سننشئ سمات جديدة للمنتج مثل الحجم واللون وما إلى ذلك. أولاً ، دعنا نضع الحجم في مربع "الاسم". في مربع "القيم" ، اكتب ، صغير أولاً ، متبوعًا برمز "|" (بدون الأقواس). اضغط على مفتاح "Shift" + المفتاح أعلاه زر Enter لكتابة هذا الرمز كما هو موضح في الصورة ، ثم اكتب متوسط ​​ومرة ​​أخرى نفس الرمز ثم كبير. يمكنك إضافة العديد من المتغيرات كما تريد مثل S ، M ، L ، XL وما إلى ذلك باستخدام هذا الرمز. حدد مربع الاختيار "مستخدمة لجميع الأشكال" وانقر فوق "حفظ السمة".

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

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

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

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

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

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

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

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

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

في خيار الاستعلام ، يمكنك تحديد المنتجات التي تريد عرضها في هذا القسم. على سبيل المثال ، إذا كنت تريد عرض منتج المرأة فقط في هذا القسم ، فحينئذٍ في مربع المصدر ، حدد "أحدث المنتجات" ، حيث إنه قسم جديد من القائمة المنسدلة وانقر فوق "تضمين". ثم في مربع "التضمين حسب" ، اكتب المصطلح وحدد خيار المصطلح الذي سيظهر مربع المصطلح. في مربع المصطلح ، اكتب "Women" وحدد "Product Category: Women's" كما هو موضح في الصورة. انقر فوق تحديث لتفعيل موقع الويب الخاص بك. بهذه الطريقة ، يمكنك إنشاء أقسام عرض المنتج في أي جزء من موقع الويب الخاص بك.

قالب التجارة الإلكترونية Elementor

لقد قدمت لك قالب موقع التجارة الإلكترونية الذي أعددناه للتو الآن تصميمًا أعدناه هنا مجانًا على موقع الويب الخاص بي على هذا الرابط https: //darrelwilson.com/product/elementor-ecommerce-template-package. Download the template zip file from there and now let us learn how to import and export templates in Elementor. First, extract all the .json flies from the zip file. These are the templates for specific pages. Go back to your Elementor editor page and click on the folder icon next to the Add section icon on the page. This will open up the Template library and go to 'My templates' as shown in the image and click on Add templates. Here you can drag and drop those template files. Select the Homepage template and click on insert and your template will be loaded. You can edit the template according your taste but using the template, you won't have to create everything from scratch. Just remove the unwanted elements or sections and add new ones you like such as countdown, form etc. and style them the way you want.

Now let us create the other pages using our template. First, create a Menu for the rest of the pages. Woocommerce automatically adds the Shop, My Account, Cart and Checkout pages. Go the Appearance in WordPress and add these to the menu. Go to the About Us page, click on 'Edit Page, first disable the title and select Full Width in content layout. Now similar to Homepage template, insert the About Us template and edit the page as you want. You can add other pages too. Complete the website design using this process.

Theme Customizer

Theme customizer is where we design the structure and theme of the website and not the actual webpages. For opening the theme customizer, click on the 'Customize' button next you website button and it will open the Theme Customizer dashboard. We have used the Astra theme in this tutorial. Let us create a logo for your website, go to Header, then Site Identity and select Logo and upload your Logo. You can get a logo from www.fiverr.com. In the same way you can edit your site icon. You can design your Primary Header here too as shown in the image. You can select the layout, width, colour, etc. of the Header. Also you can design and style your menu from here.

Same way, you can design the footer. You can add upto 4 footer widgets here and customize as you want as shown in the image. Select 'Widgets' on your WordPress toolbar and you will get 4 Widgets to add to your footer. When you click on it and then click on 'Add a widget', you will get a list of widgets. You will get a widget toolbar where you can edit the contents of widget such as title, description, image and also your social media links. Once you click publish, it will appear on the footer of your webpage.

From the Woocommerce option on the toolbar, we can customize the Checkout page as in the image. You can assign 'Terms and conditions' page and 'Privacy Policy' page from the toolbar for the customers but first you'll have to first create these pages and write the details as the legal requirements. Next select the page from the drop down below their respective box. You can add new fields in the Checkout form and make them 'Required' or Optional.

Next in the Woocommerce toolbar, you can customize your Product catalog as shown in the image.You can customize, how products are shown in the catalog, their design an also you can hide some of the components that you don't want show like for example Ratings by clicking on the eye icon next to its name. This will control how your products are shown on your Shop page and also on the products section anywhere on the website.

Here we are using the free version of Astra Theme customizer, but you can buy the pro version where you will get tons of different option and templates for your website. You can import entire customized websites from this service.

الإضافات

Plugins are small apps for your website which helps creating and upgrading your website. You have to add plugins to your WordPress to help you create your website in way more efficient manner.To add a new plugin to your WordPress, go to your WordPress homepage and then click on plug-in from the Option list on the left side. It will open an 'Add plugin' page as shown in the image where different type of plugins are available to choose from. You can search for the type of plug-in that you need in the search box and you will find so many plugins to use for that specific purpose. It is like an app store on your mobile and just like your app store, you can check the usage, reviews and success of these plugins before installing. And all these plug-ins are available for free. And if you need any plugin later, you can always come back and install it here. You can add plugins for social media sites, translator and so many things. Just search for the plugin use you want, select the one you want, click on 'Install' and 'Activate'. For every plugin, a new option will be created on the toolbar from where you can add and edit elements.

Elementor Theme Builder

The Elementor theme builder allows you to create a custom Shop Page and Product Page using the page builder instead of the themes, so that these pages match the design of other pages of your website. Using Elementor page builder, you can edit any part of any page of your website unlike the themes which are preset and normally can't be edited. So now we are going to edit the Shop Page and Product Page that we created using the Woocommerce theme using Elementor theme builder and design it to match our demo website's design we saw in the beginning.

Go to your WordPress dashboard, click on 'Templates' and then select 'Theme Builder' from the list which will open the Theme Builder as shown in the image. Elementor allows us to build the theme of different parts of the site. So if want to have a different header, click on '+' icon on header. And you can select any header theme from the library and click 'Insert'. Your Header will be created and now you can edit anything in using the Edit Toolbar as we did earlier. You can the change the style of the Logo or the Menu or anything, just click on the part you want to edit and the edit toolbar will appear.

• Custom Header

Now you can add other elements on this header one by one as we did earlier, or you can insert another one or more blocks which contains similar elements and delete the common ones. For example, here as you can see in the image, we inserted a Header Block which has a bar for contact no, info and social icons. We can delete the rest of the elements of the block as we don't need them. Again you may not find the exact design of each element in the block templates, so you can now edit and style as you want to instead of creating and editing each element from scratch. This way you can create different part of your website very quickly.

Remember we have just created a part of website but it's not applied on our website yet. So when you click 'Publish', it will ask you where you want to display this template on your website. Here we created a header, so we will display it on entire website by click 'Entire Site' on 'Include' box as shown in the image. You can put different conditions by adding Include or Exclude conditions as to where you show this template.

• Custom Footer

Now you can do the same thing for footer as we did for the header and create a footer for your website using templates. You can edit the footer content to your pages by pasting the URL link of the page to its button using the editor as shown in the image. Here we have selected a footer block template with for columns and added link to various parts of our Shop, About, Contact Us and social media pages. You may design it anyway you want.

• Custom Shop Page

Now let us design a custom Shop Page using the Theme Builder. Elementor has very less themes for shop page so we will design from scratch. So we will have to create each element like for the banner we will have 2 text boxes and animated heading over a background image. Edit the elements and style the section as we learned earlier. Use all the styling features such as font, colours, size, shadows, margins, paddings, etc. to make the banner section look eye catchy like here in the example as shown in the image below.

Now we need to design our product section with a filter column in the side. So add a new section, and use the 2 column structure. On the right, add 'Products' from the toolbar and design it as we did on the Homepage or you can save the Homepage Template and insert it here. On the left, insert 'Sidebar' from the Elementor elements bar and select 'Woocommerce sidebar'. Right now, we haven't created a sidebar so we will have to exit to WordPress dashboard. But first click 'Publish' and in the condition include 'Shop page' to apply it to the website.

Go to 'Appearance' on the dashboard where we have all our widgets are shown as shown in the image. On the right, we have our Woocommerce Sidebar where we can place the 'Filter Products by Price' by drag and drop. You can add other filters too. Below it we will add 'Product Category', then 'Products' and the 'Video' on our sidebar. You can edit the title, contents and other stuff like link the URL of the video here. You can add as many widgets that you want from here.

If you want to edit the style of this sidebar, you can't use the Elementor editor as these are prepared by WordPress theme customizer. So in order to customize it, you will need click on 'Customize' button WordPress. Click on 'Global', then 'colours' where you can change the colours as in the image. Here we are customizing the WordPress theme which is the Astra theme that we are using, and not just the sidebar.

• Custom Category Page

Now we will design the category pages for our product. We are going to copy the template of page we created earlier and save to use it for all our Product Category pages. First, click on 'Edit with Elementor' on the top and select 'Product Archive' as shown in Image. Then, on the bottom left click on the button next to Update and select 'Save as a Template' as shown in the next Image. Give a name to the template like 'Main Shop Page Template' and click Save. Next select the given name and click on 'Export' and then 'Save File' to save this file to use this template on other pages or even other websites.

Now, go back to the Elementor theme builder and click on Add New. Here you have the Elementor templates but we will use the template we created, so click on 'My Templates' and click on 'Insert' next to the name of new template you created. Now we have to edit it using the tools which we have learned already. So change the Title text to 'Men's Product'. Next as this is Men's Category, you have to edit it to show only Men's Product. So click on the Product box and on the 'Query' button on the toolbar, write 'term' in the 'Include By' button and put 'Men' in the term box as we did earlier. Click on Publish and put the condition to put it only in 'Men's' in 'Products category' as you can see in the image below. You can go the website and on the Shop page, click on the Men's category on the sidebar and view the effect on the page. You will have to do the exact same process for Women's category page and any other category you want to put on your website too.

• صفحة المنتج المخصصة

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

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

• صفحة الخروج والسلة المخصصة

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

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

إعدادات Woocommerce

لقد تعلمت الآن كيفية إنشاء صفحات باستخدام Elementor و Theme Builder وقد اكتمل بناء موقع الويب الخاص بك. الآن علينا التعرف على إعدادات Woocommerce لتشغيل هذا الموقع. انتقل إلى لوحة معلومات WordPress ، وانقر فوق Woocommerce وحدد "الإعدادات" التي ستفتح علامة تبويب الإعداد العام لـ Woocommerce كما هو موضح في الصورة.

• الاعدادات العامة

هنا يمكنك وضع عنوانك وتحديد البلدان التي تريد البيع إليها ، وتمكين الضرائب ، وتمكين أكواد القسائم. تحقق من كل هذه المربعات لتمكينها. أدناه يمكنك تغيير عملتك وفقًا لبلدك.

• علامة التبويب المنتج

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

• علامة التبويب الضرائب

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

• علامة التبويب الشحن

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

• علامة التبويب الحسابات والخصوصية

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

• علامة تبويب البريد الإلكتروني

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

• المدفوعات

سننتقل الآن إلى علامة التبويب "المدفوعات" حيث يمكننا تحديد طرق الدفع المسموح بها لعملائنا. هناك العديد من الخيارات المتاحة للاختيار ولكننا سنقوم بتمكين "Stripes" و "PayPal" هنا بالنقر فوق زر التمكين كما هو موضح في الصورة أدناه.

1. باي بال

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

2. شريط

بعد ذلك ، سنقوم بإعداد المدفوعات باستخدام خطوط. لذا انقر فوق الزر "إدارة" بجواره. بنفس طريقة إعدادات PayPal ، ضع العنوان والوصف لمربع الدفع أولاً. بعد ذلك ، يكون لديك مفتاح الاختبار القابل للنشر ومفتاح الاختبار السري. يمكنك الانتقال إلى www.stripe.com وإنشاء حساب مجاني هناك ، ما عليك سوى أن يكون لديك حساب مصرفي لإنشاء حساب. يمكنك دمج حساب Stripe الخاص بك في موقع الويب الخاص بك بعد إنشائه وهي خدمة مجانية. لذلك ، بعد تسجيل الدخول إلى حسابك على شريط ، انقر فوق "المطورون" وحدد "مفاتيح واجهة برمجة التطبيقات" كما هو موضح في الصورة. انسخ المفتاح القابل للنشر الذي يظهر هنا على موقع الويب الخاص بك في مربع المفاتيح القابل للنشر والمفتاح السري في صندوق المفتاح السري. انقر فوق "حفظ التغييرات" والآن أصبح موقع الويب الخاص بك جاهزًا لقبول مدفوعات بطاقات الائتمان من أي مكان حول العالم برسوم معاملات منخفضة للغاية. نحن هنا نقوم بذلك حتى لا نزال نمكّن زر عرض بيانات الاختبار على حسابنا الشريطي وفي صفحة إعدادات Woocommerce ، قمنا بفحص مربع "تمكين وضع الاختبار" ولكن عندما تكون جاهزًا للعمل مع نظام الدفع الخاص بك ، قم بتعطيله .

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

التحسين للجوال

يعني تحسين الهاتف المحمول جعل موقع الويب يبدو سهل الاستخدام للأجهزة المحمولة. يعد تحسين الأجهزة المحمولة أمرًا مهمًا للغاية في سيناريو اليوم لأنه أ) يستخدم العديد من الأشخاص الأجهزة المحمولة لتصفح الإنترنت و ب) وفقًا لخوارزمية Google الجديدة ، إذا لم يكن موقع الويب الخاص بك مُحسَّنًا للجوال ، فسيؤدي ذلك إلى تقليل رتبتك مما قد يكون كارثيًا بالنسبة لك حركة المرور على الويب وتحسين محركات البحث.

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

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

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

نموذج الاتصال

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

كوبونات

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

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