هل ترغب في تخصيص نموذج اتصال 7 باستخدام المكون الإضافي Elementor Essential Addons؟
يعد Contact Form 7 أحد المكونات الإضافية الأكثر شيوعًا لإنشاء النماذج على WordPress. ومع ذلك، على الرغم من أن ميزاته قوية، إلا أن تخصيص مظهر النماذج يمكن أن يكون محدودًا دون معرفة CSS.
مع ال وورد البرنامج المساعد نموذج الاتصال 7 يمكنك إنشاء العديد من أنواع النماذج مثل نموذج الحجز أو نموذج تحميل الملف. يقدم 14 نوعًا من الحقول التي يمكنك استخدامها أثناء إنشاء النموذج.
انظر أيضا: كيفية استخدام عناصر واجهة / قوالب Elementor مثل كتل Gutenberg
ولكن إحدى المشكلات الشائعة المتعلقة بالمكون الإضافي Contact Form 7 هي عملية التخصيص الخاصة به. يستخدم نموذج الاتصال 7 النمط الافتراضي الخاص بك وورد موضوع نشيط. يمكنك استخدام نمط مختلف، ولكن مهارات CSS ستكون مطلوبة.
هذا هو المكان الذي تأتي فيه الإضافات الأساسية لـ Elementor. يقدم هذا البرنامج المساعد مجموعة من الأدوات لتصميم النماذج وتحسينها. باستخدام الإضافات الأساسية، يمكنك تخصيص كل جانب من جوانب نموذج الاتصال 7 الخاص بك مباشرةً من واجهة Elementor.
في هذه المقالة، سنستكشف كيفية استخدام هذا البرنامج الإضافي لتحويل نماذجك إلى عناصر جذابة بصريًا.
محتويات
كيفية تصميم نموذج الاتصال 7 مع الإضافات الأساسية
التثبيت والتكوين
ابدأ بالتثبيت والتنشيط Elementor et الاتصال 7 نموذج على موقع ووردبريس الخاص بك. بمجرد التثبيت، قم بإنشاء نموذج أساسي ستقوم بتصميمه لاحقًا.
ثم التثبيت والتفعيل الإضافات الأساسية للعنصر. تأكد من تثبيت Elementor أيضًا وتنشيطه على موقعك. تعمل الإضافات الأساسية جنبًا إلى جنب مع Elementor لتقديم خيارات التخصيص المتقدمة.
في لوحة تحكم WordPress، قم بتمكين عنصر واجهة المستخدم "نموذج الاتصال 7" في إعدادات الإضافات الأساسية إذا لم تقم بذلك بالفعل.
بعد التثبيت والتفعيل قم بإنشاء صفحة جديدة (الصفحات -> إضافة) وتحريره باستخدام Elementor.
تصميم النموذج باستخدام الإضافات الأساسية
قبل أن تبدأ عملية التخصيص، قم بتعيين تخطيط الصفحة عن طريق النقر على أيقونة الترس أعلى صفحتك. قم بتعيين التخطيط من القائمة المنسدلة. على عنصر العرض الكامل.
لبدء التخصيص، انتقل إلى الصفحة التي تريد إدراج النموذج فيها عبر محرر Elementor. إضافة القطعة " نموذج اتصال EA 7 » من الإضافات الأساسية إلى صفحتك.
بمجرد إضافة النموذج، يمكنك البدء في تصميمه. تتيح لك الوظائف الإضافية الأساسية تغيير الألوان والطباعة والهوامش والمزيد. اضبط مظهر الحقول والأزرار ورسائل الخطأ وفقًا لتفضيلاتك.
انتقل إلى اللوحة اليمنى وحدد النموذج الذي تريد تخصيص نمطه.
بعد تحديد نموذج ، انتقل إلى علامة التبويب الطراز. كما ترى ، يمكنك تعيين العديد من خيارات التصميم. فيما يلي خيارات التصميم الشائعة التي يمكنك تعيينها.
عرض النموذج والمحاذاة والخلفية
تحت الكتلة حاوية النموذج، انقر فوق منتقي الألوان في القسم نوع الخلفية وقم بتعيين اللون المطلوب لخلفية النموذج. يمكنك استخدام لون خالص أو لون متدرج كخلفية.
اقرأ أيضا: العنصر: كيفية استيراد القوالب أو تصديرها
لتعيين محاذاة النموذج ، ما عليك سوى تحديد خيار المحاذاة المفضل لديك في القسم محاذاة النموذج.
لتعيين عرض النموذج ، قم بتعيين قيمة العرض الأقصى للنموذج في الحقل عرض النموذج الأقصى.
حقل الخلفية وعرض الحدود ونصف القطر
لتحديد خلفية الحقول وعرضها ونصف قطرها ، يمكنك فتح القسم المدخلات و Textarea. انقر فوق منتقي ألوان الحقل لون الخلفية لتعيين الخلفية.
يمكنك أيضًا تعيين لون خلفية الحقول في وضع التصحيح بالنقر فوق علامة التبويب .
لتحديد عرض الحقول ، يمكنك تحديد القيمة في الحقول عرض الإدخال. في هذا القسم ، يمكنك أيضًا تعيين عرض حقل مربع النص في عرض Textarea.
لتعيين نصف قطر الحد ، ما عليك سوى الانتقال إلى تعديل الحقل نصف قطر الحدود وقم بتعيين قيمة الحدود التي تفضلها. يمكنك أيضًا تعيين أسلوب الطباعة (عائلة الخط وحجم الخط ونمط الخط) من خلال النقر على رمز القلم الرصاص في الحقل طباعة.
ملصقات
تسمح لك الإضافات الأساسية أيضًا بتخصيص نمط تسميات النموذج الخاصة بك. يمكنك ضبط لون النص وكذلك الطباعة. للقيام بذلك ، افتح الخيار ملصقات. عيّن لون النص بالنقر فوق منتقي الألوان في الحقل لون النص.
لتعيين أسلوب الطباعة ، انقر فوق رمز القلم الرصاص في الحقل طباعة.
زر الإرسال
لتخصيص نمط زر الإرسال ، افتح الكتلة إرسال زر. من هنا يمكنك ضبط محاذاة الأزرار والعرض ولون الخلفية ولون النص ونصف قطر الحدود وكذلك الطباعة.
رسالة خطأ
لتخصيص نمط رسالة الخطأ ، يمكنك فتح الكتلة أخطاء. يمكنك تعيين لون نص رسالة الخطأ ، والطباعة ، ولون خلفية خطأ التحقق من الصحة ، ولون نص خطأ التحقق من الصحة ، إلخ ....
يمكنك تعيين العديد من خيارات التصميم الأخرى. يمكنك اللعب باللوحة اليسرى حتى تصبح راضيًا عن أسلوب النموذج الخاص بك.
يمكنك إضافة العديد من العناصر الأخرى إلى صفحتك باستخدام عناصر واجهة المستخدم المتوفرة التي يوفرها Elementor و Essential Addons. عند الانتهاء ، انقر فوق الزر للنشر أسفل اللوحة اليمنى لنشر صفحتك.
دمج النموذج في صفحة عادية
بعد النقر فوق الزر للنشر، صفحة الاتصال الخاصة بك قد تم نشرها بشكل أساسي. الصفحة نفسها مدعومة من Elementor. إذا كنت تفضل إضافة الخاص بك نموذج الاتصال 7 إلى صفحة عادية (صفحة تم إنشاؤها باستخدام Gutenberg ، محرر WordPress الافتراضي) ، يمكنك تثبيت المكون الإضافي كتل العنصر لجوتنبرج. سيقوم هذا المكون الإضافي بتحويل قالب Elementor إلى كتلة Gutenberg.
لتسجيل الخاص بك نموذج الاتصال كقالب Elementor، انقر فوق زر السهم الموجود بجوار الزر النشر / التحديث على اللوحة اليمنى وحدد حفظ كقالب.
قم بتسمية القالب الخاص بك وانقر فوق الزر حفظ.
إنشاء صفحة جديدة (الصفحات -> إضافة) ومنحها اسمًا مثل "اتصل بنا" أو "جهة اتصال" أو أي اسم آخر تريده.
أضف كتلة جديدة وحدد مكتبة العنصر وحدد قالب النموذج نموذج الاتصال التي قمت بإنشائها للتو.
والآن قمت بتخصيص نموذج الاتصال الخاص بك.
الاختبار والتحسين
بمجرد تصميم النموذج، من الضروري التحقق من أنه يتم عرضه بشكل صحيح على جميع الأجهزة. اختبار استجابة النموذج باستخدام أدوات Elementor المضمنة. قم بإجراء التعديلات اللازمة للتأكد من أن النموذج قابل للقراءة بشكل مثالي على الهاتف المحمول والكمبيوتر اللوحي.
بالإضافة إلى ذلك، تأكد من أن الأنماط المطبقة لا تؤثر على أداء موقعك. يجب أن يظل النموذج ذو التصميم الجيد سريع التحميل. إذا لزم الأمر، قم بتحسين الصور وتقليل التأثيرات المرئية لضمان الأداء الأمثل.
اقرأ أيضًا الموارد المرتبطة بهذه المقالة
- Elementor : كيفية إنشاء بطاقة المنتج
- Elementor : كيفية إنشاء قسم أعضاء الفريق
- Elementor : كيفية إنشاء خريطة سداسية مع التأثير
- Elementor : كيفية تمرير الصورة عند التمرير
- Elementor : كيفية إضافة تأثير صوت الزر
الأسئلة الشائعة
هل الإضافات الأساسية متوافقة مع المكونات الإضافية للنماذج الأخرى؟
نعم، تتوافق Essential Addons مع العديد من المكونات الإضافية الأخرى، على الرغم من أن بعض الميزات المحددة مخصصة لنموذج الاتصال 7.
هل يمكنني استخدام الإضافات الأساسية بدون Elementor؟
لا، تعمل الإضافات الأساسية فقط مع Elementor، لأنها امتداد لمنشئ الصفحة هذا.
ماذا تفعل إذا لم يتم تطبيق الأسلوب بشكل صحيح؟
تأكد من مسح ذاكرة التخزين المؤقت لموقعك وأن جميع المكونات الإضافية محدثة. إذا استمرت المشكلة، فتحقق من وجود تعارضات محتملة مع المكونات الإضافية أو السمات الأخرى.
احصل على Elementor Pro الآن !!!
وفي الختام
لذا ! هذا كل ما في هذه المقالة التي توضح لك كيفية تخصيص نموذج نموذج الاتصال 7 باستخدام الإضافات الأساسية. يعد تصميم نموذج نموذج الاتصال 7 باستخدام الإضافات الأساسية طريقة فعالة لجعل نماذجك أكثر جاذبية من الناحية المرئية مع الحفاظ على تجربة مستخدم ممتازة.
ومن خلال ممارسات التخصيص الجيدة، يمكنك إنشاء نماذج لا تجذب انتباه المستخدمين فحسب، بل تعزز أيضًا الهوية المرئية لموقعك. لا تتردد في استكشاف ميزات الإضافات الأساسية الأخرى للمضي قدمًا في تخصيص موقع WordPress الخاص بك.
إذا كانت لديك أي مخاوف بشأن كيفية الوصول إلى هناك، فأخبرنا بذلك في تعليقات.
ومع ذلك ، يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...