تسليط الضوء على البرنامج المساعد Divi: Divi Module Builder

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

في هذه المقالة ، سألقي نظرة على المكون الإضافي وأرى ما يمكن أن يفعله ومدى سهولة استخدامه. يتطلب Divi 3.0.50 أو أعلى ويعمل مع كل من Divi و Extra. إنه متاح من موقع المطور: DiviPlugins.com.

تثبيت Divi Module Builder

بمجرد تنشيط المكون الإضافي ، انقر فوق DMB Activation Page . بدلاً من ذلك ، يمكنك رؤية هذه الشاشة بالانتقال إلى الوحدات النمطية المخصصة في لوحة المعلومات والنقر فوق الترخيص .

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

إضافة وحدة

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

مجالات

يمكن أن تحتوي الوحدة النمطية الخاصة بك على العديد من الحقول كما تريد. كل حقل له خصائص حقل بداخله. فيما يلي نظرة فاحصة على كل خاصية من خصائص الحقل:

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

معرف الحقل - قيمة فريدة ستستخدمها للإشارة إلى الحقل بتنسيق HTML. استخدم فقط الأحرف الصغيرة والأرقام والشرطات السفلية لمعرفات الحقول.

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

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

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

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

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

الشفرة

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

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

إنشاء وحدة

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

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

تظهر الوحدة الآن في Divi Builder. يمكنني أن أضيف إلى الصفحة تمامًا مثل أي وحدة Divi.

تتضمن علامة التبويب "المحتوى" الحقول التي أضفتها مع تسمياتي.

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

الوحدات

يمكنك رؤية قائمة الوحدات في قائمة لوحة القيادة. اذهب إلى Custom Modules ، Modules . هنا يمكنك تعديل أو حذف الوحدات الخاصة بك. يظهر ما إذا تم تشغيل PHP أو إيقاف تشغيله لكل وحدة. إذا كنت ترغب في استنساخ وحدة ، فسيتعين عليك عرضها في الإعدادات .

إعدادات الوحدة المخصصة

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

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

أضف التبعية

هنا يمكنك إضافة تبعيات CSS و Javascript لجهات خارجية. قم بإضافتها كعناوين URL خارجية أو داخلية. اختر CSS أو Javascript من مربع القائمة المنسدلة ، وأضف الاسم ، وأضف عنوان URL. يمكن استخدامها بعد ذلك على أي صفحة. يعطي مثالاً على استخدام Font Awesome. هذه طريقة ممتازة لإنشاء تبعية في مكان واحد ثم استخدامها في أي مكان.

مثال منشئ وحدة Divi - شبكة مدونة مخصصة

بدلاً من إنشاء وحدة "موافق" كمثال ، أعرض المثال الرائع الذي أنشأه المطور - Custom Blog Grid (متاح للتنزيل على موقع الويب الخاص بالمطور مجانًا). يتضمن 3 حقول ، HTML ، PHP ، و CSS. هنا نظرة على كل واحد.

وحدة شبكة مدونة مخصصة

الحقل 1 يسمى الفئات ، ويستخدم الفئات كمعرف ، ويتم تعيين نوع الحقل إلى نص.

الحقل 2 يسمى تأثير صورة أبيض وأسود. المعرف هو عامل التصفية ونوع الحقل هو نعم / لا تبديل. تم إنشاء المرشح في CSS.

يتم تسمية الحقل 3 بعنوان المشاركة ويستخدم post_title كمعرّف. يتم تعيين نوع الحقل إلى نص وتم تمكين علامة التبويب تصميم. سنرى تخصيصات لهذا الحقل في الوحدة النمطية. يُعطى هذا الحقل فئة H2 في HTML.

تم تحديد PHP بحيث يمكن استخدامها في مربع كود إخراج HTML.

يتم إضافة CSS المخصص إلى مربع إخراج CSS.

ها هي جافا سكريبت. ستحتاج إلى فهم جيد لـ HTML و PHP و CSS و Javascript لتحقيق أقصى استفادة من هذا المكون الإضافي. بمعنى آخر ، هذا مكون إضافي للمطورين.

وحدة شبكة المدونة المخصصة في Divi Builder

بمجرد نشر الوحدة ، ستجدها في Divi Builder.

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

تم تمكين علامة تبويب التصميم لهذه الوحدة. يتضمن إعدادات للنص ونص عنوان المنشور والحدود والتباعد والرسوم المتحركة.

نتائج شبكة مدونة مخصصة

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

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

الترخيص والتوثيق

هناك ثلاثة تراخيص للاختيار من بينها: فردية ، وغير محدودة ، ومدى الحياة. يغطي الترخيص غير المحدود مواقع الويب غير المحدودة ويتضمن سنة واحدة من التحديثات والدعم. يتضمن ترخيص Lifetime Unlimited Sites تحديثات ودعم مدى الحياة.

يتم توفير الوثائق على موقع المطور. يتم تضمين رمز المثال مع إرشادات خطوة بخطوة.

افكار اخيرة

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

نريد أن نسمع منك. هل جربت Divi Module Builder؟ أخبرنا برأيك في التعليقات.

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