قم ببناء الوحدات النمطية الخاصة بك مع مجموعات وحدة Divi 5

هل تريد إنشاء وحدات DIVI مخصصة دون لمس خط رمز؟ مع مجموعات الوحدات النمطية الجديدة لـ Divi 5 ، يمكنك الآن الجمع بين عناصر متعددة في تصميم واحد قابل لإعادة الاستخدام - كل ذلك من داخل البناء المرئي. لا جافا سكريبت. لا PHP. مجرد سحب وإسقاط وتصميم.

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

ملاحظة: Divi 5 جاهز للاستخدام على مواقع الويب الجديدة ، لكننا لا نوصي بتحويل المواقع الحالية إلى Divi 5 حتى الآن. سترى شيئًا منا عندما نكون واثقين في عملية التحديث.

ما هي مجموعات الوحدة النمطية الجديدة لـ Divi؟

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

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

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

كيفية إنشاء وحدات Divi الخاصة بك

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

1. قم بإنشاء وحدة Blurb الخاصة بك

الوحدة النمطية المدمجة لدينا

وحدة Blurb هي عنصر أساسي في العديد من تصميمات Divi. إنها وحدة نمطية ، ولكن عندما تقوم بتفكيكها ، فإنها تحتوي على بعض الأشياء التي تجعلها تنقر. هؤلاء هم:

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

تشريح الوحدة النمطية

إنشاء مجموعة الوحدة النمطية الخاصة بك

فيما يلي مثال على وحدة نوبة مع رمز على الجانب الأيسر وتكرار متطابق بصريًا لوحدة blurb باستخدام A:

المجموعة ، الصف الداخلي ، العمود (1) مع وحدة رمز ، والعمود (2) مع وحدة العنوان والنص.

يتم تشغيل الأشعة السينية لرؤية الهيكل العظمي لكل منهما لرؤية أوجه تشابههم ، على الرغم من أنها شيدت بشكل مختلف.

الشيء الوحيد المميز في هذا الترتيب هو أن العمود الأول يتم تعيينه على عرض 18 ٪ ، والثاني يحتل عرض 82 ٪ (خيارات تغيير حجم الأعمدة جديدة مع تحديث ميزة الصفوف المتداخلة).

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

2. قم بإنشاء وحدة جداول التسعير الخاصة بك

وحدة جدول التسعير المدمجة لدينا

بعض وحدات Divi لديها الكثير مما يحدث. هذا هو الحال مع وحدة جدول التسعير. هناك العديد من الحقول لكل جدول تسعير كما ترون أدناه.

تشريح وحدة جدول التسعير

إنشاء مجموعة وحدة جدول التسعير الخاصة بك

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

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

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

3. قم بإنشاء وحدة الشهادة الخاصة بك

الوحدة الشهادة المدمجة لدينا

الوحدات النمطية لشهادة Divi هي واحدة أخرى لها الكثير. ويشمل ما يصل إلى أربعة عناصر نصية مختلفة وزوج من خيارات الصورة/الأيقونة.

إنشاء مجموعة الوحدة الشهادة الخاصة بك

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

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

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

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

احفظ الوحدة النمطية المخصصة كعنصر عالمي

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

ستظهر وسيط حيث يمكنك تسمية الوحدة النمطية لسهولة الاستخدام لاحقًا. تبديل " Save as Global " لتخزينها في مكتبة Divi. أي تغيير تقوم بإجراء تحديثات لاحقًا لكل نسخة عبر موقعك.

سيكون لعنصرك العالمي الآن لون أخضر مميز لمساعدتك في ملاحظة أنه عالمي.

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

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

الحصول على Divi Cloud

بناء شيء جديد اليوم

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

كان الكثير مما تم تغطيته أعلاه ممكنًا مع Divi قبل أن تسقط المجموعات ، لكنها تجعل الأمور أسهل. خاصة عندما نطلق Flex و Loop Builder ، ستصبح المجموعات عنصرًا أساسيًا في تصميمك باستخدام Divi.

هل أنت مستعد للتسوية؟ احصل على موقع جديد واختبر أول وحدة مخصصة لك اليوم.