إن جعل موقعك متميزًا عن الآخرين هو في بعض الأحيان أمر أسهل من الفعل. لحسن الحظ، يمكنك المشاركة في أن تصبح شخصًا صغيرًا من خلال إضافة لمسات التخصيص الإبداعية التي تضمن ذلك بلوق الخاص بك تبرز من الآخرين.
سأوضح لك في هذا البرنامج التعليمي كيفية استخدام Divi Builder للتخصيص بلوق الخاص بك، وخاصة منطقة CSS.
هذه هي المنطقة التي أتحدث عنها:
ما يعنيه هذا هو أن أي تغييرات نجريها هنا لن تكون فعالة إلا على الصفحة التي نقوم بتحريرها. هذه ميزة مثيرة للاهتمام ومفيدة بشكل لا يصدق!
هذه هي النتيجة النهائية التي سنحصل عليها في نهاية هذا البرنامج التعليمي. لون خلفية قائمة التنقل التي تتغير وفقًا للصفحة التي تزورها. كخيار إضافي ستلاحظ أن الرموز تتغير أيضًا اللون.
سأوضح أولاً كيفية تطبيق لون الخلفية في القائمة. ثم سأوضح لك بشكل منفصل كيفية جعل الرموز الاجتماعية متطابقة.
إذا لم تكن قد قرأت بعد البرنامج التعليمي لدينا على عرض لموضوع WordPress Divi، أنا أدعوك للقيام بذلك.
دعونا نبدأ!
تطبيق الألوان على القوائم
أولاً ، أنا أستخدم تنسيق الرأس الافتراضي. إذا كنت تستخدم تنسيقًا آخر ، فيجب أن يظل هذا البرنامج التعليمي فعالاً لأن المعرف العام لـ "divs" على Divi هو نفسه لجميع التنسيقات (# main-header) ، على حد علمي. إذا كان لديك مشاكل مع التنسيقات الأخرى.
نحتاج إلى التأكد من ظهور الروابط في الأسفل. الألوان التي اخترتها ، والتي ستجدها على Coolors.co إذا كنت ترغب في استخدامها ، موجودة في الجانب الأكثر قتامة ، لذلك يجب أن أجعل رابط النص بلون فاتح. اخترت اللون الأبيض.
أنا أستخدم rgba (255,255,255,0.6،XNUMX،XNUMX،XNUMX) والذي سيكون لون الارتباط والأبيض الداكن كلون الارتباط النشط (للتأثير المرئي المطلوب)
ثم انتقل إلى الصفحة التي تريد تطبيق التغيير الأول عليها (يجب أن تشاهد الروابط القائمة في مكان). انقر على أيقونة "الخط الثالث" وسيظهر مربع خيارات.
أضف الآن CSS التالية في هذا المربع:
# باليد رأس {خلفية: #474f61. }
يجب أن يكون لديك شيء مشابه لهذا ، لا تنس تغيير الكود السداسي إلى أي لون تريده:
اضغط على " حفظ وتحديث وسوف ينطبق هذا على القائمة الرئيسية ، كل ذلك في سطر واحد من التعليمات البرمجية.
الآن تحتاج فقط إلى إضافة هذا الرمز نفسه لجميع صفحاتك وتغيير الرمز السداسي في كل مرة.
أيقونات الشبكة الاجتماعية (اختياري)
بالنسبة لهذا الجزء ، سنقوم بتعديل الكود الذي قمنا به بالفعل ، ثم نضيف بعض الكود على مستوى CSS للموقع ، وسأشرح لماذا يجب إضافة بعض CSS في صفحات فردية ولماذا لا يجب يكون.
لذا عليك أولاً التأكد من قيامك بإعداد روابطك الاجتماعية. اذهب إلى " خيارات Divi> سمة عامة وأضف عناوين URL الخاصة بك إلى صفحات الوسائط الاجتماعية الخاصة بك.
ثم انتقل إلى الإعدادات الخاصة بك في شريط القائمة الثانوي واضبط الخلفية وألوان النص. أختار "الأبيض" كلون للنص لأنني سأضيف خلفية ملونة مستديرة لكل رمز اجتماعي لتتناسب مع لون القائمة الجديد ، بحيث يمكن أن يظهر الرمز.
الذهاب إلى " الرأس والتنقل> عناصر الرأس و ضع علامة في المربع " إظهار الرموز الاجتماعية ".
هل تتذكر كيف شرعنا في إضافة CSS في كل صفحة؟ سنعود ونعدل ما كتبناه من قبل. استبدل ما لديك هناك بـ CSS التالي ، أو إذا أدركت ما هو مختلف ، يمكنك ببساطة إضافة الكود الإضافي.
# باليد رأس، #. وأعلى رأس الاجتماعي رمز {خلفية: #474f61. }
سيسمح هذا الرمز لموقعنا ليس فقط بتغيير لون الخلفية للقائمة الموجودة في هذه الصفحة ، ولكن أيضًا خلفية رموزنا الاجتماعية. لقد أضفنا للتو عنصرًا آخر إلى المزيج. يجب أن يكون لديك شيء يشبه ما يلي:
قد تحتاج إلى التحقق من صحة الألوان السداسية في كل صفحة.
عام المغلق
الكود التالي سيكون في " خيار الموضوع> مربع CSS أو في ملف نمط السمة التابعة.
. ولى {الهامش الأيسر #-الرموز أعلى رأس الاجتماعية: 5px. } #. وأعلى رأس الاجتماعي رمز {الحشو: 4px. هامش القاع: 8px. عرض: 30px. الطول: 30px. الحدود بين دائرة نصف قطرها: 50٪، خط الطول: 24px. }
قد تتساءل عن سبب عدم حدوث ذلك في مربع CSS بالصفحة. والسبب هو أن هذه الشفرة المعينة تؤثر على جميع العناصر المستهدفة ، لذلك من غير الفعال وضع الشفرة نفسها في أماكن متعددة. يتغير لون الخلفية فقط لكل صفحة ، لكن هذا الرمز لا يتغير لكل صفحة. إنها أفضل ممارسة لتجنب إضافة الوزن إلى موقعك.
هذا كل شيء في هذا البرنامج التعليمي ، وآمل أن يسمح لك بتخصيص القوائم في ملف بلوق وورد.
[vc_row center_row = "نعم"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" expand "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = ”# 18b69d” custom_hover_background = ”# 118d7a” custom_color = ”# ffffff” custom_hover_color = ”# ffffff” icon_right = ”fa fa-download”] DOWNLOAD DIVI THEME [/ vcex_button] [/ width_column] [= vc_column] / 1 ″] [vcex_button url = ”https://www.elegantthemes.com/affiliates/idevaffiliate.php؟id=2&url=23065&tid40632=tutorials” target = ”blank” layout = ”توسيع” align = ”center” font_family = ”Raleway” font_weight = ”1 ″ style =” flat ”custom_background =” # c700e ”custom_hover_background =” # 4226d8f ”custom_color =” # ffffff ”custom_hover_color =” # ffffff ”icon_right =” fa fa-download ”] تنزيل TEMPLATES DIVI [/ vcex_button] [/ vc_column] [/ vc_row]
دروس ديفي أخرى
- المواقع 5 للاستخدام مطعم ديفي موضوع
- كيفية إضافة نص على منتج Divi WooCommerce
- كيفية تغيير لون القائمة بين صفحات Divi
- كيفية تخصيص شبكات بلوق مع ديفي
- كيفية استخدام دور ديفي محرر على وورد
- كيفية إنشاء كامل الشاشة المنزلق ديفي
- كيفية تغيير لون القوائم بين صفحات Divi
- الميزات التي ربما لا تعرفها عن Divi
- كيفية استخدام Divi Builder على وورد
- كيفية استخدام وحدة Divi Video scrolling
- كيفية استخدام وحدة Divi Builder Flip
- كيفية إضافة وحدة شهادة على Divi Builder
- كيفية استخدام وحدة Divi النصية
- كيفية إنشاء شريط التمرير على ديفي
- كيفية تحرير دور مستخدم Divi
- كيفية استخدام وحدة Divi Social Media
- كيفية استخدام وحدة متجر على موضوع ووردبرس]
- كيفية استخدام وحدة Divi الشريط الجانبي
- كيفية استخدام Divi Price Table Module
- كيفية استخدام وحدة العنوان لمنشورات Divi
- كيفية إضافة وحدة فيديو ديفي
- كيفية استخدام وحدة الملاحة المادة
- كيفية استخدام وحدة البحث Divi
- كيفية استخدام وحدة محفظة Divi
- كيفية استخدام وحدة الشخص على Divi Builder
- كيفية استخدام وحدة المحفظة مع فلتر Divi
- كيفية استخدام وحدة المنزلق بعرض كامل
- كيفية استخدام Divi Builder Image Module
- كيفية استخدام وحدة التنقل كاملة العرض في Divi Builder
- كيفية استخدام وحدة معرض الصور
- كيفية استخدام وحدة بطاقة Divi Builder Full-Width
- كيفية استخدام وحدة Divi Full Width Portfolio
- كيفية استخدام وحدة الرأس Divi ذات العرض الكامل
- كيفية استخدام Divi Counter Module
- كيفية استخدام شريط التمرير المقالات على Divi Builder
- كيفية استخدام وحدة Divi Email Optin
مرحبا،
شكرا لك على كل ما تبذلونه من الدروس.
هل تعرف ما إذا كان يمكننا وضع القائمة الفرعية divi (المستوى الثاني أدناه المنسدلة) في ملء العرض؟ الذي يأخذ كامل عرض الصفحة
مرحبا،
كيف يمكنك تغيير لون النص في العنوان الرئيسي؟ بوجود خلفية شفافة (على رأسي الرئيسي) ، يكون لون الخط الذي اخترته (على العنوان الرئيسي ، والذي يعرض أقسامي المختلفة) عبر واجهة تخصيص divi باللون الأسود. ومع ذلك ، أود أن يكون أبيض اللون في بعض الصفحات لأن الصورة أدناه مظلمة للغاية.
كيف أفعل؟
شكرا مسبقا،
مرحبا جيرمان،
هل تريده أن يكون أبيض في كل الصفحات أم في بضع صفحات فقط؟