استخدام وحدة قائمة Divi Fullwidth مقابل وحدة القائمة العادية

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

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

هيا بنا نبدأ!

نظرة خاطفة

سطح المكتب: وحدة القائمة ذات العرض الكامل

سطح المكتب: وحدة القائمة العادية

الجوال: وحدة القائمة ذات العرض الكامل

الجوال: وحدة القائمة العادية

الاختلافات الرئيسية بين وحدة قائمة Divi Fullwidth ووحدة القائمة العادية

فيما يلي نظرة عامة على الاختلافات الرئيسية بين وحدة قائمة كاملة العرض ووحدة قائمة عادية.

عادي مقابل حاوية قسم كامل العرض

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

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

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

يتمثل الاختلاف الرئيسي الآخر بين القوائم العادية وقائمة العرض الكامل في أن لديهما طرقًا مختلفة لتعديل عرض الوحدة وتباعدها.

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

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

استخدام وحدة قائمة Divi Fullwidth مقابل وحدة القائمة العادية

ما تحتاجه للبدء

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

الآن ، أنت جاهز للبدء!

تصميم وحدة قائمة ذات عرض كامل

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

في هذا البرنامج التعليمي ، سنبني التصميم من البداية ، لذا حدد خيار بدء البناء.

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

ثم احذف القسم العادي من الصفحة.

قم بإضافة وحدة نمطية Fullwidth Menu إلى صف fullwidth.

أضف لون الخلفية إلى قائمة العرض الكامل.

• الخلفية: # 4e7560

أضف شعارًا إلى قائمة العرض الكامل.

بعد ذلك ، انتقل إلى خيارات نص القائمة ضمن علامة التبويب تصميم.

• خط القائمة: بوبينز
• لون نص القائمة: #FFFFFF
• حجم نص القائمة: 20 بكسل

بعد ذلك ، انتقل إلى إعدادات القائمة المنسدلة.

• لون خلفية القائمة المنسدلة: #FFFFFF
• لون خط القائمة المنسدلة: # 7EAD70
• لون نص القائمة المنسدلة: # 000000

اضبط خلفية قائمة الهاتف المحمول ولون النص.

• لون خلفية قائمة الجوال: #FFFFFF
• لون نص قائمة الجوال: # 000000

بعد ذلك ، قم بتغيير إعدادات قائمة همبرغر.

• لون أيقونة قائمة همبرغر: #FFFFFF
• حجم خط أيقونة قائمة همبرغر: 40 بكسل

أخيرًا ، أضف بعض الحشو العلوي والسفلي.

• المساحة المتروكة: 10 بكسل
• الحشو السفلي: 10 بكسل

الآن اكتملت وحدة قائمة العرض الكامل!

تصميم وحدة قائمة منتظمة

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

حدد بدء البناء للبناء من الصفر.

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

• الخلفية: # 4e7560

بعد ذلك ، قم بإزالة الحشوة العلوية والسفلية.

• المساحة المتروكة: 0 بكسل
• المساحة المتروكة: 0 بكسل

أضف صفًا جديدًا بالتخطيط الموضح أدناه.

في إعدادات الصف ، قم بمعادلة ارتفاعات العمود.

• معادلة ارتفاعات العمود: نعم

في إعدادات Main Element CSS ضمن علامة التبويب Advanced ، أضف CSS المخصص التالي.

 align-items:center; 

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

• نص H1: "مدونة Divi"

اضبط محاذاة النص على اليسار على سطح المكتب.

• محاذاة النص - سطح المكتب: يسار

اضبط محاذاة النص على المركز على الجهاز اللوحي والجوال.

• محاذاة النص - الكمبيوتر اللوحي: المركز
• محاذاة النص - الجوال: المركز

بعد ذلك ، انتقل إلى إعدادات نص العنوان.

• خط العنوان: بوبينز
• وزن خط العنوان: غامق
• لون نص العنوان: #FFFFFF
• حجم نص العنوان: 40 بكسل

الآن وبعد الانتهاء من عنوان "Divi Blog" ، دعنا نضيف وحدة القائمة العادية إلى العمود الأوسط.

قم بإزالة لون الخلفية.

• الخلفية: لا شيء

بعد ذلك ، انتقل إلى علامة تبويب التصميم. ضمن تخطيط ، قم بتغيير النمط إلى توسيط.

• النمط: توسيط

الآن يمكننا تعديل أنماط نص القائمة.

• خط القائمة: بوبينز
• لون نص القائمة: #FFFFFF
• حجم نص القائمة: 20 بكسل

قم بتعديل أنماط القائمة المنسدلة أيضًا.

• لون خط القائمة المنسدلة: # 7EAD70
• لون نص القائمة المنسدلة: # 000000

بعد ذلك ، قم بتغيير إعدادات قائمة الجوال.

• لون خلفية قائمة الجوال: #FFFFFF
• لون نص قائمة الجوال: # 000000

أخيرًا ، قم بتعديل إعدادات قائمة الهامبرغر.

• لون أيقونة قائمة همبرغر: #FFFFFF
• حجم خط أيقونة قائمة همبرغر: 40 بكسل

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

تغيير نص الزر.

• الزر: "نسخة تجريبية مجانية لمدة 30 يومًا"

اضبط محاذاة الزر إلى المركز.

• محاذاة الزر: الوسط

اضبط "استخدام الأنماط المخصصة للزر" على "نعم" وقم بتعديل لون النص.

• استخدام الأنماط المخصصة للزر: نعم
• لون نص الزر: #FFFFFF

تعيين خلفية الزر.

• خلفية الزر: # 7EAD70

اضبط خلفية الزر عند التمرير على اللون البرتقالي.

• خلفية الزر عند التمرير: # D19929

بعد ذلك ، قم بتعيين عرض حد الزر ونصف القطر والخط.

• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 40 بكسل
• خط الزر: بوبينز

أخيرًا ، قم بتعيين المساحة المتروكة اليمنى واليسرى.

• المساحة المتروكة: 30 بكسل
• الحشوة اليمنى: 30 بكسل

النتيجة النهائية

الآن دعنا نلقي نظرة على النتيجة النهائية لوحدات القائمة الخاصة بنا.

سطح المكتب: وحدة القائمة ذات العرض الكامل

سطح المكتب: وحدة القائمة العادية

الجوال: وحدة القائمة ذات العرض الكامل

الجوال: وحدة القائمة العادية

افكار اخيرة

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