الميزات الحصرية Divi 5 (حتى الآن)

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

Divi 5 جاهز للاستخدام على مواقع الويب الجديدة.

8 ميزات حصرية لـ Divi 5 (وكيف تعمل)

يقدم Divi 5 ترقيات مبتكرة لتصميم موقع الويب ويستخدم مجموعة من الأدوات التي تعيد اختراع مهام التصميم وتسريعها ، مما يجعلها أكثر سهولة. توضح الميزات الثمانية التالية إمكانات Divi التي أعيد تنشيطها حديثًا:

1. نقاط التوقف القابلة للتخصيص

ميزة صدرت في 6 فبراير 2025

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

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

ما وراء الثلاثي القياسي

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

مع Divi 5 ، يمكنك تعيين نقاط توقف لـ:

• الهاتف (<767px)
• عبر الهاتف (<860px) - مثالي للعرض المتنقل المناظر الطبيعية
• جهاز لوحي (<980 بكسل)
• جهاز الكمبيوتر اللوحي (<1024px) - يمسك أقراص أكبر وأجهزة مماثلة
• سطح المكتب (> 981px)
• شاشة عريضة (> 1280 بكسل)
• عريض للغاية (> 1440 بكسل)

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

معالجة نقطة التوقف البصرية

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

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

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

يتعلم أكثر

2. إعدادات مجموعة الخيارات

ميزة صدرت في 11 مارس 2025

تعد Option Group Presets واحدة من أكثر الميزات الجديدة إثارة في Divi 5 ، مما يوسع قدراتك على إنشاء نظام تصميم يناسبك. الإعدادات المسبقة لمجموعة الخيارات هي لبنات بناء التصميم الخاصة بك. على الرغم من أن العناصر المسبقة تقوم بإغلاقك في تصميم عنصر معين ، فإن مجموعة خيارات Divi 5 تعمل عبر أي نوع عنصر.

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

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

لماذا هذا يهم سير العمل الخاص بك

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

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

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

يتعلم أكثر

3. وحدات متقدمة

ميزة صدرت في 19 مارس 2025

قامت Divi 5 بتحسين تعاملها مع وحدات CSS ، مما يجعل طريقة التصميم المستجيبة أسهل.

الآن ، يمكنك الوصول إلى مجموعة كاملة من وحدات CSS اللازمة لتصميم الويب اليوم مباشرة داخل المنشئ. هذا يعني أنه يمكنك استخدام وحدات البكسل (PX) ، والنسب المئوية (٪) ، و EMS (EM) ، و EMS الجذر (REM) ، ووحدات المنفذ (VW ، VH ، VMIN ، VMAX) ، وحتى خيارات أكثر تقدماً مثل عرض الأحرف (CH) أو الوحدات الكسرية (FR) للشبكات.

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

لماذا تهم الوحدات المختلفة

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

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

الآن ، اجمع الوحدات مع وظائف CSS مثل Calc () و Min () و Max () و Clamp () وشاهد السحر الحقيقي يحدث. يدعم Divi 5 كل هذه الأشياء ، مما يتيح لك إنشاء تخطيطات سائلة حقًا تتكيف مع أي حجم شاشة.

على سبيل المثال ، قد تقوم بتعيين ارتفاع قسم إلى CALC (80VH - 60px) لجعله يستغرق معظم الشاشة أثناء ترك مساحة لرأس. أو استخدم المشبك (16px ، 4vw ، 22px) للنص الذي ينمو مع الشاشة ولكنه يبقى ضمن حدود قابلة للقراءة.

مرونة المشبك ()

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

قد ترغب في عناوين تنمو بحجم الشاشة ولكن تبقى قابلة للقراءة. في وحدة العنوان ، يمكنك تعيين حجم النص على المشبك (36px ، 5vw ، 72px). لن يكون العنوان أصغر من 36 بكسل أو أكبر من 72 بكسل ، ولكن بين تلك الأحجام ، سوف يتوسع بنسبة 5 ٪ من عرض إطارات العرض.

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

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

• للنص ، تحافظ وحدات REM على كل شيء بالتناسب. إذا قمت بتعيين نص جسمك على 1REM والعناوين على 2.5 ، فإن تغيير حجم الخط الأساسي يقوم بتحديث كل شيء بالتناسب.
• للتخطيطات ، يمكنك محاولة خلط وحدات الثابتة والسوائل. قد يعمل الشريط الجانبي بشكل أفضل في 300 بكسل ، في حين أن المحتوى الرئيسي يمكن أن يستخدم CALC (100 ٪ - 350 بكسل) لملء المساحة المتبقية.
• للتباعد ، تقوم وحدات EM بإنشاء حشوة تتراوح مع حجم النص. هذا يبقي نسب التصميم الخاصة بك متسقة حتى عندما تتغير أحجام النص.

يلعب أيضًا بشكل جيد مع الميزات الأخرى التي تمت مناقشتها

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

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

• إنشاء متغير رقم مثل حجم العنوان: المشبك (26px ، 5vw ، 82px) ؛ لعناوين H1 الخاصة بك. قم بتطبيق هذا المتغير على النص المسبق الخاص بك. ستقوم عناوينك الآن بسلاسة بين 26 بكسل على الهاتف المحمول و 82 بكسل على سطح المكتب ، مع حساب السوائل 5VW بين تلك الأحجام.
• تعيين متغير رقم للمشبك (20 بكسل ، 5VW ، 80 بكسل) ثم استخدامه كهوامش ، لديك تباعد ضيق على متن متنقلة وغرفة التنفس السخية على سطح المكتب ، مع انتقال سلس بين.
• قم بتعيين تباعد أساسي باستخدام وحدة مساحة متغيرة الأرقام: 20 بكسل ، واستخدمها مع CALC () في إعدادات التخطيط الخاصة بك. على سبيل المثال ، قم بتطبيق calc (var (–Space-Unit) * 2) للحصول على فجوات أكبر و calc (var (–Space-unit) / 2) للمساحات الأكثر تشددًا. عند تحديث القيمة الأساسية ، يتم ضبط جميع التباعد المشتق بشكل متناسب.

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

يتعلم أكثر

4. متغيرات التصميم

ميزة صدرت في 3 أبريل 2025

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

فكر في هذا: يتيح لك معظم البنائين تعيين لون أساسي يتم تحديثه في كل مكان. ولكن ماذا لو كنت تريد تغيير رقم هاتفك عبر صفحات متعددة؟ أو تبديل صورة متكررة تستخدم في موقعك؟ Divi 5 يتعامل مع هذه الحالات بسهولة.

تعيش جميع متغيراتك في لوحة بسيطة في الشريط الجانبي للبناء المرئي. إنه نظيف وسهل العثور عليه ، ويضع كل شيء في مكان واحد.

مباراة مثالية مع الإعدادات المسبقة

تعمل متغيرات التصميم والإعدادات المسبقة (كلا الإعدادات المسبقة لمجموعة الخيارات وإعدادات العناصر) معًا لإجراء تصميم قابل للصيانة وقابل للتطوير. يمكنك إنشاء الإعدادات المسبقة التي تشير إلى متغيراتك ، وإنشاء نظام تصميم مرن.

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

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

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

عند تغيير متغير ، كل شيء يستخدمه على الفور. هذا يحول ما قد يكون ساعات العمل في بضع ثوان من النقر.

كيف يساعد هذا في إنشاء تصميم قابل للصيانة

دعونا نلقي نظرة على بعض الأمثلة العملية لمتغيرات التصميم في العمل:

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

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

يتعلم أكثر

5. الصفوف المتداخلة

ميزة صدرت في 17 أبريل 2025

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

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

بناء مع العمق

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

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

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

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

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

فقط الخطوة الأولى

الصفوف المتداخلة هي مجرد بداية لتطور تخطيط Divi 5. يعمل الفريق على نظام تخطيط قائم على FlexBox الكامل لجعل Divi أكثر مرونة.

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

بدلاً من التسرع في الميزات نصف المخبوزة ، يقوم فريق Divi Development ببناء أساس صخري صخري لمستقبل تصميم التصميم. تبني كل خطوة على آخرها ، مما يؤدي إلى إنشاء نظام مقاوم للمستقبل وسهل الاستخدام.

يتعلم أكثر

6. مجموعات الوحدة النمطية

الميزة التي تم إصدارها في 1 مايو 2025

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

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

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

إنشاء مجموعات مخصصة للوحدة

تفتح مجموعات الوحدة النمط إمكانيات لا يمكن للوحدات المفردة التعامل معها عادة. قم بإنشاء بطاقة خدمة حيث تحتاج إلى صورة خلفية ، ورمز تراكب ، وعنوان ، ووصف ، وزرتين عمل: "تعرف على المزيد" و "Get QUOTE".

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

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

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

تتمثل الميزة الرئيسية في الجمع بين التحكم في التصميم في المبنى من الصفر مع راحة التعامل مع عناصر متعددة كقطعة واحدة.

بناء مكتبات مكونات قابلة لإعادة الاستخدام

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

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

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

يعمل بسلاسة مع نظام تصميم Divi 5

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

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

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

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

يتعلم أكثر

7. مدير السمة

الميزة التي تم إصدارها في 16 مايو 2025

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

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

ثم الصق أنماط الزر فقط على نموذج الاتصال.

اختر واختر ما يسافر

يقسم Divi 5 كل عنصر إلى أنواع مختلفة من السمات. يمكنك اختيار أي منها لنسخه:

• جميع السمات - يتم نسخ كل شيء
• سمات التصميم - الألوان ، التباعد ، الإعدادات المسبقة ، ولكن لا يوجد نص أو صور
• سمات النمط - فقط التغييرات المخصصة الخاصة بك
• سمات المحتوى - النص والصور فقط
• الإعدادات المسبقة - المهام المسبقة فقط

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

يعمل بين الوحدات المختلفة

يمكنك نسخ السمات من نوع واحد من الوحدة النمطية ولصقها على نوع مختلف. على سبيل المثال ، يمكنك النسخ من وحدة مكالمة إلى Action Module ولصقها على نموذج اتصال. يحدد Divi 5 الإعدادات التي تعمل على كل من الوحدات وتتجاهل الباقي.

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

اختصارات على مستوى المجموعة

نظام السمة يتعمق مع إدارة المجموعة الانتقائية. تخطي لوحات الإعدادات بالكامل. انقر بزر الماوس الأيمن فوق وتطبيق مجموعات سمات محددة مباشرة من قائمة السياق.

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

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

السرعة من خلال الاختصارات

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

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

يلعب بشكل جيد مع نظام التصميم الخاص بك

يتصل مدير السمة مباشرة بالنظام الإيكولوجي المسبق لـ Divi 5. تنتقل اتصالات النظام هذه عند نسخ وحدة نمطية باستخدام إعدادات مجموعة الخيارات ومتغيرات التصميم.

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

يتعلم أكثر

8. الإعدادات البحث والتصفية

الميزة التي تم إصدارها في 29 مايو 2025

بناء مواقع الويب يعني التغييرات في الإعدادات. حزم وحدات Divi العشرات من الخيارات في لوحاتها ، والبحث عبر علامات التبويب لهذا الحقل لون واحد يمكن أن يأكل يومك. يعيد Divi 5 ميزة البحث من Divi 4 ، ولكنه يجعلها تعمل بشكل أفضل.

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

هذا يلغي النقر والتمرير الذي يبطئ عملك. بدلاً من فتح علامات التبويب والصيد من خلال المجموعات ، يمكنك العثور على ما تحتاجه في ثوان.

تصفية ما قمت بتغييره

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

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

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

خيارات التصفية الذكية

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

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

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

يتعلم أكثر

كيف يتراكم Divi 5 مقابل الخيارات الشائعة

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

ماذا يعني هذا لمشاريعك

مزيج Divi 5 من الميزات يخلق نظام تصميم لا يمكن للبنائين الآخرين مطابقة تمامًا. تضع مجموعة الخيارات المسبقة ومجموعات الوحدة النمطية وحدها Divi 5 قبل المنافسين.

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

ماذا سيأتي بعد ذلك؟

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

تخطيطات Flexbox

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

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

تحديثات Loop Builder و WooCommerce

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

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

ألوان متقدمة

يتيح لك دعم الألوان النسبية ذات اللون والتشبع والخفة (HSL) بناء علاقات ألوان رياضية. قم بتعيين لونك الأساسي مرة واحدة ، ثم قم بإنشاء الاختلافات تلقائيًا: "الأزرق الأساسي ولكن أخف وزناً بنسبة 20 ٪" أو ظلال مكملة عند تغيير القاعدة.

التخطيط التجريبي والتخطيط للهجرة

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

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

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

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

جاهز لتجربة Divi 5؟ إليك كيفية البدء

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

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

بمجرد تثبيت WordPress ، قم بتحميل Divi 5 كما يمكنك تحميل السمة العادية: المظهر> الموضوعات> إضافة موضوع جديد> تحميل. قم بتفعيل السمة ، وتسجيل الدخول مع بيانات الاعتماد الخاصة بك ، وبناء! سيوضح لك أول بناء لك سبب إعادة بناء كل شيء من الصفر.

تذكر: استخدم Divi 5 فقط لمواقع الويب الجديدة الآن. لا نوصي بترحيل المواقع الموجودة خلال مرحلة ألفا.