استخدام الإعدادات المسبقة الافتراضية لـ Divi 5 لتصميم موقعك بأكمله

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

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

ما هي الإعدادات المسبقة الافتراضية في Divi 5؟

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

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

الإعدادات الافتراضية

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

كيفية تحرير عنصر الإعداد الافتراضي المسبق

تحرير الإعداد المسبق الافتراضي واضح ومباشر. انقر على العنصر الذي تريد تغيير الإعدادات الافتراضية لـ (في هذه الحالة وحدة نصية). في أعلى اليمين ، انقر على المحدد المسبق.

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

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

انقر فوق "حفظ الإعداد المسبق" لجعل التغييرات الخاصة بك تأخذ Sitewide.

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

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

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

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

إعدادات مجموعة الخيارات الافتراضية

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

تعرف على إعدادات مجموعة الخيارات

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

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

كيفية تحرير مجموعة خيارات افتراضية مسبقًا

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

فيما يلي مقطع فيديو يوضح الفرق بين تحرير جانب معين من وحدة واحدة وتحرير نفس الجانب مع مجموعة خيارات الإعداد المسبق.

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

ما هو الفرق بين الإعدادات الإعدادات الافتراضية والاستعدادات المخصصة؟

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

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

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

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

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

المستقبل يبدو مشرقًا للمصممين والمطورين على Divi 5!

كيفية تحويل الإعداد المسبق المخصص إلى الإعداد المسبق الافتراضي

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

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

من أين تأتي الأنماط داخل الإعدادات المسبقة الافتراضية؟

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

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

أستطيع أن أرى نفس القيمة (30px) المستخدمة في الإعدادات المسبقة الافتراضية عن طريق الانتقال إلى المحرر المرئي للصفحة ، والنقر فوق " الإعداد المسبق الافتراضي " لوحدة العنوان أو النص ، والتحقق من التصميم> عنوان العنوان لارتفاع H1.

قيمة رمادية في حقل Divi 5 تعني أنها قيمة ورثية ، في هذه الحالة ، ورثت من مخصص السمة

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

كيفية استخدام الإعدادات المسبقة الافتراضية لإنشاء موقع ويب

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

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

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

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

1. تباعد القسم : قم بتضمين هوامش أعلى/أسفل ، هوامش اليسار/اليمنى ، وأي حشوة مطلوبة.
2. ألوان خلفية القسم : قم بإنشاء مجموعة خيارات افتراضية الإعداد المسبق الذي تريد استخدامه في معظم الحالات ومجموعة مخصصة لمجموعة الخيارات المسبقة ولون خلفية بديل/تباين. تذكر أنه يمكن أيضًا تطبيق الإعدادات المسبقة الافتراضية لمجموعة خيار الخلفية على خلفية الأعمدة.
3. الطباعة : ابدأ مع H1-H6S. اعتمادًا على استخدام الوحدة النمطية الخاصة بك ، سترغب في بدء تشغيلها في إعدادات مجموعة الخيارات الافتراضية ضمن نص العنوان للحصول على وحدات النص ونص العنوان لأشياء مثل وحدات Blurb. بعد ذلك ، اعمل على النص العادي ، مع التركيز على مجموعة خيار النص في وحدات النص ومجموعات خيارات نص الجسم الموجودة في أشياء مثل وحدة Blurb.
4. إعدادات التصميم الأخرى : قم بإنشاء إعدادات جماعية للخيار للحدود ، وظلال مربع ، ومرشحات (إذا كنت تصمم صورًا) ، والرسوم المتحركة. بالنسبة لهذه ، لا أميل إلى استخدام الإعدادات المسبقة الافتراضية ولكن إنشاء مسبقات مخصصة يمكنني تطبيقها بشكل انتقائي على عناصر الصفحة.
5. الإعدادات المتقدمة : هذا مشابه للخطوة أعلاه ، لكنني أقوم بإنشاء إعدادات جماعية للخيارات لأشياء مثل التحولات وتأثيرات التمرير. أنا أيضًا أميل إلى عدم استخدام الإعدادات المسبقة الافتراضية ولكن إنشاء مسبقات مخصصة يمكنني تطبيقها بشكل انتقائي على عناصر الصفحة.

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

سيوفر لك الإعدادات المسبقة الافتراضية ساعات

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

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

تنزيل Divi 5 تعلم كل شيء عن Divi 5 جرب Divi 5 Demo