تخصيص مظهر بلوك السمة

تعلّم كيفية تخصيص بلوك سمة نموذج الاتصال SupportRetriever ليتناسب مع تصميم متجر Shopify الخاص بك.

خيارات التخصيص المتاحة

يوفر بلوك نموذج الاتصال إعدادات متعددة يمكنك ضبطها مباشرة في محرر سمات Shopify:

إعدادات البلوك (جانب Shopify)

• رابط النموذج: الرابط إلى نموذج SupportRetriever الخاص بك
• ارتفاع النموذج: ارتفاع حاوية النموذج (400px - 1000px)
• إظهار الحدود: تفعيل/إلغاء إظهار الحدود حول النموذج

إعدادات النموذج (جانب SupportRetriever)

يتم التخصيص الإضافي من لوحة تحكم SupportRetriever:

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

التخصيص في محرر سمات Shopify

الوصول إلى إعدادات البلوك

1. سجّل الدخول إلى لوحة إدارة Shopify
2. انتقل إلى المتجر الإلكتروني → السمات → تخصيص
3. انتقل إلى الصفحة التي تحتوي على بلوك نموذج الاتصال
4. انقر على بلوك نموذج الاتصال لتحديده
5. تظهر الإعدادات في اللوحة اليمنى

إعدادات ارتفاع النموذج

شريط الارتفاع يحدد مقدار المساحة العمودية التي يشغلها النموذج على الصفحة.

الارتفاعات الموصى بها حسب الاستخدام

Height	Best For	Notes
400px	وضع مضغوط	يعرض الجزء العلوي فقط؛ يتطلب التمرير
600px	تخطيط متوازن	يعرض معظم الحقول؛ تمرير أدنى
800px	وضع قياسي	يعرض جميع الحقول بشكل مريح
1000px	عرض كامل للنموذج	يعرض النموذج بالكامل دون تمرير (موصى به)

كيفية عمل الارتفاع

• يتم ضبط إطار النموذج (iframe) على الارتفاع المحدد
• إذا كان محتوى النموذج أطول، يتمرر المستخدمون داخل الإطار
• إذا كان المحتوى أقصر، تظهر مساحة إضافية أسفل
• الأجهزة المحمولة تضبط تلقائياً

أفضل ممارسة: ابدأ بـ 1000px لعرض النموذج كاملاً، ثم اضبط عند الحاجة.

إعدادات الحدود

مفتاح الحدود يضيف إطاراً خفيفاً حول النموذج:

إظهار الحدود (مفعّل):

• يضيف حداً رمادياً فاتحاً 1px
• زوايا دائرية 8px
• يفصل النموذج بصرياً عن محتوى الصفحة
• مناسب للصفحات ذات ألوان خلفية متشابهة

بدون حدود (غير مفعّل):

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

التخصيص في لوحة تحكم SupportRetriever

لتخصيص أعمق، اضبط الإعدادات في حساب SupportRetriever:

ألوان النموذج

1. سجّل الدخول إلى SupportRetriever
2. انتقل إلى إدارة النماذج (أيقونة النموذج في الشريط الجانبي)
3. مرّر إلى "مظهر النموذج"
4. خصص الألوان:

لون الخلفية

لون الخلفية خلف النموذج:

نصيحة: طابق هذا بلون خلفية صفحة Shopify للتكامل السلس.

لون الزر

لون زر الإرسال:

نصيحة: استخدم اللون الأساسي لعلامتك أو لون أزرار سمة Shopify.

لون النص

لون نص النموذج (التسميات، الأوصاف):

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

الشعار والهوية البصرية

أضف شعار متجرك إلى النموذج:

1. في إدارة النماذج، ابحث عن "رابط الشعار"
2. أدخل رابط صورة الشعار
3. يظهر الشعار في أعلى النموذج
4. الحجم الموصى به: 200px عرض × 60px ارتفاع (كحد أقصى)

الحصول على رابط الشعار:

• ارفع الشعار إلى Shopify: الإعدادات → الملفات → رفع
• انسخ الرابط
• الصقه في حقل الشعار في SupportRetriever

عنوان النموذج والوصف

خصص النص الذي يظهر فوق النموذج:

أمثلة للعنوان:

• "اتصل بنا"
• "تواصل معنا"
• "أرسل لنا رسالة"
• "دعم العملاء"

أمثلة للوصف:

• "نحن نحب أن نسمع منك."
• "لديك سؤال؟ نحن هنا لمساعدتك!"
• "املأ النموذج وسنرد عليك خلال 24 ساعة."

تسميات الحقول ونصوص العنصر النائب

خصص تسميات الحقول ونص العنصر النائب:

حقل الاسم:

• التسمية: "اسمك"، "الاسم الكامل"، "الاسم"
• العنصر النائب: "John Doe"، "أدخل اسمك"

حقل البريد الإلكتروني:

• التسمية: "البريد الإلكتروني"، "بريدك الإلكتروني"، "البريد الإلكتروني"
• العنصر النائب: "you@example.com"، "أدخل بريدك الإلكتروني"

حقل الرسالة:

• التسمية: "الرسالة"، "رسالتك"، "كيف يمكننا المساعدة؟"
• العنصر النائب: "Tell us what's on your mind..."، "Describe your inquiry"

نصائح الموضع والتخطيط

وضع بعرض كامل

لنموذج بارز يمتد بعرض الصفحة بالكامل:

1. أضف بلوك نموذج الاتصال إلى قسم بعرض كامل
2. أزل المحتوى الآخر من ذلك القسم
3. اضبط الارتفاع على 1000px
4. عطّل الحدود للتكامل السلس

الأفضل لـ: صفحات الاتصال المخصصة

الوضع المضمن

لنموذج بجانب محتوى آخر:

1. أضف بلوك نموذج الاتصال داخل قسم متعدد الأعمدة
2. ضع المحتوى في الأعمدة المجاورة
3. اضبط الارتفاع ليتناسب مع المحتوى المحيط
4. فعّل الحدود للفصل عن المحتوى المجاور

الأفضل لـ: صفحات "من نحن"، صفحات المنتجات

فوق/تحت المحتوى

لنموذج مع نص تمهيدي:

1. أضف قسم نص فوق النموذج
2. ضمّن عنواناً ووصفاً
3. أضف بلوك نموذج الاتصال تحته
4. اضبط الارتفاع المناسب

مثال على الهيكل:

[Text Section]
  Heading: "Contact Our Team"
  الوصف: "We're here to help with any questions."

[Contact النموذج Block]
  Height: 1000px
  Border: No

الاستجابة للجوال

يتكيف نموذج الاتصال تلقائياً مع الأجهزة المحمولة:

سطح المكتب (> 768px)

• عرض كامل داخل الحاوية
• جميع الحقول ظاهرة
• تباعد مريح

الجهاز اللوحي (768px - 1024px)

• تخطيط مكثف قليلاً
• الحقول تبقى أفقية حيث أمكن
• أهداف مناسبة للمس

الجوال (< 768px)

• تخطيط عمودي
• حقول بعرض كامل
• أهداف لمس أكبر
• تجربة لوحة مفاتيح محسّنة

الاختبار: اعرض نموذجك دائماً على الأجهزة المحمولة قبل النشر.

نصائح خاصة بالجوال

• الارتفاع: مستخدمو الجوال معتادون على التمرير؛ 600–800px مناسبان
• الحدود: فكّر بإزالة الحدود على الجوال لمزيد من مساحة الشاشة
• الموضع: الوضع بعرض كامل أنسب على الجوال

تخصيص متقدم

تخصيص CSS (لمستخدمين متقدمين)

إطار النموذج (iframe) له تخصيص CSS محدود من الخارج. مع ذلك يمكنك:

1. ضبط حاوية الإطار في سمة Shopify
2. إضافة هامش/مسافة حول البلوك
3. تخصيص خلفية القسم

ملاحظة: لا يمكنك تخصيص CSS داخل النموذج نفسه (موجود في iframe لأسباب أمنية).

نماذج متعددة

إذا احتجت مظاهر مختلفة لصفحات مختلفة:

1. أنشئ نماذج متعددة في SupportRetriever (خطة Pro)
2. خصص كل نموذج بشكل مختلف
3. استخدم روابط نماذج مختلفة في بلوكات السمة المختلفة

أمثلة استخدام:

• نموذج مبيعات بزر أخضر
• نموذج دعم بزر أزرق
• اتصال عام بزر بنفسجي

مطابقة سمتك

لجعل النموذج يندمج مع سمة Shopify:

1. الخلفية: طابق لون خلفية صفحتك
2. الزر: طابق لون الزر الأساسي للسمة
3. النص: طابق لون نص السمة
4. الحدود: عطّل إذا كانت صفحتك بحدود قليلة
5. الشعار: استخدم شعار متجرك

اختبار التخصيص

قبل النشر:

1. معاينة في محرر السمات: تحقق من عرض سطح المكتب
2. اختبر على الجوال: استخدم معاينة الجوال في محرر السمات
3. أرسل رسالة اختبار: تحقق من أن كل شيء يعمل
4. تحقق من متصفحات متعددة: Safari، Chrome، Firefox
5. تحقق من الألوان: تأكد من تباين ووضوح جيدين

سيناريوهات تخصيص شائعة

السيناريو 1: صفحة اتصال بسيطة

الهدف: نموذج نظيف وبسيط يندمج مع الصفحة

الإعدادات:

• الخلفية: أبيض (#ffffff)
• الزر: أسود (#000000)
• النص: رمادي غامق (#4a4a6a)
• الحدود: لا
• الارتفاع: 1000px
• الشعار: لا (أو شعار صغير)

السيناريو 2: دعم منتج بعلامة تجارية

الهدف: نموذج بارز بألوان العلامة التجارية

الإعدادات:

• الخلفية: لون فاتح للعلامة
• الزر: اللون الأساسي للعلامة
• النص: لون غامق للعلامة
• الحدود: نعم
• الارتفاع: 800px
• الشعار: شعار العلامة

السيناريو 3: قسم اتصال مضمّن

الهدف: نموذج بجانب محتوى نصي

الإعدادات:

• الخلفية: مطابقة لخلفية الصفحة
• الزر: لون زر السمة
• النص: لون نص السمة
• الحدود: نعم (لفصله عن النص)
• الارتفاع: 600px
• الشعار: لا

استكشاف مشاكل المظهر

النموذج يبدو مقطوعاً

الحل: زيادة ارتفاع النموذج في إعدادات محرر سمات Shopify.

الألوان لا تطابق سمتي

الحل: حدّث الألوان في إدارة النماذج في SupportRetriever، وليس في Shopify.

الحدود بارزة جداً

الحل: عطّل "إظهار الحدود" في إعدادات محرر سمات Shopify.

الشعار كبير جداً

الحل: غيّر حجم صورة الشعار إلى 200px × 60px أو أقل قبل الرفع.

النموذج لا يتناسب مع الجوال

الحل: النموذج يستجيب تلقائياً. تحقق من أن قسم سمة Shopify مضبوط على عرض كامل على الجوال.

أفضل الممارسات

1. ابقِه بسيطاً: لا تبالغ في التخصيص؛ التصاميم النظيفة أفضل
2. طابق علامتك: استخدم ألوان وخطوط متجرك
3. اختبر جيداً: تحقق على أجهزة متعددة قبل النشر
4. راعِ إمكانية الوصول: تأكد من تباين لون جيد للقراءة
5. حدّث بشكل متسق: إذا غيّرت العلامة، حدّث النموذج ليتطابق

مواضيع ذات صلة

• تثبيت بلوك سمة نموذج الاتصال
• الحصول على رابط النموذج
• تخصيص مظهر النموذج
• استكشاف امتداد السمة وإصلاحه