كيفية تخصيص تصميم النموذج الخاص بك في Elementor باستخدام Happy Form Widgets مجانًا!
نشرت: 2021-03-04هل تريد إضافة نموذج أنيق المظهر على موقع Elementor الخاص بك وتحتاج إلى حل مثالي لذلك؟ وقتك في البحث قد انتهى أخيرًا!
أطلقت إضافات Happy Elementor المفضلة لديك مؤخرًا أدوات نماذج مجانية تتيح لك إضافة نموذج على صفحات أو أقسام مختلفة من موقع الويب الخاص بك دون عناء. تكامله مع 7 منشئي النماذج المشهورين يعني أنه يمكنك إضافة نماذج من أي منهم وأسلوب باستخدام Happy Addons. هذا يشير إلى شيء واحد وشيء واحد فقط.
مع عناصر واجهة مستخدم Happy Addons ، ستحصل على "أطنان من نطاقات الأسلوب والتخصيص".
في هذا البرنامج التعليمي ، أوضحنا لك كيفية استخدام Happy Addons Form Widgets داخل صفحة الويب المصممة بواسطة Elementor ، وسوف تتعلم أيضًا كيف يمكنك تخصيص تصميمها ، بالطريقة التي تريدها.
ولكن قبل ذلك ، دعنا نفهم سبب أهمية أدوات النموذج لموقعك على الويب.
نظرة سريعة على أدوات نموذج الإضافات السعيدة
تعد Happy Addons واحدة من أفضل إضافات Elementor التي ساعدت أكثر من 1،00،000+ من مستخدمي WordPress في بناء موقع الويب الخاص بهم. يأتي مزودًا بالعديد من الميزات والأدوات الأساسية لتخصيص منشورات موقع الويب الخاص بك والصفحات ومنتجات WooCommerce والنماذج والمزيد.
كما تعلم بالفعل ، يقدم Elementor أداة نموذج افتراضية لعرض النماذج على موقع الويب. لكنها لا تحتوي على ميزات كافية لتخصيص نموذج بتصميمك وأسلوبك الشامل.
هذا هو المكان الذي يأتي فيه برنامج Happy Addons. تتيح لك أدوات نماذج Happy Addons دمج نماذج من 7 من أشهر أدوات إنشاء النماذج على WordPress. تأتي كل أداة من الأدوات مع تنسيقات مختلفة ستساعد في جعل نماذجك أكثر سهولة في الاستخدام وتصميمًا جيدًا.
المكونات الإضافية السبعة التي يدعمها Happy Addons Form Widget ، هي -
- نموذج الاتصال 7
- أشكال النينجا
- WeForms
- أشكال كالديرا
- WPForms
- أشكال الجاذبية
- أشكال بطلاقة
كيفية استخدام أدوات نماذج Happy Addons في موقع ويب Elementor الخاص بك
باستخدام Happy Addons Form Widget ، يمكنك بسهولة تخصيص نموذج وعرضه على موقع Elementor الخاص بك ، في غضون دقيقتين.
على الأقل ، أنت بحاجة إلى ثلاثة مكونات إضافية للقيام بذلك. هم انهم -
- Elementor (مجاني)
- إضافات Happy Elementor (مجانًا)
- WPForms (مجاني)
هنا ، نستخدم أحد المكونات الإضافية للنماذج الشائعة WPForms.
لنقم بتكوين نموذج اتصال.
أولاً ، قم بتثبيت وتنشيط المكونات الإضافية الضرورية التي ذكرناها في القائمة أعلاه.
الخطوة 1: قم بإنشاء نموذج
بعد تثبيت البرنامج المساعد WPForms ، يجب عليك إنشاء النموذج الأول الخاص بك.
للقيام بذلك ، انتقل إلى WPForms–> إضافة جديد
في الصفحة التالية ، ستحصل على خيار إنشاء النموذج الخاص بك.
ثم يمكنك تعديل النموذج الخاص بك وفقًا لمتطلباتك وإضافة العديد من الحقول. نضيف هنا ثلاثة حقول الاسم والبريد الإلكتروني والرسالة.
بعد الانتهاء من تحرير النموذج ، يجب النقر فوق الزر حفظ .
بعد ذلك ، تحتاج إلى إنشاء صفحة لتكوين النموذج الخاص بك. يمكنك أيضًا تعيين النموذج على صفحة الاتصال الخاصة بك.
الخطوة 2: إنشاء صفحة لتكامل النموذج
انقر أولاً فوق الصفحات -> إضافة جديد .
في الشاشة التالية ، سترى خيار إضافة عنوان صفحتك.
الخطوة 3: أضف WPForms
لتصميم صفحة الاتصال ، استخدمنا تصميم صفحة الاتصال المعدة مسبقًا من WPForm. لقد قمنا بنسخ التصميم باستخدام ميزة " النسخ الحية " Happy Addons Pro.
يتم استخدام التصميم المسبق في صفين لتصميم صفحة الاتصال.
في القسم الأيمن ، سنضيف أدوات WPForm. وفي القسم الأيمن ، قمنا بالفعل بإدراج صورة وإضافة لون خلفية للقسم.
الآن ، ابحث عن أداة WPForms في شريط البحث ، وحدد عنصر واجهة المستخدم من القائمة اليسرى. ثم قم بسحبه وإفلاته في المنطقة المحددة.
ثم نختار اسم النموذج من القائمة المنسدلة التي أنشأناها سابقًا.
الخطوة 4: تصميم النموذج باستخدام الإضافات السعيدة
يمكنك الآن إعادة تصميم نموذج الاتصال بسهولة إذا كنت تريد ذلك.
هنا نعرض لكم.
تصميم العنوان
أولاً ، نضيف Happy Gradient Heading من قائمة الشريط الجانبي الأيسر.
ثم يمكنك تخصيص عنوان التدرج السعيد بأسلوبك الخاص. يمكنك تحديد إعدادات مسبقة-> تصميم وكذلك تحرير العنوان .
بعد تصميم العنوان ، سنقوم بتغيير نمط النموذج.
تصميم النموذج
لإعادة تصميم النموذج ، عليك الذهاب إلى Style . هنا ، ستحصل على خيار تصميم النموذج مثل Form Fields و Form Fields Label و Submit Button .
حقول النموذج : في إعداد حقل النموذج ، ستقوم بتغيير تباعد الحقول ، الحشو ، نصف قطر الحدود ، الطباعة. لون نص الحقل ولون العنصر النائب للحقل ونوع الحد والمزيد.
تسمية الحقول: تتيح لك تسمية الحقول أيضًا تحرير الهامش والحشو وطباعة الملصق وطباعة التسمية الفرعية وطباعة الوصف والألوان.
زر الإرسال : إذا كنت بحاجة ، فسوف تقوم أيضًا بتخصيص زر الإرسال عن طريق تغيير عرض الزر بالكامل وعرض الزر والهامش والحشو والطباعة والحدود واللون ونصف قطر الحدود وظل الصندوق ولون النص ولون خلفية الزر.
دعونا نخصص النموذج قليلاً.
المعاينة النهائية
هنا المعاينة النهائية لصفحة الاتصال الخاصة بنا.
يمكنك أيضًا مشاهدة هذا الفيديو التعليمي المفيد.
تحقق من وثائق WPForm الكاملة.
أدوات النموذج: ما هي ولماذا تحتاجها؟
ما هو الغرض من وجود نموذج على صفحة ويب؟
يستخدم النموذج لأغراض مختلفة على موقع الويب. يمكنك استقبال رسائلك باستخدام نموذج والتواصل مع المستخدمين. كما أنه يساعد على بناء الثقة مع عملائك. لذلك ، يمكن أن يزيد من مصداقية موقع الويب ويسمح لمستخدمي موقع الويب الخاص بك بالتواصل معك بشكل أفضل. إذن ماذا تفعل أدوات النموذج؟
تتيح لك أدوات النموذج عرض النماذج على موقع ويب Elementor الخاص بك بسهولة.
فيما يلي بعض النقاط الرئيسية التي توضح بوضوح أهمية وجود نموذج على موقع ويب -
- تقليل رسائل البريد الإلكتروني العشوائية
- تلقي الرسائل عندما يناسبك
- تتبع الاستفسارات
- توليد المزيد من العملاء المحتملين
- اصنع قائمة تسويق البريد الإلكتروني الخاصة بك
- اعرض دعم العملاء
- احصل على الرسائل المرسلة من المستخدم
يمكن أن تساعدك أدوات النماذج الإضافية السعيدة في القيام بها جميعًا من خلال عملية تكامل عناصر واجهة المستخدم النموذجية البديهية. دعنا نعرف المزيد عن عنصر واجهة المستخدم Happy Addons.
خاتمة
في هذه المدونة ، قمنا بتغطية كل ما تحتاج لمعرفته حول Happy Addons Form Widgets. لقد أوضحنا لك أيضًا كيفية تعيين نموذج باستخدام Happy Addons WPForm Widget. يمكنك أن تفعل الشيء نفسه بالنسبة لملحقات النماذج الستة الأخرى ، بنفس الطريقة.
في نفس الملاحظة ، إليك كيفية إنشاء نموذج جهة اتصال Elementor.
إذا كان لا يزال لديك أي استفسارات بشأن كيفية إضافة النماذج وتخصيصها على موقع ويب Elementor الخاص بك ، فيمكنك التعليق. وقم بمشاركة المنشور على قنواتك الاجتماعية وساعد أصدقائك على التعلم.