تصميم النموذج
يمنحك منشئ النماذج التلقائي تحكمًا كاملاً في تصميم النماذج. يمكنك مطابقة ألوان علامتك التجارية، واستخدام خطوطك، وضبط المسافات، وتصميم نماذج تبدو كجزء طبيعي من موقعك.
لماذا يُعدّ تصميم الشكل مهمًا؟
موقعك الإلكتروني له علامة تجارية. يجب أن تعكس نماذجك هذه العلامة.
عندما تبدو النماذج مختلفة عن باقي موقعك، يتردد الزوار. ويتساءلون عما إذا كانوا لا يزالون على نفس الموقع. هذا التردد يؤدي إلى انخفاض معدلات التحويل.
تُضفي النماذج المصممة بأسلوب أنيق لمسة احترافية. فالنموذج المصقول يُظهر للزوار اهتمامك بالتفاصيل، وإذا كنت تهتم بتصميم النموذج، فمن المرجح أنك تهتم ببياناتهم أيضاً.
كيف يعمل تصميم النماذج
يتضمن برنامج إنشاء النماذج التلقائي محرر أنماط مرئي مدمج في واجهة إنشاء النماذج.
- اختر ما تريد تنسيقهاختر من بين حاوية النموذج، أو تسميات الحقول، أو حقول الإدخال، أو الأزرار، أو رسائل الخطأ.
- ضبط الإعداداتاستخدم أدوات اختيار الألوان، والشرائح المنزلقة، والقوائم المنسدلة لتغيير القيم. لا حاجة لتعلم أو تذكر أي قواعد CSS.
- معاينة فوريةتظهر جميع التغييرات فوراً في المعاينة المباشرة. شاهد كيف سيبدو النموذج تماماً قبل النشر.
- حفظ كإعدادات افتراضيةقم بتطبيق تصميمك على النماذج الجديدة تلقائيًا. أنشئ مرة واحدة، وأعد استخدامه في كل مكان.
ما يمكنك تخصيصه
الألوان
تحكّم بكل لون في نموذجك. ألوان خلفية حاوية النموذج والحقول الفردية. ألوان نص التسميات والنصوص التوضيحية ونصوص الإدخال. ألوان حدود الحالات الافتراضية وحالات التركيز وحالات الخطأ. ألوان أزرار الخلفية والنص وتأثيرات التمرير.
طباعة
اختر الخطوط المناسبة للعناوين وحقول الإدخال. اضبط أحجام الخطوط بشكل مستقل - عناوين أكبر للتأكيد، ونصوص مساعدة أصغر للمعلومات الثانوية. تحكم في سماكة الخط للعناوين العريضة أو نصوص الإدخال الخفيفة.
التباعد والتخطيط
اضبط المسافة بين الحقول لتوفير مساحة كافية. عدّل الحشو داخل الحقول لتسهيل إدخال النصوص. تحكّم في الهوامش حول النموذج بأكمله لوضعه في المكان الأمثل ضمن تصميم صفحتك.
الحدود والزوايا
حدد عرض الحدود ونمطها ولونها. استخدم الزوايا الدائرية لإضفاء مظهر عصري، أو اجعلها حادة لتصميم بسيط. طبّق أنماط حدود مختلفة على حالات النموذج المختلفة - حدود رقيقة افتراضيًا، وحدود بارزة عند التركيز.
أزرار
صمم أزرار إرسال تتناسب مع علامتك التجارية. حدد لون الخلفية، ولون النص، ونصف قطر الحواف، والمسافة الداخلية، وحجم الخط، ووزنه. خصص تأثيرات التمرير وحالة التفعيل لضمان استجابة الأزرار وسهولة النقر عليها.
حاوية النموذج
قم بتنسيق غلاف النموذج بالكامل. أضف لونًا للخلفية أو اجعلها شفافة. أضف ظلالًا للصندوق لإضفاء عمق. حدد نصف قطر الحدود لحاويات النماذج ذات الزوايا الدائرية. تحكم في الحد الأقصى للعرض لمنع النماذج من التمدد بشكل مفرط.
سيناريوهات تصميم النماذج الشائعة
مطابقة إرشادات العلامة التجارية
تستخدم شركتكم ألوانًا محددة - #0F2D5F للألوان الأساسية، و#F59E0B للألوان الثانوية. أدخلوا هذه القيم في محرر الأنماط. تستخدم أزرار النماذج لونكم الثانوي، بينما تستخدم تسميات النماذج لونكم الأساسي. للحصول على تناسق مثالي للعلامة التجارية، استخدموا اللون الأساسي.
إنشاء نماذج عالية التباين
هل تبحث عن موقع بخلفية داكنة؟ صمم أشكالاً فاتحة تبرز بوضوح. أما إذا كانت الخلفية فاتحة، فاستخدم أشكالاً ذات حدود وظلال خفيفة لتحديد مساحة الشكل دون التأثير على المظهر العام.
تصميم أشكال بسيطة
قم بإزالة الحدود، وقلل المسافات، واستخدم خلفيات شفافة. صمم نماذج تبدو وكأنها جزء لا يتجزأ من الصفحة بدلاً من أن تكون موجودة داخل مربع منفصل.
أنشئ نماذج دعوة للعمل جريئة
أزرار كبيرة، ألوان زاهية، وحشوة واسعة. صمم نماذج تجذب الانتباه لأهم صفحات توليد العملاء المحتملين.
نماذج تتناسب مع أي موضوع
يعمل مُنشئ النماذج التلقائي مع جميع قوالب ووردبريس. تتكيف نماذجك المصممة مع أي سياق تصميم.
هل تستخدم قالب Woodmart أو Astra أو GeneratePress أو Divi أو أي قالب آخر؟ ستظهر نماذجك بشكل متناسق مع التصميم الأصلي. يمنحك محرر الأنماط تحكمًا كافيًا لمطابقة أي نظام تصميم.
لا توجد تعارضات في القوالب. لا توجد مشاكل في توريث الأنماط. فقط نماذج تبدو تمامًا كما تريدها.
لا حاجة إلى CSS
لست بحاجة إلى كتابة أكواد CSS مخصصة لتنسيق نماذجك. يقوم المحرر المرئي بكل شيء.
لكن إذا كنت ترغب في التحكم الكامل في CSS، فإن أداة إنشاء النماذج التلقائية تدعم تخصيص CSS لكل نموذج على حدة. يمكنك إضافة تعديلات للحالات الاستثنائية أو تطبيق أنماط متقدمة غير متوفرة في المحرر المرئي. يحصل المستخدمون المتقدمون على المرونة التي يحتاجونها.
