كيفية بناء صفحاتك بكفاءة مع Divi 5

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

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

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

مع ذلك ، دعنا نغوص.

فهم واجهة المستخدم الحديثة لـ Divi 5

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

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

تطور الباني البصري

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

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

التنقل البديهي

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

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

ضوابط التصميم المستجيبة

يقدم Divi 5 نقاط توقف قابلة للتخصيص للتحكم الدقيق في كيفية تكييف تصميماتك عبر الأجهزة. يمكنك الاختيار من بين سبع نقاط توقف محددة مسبقًا أو تعيين قيم مخصصة لمطابقة قرارات الأجهزة المحددة. هذا يضمن تخطيطات Pixel-Perfect بدون تعديلات CSS اليدوية.

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

بناء صفحتك بميزات Divi 5 الفريدة

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

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

1. متغيرات التصميم لتصميم فعال

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

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

كيفية استخدام متغيرات التصميم

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

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

يمكن أيضًا استخدام متغيرات الأرقام للتباعد. على سبيل المثال ، يمكنك إنشاء تباعد قياسي لجميع الأعمدة والصفوف عبر موقع الويب الخاص بك. باستخدام صيغة CALC () ، مثل CALC (80 ٪ - 60px) ، يحدد عرض عنصر التصميم على أنه 80 ٪ من الحاوية ، مع إضافة 30 بكسل من الحشو إلى أي من الجانبين. حدد Calc من القائمة المنسدلة لتطبيق الصيغة.

أدخل صيغة CALC () في حقل القيمة . انقر فوق الزر "حفظ المتغيرات" لإضافته إلى مدير المتغير.

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

أخيرًا ، انقر فوق أيقونة Insert Dynamic Content لتحديد متغير التباعد العالمي.

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

نصائح لاستخدام متغيرات التصميم

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

2. التصميم القائم على الإعداد المسبق مع إعدادات مجموعة الخيارات

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

الإعدادات المسبقة لعنصر Divi 5

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

الإعدادات المسبقة لمجموعة خيار Divi 5

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

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

كيفية استخدام الإعدادات المسبقة بشكل فعال

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

إنشاء عنصر مسبقًا

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

انقر فوق مسبق جديد من الأنماط الحالية لإنشاء إعداد مسبق جديد.

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

قم بإنشاء مجموعة خيارات محددة مسبقًا

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

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

بعد ذلك ، انقر فوق إضافة مسبق جديد .

نمط الحدود ، اسمها ، وحفظ الإعداد المسبق.

نصائح لاستخدام الإعدادات المسبقة القائمة على تصميم Divi 5

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

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

3. الصفوف المتداخلة للتخطيطات المرنة

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

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

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

ستؤدي عناصر التحكم في Flexbox القادمة في Divi 5 إلى تعزيز خيارات تحديد المواقع ، مما يوفر محاذاة ومسافة دقيقة للتصميمات المعقدة مثل جداول التسعير أو المحافظ أو أقسام المحتوى متعددة المستويات.

كيفية استخدام الصفوف المتداخلة

لتسخير قوة الصفوف المتداخلة ، اتبع هذه الخطوات في الباني البصري:

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

بعد ذلك ، اختر الوحدة النمطية للعمود الأول. لهذا المثال ، صورة.

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

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

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

نصائح لاستخدام الصفوف المتداخلة

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

4. مجموعات الوحدات للمحتوى المنظم

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

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

كيفية استخدام مجموعات الوحدة النمطية

لإنشاء مجموعة وحدة ، أضف صفًا جديدًا وحدد بنية عمود. حدد وحدة المجموعة من خيارات Divi 5 المتاحة.

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

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

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

نصائح لاستخدام مجموعات الوحدة النمطية

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

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

5. وحدات متقدمة للتصميم الديناميكي

تدعم ميزة Divi 5 Advanced Units مجموعة واسعة من وحدات CSS (PX ، VW ، REM ، ٪ ، إلخ) ووظائف مثل CALC () ، المشبك () ، MIN () ، و MAX () ضمن حقل إدخال واحد ، مما يتيح تصميمات ديناميكية وسريعة الاستجابة. على سبيل المثال ، يمكنك تعيين عرض القسم على calc (100 ٪ - 40px) أو المشبك (20px ، 3vw ، 40px) للطباعة السوائل التي تتساقط على أساس حجم منفذ العرض.

يمكن أيضًا استخدام الوحدات المتقدمة كمتغيرات تصميم لوضع القواعد العالمية والحفاظ على التصميمات متسقة في موقعك.

كيفية استخدام الوحدات المتقدمة

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

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

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

بجانب حقل العرض ، انقر فوق الرمز - للكشف عن خيارات الوحدة المتقدمة.

من قائمة القائمة المنسدلة ، حدد VW (عرض عرض العرض) وأدخل 50 . هذا سيخبر العنوان ليشغل 50 ٪ من عرض ميناء العرض. The Viewport هو المنطقة المرئية لنافذة متصفح الويب. لذلك ، بغض النظر عن مدى عرض نافذة المتصفح ، ستكون دائمًا نصف عرض نافذة المتصفح.

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

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

• ابدأ بسيطًا: ابدأ بالوحدات الأساسية مثل PX أو ٪ للتصميمات المباشرة ، ثم تجربة Clamp () أو Calc () أو VH أو VW لتأثيرات الاستجابة.
• استخدم المشبك للطباعة: تطبيق المشبك () على أحجام الخطوط أو التباعد لإنشاء تصاميم سائلة يمكن الوصول إليها والتي تتكيف مع أي حجم شاشة بدون نقاط التوقف اليدوية.
• يُمزج مع متغيرات التصميم: المتجر يستخدم بشكل متكرر وحدات للعناوين ونص الجسم كمتغيرات تصميم للحفاظ على الاتساق وتبسيط التحديثات.

تمنحك الوحدات المتقدمة دقة CSS المخصصة داخل واجهة Divi بدون رمز ، مما يجعل من السهل بناء صفحات ويب ديناميكية ومهنية تتكيف بسلاسة مع أي جهاز.

6. تكامل Divi AI

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

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

مع Divi AI ، يمكنك تسريع عملية التصميم ، أو التغلب على كتلة الكاتب ، أو الحصول على القليل من الدفع الإبداعي عند الحاجة.

كيفية استخدام Divi AI

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

لاستخدام Divi AI على وحدة نصية موجودة ، تحوم فوق منطقة النص وانقر فوق أيقونة Divi AI في علامة تبويب المحتوى.

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

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

نصائح لاستخدام Divi AI

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

أفضل الممارسات لبناء صفحات الويب مع Divi 5

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

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

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

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

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

بناء صفحات ويب أكثر ذكاءً مع Divi 5

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

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

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