أهلا بك أخي التاجر في موضوع جديد بعنوان صمم متجر بكل سهولة بدون مختص في هذا الموضوع سنتطرق إلى خدمة جبارة جدا يحتاجها الكثير من التجار بل كل تاجر وهي تصميم المتجر كل تاجر يريد ان يبدوا متجره كما يتمنى يريد ان يكون لون الهيدر بلون مميز وكذلك لون الفوتر او يضع صورة كخلفية للعنصر او فيديوا او يقوم بتكبير عنصر معين او وضع له اطار بدون اي يقوم بجلب مختص.
نعم أخي التاجر الكل يعرف ان تصميم المتجر يحتاج الى مختص css حتى يقوم بضبط المتجر وكذلك لابد ان يقوم المختص بكتابة اكواد داخل متجرك حتى يظهر المتجر بافضل مايمكن.
طيب ماذا لو احتجت لتعديل التصميم او تغيير الالوان هل ستضطر لطلب المصمم مرة اخرى ؟؟؟ هذا هو موضوعنا خدمة المحرر المرئي الاحترافية .
ماهي خدمة المحرر المرئي ومافائدتها؟؟
خدمة المحرر المرئي هي خدمة تتيح للتاجر التعديل المباشر على تصميم المتجر بمعنى اخي التاجر يمكنك من هذا المحرر اختيار اي عنصر تريد تغيير خصائصه مثل اللون او الحجم او الخلفية او غيرها بكل سهولة ومن ثم عمل التغييرات اللازمة حيث انك بعد التغيير ستلاحظ ظهور جميع التعديلات مباشرة على المعاينة كما يمكنك اضافة فيديوا او خلفية لأي عنصر بدون مختص فقط تقوم باختيار العنصر كما في الصورة اعلاه ومن ثم تنزل اسفل وتقوم بتحميل الصورة او الفيديو وبعدها ستلاحظ ظهور الصورة او الفيديوا في المعاينة .
طريقة الوصول للمحرر:
تصميم المتجر ثم محرر القوالب
هل التعديلات تظهر مباشرة على المتجر الحقيقي؟
التعديلات اخي التاجر لاتظهر مباشرة على المتجر الحقيقي فقط تظهر على المعاينة وهي نسخة من المتجر الحقيقي وهي الشاشة الموجودة على يسار المحرر حيث عند عمل كل تعديل ستلاحظ ظهور التعديلات مباشرة على المحرر كما في الصورة
بعد عمل التعديلات اللازمة على المتجر سواء الصفحة الرئيسية او صفحة المنتجات او اي صفحة تريد حتى صفحة الطلبات وكل شي بعد الانتهاء من التعديلات قم بالضغط على زر حفظ الموجود في الاعلى لتطبيق التخصيص وستلاحظ جميع ماعملته انعكس على المتجر الحقيقي
هل التعديلات مخصص لقالب معين وهل ان قمت بتغيير القالب تختفي التعديلات؟
جميع التعديلات التي تعملها تعمل على كل القوالب بلا استثناء بمعنى لو اردت تغيير تصميم القالب التسويقي او القالب الاسطوري او المرح او غيره يمكنك بكل سهولة فهذا المحرر ليس مختص بقالب معين.
وفي حال قمت بتغيير القالب بعد عمل التغييرات لن تختفي التغييرات بل ستكون موجودة ولكن بالنسبة للتصميم ستتأثر فقط العناصر التي تحتوي على نفس الفئة (الكلاس) او الوسم او المعرف بمعنى ان المحرر عند اختيار العنصر وتعديله سيقوم بانتاج كود css خاص بالعنصر في حال كان نفس البيانات مطابقة للقالب الجديد ستطبق التعديلات وبشكل عام ستطبق اغلب التعديلات حيث أن أغلب البيانات مشتركة في جميع القوالب.
هل التعديلات تطبق على نفس العنصر الذي قمت باختياره ؟
كماهو معروف أن هناك كلاسات تكون مشتركة بين اكثر العناصر واحيانا يكون هناك كلاس واحد مرتبط به وهذا معروف عند كل المختصين وحتى يتم تطبيق التعديل على نفس العنصر لابد من معرفة تسلسل الكلاسات الخاصة به او ان يحتوي على معرف فريد لذلك فإن المحرر ليس فقط مختص بتعديل التصميم بل كذلك عند اختيار العنصر يظهر لك معلومات عن الكلاسات المرتبطة به والعناصر التي تتأثر بالتغيير هل عند التغيير يتأثر فقط العنصر المختار ام هناك اكثر من عنصر يتأثر بذلك كما في الصورة .
كما تلاحظ في الجزء الايمن ظهرت معلومات العنصر المحدد ظهر العنصر وهو strong والكلاس الخاص به وكذلك ظهر تحذير باللون الأصفر ان التغيير يستهدف عنصرين بمعنى انه عند تغيير اللون ستلاحظ ان العنصر الحالي تغير وكذلك عنصر اخر وهذه المعلومات مفيدة جدا جدا لك وكذلك عندما تقوم بجلب مختص حيث انه لن يتعب نفسه في معرفة تفاصيل العنصر .
طريقة استخدام المحرر:
بعدما تكلمنا عن فوائد المحرر سنتكلم الان عن طريقة استخدام المحرر ،
قبل كل شي لابد أن تعرف أنه حتى يعمل معك المحرر لابد أن تدخل على لوحة التحكم من نفس رابط المتجر . ما معنى هذا؟
من المعروف في منصة ايمول يمكنك الدخول على لوحة تحكم متجرك إما عن طريق الرابط العام للمنصة وهو https://se.emole.sa/admin أو عن طريق رابط متجرك مع اضافة كلمة admin في نهاية الرابط.
مثلا لوكان رابط متجرك https://test.com يمكنك الدخول على لوحة التحكم تبع المتجر عن طريق الرابط https://test.com/admin وهذه أحد المميزات الفريدة للمنصة حيث أنه يمكنك الدخول على لوحة التحكم من رابط المتجر نفسه .
لذلك حتى يعمل المحرر لابد ان تدخل من رابط متجرك وليس الرابط المشترك https://se.emole.sa/admin حيث عند الدخول من الرابط المشترك لن يظهر لك المحرر فقط يظهر لك مربع نص ادخل كود css.
أقسام المحرر:
المحرر يحتوي على قسمين القسم الايمن ادوات التحرير ويحتوي على تبويبين تبويب تعديل الكلاس وتبويب الوسائط والقسم الايسر يحتوي على شاشة المعاينة حيث يمكنك تحديد العنصر المراد تخصيصه .
أدوات المحرر:
تتكون الادوات من تبويبين كماهو ظاهر في الصورة
.
تبويب تعديل الكلاسات :
وهذا التبويب هو التبويب المخصص لتعديل العناصر حيث يظهر عند اختيار العنصر وهو يحتوي على قسمين:
الكلاسات المستوردة :
والمقصود به الكلاسات التي تم استيرادها من العنصر وتحتوي على شاشتين الأولى توضح لك انه تم اختيار العنصر واظهار الخصائص الخاصة به 
والشاشة الثانية توضح تسلسل الكلاسات تبع العنصر وكذلك الخصائص الحالية له مثل لون العنصر ولون الخلفية وهي الظاهر بالخلفية البرتقالية واللون الأسود .
القسم الثاني:
وهو القسم المختص بكل مايخص العنصر من معلومات وأدوات للتحكم بخصائص العنصر ويحتوي على عدة شاشات وهي :
شاشة معلومات العنصر :
من هذه الشاشة تستطيع معرفة اسم العنصر والاب المباشر له بمعنى الكلاس او الفئة التي تحتوي العنصر وهذه المعلومات يعرفها كل مصمم حيث يكون العنصر داخل عناصر اخرى او منفرد .
خانة العنصر :تحتوي على اسم العنصر وهو كما في الصورة الوسم strong
خانة الاب المباشر: تحتوي على اسم الكلاس او العنصر الحاضن للعنصر الحالي مع التسلسل الخاص به .
خانة المحدد المولد:وهو يحتوي على تسلسل العنصر الذي سيتم استخدامه .
خانة العنصر المستهدف:
وتحتوي على العناصر المستهدفة حيث أنه كماهو معروف بعض العناصر تكون مشتركة وبعضها يكون منفرد حيث عند تعديل أحد الخواص تتأثر جميع العناصر التي تحتوي على نفس العنصر
والمقصود بالعنصر هنا هو الكلاس (الفئة) أو الوسم أو المعرف حيث كل شي في المتجر اما يحتوي على كلاس ووسم ومعرف احيانا يحتوي على فقط اثنين منها واحيانا واحد واحيانا كلها الثلاثة وهذه المعلومات لايفهمها الا المختصين بcss حيث مثلا لو اردنا تغيير لون كلمة نايس سبيشال كما في الصورة .
نلاحظ أنه عند التحديد ظهرت لنا المعلومات التالي اسم العنصر هو strong والكلاس هو بمعنى active ويوجد في الاسفل تحذير ان الاستهداف يكون على 7 عناصر بمعنى انه عند تغيير لون النص نايس سبيشال سنلاحظ ايضا تغيير لون النصوص المشابهة له كما في الصورة
كما تشاهدون في الصورة كلمة نايس سبيشال وكلمة اكسسوارات كلها بنفس اللون لأنها بنفس العنصر ونفس التسلسل لذلك يتم تطبيق جميع الخصائص التي تم عملها على نفس العنصر الا كان للعنصر معرف خاص به او كلاس خاص به وهذا لايمكن معرفته الا من الكود ولكن المحرر سهل عليك هذه المهمة فيمكنك معرفة العنصر الوحيد عن طريق شاشة المعلومات حيث عند اختيار العنصر يظهر في الشاشة اسفل الاستهداف عنصر واحد كما في الصورة
كما تشاهد في الصورة ظهر الاستهداف باللون الاخضر ومكتوب استهداف دقيق الان عند التعديل سيتم التطبيق فقط على العنصر المختار حيث أن بعض العناصر يكون لها كلاس خاص بها كما في الهيدر .
شاشة أدوات التعديل:
تحتوي الشاشة على عدة بيانات وهي :
لون النص:يمكنك هنا اختيار لون النص المناسب حيث عند اختيار العنصر يتم اظهار اللون الحالي ودرجته حيث يتم عرض مربع الالوان حيث يمكنك اختيار اللون مباشرة او التقاط لون من الشاشة او ادخال معايير اللون كمافي الصورة
هذه لوحة الالوان حيث يمكنك اختيار اللون او التقاط لون او وضع قيمة اللون بrbg او hex او بنظام HSL كماهو ظاهر في الشاشة للون النص ولون الخلفية . حيث عند اختيار اللون والخروج من اللوحة يتم تطبيقه مباشرة على المعاينة بحيث تستطيع اختيار التنسيق المناسب للمتجر.
حجم الحجم :
في حال أردت تغيير حجم خط النص الموجود في العنصر يمكن التحكم بالمقبض لتكبير الخط وتصغيره حيث التعديل يظهر مباشرة في المعاينة وبعد الضغط على حفظ في اعلى المحرر سيتم تطبيق ذلك على المتجر.
تغيير المساحة الداخلية:
المقصود بالمساحة الداخلية (Padding) هي المساحة المحيطة بالعنصر داخل الاطار أو ممكن تقول الهامش الداخلي للعنصر نفسه بمعنى امكانية ابعاد او تقريب العنصر من العناصر داخل الاطار كما تشاهد في الصورة عند تكبير المساحة اصبح المستطيل المحيط بالعنصر اكبر حيث توسعت المساحة حول النص .
وعند اختيار الاطار المحيط باكثر من عنصر يتم توسيع المساحة بين العناصر الموجودة داخله كما في الصورة.
والمساحة الخارجية (الهامش):
المقصود بالمساحة الخارجية هي مايعرف بالهامش (Margin) أي المساحة المحيطة بالعنصر من الخارج بحيث يتم توسيع العنصر عن العناصر القريبة منها .
لون الحدود :
المقصود به هو لون الاطار للعنصر المختار
سمك الحدود:
المقصود به هو عرض حدود الاطار من كونه سميك او خفيف
انحناء الزاوية:
المقصود به هو تقويس زاويا الاطار بحيث ان كنت تريد ان يكون الاطار على شكل دائرة او مقوس او مربع .
خلفية العنصر :
من أفضل المميزات في المحرر هو امكانية وضع خلفية للعنصر المختار حيث يمكنك اختيار أحد العناصر مثلا ووضع له خلفية اما صورة او فيديو حيث يعطي هذا جمالية اكبر للمتجر.
ويفضل عدم وضع صور او فيديوا ذو احجام كبيرة حيث عند وضع صور او فيديوا ذو احجام كبيرة سيتسبب في عمل ثقل للمتجر
عند اختيار العنصر يمكنك وضع اختيار اما صورة او فيديوا كما في الصورة
كما تشاهد حيث يمكنك اختيار صورة اما من المعرض او رفع صورة جديدة:
معرض الصور:
من المميزات الفريدة للمحرر انه يمكنك رفع مجموعة من الصورة وذلك لاستخدامها اثناء التحرير دون الحاجة الى رفع صورة كل مرة وهذا يكون عن طريق تبويب الوسائط الموجود أعلى المحرر كما في الصورة
يمكنك من تبويب الوسائط رفع مجموعة من الصورة دفعة واحدة حيث كل الصورة تعرض في المحرر كما يمكنك استخدامها في اي وقت كما يمكنك حذف اي صورة من القائمة ،
فبعد رفع الصور والذهاب الى أدوات التحرير واختيار من المعرض ستلاحظ ظهور جميع الصور التي قمت باضافتها كما في الصورة
فبعد اختيار الصورة يمكنك التحكم بخيارات الخلفية حيث يمكنك جعل الصورة تغطي كامل المساحة او جزء منها او يمكنك جعل الصورة مكررة كما في الصورة. حيث عند اختيار الصورة ستظهر شاشة معاينة اسفل الخيارات كما تلاحظ في الصورة اسفل يمكنك تحديد نوع الحجم والاحتواء والتكرار
فبعد اختيار الشكل المناسب يمكنك الضغط على زر تطبيق الخلفية وذلك لتطبيقها على صفحة معاينة المتجر ورؤية التأثير قبل تطبيقه على المتجر كما في الصورة .
وعند اختيار فيديوا يمكنك فقط رفع فيديوا للمتجر حيث لايوجد معرض حاليا للفيديو فقط بعد اختيار العنصر قم بالضغط على زر الفيديو وسيظهر لك اسفل رز رفع فيديو يجب ان يكون ان لايتجاوز حجم الفيديوا 5 ميجا ويفضل ان يكون اقل حتى يكون خفيف على المتجر كما في الصورة .
فبعد اختيار الفيديو سيظهر الفيديوا في الاسفل ولكن لن يظهر في المعاينة اسفل الخيارات حيث أن الخيارات لاتعمل مع الفيديو كما في الصورة
وبعد الضغط على زر تطبيق الخلفية سيتم اضافة في الفيديوا في المعاينة للمتجر كما في الصورة
بعد الضغط على حفظ من اعلى المحرر سيتم حفظ جميع التخصيصات على المتجر كما يمكنك اعادة تخصيصها مرة ومرتين وثلاث كما تريد
