في هذه المقالة سوف تتعرف على كيفية إنشاء نموذج باستخدام Elementor مجانًا.

على الرغم من أن أداة النموذج متاحة فقط على إليمنتور برو، هذا لا يعني أنه لا يمكنك إضافة نماذج باستخدام الإصدار المجاني من Elementor.

إذا كنت تريد تضمين نموذج في صفحة تم إنشاؤها باستخدام الإصدار المجاني من Elementor، فهناك طريقتان سنستكشفهما في هذه المقالة.

Elementor، في نسخته الاحترافية والمجانية، يقدم أداتين تسمحان لك بإنشاء النماذج. هذه هي عناصر واجهة مستخدم HTML والرمز القصير. تسمح لك أداة HTML بتضمين نموذج باستخدام كود HTML، بينما تسمح لك أداة الرمز القصير بتضمين نموذج من المكونات الإضافية للنموذج باستخدام الرموز القصيرة، مثل معلومات الاتصال 7.


محتويات


قم بإنشاء نموذج باستخدام الإصدار المجاني من Elementor باستخدام أداة HTML في 7 خطوات

من الممكن تمامًا إنشاء نموذج باستخدام الإصدار المجاني من Elementor، حتى إذا لم يكن لديك إمكانية الوصول إلى أداة النموذج المتوفرة في الإصدار Pro. إحدى الطرق الفعالة هي استخدام عنصر واجهة مستخدم HTML، الذي يسمح لك بتضمين نموذج باستخدام تعليمات HTML البرمجية.

الخطوة 1: قم بإنشاء صفحة جديدة أو تحرير الصفحة الحالية

للبدء، قم بإنشاء صفحة جديدة وتحريرها باستخدام Elementor (الصفحات -> إضافة). يمكنك أيضًا تعديل صفحة موجودة إذا كنت ترغب في ذلك.

إنشاء صفحة جديدة أو تعديل الصفحة الحالية

إذا قررت إنشاء نموذج على صفحة جديدة، فلا تنس تكوين التخطيط من خلال النقر على أيقونة الترس أعلى صفحتك.

تكوين التخطيط

الخطوة 2: إعداد كود HTML للنموذج

للبدء، ستحتاج إلى كود HTML الخاص بالنموذج الخاص بك. إذا كانت لديك مهارات HTML، فيمكنك كتابة الكود بنفسك. خلاف ذلك يمكنك يمكنك العثور على العديد من قوالب نماذج HTML المجانية عبر الإنترنت. بمجرد أن يصبح كود HTML جاهزًا، انسخه وانتقل إلى الخطوة التالية.

الخطوة 3: إضافة قسم جديد في Elementor

في محرر Elementor، ابدأ بإنشاء قسم جديد في الصفحة التي تريد إدراج النموذج فيها. انقر على الزر "+" لإضافة قسم.

انقر على الزر "+" لإضافة قسم

ثم اختر التخطيط الذي يناسب النموذج الخاص بك.

اختر التخطيط

الخطوة 4: أدخل أداة HTML

بعد إضافة القسم، ابحث عن عنصر واجهة المستخدم "HTML" في لوحة عنصر واجهة المستخدم على اليسار. اسحبه وأفلته في القسم الذي قمت بإنشائه. تسمح لك هذه الأداة بإدراج كود HTML مباشرة على الصفحة.

الخطوة 5: الصق كود HTML الخاص بالنموذج

بمجرد وضع أداة HTML في مكانها الصحيح، انقر فوق علامة التبويب "المحتوى" الخاصة بالأداة في اللوحة اليمنى. الصق كود HTML الخاص بالنموذج الخاص بك في الحقل المخصص لهذا الغرض. سيظهر النموذج فورًا على الصفحة.

قم بإنشاء نموذج باستخدام Elementor مجانًا

الخطوة 6: تخصيص النموذج وتصميمه

سوف يأخذ النموذج الذي قمت بدمجه تلقائيًا النمط الأساسي الخاص بك وورد موضوع. ومع ذلك، إذا كنت تريد تخصيصه بشكل أكبر، فيمكنك إضافة CSS مخصص لضبط الألوان والهوامش والخطوط والمزيد. لهذا، يجب أن تكون لديك معرفة بـ CSS أو استئجار مطور إذا لزم الأمر.

الخطوة 7: المعاينة والنشر

بمجرد دمج النموذج الخاص بك وتصميمه، خذ الوقت الكافي لمعاينة الصفحة للتأكد من عرض كل شيء بشكل صحيح. اختبار النموذج للتأكد من أنه يعمل كما هو متوقع. عندما تكون راضيا عن النتيجة، قم بنشر الصفحة.

انظر أيضا: كيفية استخدام عناصر واجهة / قوالب Elementor مثل كتل Gutenberg

هناك شيء مهم يجب ملاحظته: إذا كان نموذج HTML الخاص بك يستخدم CSS خارجيًا أو صورًا أو JavaScript للتصميم، فتأكد من تحميل المجلدات التي تحتوي على ملفات CSS والصور وJavaScript إلى الدليل الجذر لموقع الويب الخاص بك.

لذلك، يعد استخدام أداة HTML لإنشاء نموذج في الإصدار المجاني من Elementor حلاً بسيطًا ومرنًا. على الرغم من أن هذا يتطلب المزيد من العمل قليلاً مقارنة بأداة النموذج المتوفرة في الإصدار الاحترافي، إلا أنها طريقة فعالة لإضافة نماذج وظيفية إلى موقعك دون تكاليف إضافية.

من خلال الجمع بين إمكانيات Elementor ورمز HTML الصغير، يمكنك إنشاء نماذج مصممة خصيصًا لتلبية احتياجاتك مع الحفاظ على الاتساق المرئي لموقعك.


قم بإنشاء نموذج Elementor مجاني باستخدام نموذج الاتصال 7 في 7 خطوات

يمكن إنشاء نموذج باستخدام الإصدار المجاني من Elementor بسهولة باستخدام ملف البرنامج المساعد الشهير لنموذج الاتصال 7. يقدم هذا البرنامج المساعد طريقة بسيطة وفعالة لتضمين النماذج في صفحات Elementor الخاصة بك دون الحاجة إلى أي معرفة بالبرمجة.

هناك العديد من المكونات الإضافية للنماذج الأخرى، لكننا نوصي بها معلومات الاتصال 7 لأنه البرنامج المساعد الأكثر شيوعًا لـ WordPress، وهو مجاني تمامًا.

الخطوة 1: تثبيت وتفعيل نموذج الاتصال 7

للبدء ، تحتاج إلى تثبيت وتفعيل البرنامج المساعد معلومات الاتصال 7 على موقع ووردبريس الخاص بك. قم بالوصول إلى لوحة تحكم WordPress الخاصة بك، انتقل إلى ملحقات> إضافة، ثم ابحث عن "نموذج الاتصال 7". بمجرد العثور على البرنامج المساعد، انقر فوق تثبيت الآنثم نشط une fois l'installation terminée.

قم بإنشاء نموذج باستخدام Elementor مجانًا

الخطوة 2: إنشاء نموذج جديد

بمجرد تنشيط البرنامج المساعد، يمكنك إنشاء نموذج. للقيام بذلك، انتقل إلى اتصل > إضافة جديد في لوحة تحكم WordPress الخاصة بك. قم بتسمية النموذج الخاص بك للتعرف عليه بسهولة لاحقًا.

بشكل افتراضي، يقدم لك نموذج الاتصال 7 نموذج الاتصال الأساسية بما في ذلك حقول الاسم والبريد الإلكتروني والموضوع والرسالة. يمكنك استخدام هذا النموذج كما هو أو تخصيص الحقول لتناسب احتياجاتك.

قم بإنشاء نموذج باستخدام Elementor مجانًا

إذا كنت تريد إضافة حقل جديد ، فضع المؤشر في المنطقة التي تريد إضافة الحقل الجديد إليها (يمكنك وضعه أسفل حقل موجود أو فوقه). أضف تسمية لحقل النموذج الجديد بالتنسيق <label> votre label préféré </label>.

قم بإنشاء نموذج باستخدام Elementor مجانًا

ضع المؤشر مباشرة بعد تسمية الحقل الذي تريد تعديله أو بعد آخر حقل موجود. بعد ذلك، حدد نوع الحقل الذي تريد إضافته من علامة التبويب بطل. لتحسين إمكانية قراءة النموذج وتنظيمه، يمكنك إدراج فاصل أسطر بعد كل حقل جديد، مما سيجعل النموذج أكثر وضوحًا ومتوافقًا مع الحقول الأخرى الموجودة.

املأ الحقول وانقر فوق أدخل العلامة (يمكنك ترك كل شيء كإعداد افتراضي).

قم بإنشاء نموذج باستخدام Elementor مجانًا

سيقوم نموذج الاتصال 7 بإرسال الطلبات المقدمة من خلال النموذج الخاص بك إلى بريد إلكتروني. يمكنك ضبط البريد الإلكتروني من علامة التبويب البريد الإلكتروني.

قم بإنشاء نموذج باستخدام Elementor مجانًا

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

قم بإنشاء نموذج باستخدام Elementor مجانًا

انقر فوق الزر سجّل بمجرد الانتهاء من تحرير النموذج.

الخطوة 3: تخصيص النموذج

إذا كنت تريد تعديل أو إضافة حقول إضافية إلى النموذج الخاص بك، فيمكنك القيام بذلك مباشرة في واجهة نموذج الاتصال 7. يمكنك إضافة حقول لأرقام الهواتف أو خانات الاختيار أو أي نوع آخر من البيانات بما في ذلك ما تحتاجه. بمجرد الانتهاء من التغييرات، احفظ النموذج.

اقرأ دليلنا على: كيفية تخصيص نموذج نموذج الاتصال 7

الخطوة 4: احصل على الرمز القصير للنموذج

بعد إنشاء النموذج الخاص بك وتخصيصه، سيزودك نموذج الاتصال 7 برمز قصير فريد. يعد هذا الرمز القصير ضروريًا لدمج النموذج في صفحة Elementor. ما عليك سوى نسخ الرمز القصير الموجود أسفل اسم النموذج.

الخطوة 5: تضمين النموذج في Elementor

الآن بعد أن حصلت على الرمز القصير، افتح الصفحة التي تريد إضافة النموذج فيها باستخدام محرر Elementor. أضف قسمًا جديدًا أو حدد قسمًا موجودًا حيث يجب أن يظهر النموذج.

ابحث عن عنصر واجهة المستخدم "Shortcode" في لوحة عنصر واجهة المستخدم Elementor، ثم اسحبه إلى القسم المختار. الصق الرمز القصير الذي نسخته مسبقًا في الحقل المقدم.

الخطوة 6: تخصيص النموذج وتصميمه

سيتخذ نموذج نموذج الاتصال 7 المدمج في Elementor النمط الخاص بك وورد موضوع. إذا كنت ترغب في تخصيص مظهر النموذج بشكل أكبر، فيمكن القيام بذلك عن طريق إضافة عرف المغلق. يمكنك تغيير الألوان والهوامش والطباعة والمزيد لتكييف النموذج مع المظهر العام لموقعك.

اقرأ أيضا: كيفية تعطيل العنصر المنبثق على الهواتف الذكية

الخطوة 7: الاختبار والإصدار

قبل نشر صفحتك، تأكد من معاينة النموذج للتأكد من أنه يعمل بشكل صحيح. أرسل رسالة اختبار للتأكد من أن جميع الميزات تعمل. بمجرد الرضا، قم بنشر الصفحة لجعل النموذج في متناول زوار موقعك.

لذا ! باستخدام نموذج الاتصال 7 مع Elementor المجاني، يمكنك بسهولة إنشاء نماذج وظيفية دون إنفاق سنت واحد. تعتبر هذه الطريقة مثالية للمستخدمين الذين يريدون وظائف أساسية ولكن فعالة، مع الحفاظ على المرونة اللازمة لتخصيص النموذج الخاص بهم.

يمنحك نموذج الاتصال 7، مع Elementor، حلاً قويًا لالتقاط المعلومات الأساسية من زوار موقعك.

إذا كنت تريد تخصيصًا أسهل، فيمكنك مراجعة هذه المقالة حول كيفية القيام بذلك قم بتخصيص نموذج نموذج الاتصال 7 باستخدام الإضافات الأساسية والعنصر.


الأسئلة المتداولة: كيفية إنشاء نموذج باستخدام الإصدار المجاني من Elementor

هل يمكنني إنشاء نموذج باستخدام الإصدار المجاني من Elementor؟

نعم، يمكنك إنشاء نموذج باستخدام الإصدار المجاني من Elementor باستخدام أدوات HTML أو Shortcode. على الرغم من أن أداة النموذج محجوزة للإصدار Pro، إلا أن هناك بدائل مجانية فعالة.

ما هي طرق إنشاء نموذج في Elementor المجاني؟

يمكنك استخدام عنصر واجهة مستخدم HTML لتضمين نموذج HTML مباشرةً أو عنصر واجهة مستخدم الرمز القصير لتضمين نموذج تم إنشاؤه باستخدام مكون إضافي مثل نموذج الاتصال 7.

كيفية إضافة نموذج HTML إلى صفحة Elementor؟

استخدم أداة HTML في Elementor لإدراج كود HTML للنموذج الخاص بك. يمكنك لصق الكود مباشرة في حقل محتوى عنصر واجهة المستخدم.

هل أحتاج إلى معرفة لغة HTML لإنشاء نموذج باستخدام Elementor المجاني؟

على الرغم من أن ذلك يساعدك، إلا أنك لا تحتاج إلى مهارات HTML إذا كنت تستخدم مكونًا إضافيًا للنموذج مثل نموذج الاتصال 7، الذي ينشئ رموزًا قصيرة يسهل تضمينها.

كيفية تصميم نموذج تم إنشاؤه باستخدام Elementor المجاني؟

إذا كنت تستخدم نموذج HTML، فستحتاج إلى استخدام CSS لتصميمه. النماذج التي تم إنشاؤها بواسطة المكونات الإضافية مثل نموذج الاتصال 7 ترث النمط الخاص بك وورد موضوع، ولكن يمكنك أيضًا تخصيص النمط باستخدام CSS.

هل هناك أي مكونات إضافية مجانية لإنشاء النماذج باستخدام Elementor؟

نعم، تعد المكونات الإضافية مثل Contact Form 7 وWPForms Lite وNinja Forms من الخيارات المجانية الشائعة لإنشاء النماذج التي يمكنك تضمينها في Elementor.

كيفية دمج نموذج الاتصال 7 في صفحة Elementor؟

أنشئ النموذج الخاص بك في نموذج الاتصال 7، ثم انسخ الرمز القصير الذي تم إنشاؤه. استخدم أداة الرمز القصير الخاصة بـ Elementor لتضمين هذا النموذج في صفحتك.

ما هي القيود المفروضة على الإصدار المجاني من Elementor لإنشاء النماذج؟

لا يقدم الإصدار المجاني من Elementor أداة نموذج مخصصة. لإنشاء نماذج، ستحتاج إلى استخدام حلول مثل HTML أو الرموز المختصرة أو المكونات الإضافية الخارجية.

كيف يمكنني اختبار النموذج الذي تم إنشاؤه باستخدام Elementor؟

بعد تضمين النموذج الخاص بك في الصفحة، قم بمعاينة الصفحة باستخدام Elementor وأرسل اختبارًا للتأكد من أن النموذج يعمل بشكل صحيح.

هل من الممكن استخدام النماذج المتقدمة مع الإصدار المجاني من Elementor؟

بالنسبة للميزات المتقدمة، مثل الحقول الشرطية أو النماذج متعددة الخطوات، يوصى بالترقية إلى الإصدار Pro من Elementor أو استخدام المكونات الإضافية للنماذج مع الميزات المتقدمة في إصداراتها المجانية.

الموارد الأخرى ذات الصلة

وفي الختام

لذا ! هذا كل ما في هذه المقالة التي توضح لك كيفية إنشاء نموذج باستخدام الإصدار المجاني من Elementor. إذا كانت لديك أي مخاوف بشأن كيفية الوصول إلى هناك، فأخبرنا بذلك في تعليقات.

ومع ذلك ، يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.

ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.

...

يعلقون عليه على موقع Pinterest