تصميم المتجر الإلكتروني | الوحدة الأولى | الدرس الثاني
تصميم المتجر الإلكتروني هو عنوان الدرس الثاني من الوحدة الأولى التي تحمل اسم “المتاجر الإلكترونية” في الفصل الدراسي الثالث من مقرر “ثالث متوسط”.
ستتعرف في هذا الموضوع على كيفية تحرير صفحات المتجر، وتصميم الصفحة الرئيسة، وتحرير الصفحات بإضافة النصوص والصور لها، وإدراج الأيقونات والروابط التشعبية بها، ومعاينة صفحات المتجر الإلكتروني.
قم بقراءة نواتج التعلُّم جيدًا، ثم أعد قراءتها وأحرص على تحصيل محتواها بعد انتهائك من دراسة الموضوع.
نواتج التعلُّم
- تحرير صفحات المتجر الإلكتروني.
- تصميم الصفحة الرئيسة للمتجر الإلكتروني.
- تحرير النصوص، وإضافة الصور إلى صفحات المتجر الإلكتروني.
- إضافة الروابط التشعبية وأيقونات وسائل التواصل الاجتماعي على صفحة المتجر الإلكتروني.
- معاينة صفحات المتجر الإلكتروني.
هيا لنبدأ!
مقدمة – تصميم المتجر الإلكتروني
في هذا الموضوع ستعمل على تصميم وتحرير صفحتين من متجرك الإلكتروني الذي أنشأته في الموضوع السابق على النحو الآتي:
- الصفحة الرئيسة (Homepage)
هي الصفحة الأساسية لمتجرك الإلكتروني التي تتضمن قائمة التنقُّل، وشعار المتجر، واسمه، وزرّ عند الضغط عليه تظهر منتجات المتجر.
- صفحة حول (About)
ويتم فيها عرض معلومات الاتصال وبعض المعلومات المفيدة الأخرى حول تاريخ المتجر.
لمعرفة المزيد عن صفحات ومكوِّنات المتجر الإلكتروني، قم بالاطّلاع على الرابط التالي:
تحرير صفحات المتجر الإلكتروني
عليك في البداية حذف بعض صفحات موقع المتجر الإلكتروني وتحرير الأخرى.
لتحرير صفحات موقع المتجر الإلكتروني:
- انتقل إلى المواقع المحلية (Local sites).
- ثم اضغط على زرّ مسؤول لوحة تحكم ووردبريس (WP Admin) لفتح لوحة تحكم المسؤول.
- في النافذة التي تظهر، أدخِل اسم المُستخدِم وكلمة المرور.
- ثم اضغط على زرّ دخول (Log in).
- من لوحة التحكم (Dashboard)، اضغط على قسم صفحات (Pages).
- ثم زرّ المنشورة (Published).
- اذهب إلى لوحة حسابي (My Account)، واضغط على زرّ سلة المهملات (Trash) لحذف الصفحة.
- اختر صفحة النموذج (Sample page)، ثم اضغط على زرّ تحرير سريع (Quick Edit).
- اكتب اسم الصفحة حول (About).
- واضغط على زرّ تحديث (Update).
تصميم الصفحة الرئيسة
حان الوقت لتصميم مظهر الصفحة الرئيسة، حيث تتكوَّن الصفحة الرئيسة من 3 أجزاء: الترويسة (Header)، والمحتوى الرئيس (Main Content)، والتذييل (Footer).
لتغيير صورة الصفحة الرئيسة:
- من قسم صفحات (Pages)، انتقل إلى الصفحة الرئيسة (Homepage)، ثم اضغط على زرّ تحرير (Edit).
- اضغط على مكوِّن الصورة.
- ثم اضغط على زرّ استبدال (Replace) لتغيير الصورة.
- اضغط على زرّ رفع (Upload).
- اختر الصورة التي تريدها.
- ثم اضغط على زرّ فتح (Open).
- اضغط على زرّ محاذاة (Align)، ثم اضغط على زرّ عرض واسع (Wide width).
- في الختام، اضغط على زرّ تبديل الارتفاع الكامل (Toggle full height).
- ومن قسم اللون (color)، غيِّر عتامة الغِشاء (Overlay opacity).
تحرير النصوص
الآن بعد أن أضفت الصورة، ستضيف رسالة ترحيبية إلى الصفحة الرئيسة.
لتحرير نص في موقع المتجر الإلكتروني الخاص بك:
- انتقل إلى المُكوِّن الذي تريد تحريره، واضغط على زرّ محاولة استعادة مكوِّن (Attempt Block Recovery).
- اكتب النص الذي سيظهر في الصفحة الرئيسة.
- حدِّد النص.
- ثم اجعله عريض (Bold).
- حدِّد المُكوِّنات الأخرى من الصفحة إذا كنت لا تريد استخدامها، واضغط على زرّ الخيارات (Options).
- ثم اضغط على إزالة المكوِّن (فقرة) (Remove Media & Text).
بإمكانك مراجعة محتوى موضوع “تصميم المتجر الإلكتروني” من بدايته وحتى نهاية هذا القسم، من خلال الرابط التالي:
تصميم صفحة حول
بنفس الطريقة التي صممت بها صفحة المتجر الإلكتروني الرئيسة، ستصمم صفحة حول (About) لتكون أكثر جاذبية، حيث ستخصص هذه الصفحة لعرض بعض المعلومات الخاصة بالشركة، وتقديم معلومات الاتصال للعملاء.
لتحرير نص إلى صفحة حول:
- من لوحة التحكم (Dashboard)، اضغط على قسم صفحات (Pages)، وابحث عن صفحة حول (About)، ثم اضغط على زرّ تحرير (Edit).
- حدِّد النص واحذفه لإضافة النص الذي تريده.
- اكتب بعض المعلومات عن المتجر ثم غيِّر خلفية (Background) الخاصة بالمُكوِّن.
- أضف معلومات اتصل بنا (Contact us) بنفس الطريقة.
إضافة الصور
بعد أن أضفت المعلومات المناسبة في صفحة حول (About)، ستضيف الآن صورة لتكون الصفحة أكثر جاذبية.
لإضافة صورة في صفحة حول (About):
- اضغط على زرّ إضافة مكوِّن (Add Block).
- ثم اضغط على خيار صورة (Image).
- اضغط على زرّ رفع (Upload).
- ثم اختر الصورة التي تريدها واضغط على زرّ Open (فتح).
- اضغط على أداة قص (Crop).
- ومن نسبة العرض إلى الارتفاع (Aspect Ratio) اختر مربع (Square).
- ثم اضغط على زرّ تطبيق (Apply).
- من زرّ محاذاة (Align)، اضغط على زرّ عرض واسع (Wide width).
إضافة أيقونات وسائل التواصل الاجتماعي
ستضيف عناوين الموقع على وسائل التواصل الاجتماعي والبريد الإلكتروني في معلومات الاتصال، حيث يمكِن للعملاء التواصل وإرسال الرسائل من خلال هذه العناوين، وستضيف أيضًا بعض الصور المرتبطة بهذه العناوين.
الصور المرتبطة (Linked Image) هي صورة يتم إدراجها في الصفحة ويتم ربطها تشعبيًا إلى وجهة أخرى، حيث يتم توجيه المُستخدِم إلى الوِجهة المرتبطة عندما يضغط على الصورة.
لإضافة صورة مرتبطة:
- أسفل معلومات اتصل بنا (Contact Us)، اضغط على زرّ إضافة مكوِّن (Add Block)، ثم زرّ تصفُّح الكل (Browse All).
- وابحث عن خيار أعمدة (Column) وحدِّده.
- اختر عدد الأعمدة التي تحتاجها.
- ستظهر الأعمدة في صفحتك.
- اضغط من العمود الأول على زرّ إضافة مكوِّن (Add Block).
- ثم اختر صورة (Image).
- حمِّل الصور كما تعلمت سابقًا وحاذِهَا للوسط (Center).
- اضغط على زرّ أضف رابطًا (Add link).
- ثم ألصق عنوان URL الذي تريده واضغط على زرّ تطبيق (Apply).
أضف وسائل الاتصال الأخرى بنفس الطريقة السابقة.
لاحظ أن
لا تزال تعمل في صفحة حول (About).
المعاينة
يسمح لك زر المعاينة بمشاهدة موقع المتجر الإلكتروني قبل نشره على الإنترنت، ويمكِنك مشاهدة كيف تبدو الصفحة على الهاتف المحمول أو الأجهزة اللوحية عند الضغط على زرّ معاينة (Preview).
تتيح لك المعاينة قبل النشر التأكُّد من أن جميع مكوِّنات موقع المتجر الإلكتروني تعمل بشكل صحيح، ومن أن مظهره احترافي وجذاب للعملاء؛ لكي يُسهم في ازدياد المبيعات واكتساب رضا العملاء.
بإمكانك مراجعة محتوى موضوع “تصميم المتجر الإلكتروني” بدايةً من عنوان “تصميم صفحة حول” وحتى نهاية الموضوع، من خلال الرابط التالي:
اختبر تحصيلك لمحتوى الموضوع من خلال الرابط التالي:
الواجب الإلكتروني
إلى هنا يكون قد انتهى موضوع “تصميم المتجر الإلكتروني“، لا تنسوا مراجعة نواتج التعلُّم أعلى المقال، وانتظرونا في الموضوع القادم!