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

كيفية إضافة وحدة نمطية القطعة Zonde من Divi

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

بمجرد استخدام Visual Builder ، يمكنك النقر فوق الزر الرمادي (+) لإضافة وحدة نمطية جديدة إلى صفحتك. لا يمكن إضافة الوحدات النمطية الجديدة إلا داخل الصفوف. إذا كنت تبدأ صفحة جديدة ، فتذكر إضافة صف إلى صفحتك أولاً.

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

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

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

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

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

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

ثم انشر Visual Builder لتحرير صفحة المدونة. أضف قسمًا متخصصًا إلى صفحتك (أسفل رأسك مباشرةً) بالتخطيط التالي:

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

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

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

في إعداد الشريط الجانبي ، قم بتحديث ما يلي:

علامة تبويب المحتوى

مساحة القطعة: حدد الشريط الجانبي

علامة تبويب التصميم

الاتجاه: اليمين (لأن الشريط الجانبي على اليمين)
حذف فاصل الحدود: نعم
لون النص:
حجم خط الرأس الداكن: 26 بكسل
تباعد حروف
header: 3px ارتفاع صف الرأس: 1.1em

علامة تبويب متقدمة

ضمن قسم CSS المخصص ، أضف CSS التالي إلى مربع نص Widget. سيؤدي هذا إلى جعل تصميم أدوات الشريط الجانبي يتوافق مع تصميم الموقع:

الخلفية: #fff؛ الحشو: 20px؛ -webkit-box-shadow: 0 1px 5px rgba (0 و 0 و 0 و 0.1) -moz-box-shadow: 0 1px 5px rgba (0، 0، 0، 0.1)؛ box-shadow: 0 1px 5px rgba (0، 0، 0، 0.1)؛

حفظ الإعدادات

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

خيارات المحتوى للشريط الجانبي

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

منطقة القطعة

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

علامة المسؤول

سيؤدي هذا إلى تغيير تسمية الوحدة في المنشئ لتسهيل التعرف عليها. عند استخدام عرض WireFrame في Visual Builder ، تظهر هذه الملصقات في كتلة الوحدة النمطية لواجهة Divi Builder.

خيارات تصميم الشريط الجانبي

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

تحديد المستوى

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

حذف فاصل الحدود

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

لون النص

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

خط الرأس

يمكنك تغيير خط نص العنوان الخاص بك عن طريق تحديد الخط المطلوب من القائمة المنسدلة. يأتي Divi مع عشرات الخطوط الرائعة التي تدعمها Google Fonts. بشكل افتراضي ، يستخدم Divi خط Open Sans لجميع النصوص الموجودة على صفحتك. يمكنك أيضًا تخصيص نمط النص باستخدام خيارات الخط الغامق والمائل والأحرف الكبيرة والتسطير.

حجم خط الرأس

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

لون نص الرأس

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

تباعد حرف الرأس

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

ارتفاع صف الرأس

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

خط الجسم

يمكنك تغيير خط الجسم الخاص بك عن طريق تحديد الخط المطلوب من القائمة المنسدلة. يأتي Divi مع عشرات الخطوط الرائعة التي تدعمها Google Fonts. بشكل افتراضي ، يستخدم Divi خط Open Sans لجميع النصوص الموجودة على صفحتك. يمكنك أيضًا تخصيص نمط النص باستخدام خيارات الخط الغامق والمائل والأحرف الكبيرة والتسطير.

حجم خط الجسم

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

لون نص الهيكل

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

تباعد حروف الجسم

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

ارتفاع خط الجسم

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

خيارات الشريط الجانبي المتقدمة

في علامة التبويب "خيارات متقدمة" ، ستجد خيارات قد يجدها مصممو الويب الأكثر خبرة مفيدة ، مثل سمات CSS و HTML المخصصة. هنا يمكنك تطبيق CSS مخصص على أي من عناصر الوحدة المتعددة. يمكنك أيضًا تطبيق معرفات وفئات CSS المخصصة على الوحدة النمطية ، والتي يمكن استخدامها لتخصيص الوحدة في ملف style.css الخاص بالقالب الخاص بك.

معرف CSS

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

فئة CSS

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

عرف المغلق

يمكن أيضًا تطبيق CSS المخصص على الوحدة النمطية وأي من الأجزاء الداخلية للوحدة. في قسم CSS المخصص ، ستجد حقل نص حيث يمكنك إضافة أوراق أنماط CSS مخصصة مباشرة إلى كل عنصر. تم بالفعل تغليف إدخالات CSS في هذه الإعدادات بعلامات النمط. لذا فقط أدخل قواعد 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