تسليط الضوء على Divi Plugin: Caldera Forms Style Customizer لـ Divi و Extra

تقوم Caldera Forms بعمل رائع في المزج مع تصميم موقع الويب الخاص بك. ماذا لو أردت تصميمه باستخدام أدوات التصميم المألوفة لـ Divi و Extra Theme Customizer؟ يمكنك القيام بذلك باستخدام مكون إضافي تابع لجهة خارجية يسمى Caldera Forms Style Customizer لـ Divi و Extra.

يمكن تصميم نماذج Caldera باستخدام خيارات Theme Customizer القياسية ، ومع ذلك ، فإن هذه الخيارات تصمم السمة. هذا يعني أنه إذا قمت بتغيير نمط نص النموذج الخاص بك ، فإنك تقوم أيضًا بتغيير نمط النص الأساسي لموقع الويب الخاص بك. إذا كنت ترغب في تصميم النماذج الخاصة بك بشكل منفصل عن المحتوى الخاص بك ، فعادة ما يتعين عليك تصميم النماذج يدويًا باستخدام CSS. يعمل Caldera Forms Style Customizer لـ Divi و Extra على حل هذه المشكلة عن طريق إضافة ميزات التصميم إلى Theme Customizer.

في هذا البرنامج المساعد ، سنلقي نظرة على Caldera Forms Style Customizer لـ Divi و Extra plugin ونرى مدى سهولة استخدامه. يمكن شراء هذا المكون الإضافي التابع لجهة خارجية من خلال نماذج Caldera. كما يوحي الاسم ، فهو يعمل مع كل من Divi و Extra.

التثبيت والتفعيل

قم بتحميل وتنشيط البرنامج المساعد كالمعتاد. لا توجد إعدادات لضبطها. الميزات جاهزة للاستخدام.

تخصيص نموذج

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

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

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

حقول النص

تعمل حقول النص على تغيير لون النص والعنصر النائب والحد ، بالإضافة إلى عرض الحدود ونصف قطر الحد وارتفاع سطر واحد للحقول.

تحوم حقول النص

يقوم Text Fields Hover بتغيير ألوان النص والحقل والحدود.

التركيز على حقول النص

يعمل التركيز على حقول النص على تغيير لون النص والخلفية وحدود الحقل الذي تم التركيز عليه. في هذا المثال ، يكون الحقل الموجود في المنتصف عبارة عن مؤشر الماوس ولكن الحقل ذي الخلفية المظلمة به تركيز.

حدد القائمة المنسدلة

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

القائمة المنسدلة حدد تحوم

القائمة المنسدلة يتحكم تحديد Hover في لون الخلفية والنص والسهم والحد عند التمرير.

مربعات الاختيار وأزرار الراديو

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

مفاتيح التبديل

يضبط Toggle Switches ألوان الخلفية والخط والحدود لكل من المفتاح غير المحدد والمختار بشكل فردي. يمكنك أيضًا ضبط عرض الحدود ونصف قطر كلا المحولين معًا.

تبديل مفاتيح تحوم

Toggle Switches Hover يضبط ألوان الخلفية والخط والحدود الخاصة بالمفتاح المحدد وغير المحدد بشكل مستقل. هذا هو مفتاح التبديل غير المحدد.

الأزرق هو المفتاح المحدد.

زر الإرسال

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

إرسال زر تحوم

يتحكم Submit Button Hover في ألوان التمرير للخلفية والخط والحد.

زر إعادة الضبط

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

إعادة تعيين زر تحوم

Reset Button Hover يضبط ألوان الزر للخلفية والنص والحد.

أزرار أخرى

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

الأزرار الأخرى تحوم

تتحكم الأزرار الأخرى Hover في ألوان التحويم للخطوط والحدود والخلفية.

منتقي التاريخ

يتضمن منتقي التاريخ ألوانًا عادية وألوانًا تحوم داخل علامة التبويب نفسها. اضبط ألوان الخط والخلفية. في هذا المثال ، أحوم فوق الرقم 10 ويتم تحديد الرقم 12.

تحميل قائمة الملفات

يتحكم تحميل قائمة الملفات في ألوان الخلفية والنص داخل قائمة الملفات التي تم تحميلها.

فاصل المقطع

يتحكم فاصل المقطع في لون فاصل المقطع وعرض الحدود والهوامش العلوية والسفلية.

فتات الخبز

تتيح لك Breadcrumbs اختيار ألوان الخطوط لكل من الصفحة النشطة والروابط الأخرى ، والفاصل ، والخلفية ، والحد. اضبط عرض الحدود ونصف القطر.

تنبيه النجاح

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

متنوع

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

أمثلة

لقد قمت بإنشاء نموذج تحميل استئناف (في الواقع تم تضمينه في نماذج Caldera ، لكنني قمت بالنقر فوق الزر لتحديده) ، وقمت بتعيينه كنموذج. أولاً ، أريد تصميم الصفحة باستخدام Divi Builder.

لقد أضفت صورة خلفية واخترت ألوانًا تتباين بدلاً من أن تمتزج مع الخلفية.

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

استيراد و تصدير

من السهل استيراد أو تصدير أنماط Caldera Forms التي قمت بإنشائها في أداة التخصيص. في لوحة القيادة ، انتقل إلى نماذج Caldera ، وأنماط - استيراد / تصدير . يقوم هذا باستيراد وتصدير الأنماط كملف JSON ، مما يسمح لك بسهولة استخدام أنماط Caldera Form على أي موقع ويب يستخدم هذا المكون الإضافي. ستتم الكتابة فوق كل الأنماط الخاصة بك بنمط الملف المستورد.

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

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

افكار اخيرة

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

لا يمكن تصميم نماذج فردية باستخدام إعدادات أداة التخصيص. تستخدم جميع النماذج هذا التصميم نفسه كإعداد عالمي ويجب أن يتم تصميمها على أساس فردي باستخدام ميزات التصميم الخاصة بـ Caldera. هذه هي طبيعة أداة تخصيص السمة. إذا كنت مهتمًا بتصميم نماذج Caldera الخاصة بك على أساس عالمي ، فليس هناك طريقة أسهل للقيام بذلك من استخدام Caldera Forms Style Customizer لـ Divi و Extra.

نريد أن نسمع منك. هل جربت Caldera Forms Style Customizer لـ Divi و Extra plugin؟ أخبرنا برأيك في التعليقات.

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