كيف يغير التصميم المستند إلى الإعداد المسبق نموذج تصميم Divi

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

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

عمركان للتصميم المستند إلى الإعداد المسبق

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

إعدادات العناصر المسبقة: حزم تصميم قابلة لإعادة الاستخدام

الإعداد المسبق حفظ تكوينات التصميم بأكملها لعناصر DIVI محددة. يحتوي Divi حاليًا على 4 أنواع مميزة عناصر: الوحدات النمطية والأعمدة والصفوف والأقسام. وعندما يتعلق الأمر بالوحدات النمطية ، فإن الإعدادات المسبقة هي أيضًا فريدة من نوعها لنوع الوحدة النمطية (الزر ، النص ، CTA ، إلخ). عندما تقوم بتطبيق عنصر مسبقًا ، يتم ورث جميع الإعدادات المرتبطة به مثل الطباعة والألوان والتباعد والتأثيرات على الفور عند تطبيقها. تركيز الإعدادات المسبقة العناصر على النحو التالي:

• ضمان الاتساق البصري عبر الصفحات
• تقليل مهام التصميم المتكررة
• السماح بالتحديثات العالمية للتحريرات الأسرع

إعدادات مجموعة الخيارات: التحكم في التصميم المعياري

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

• تطبيق الأنماط المشتركة على عناصر مختلفة
• قابلة للتكديس للتخصيص المتقدم
• السماح بتحريرات عالمية في الوقت الفعلي دون التأثير على الوحدات الفردية

إنشاء سير عمل منظم مع الإعدادات المسبقة

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

الخطوة 1: تحديد الأنماط الأساسية مع إعدادات مجموعة الخيارات

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

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

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

الخطوة 2: إنشاء مسبقات عنصر لوحدات محددة

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

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

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

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

الخطوة 3: تنفيذ وضبط حسب الحاجة

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

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

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

الخطوة 4: حافظ على أنماطك منظمة داخل مكتبة Divi

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

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

الخطوة 5: تكرار وتحسين

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

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

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

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

فوائد سير العمل المستند إلى الإعداد المسبق

الآن بعد أن مررنا بأساسيات إنشاء سير عمل منظم مع الإعدادات المسبقة لـ Divi ، دعنا نذهب إلى بعض الفوائد التي تأتي مع هذا النهج.

السرعة: تقليل وقت التصميم مع الإعدادات المسبقة الجاهزة للاستخدام

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

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

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

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

الاتساق: الحفاظ على التصميم الموحد عبر الصفحات

ميزة واحدة رئيسية لسير العمل المستندة إلى الإعداد المسبق هو الاتساق. باستخدام Presets Element and Options Group ، يمكنك التأكد من أن كل صفحة على موقع الويب الخاص بك تلتزم بنفس قواعد التصميم ، من الطباعة إلى التباعد إلى الألوان.

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

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

قابلية التوسع: بسهولة توسيع وتحديث تصميم الموقع

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

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

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

المرونة: تجاوز العناصر الفردية دون كسر النظام

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

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

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

ابدأ في تصميم أكثر ذكاءً مع الإعدادات المسبقة في Divi 5

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