تسليط الضوء على البرنامج المساعد Divi - وحدة Gravity Divi

Gravity Forms هي واحدة من أكثر ملحقات النماذج شيوعًا في WordPress. إنه متوافق مع Divi باستخدام الرموز القصيرة ، لكن هذا لا يستفيد استفادة كاملة مما هو ممكن مع وحدات Divi. لحسن الحظ ، يتوفر مكون إضافي تابع لجهة خارجية ، يسمى Gravity Divi Module ، والذي يضيف نماذج Gravity إلى Divi Builder.

Gravity Divi Module هو مكون إضافي تابع لجهة خارجية من CodeCraters يتكامل تمامًا مع نماذج Gravity ، حيث تكون تخطيطات Divi و Extra. يسمح لك بتصميم النماذج الخاصة بك باستخدام تخصيصات وحدة Divi. في هذا البرنامج المساعد سوف نلقي نظرة على ما يمكن أن تفعله الوحدة. بالنسبة للعينات التي أستخدمها قوالب مقدمة من نماذج Gravity وصور من Unsplash.com.

لمزيد من المعلومات حول نماذج Gravity ، راجع مقالات السمات الأنيقة:

• أشكال الجاذبية - نظرة مفصلة على الإصدار الشخصي
• كيف تصمم أشكال الجاذبية لتبدو وكأنها ديفي (+ تبدو المكافأة!)

تثبيت وحدة Gravity Divi والإعدادات

أولاً ، يجب تثبيت نماذج Gravity من أجل استخدام هذا المكون الإضافي. بمجرد تثبيت نماذج Gravity ، قم بتحميل وتفعيل المكون الإضافي Gravity Divi Module. بمجرد تنشيط المكون الإضافي ، ستضيف وحدة نمطية جديدة إلى Divi Builder تسمى Gravity Divi. لا يوجد إعداد مطلوب.

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

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

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

إجراء التعديلات

هذا هو نموذج الاتصال المتقدم باستخدام النمط الافتراضي. يتطابق مع تصميم Divi. إجراء التعديلات أمر سهل.

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

في هذا المثال قمت بتعطيل عنوان النموذج.

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

وحدة Gravity Divi في أمثلة تخطيطات Divi

أكبر ميزة لـ Gravity Module هي Divi Builder مع إعدادات الوحدة الخاصة به ، مما يعني أن إعدادات الوحدة التي اعتدت عليها متاحة لنماذج Gravity. فيما يلي نظرة على بعض الأمثلة داخل تخطيطات Divi.

نموذج الاتصال المتقدم في تخطيط وحدة الشخص

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

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

تخطيط التسجيل

يستخدم هذا المثال بعض عناصر التخطيط من تخطيط الصفحة الرئيسية المجانية للجامعات والكليات.

يتم وضع وحدة Gravity ضمن تخطيط 2/3 ، 1/3 مع وحدة نصية.

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

زفاف RSVP

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

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

نموذج طلب بيتزا

يستخدم هذا المثال قالب نموذج إنشاء بيتزا من نماذج Gravity.

يستخدم هذا التخطيط تخطيطًا 1/3 و 2/3 مع وحدة Gravity والعديد من وحدات الصور. لقد أضفت خلفية في القسم وتراكبًا في الصف مع حشوة لجعل كل شيء مناسبًا للمساحة المصممة.

لقد قمت بتعيين النص على Light ، وغيرت الخطوط إلى Arimo ، وقمت بتعديل حجم الخط لكل عنصر من عناصر النموذج بشكل منفصل.

لقد قمت بتعيين نص الزر والحدود على اللون الأبيض وقمت بتعديل نصف قطر حد الزر إلى 30.

موضوع إضافي مع نموذج اتصال متقدم في تخطيط وحدة الشخص

Gravity Module متوافق أيضًا مع Extra. فيما يلي نظرة على المثال الأول (نموذج الاتصال المتقدم في تخطيط وحدة الشخص) مع Extra. بالنسبة للصفحة في Extra ، أستخدم قالب صفحة ذي عرض كامل. تبدو مثل صفحة Divi.

التغيير الوحيد الذي قمت به هو تصميم الأزرار. لم يندمج الزر الأزرق أيضًا ويبدو النص الأبيض رائعًا على الخلفية الزرقاء.

الترخيص والدعم

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

يمكن شراء Gravity Divi Module من متجر المطور.

افكار اخيرة

توفر وحدة Gravity Divi طريقة رائعة لدمج نماذج Gravity الخاصة بك في تخطيطات Divi الخاصة بك. يضيف ميزات أكثر من مجرد استخدام الرموز القصيرة Gravity Forms. يتم تحسين جميع مزايا نماذج Gravity بواسطة Divi Builder وإعدادات الوحدة ، والتي تتضمن إعدادات الخلفية مثل الصورة والتراكبات والتدرجات اللونية وإعدادات الخط والأزرار والحشو وما إلى ذلك.

إذا كنت مهتمًا باستخدام Gravity Forms مع Divi Builder ، فقد تكون Gravity Divi Module هي الحل الذي تحتاجه.

حان الآن دورك. هل استخدمت Gravity Divi Module؟ أخبرنا برأيك في التعليقات أدناه.

صورة مميزة عبر Bloomicon / shutterstock.com