البسيطة
MINIMAL- الهيدر
- الأول: كلاسيكي بعرض الصفحة
- الهيرو
- كامل (صورة منتج وأشكال)
- الفوتر
- الأول: خلفية صورة غامقة
للمتاجر اللي بدها بداية نظيفة ومركّزة على منتج واحد بارز.
الفصل الأول
البداية السريعة
أربع خطوات قبل أي تعديل، وبعدها كل بلوك بيطلع بهوية متجرك تلقائياً.
- ثبّت الثيم وافتح المحررمن لوحة تحكم المتجر: المظهر ← الثيمات، فعّل إيوان واضغط تخصيص.
- اختر لون متجركإيوان يقرأ لون هوية المتجر ويستعمله في الأسعار والأزرار والخطوط الذهبية. اللون المقترح للثيم #BB976D.
- ارفع الشعارارفع شعاراً بخلفية شفافة (PNG أو SVG). إذا كان شعارك غامقاً، ارفع نسخة فاتحة في شعار الوضع الداكن من إعدادات الثيم.
- ابنِ الرئيسيةاختر إحدى الواجهات الخمس من الفصل التالي، وأضف بلوكاتها بالترتيب من إضافة عنصر جديد. كل بلوك يبدأ باسم «إيوان:».
الفصل الثاني
الواجهات الخمس
كل واجهة هي تركيبة مقترحة: تصميم هيدر، وشكل للسلايدر الرئيسي، وتصميم فوتر. ابدأ بالأقرب لمتجرك، ثم بدّل أي جزء بحرية.
الإكسسوارات
ACCESSORIES- الهيدر
- الثالث: شفاف فوق الهيرو
- الهيرو
- مقسوم (صورة ونص)
- الفوتر
- الثالث: رمادي مع عمود تواصل
صورة كبيرة تذوب في الخلفية ونص هادئ على الجنب.
المجموعات
COLLECTION- الهيدر
- الرابع: شريط أبيض مدوّر
- الهيرو
- صورة خلفية وعنوان
- الفوتر
- الرابع: فاتح مع فاصل منقّط
أضف بعده «خدمات ومجموعات» بشكل شريط راكب على الهيرو.
الفخامة
LUXURY- الهيدر
- الأول: كلاسيكي
- الهيرو
- منتجات بتتبدّل ونص ثابت
- الفوتر
- الخامس: كحلي مع السوشال
فعّل قائمة التصنيفات بالجنب وبطول الشاشة لواجهة متجر أزياء راقٍ.
الكلاسيكية
RETRO- الهيدر
- الأول: كلاسيكي
- الهيرو
- بسيط (نص ثابت وصور بتتبدّل)
- الفوتر
- السادس: رمادي، الحقوق تحت اللوجو
عنوان ثابت كبير وصور تتبدّل تحته بهدوء.
تذكير: الهيدر والفوتر من إعدادات الثيم، وشكل الهيرو من إعدادات بلوك إيوان: سلايدر رئيسي نفسه.
الفصل الثالث
إعدادات الثيم
من المحرر اضغط أيقونة الإعدادات (لوحة الألوان). الإعدادات مقسّمة لمجموعات، وكل مجموعة تبدأ بعنوان «إيوان».
المظهر العام
- الوضع الداكنتبديل من الزائر بزر الشمس والقمر، أو دائماً فاتح، أو دائماً داكن.
- الوضع عند أول زيارةفاتح، أو داكن، أو حسب إعداد جهاز الزائر.
- حركات ظهور الأقسامالأقسام تظهر بحركة ناعمة أثناء التمرير. أطفئها إذا تفضّل صفحة ثابتة.
الهيدر
- تصميم الهيدرالأول كلاسيكي بعرض الصفحة، الثالث شفاف فوق الهيرو، الرابع شريط أبيض مدوّر فوق الهيرو.
- تثبيت الهيدريبقى ظاهراً أعلى الشاشة أثناء التمرير.
- الهيدر فوق الهيرويعمل فقط إذا كان أول بلوك في الرئيسية هو السلايدر الرئيسي.
- شعار الوضع الداكننسخة فاتحة من الشعار تظهر في الوضع الليلي.
- القائمة الموسّعة (Mega Menu)تلقائي، أو لكل قائمة فيها روابط فرعية، أو بدون. ويمكن إضافة صورة إعلان افتراضية داخلها.
- الكلمات الأكثر بحثاًكلمات تظهر كاقتراحات في نافذة البحث، كل كلمة في سطر.
السلة الجانبية
- شريط الشحن المجانييوضّح للعميل كم يتبقى ليحصل على الشحن المجاني.
- فتح السلة تلقائياًتنفتح السلة الجانبية مباشرة بعد إضافة منتج.
- منتجات مقترحة داخل السلةتلقائي، أو الأكثر مبيعاً، أو منتجات تختارها بنفسك، أو إيقاف.
الفوتر
- تصميم الفوترستة تصاميم، من الخلفية المصوّرة الغامقة إلى الفاتح مع الفاصل المنقّط.
- صورة خلفية الفوترللتصميم الأول. يُفضّل صورة هادئة لأنها تظهر تحت طبقة غامقة.
- نبذة الفوترسطران عن متجرك يظهران تحت الشعار.
- عمود تواصل معناالجوال والبريد وروابط التواصل من بيانات المتجر.
كرت المنتج
- تصميم كرت المنتجالتصميم العام لكل المتجر. التفاصيل في الفصل الخامس.
- شكل صورة المنتجمربعة، أو طولية 3:4 (الأنسب للأزياء).
- التقييم بالنجوميظهر تحت اسم المنتج.
- زر النظرة السريعةيفتح المنتج في نافذة بدون مغادرة الصفحة.
صفحات المنتجات
- بانر بصورة فوق صفحات المنتجاتعنوان التصنيف ومسار التنقل فوق صورة عريضة.
- صورة البانر الافتراضيةتظهر لأي تصنيف بدون صورة خاصة. صورة التصنيف نفسه (أو البانر) لها الأولوية دائماً.
- تثبيت زر الإضافة أسفل الجوالشريط السعر والكمية وزر السلة يبقى ملتصقاً أسفل شاشة الجوال.
- تكبير الصور في المعرضتكبير عند تمرير الماوس على صورة المنتج.
الفصل الرابع
بلوكات إيوان
ثلاثة عشر بلوكاً تجدها في إضافة عنصر جديد باسم يبدأ بـ «إيوان:». كل بلوك له عنوان بثلاثة أشكال: أيقونة فوق العنوان بالوسط، أو كلمة بخط يدوي، أو عنوان بجانب رابط «عرض الكل».
الواجهة الأولى
إيوان: سلايدر رئيسي
أول ما يراه الزائر. خمسة أشكال في بلوك واحد، وكل شريحة لها صورة وكلمة كبيرة وكلمة بخط يدوي وعنوان ووصف وزر وشارة خصم.
كاملمقسومصورة خلفيةبسيطمنتجات بتتبدّل
كل الإعدادات
- بطول الشاشة: الهيرو يملأ ارتفاع الشاشة كاملاً.
- قائمة التصنيفات بالجنب مع عنوان خاص لها.
- شريط التصنيفات: أيقونات تصنيفات تظهر أسفل شكل «صورة خلفية».
- التقليب التلقائي، ومدة كل شريحة (4 إلى 10 ثوانٍ)، والأسهم، ومؤشر الشرائح.
- في شكل «منتجات بتتبدّل» يمكن سحب المنتجات بالماوس، والتقليب يبطئ عند المرور بدل أن يتوقف.
نصيحة: صورة المنتج في الأشكال «كامل» و«منتجات بتتبدّل» تبدو أجمل بخلفية شفافة (PNG).
تصفّح
إيوان: التصنيفات
كروت تصنيفات بصورة وعدد منتجات. اختر التصنيفات بنفسك مع صورة وسطر صغير لكل كرت، أو اعرض التصنيفات الرئيسية تلقائياً.
كروتبلاطات بعرض الشاشةشبكة ملوّنة
الشبكة الملوّنة: لكل تصنيف لون خلفية خاص من حقل «لون خلفية المربع»، ثلاثة في السطر بدون فراغات.
منتجات
إيوان: شبكة منتجات
شبكة مرنة لأي مجموعة: أحدث المنتجات، الأكثر مبيعاً، الأعلى تقييماً، التخفيضات، من تصنيف، بوسم، أو منتجات تختارها.
4 / 8 / 10 / 12 منتج3 إلى 5 أعمدةعنوان فوق أو بالجنب
ميزة: لكل شبكة تصميم كرت خاص بها، فتقدر تخلط تصميمين في نفس الصفحة.
منتجات
إيوان: الأكثر مبيعاً (تبويبات)
منتج كبير بجانب شبكة صغيرة، وتبويبات تبدّل المجموعة. كل تبويب له اسم ومصدر منتجات (ويمكن ربطه بتصنيف).
تبويبات غير محدودةالمنتج الكبير أول أو آخر السطر
ثقة
إيوان: ليش تختارنا
مميزات متجرك في كروت بأيقونات: الشحن، الاستبدال، الدفع الآمن، خدمة العملاء.
على صورة خلفيةبسيط بلون تختارهالمحتوى يمين أو يسار أو وسط
مهم: مكان المحتوى «يمين» و«يسار» حقيقي ولا ينقلب مع اللغة، عشان يبقى بعيداً عن موضوع الصورة.
ثقة
إيوان: خدمات ومجموعات
كروت بأيقونة وعنوان وسطر صغير ووصف ورابط. شكل «شبكة» عادي، أو «شريط راكب على الهيرو» يركب على حافة السلايدر الرئيسي.
صورة زخرفية بالزاويةخلفية ملوّنةأيقونات أزياء جاهزة
منتجات
إيوان: منتجات مميزة (صغيرة وطويلة)
تركيبة من كروت صغيرة وكرتين طويلين، أو منتجات مع بانرات فيها رقم كبير (مثلاً 30% خصم) وسطر وزر.
صغيرة وطويلةمنتجات وبانراتالكرتان الطويلان أول أو آخر السطر
عروض
إيوان: بانرات العروض
بانرات بصورة وسطر صغير وعنوان كبير وزر. فعّل البانرات بعرض الشاشة لتمتد من حافة لحافة.
عروض
إيوان: خصم كبير
رقم خصم ضخم (مثل 45%) مع كلمة صغيرة جنبه، وعنوان ووصف وزر، وصورتين زخرفيتين على الطرفين.
نصيحة: استخدم صوراً مقصوصة بلا خلفية للزخرفة. على الجوال تختفي الزخرفة ليبقى الرقم والزر واضحين.
هوية
إيوان: الماركات
شعارات الماركات من المتجر، أو ماركات تختارها، أو شعارات ترفعها بنفسك مع نسخة خاصة للوضع الداكن.
فاتحشريط غامقشريط رمادي مع أسهم
كل الإعدادات
- شعارات رمادية حتى مرور الماوس.
- شعارات بيضاء في الوضع الداكن.
- أسهم تنقل على الجنبين، وتحريك تلقائي.
ثقة
إيوان: آراء العملاء
آراء تكتبها من المحرر: النص، اسم العميل، المدينة أو الوظيفة، صورة اختيارية، وعدد النجوم. تتقلّب تلقائياً بمدة تختارها.
مهم: الآراء الموجودة في المعاينة نماذج للعرض فقط. استبدلها بآراء عملائك الحقيقية قبل إطلاق المتجر.
محتوى
إيوان: المدونة
أحدث المقالات تلقائياً أو مقالات تختارها، من 3 إلى 5 مقالات، مع زر «كل المقالات».
عاديفوق الصورةصورة ونص جنب بعض4 بالسطرصندوق بنص الصورةإطار و«اقرأ المزيد»
الفصل الخامس
كروت المنتج
ستة تصاميم. التصميم العام من إعدادات الثيم ← كرت المنتج، وكل بلوك منتجات يقدر يختار تصميماً مختلفاً.
١أزرار دائرية بجانب الصورةالمفضلة والسلة والنظرة السريعة تظهر على طرف الصورة عند المرور.
٢صندوق المعلومات على الصورةالاسم والسعر في صندوق أنيق يركب على أسفل الصورة.
٣تدرّج غامق مع الماوسطبقة متدرّجة تظهر مع المرور وتكشف الأزرار.
٤كل المعلومات فوق الصورةعند المرور تصير الصورة غامقة وتظهر كل التفاصيل فوقها.
٥طبقة فاتحة وأزرار بأسماءطبقة هادئة مع النجوم، وأزرار مكتوب عليها في الزاوية.
٦المعلومات فوق الصورة والأزرار بالزاويةتظليل متساوٍ يجعل الأزرار واضحة حتى على الصور الفاتحة.
الصور: إيوان يثبّت صورة المنتج من الأعلى، فلا يُقصّ رأس العارض أو ياقة القطعة عند اختلاف المقاسات.
الفصل السادس
الصفحات الداخلية
صفحة التصنيف وصفحة المنتج مصمّمتان بنفس روح الرئيسية.
صفحة التصنيف
عنوان التصنيف ومسار التنقل يظهران فوق صورة عريضة. إيوان يستعمل بانر التصنيف أو صورته إن وُجدت، وإلا الصورة الافتراضية من الإعدادات.
المنتجات في أربعة أعمدة، وثلاثة عندما تكون الفلاتر ظاهرة، مع شريط ترتيب بسيط.
لإخفاء البانر أطفئ بانر بصورة فوق صفحات المنتجات، فيعود العنوان العادي.
صفحة المنتج
معرض صور بمصغّرات عمودية بجانب الصورة الكبيرة، مع أسهم لليمين واليسار وللأعلى والأسفل بين المصغّرات.
السعر بلون متجرك، وحقول الخيارات والكمية بزوايا حادة، وزر «أضف للسلة» غامق وواضح.
على الجوال يلتصق شريط السعر والكمية وزر السلة بأسفل الشاشة، وعند نفاد المنتج يظهر فيه «نفدت الكمية» فقط.
الفصل السابع
الوضع الليلي
كل بلوك في إيوان مصمّم بالوضعين، وليس مجرد ألوان مقلوبة. جرّبه الآن من زر الشمس أعلى هذه الصفحة.
- اختر طريقة العملمن إعدادات الثيم ← الوضع الداكن: زر للزائر، أو دائماً فاتح، أو دائماً داكن.
- حدّد الوضع الأول«حسب جهاز الزائر» يحترم إعداد هاتفه، وهو الأنسب لأغلب المتاجر.
- جهّز الشعار والماركاتارفع شعار الوضع الداكن، وفي بلوك الماركات فعّل شعارات بيضاء في الوضع الداكن أو ارفع نسخة داكنة لكل شعار.
الفصل الثامن
بلوكات سلة الأساسية
بلوكات سلة المعروفة باقية في القائمة لمن يحتاجها، وتظهر تلقائياً بخطوط إيوان وألوانه وزواياه الحادة.
| البلوك | متى تستخدمه |
|---|---|
| صور متحركة (محسّنة) وصور متحركة مع نصوص | بنرات صور كاملة بدون تصميم الهيرو. |
| روابط سريعة | روابط تصنيفات صغيرة متحركة. |
| منتجات مميزة، عرض خاص + منتجات، منتج مميز + منتجات | تبويبات منتجات بأسلوب سلة المعتاد. |
| منتجات متحركة مع خلفية | سلايدر منتجات فوق صورة. |
| صور مربعة (محسّنة) | شبكة بنرات مربعة. |
| الماركات التجارية، آراء عملاء مخصصة، المدونة | نسخ سلة من هذه الأقسام. نسخ إيوان تعطيك تحكماً أكثر. |
الفصل التاسع
الصور والمحتوى
إيوان ثيم يعتمد على الصورة. هذه قواعد بسيطة تجعل متجرك يشبه المعاينة.
| المكان | المقترح | ملاحظة |
|---|---|---|
| صورة منتج الهيرو | PNG بخلفية شفافة، حوالي 1200 بكسل ارتفاعاً | للأشكال «كامل» و«منتجات بتتبدّل». |
| صورة خلفية الهيرو | صورة عريضة 1920×1080 تقريباً | اترك مساحة هادئة مكان النص. |
| صور المنتجات | طولية 3:4 بنفس الخلفية | اختر «طولية» في شكل صورة المنتج. |
| بانر صفحات التصنيفات | عريضة 1920×500 تقريباً | تظهر تحت طبقة غامقة والعنوان أبيض. |
| زخارف بلوك الخصم | PNG مقصوص بلا خلفية | تختفي على الجوال. |
| الشعار | PNG أو SVG شفاف | مع نسخة فاتحة للوضع الليلي. |
الفصل العاشر
أسئلة شائعة
الهيدر ما صار شفافاً فوق الهيرو، ليش؟
الهيدر الشفاف يحتاج شرطين: تفعيل الهيدر فوق الهيرو، وأن يكون إيوان: سلايدر رئيسي أول بلوك في الرئيسية.
كيف أغيّر لون الذهبي في الثيم؟
الثيم يأخذ لونه من لون هوية المتجر في إعدادات سلة. أي لون تختاره ينعكس على الأسعار والأزرار والخطوط تلقائياً، ويُضبط تلقائياً ليبقى مقروءاً في الوضع الليلي.
صورة التصنيف لا تظهر في البانر.
تأكد من رفع صورة أو بانر للتصنيف من بيانات التصنيف في لوحة التحكم. بدونها تظهر صورة البانر الافتراضية من إعدادات الثيم.
هل أقدر أستخدم أكثر من تصميم كرت في نفس الصفحة؟
نعم. كل بلوك منتجات فيه «تصميم كرت المنتج»، واختيار «نفس الإعداد العام للمتجر» يرجعه للتصميم العام.
أين أجد بلوكات إيوان؟
في المحرر اضغط إضافة عنصر جديد. كل بلوكات الثيم تبدأ بـ «إيوان:»، ولكل واحد صورة معاينة توضّح شكله.