كيفية استخدام مدخلات CSS المخصصة المضمنة من Divi للتحرير المتجاوب المتقدم

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

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

هيا بنا نبدأ.

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

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

نقاط التوقف الرئيسية الثلاثة المستجيبة لديفي لشاشات سطح المكتب والجهاز اللوحي والهاتف هي كما يلي:

• سطح المكتب: 981 بكسل وما فوق
• الجهاز اللوحي: بين 980 بكسل و 768 بكسل
• الجوال: 767 بكسل وما دون

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

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

فهم مربعات إدخال CSS المخصصة لـ Divi

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

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

فيما يلي توضيح لمربعات إدخال CSS المخصصة المختلفة المتاحة لوحدة Call to Action.

يستهدف كل مربع إدخال CSS مخصص فئة CSS معينة داخل العنصر. لرؤية الفئة المستهدفة لعنصر معين ، ما عليك سوى التمرير فوق العنصر والنقر فوق رمز علامة الاستفهام. هناك سترى فئة CSS مستهدفة.

لذلك ، لا تحتاج إلى إضافة فئة CSS إلى مقتطف CSS في مربع الإدخال. إذا قمت بذلك ، فلن يعمل الرمز.

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

كيفية إضافة CSS مخصص إلى نقاط توقف التصميم المتجاوب

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

الآن كل ما عليك فعله هو استخدام علامات التبويب لإضافة CSS إلى أي من شاشات الأجهزة الثلاثة (سطح المكتب والجهاز اللوحي والهاتف).

على سبيل المثال ، لنفترض أنك تريد أن يكون لديك زر العرض الترويجي لـ Call to Action لتوسيع العرض الكامل للوحدة على الجهاز اللوحي والهاتف ولكن ليس على سطح المكتب. يمكنك تحديد علامة تبويب الجهاز اللوحي أسفل مربع إدخال الزر الترويجي وإضافة "display: block؛"

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

يرث جهاز أصغر CSS للأجهزة الأكبر بشكل افتراضي

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

السبب في أن شاشة الهاتف ترث شاشة الجهاز اللوحي هو أنه تم تعيين نقطة التوقف الفعلية (استعلام الوسائط) لشاشة الكمبيوتر اللوحي على الواجهة الخلفية على "max-width: 980px؛" مما يعني أن الرمز المضاف إلى الجهاز اللوحي سيتم تطبيقه أيضًا على الهاتف لأن عرض الهاتف أقل من 980 بكسل. لذلك إذا كنت تريد تطبيق نمط مختلف على الهاتف ، فستحتاج إلى إضافة رمز إضافي إلى مربع إدخال علامة تبويب الهاتف.

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

ما هو CSS المخصص المطبق على الواجهة الخلفية

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

على سطح المكتب ، نضع الزر في أسفل يمين الوحدة.

على الجهاز اللوحي ، نتجاوز رمز سطح المكتب ونقوم ببساطة بتمديد الزر إلى العرض الكامل للوحدة.

على الهاتف ، نتجاوز CSS اللوحي ونعيد الشاشة إلى وضعها الطبيعي.

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

سطح المكتب:

@media only screen and (min-width: 981px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    position: absolute;
    bottom: 0px;
    right: 0px;
}

لوح:

@media only screen and (max-width: 980px) and (min-width: 768px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    display: block;
}

هاتف

@media only screen and (max-width: 767px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    display: inline-block;
}

كيف يتم تخزين CSS في Divi؟

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

لمزيد من المعلومات ، تحقق من منشورنا حول كيفية تسريع موقع Divi الخاص بك.

افكار اخيرة

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

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

ما هي تجربتك مع مدخلات CSS المخصصة لـ Divi؟