هل ترغب في معرفة كيفية تخصيص عربة التسوق وأيقونات البحث لوحدة Divi Fullwidth Menu؟
قائمة ملفات موقع انترنت هو أحد أهم أجزاء موقع انترنت نظرًا للتأثير المباشر الذي يمكن أن تحدثه على كيفية تنقل المستخدمين لموقعك محتويات.
يمكن لشريط القوائم المصمم جيدًا أن يحدث فرقًا كبيرًا من خلال تبسيط التنقل وإبراز الصفحات الرئيسية وتحسين تجربة المستخدم الإجمالية.
توفر وحدة "Fullwidth Menu" الخاصة بـ Divi مرونة كبيرة من خلال السماح لك بتخصيص سلة التسوق وأيقونات البحث على النحو الذي تراه مناسبًا.
في هذا البرنامج التعليمي ، سنعرض لك ثلاثة تصميمات مختلفة لوحدة "Fullwidth Menu" بنمط مختلف لعربة التسوق وأيقونات البحث.
دعونا نبدأ!
مسح
إليك معاينة لما سنصممه.
التصميم الأول
بالنسبة للتصميم الأول ، نضع أحد الرموز على اليسار والآخر على اليمين عن طريق تحديد هيكل قائمة مركزية. سنقوم أيضًا بتغيير اللون عند التمرير.
التصميم الثاني
بالنسبة للتصميم الثاني ، نضع الرمزين على الجانب الأيمن ونغير اللون عند التمرير.
التصميم الثالث
للتصميم الثالث ، نستخدم CSS إضافيًا لتخصيص الرموز.
اقرأ أيضا: Divi: كيفية تخصيص وحدة "Countdown Timer" باستخدام GIF
تخصيص عربة التسوق وأيقونات البحث في وحدة Divi "Fullwidth Menu"
قم بإنشاء الرأس العام
لكل تصميم من تصميمات القائمة الثلاثة ، سنبدأ بفتح منشئ المواضيع ديفي.
للقيام بذلك ، من لوحة معلومات WordPress ، انتقل إلى ديفي> باني الموضوع
ثم انقر فوق أضف العنوان العام
ثم اختر بناء رأس عام
أدخل مقطعًا جديدًا بعرض كامل.
ثم احذف القسم السابق.
أدخل الوحدة قائمة العرض الكامل.
قم بتحميل شعارك من القائمة.
نحن الآن جاهزون للاستمرار.
التصميم الأول
سيشمل تصميمنا الأول تأثيرات التمرير المضمنة في Divi لتغيير لون النص والرموز عند التمرير. لنبدأ.
ابدأ بفتح إعدادات الوحدة وإضافة خلفية.
- الخلفية: # fbf9f4
اذهب إلى علامة التبويب تصميم وحدد تنسيق الشعار.
- النمط: شعار مركزي مضمن
الآن دعنا نغير بعض إعدادات نص القائمة.
- لون الارتباط النشط: # 09148c
- خط القائمة: روبي
- وزن خط القائمة: غامق
- نمط الخط: TT و U (بحروف كبيرة وتسطير)
بعد ذلك ، قم بتعيين لون نص القائمة وحجم النص وتباعد الأحرف.
- لون نص القائمة: # 000000
- حجم نص القائمة: 21 بكسل
- تباعد الأحرف: 1 بكسل
نريد إضافة تأثيرات التمرير إلى هذه القائمة ، لذا قم بتغيير لون نص القائمة عند التمرير. قم بتعيين لون نص قائمة مختلف عند التمرير.
- لون نص القائمة (تحوم): # b70018
ثم انتقل إلى الإعدادات القائمة المنسدلة تحت علامة التبويب تصميم.
- لون خلفية القائمة المنسدلة: # fbf9f4
- لون خط القائمة المنسدلة: # b70018
- لون نص القائمة: # 000000
نريد أن يتغير لون نص القائمة المنسدلة أيضًا عند التمرير ، لذا حدد خيارات التمرير لهذا الإعداد وقم بتعيين لون نص مختلف.
- لون نص القائمة المنسدلة (تحوم): # b70018
- لون الارتباط النشط للقائمة المنسدلة: # b70018
- لون خلفية قائمة الجوال: # fbf9f4
- لون نص قائمة الجوال: # 000000
مرة أخرى ، نريد تغيير لون نص قائمة الهاتف المحمول عند التمرير. حدد خيارات التمرير لهذا الإعداد ، ثم قم بتعيين لون نص مختلف عند التمرير.
- لون نص قائمة الجوال (تحوم): # b70018
عربة التسوق وتخصيص رمز البحث
الآن دعنا نضيف ونخصص رموز عربة التسوق والبحث. تحت علامة التبويب وصف المنتجاذهب الى عناصر وتمكين رمز عربة التسوق وأيقونة البحث.
- إظهار رمز عربة التسوق: نعم
- إظهار رمز البحث: نعم
ارجع إلى علامة التبويب تصميم وافتح إعدادات الرمز. ستكون كل أيقونة من أيقوناتنا باللونين الأسود والأحمر عند المرور فوقها. أولاً ، اضبط اللون الأسود.
- لون رمز عربة التسوق: # 000000
- لون ايقونة البحث: # 000000
- لون أيقونة قائمة همبرغر: # 000000
بعد ذلك ، حدد رمز التمرير وأضف اللون عند التمرير.
- لون رمز عربة التسوق (تحوم): # b70018
- لون رمز البحث (تحوم): # b70018
- لون أيقونة قائمة همبرغر (تحوم): # b70018
تعيين حجم الرمز.
- حجم خط أيقونة عربة التسوق: 25 بكسل
- حجم خط رمز البحث: 25 بكسل
انتقل إلى القسم التباعد ، ثم قم بتعيين المساحة المتروكة العلوية والسفلية.
- المساحة المتروكة (أعلى وأسفل): 5 بكسل
أخيرًا ، سنضيف حدًا إلى أعلى وأسفل وحدة القائمة. افتح إعدادات الحدود.
- عرض الحد العلوي: 3 بكسل
- عرض الحد السفلي: 3 بكسل
التصميم النهائي
وها هو تصميمنا النهائي.
التصميم الثاني
سيستخدم تصميمنا الثاني تأثيرات التمرير المضمنة في Divi لتغيير حجم أيقونات القائمة والنص عند التمرير. لنبدأ.
أولاً ، سنضيف تدرجًا في الخلفية إلى وحدة القائمة. التدرج له ثلاث نقاط توقف ، الإعدادات كالتالي:
- توقفات متدرجة:
- 0٪: rgba (255,255,255,0،XNUMX،XNUMX)
- 23٪: rgba (252,199,76,0.65،XNUMX،XNUMX)
- 82٪: rgba (232,119,255,0.32،XNUMX،XNUMX)
اضبط نوع التدرج وموضع التدرج.
- نوع التدرج: مخروطي
- موقف التدرج: القاع
ثم انتقل إلى علامة التبويب تصميم وضبط التخطيط (تصميم).
- النمط: توسيط
انتقل إلى القسم قائمة النص لتخصيص تصميم نص القائمة.
- لون الارتباط النشط: #FFFFFF
- قائمة الخط: Syne
- وزن الخط: عريض
- نمط خط القائمة: TT (أحرف كبيرة)
- قائمة ألوان النص: #FFFFFF
الآن قم بتعيين حجم نص القائمة وتباعد الأحرف.
- حجم نص القائمة: 20 بكسل
- تباعد أحرف القائمة: 2 بكسل
نظرًا لأننا نريد زيادة حجم نص القائمة عند التمرير ، حدد خيار التمرير.
- حجم نص القائمة: 22 بكسل
بعد ذلك ، قم بتغيير إعدادات التصميم من القائمة المنسدلة.
- لون خلفية القائمة المنسدلة: # fcda90
- لون خط القائمة المنسدلة: #FFFFFF
- قائمة ألوان النص: #FFFFFF
- لون الارتباط النشط للقائمة المنسدلة: #FFFFFF
اضبط خلفية قائمة الهاتف المحمول ولون النص.
- لون خلفية قائمة الهاتف المحمول: # fcda90
- لون نص قائمة الجوال: #FFFFFF
عربة التسوق وتخصيص رمز البحث
لنبدأ الآن في تخصيص أيقونات قائمتنا. اذهب إلى عناصر تحت علامة التبويب وصف المنتج وتمكين رمز عربة التسوق وأيقونة البحث.
- زر عربة التسوق أيقونة: نعم
- إظهار رمز البحث: نعم
ارجع إلى علامة التبويب تصميم وافتح إعدادات الرمز.
- لون أيقونة عربة التسوق: #ffffff
- لون رمز البحث: #ffffff
- لون أيقونة قائمة همبرغر: #ffffff
سيكون للرموز لون برتقالي داكن عند المرور فوقها. حدد خيار الغطاء واضبط اللون.
- لون رمز عربة التسوق (التمرير): # fcac00
- لون رمز البحث (تحوم): # fcac00
- لون أيقونة قائمة همبرغر (تحوم): # fcac00
بعد ذلك ، قم بتعيين حجم الخط لعربة التسوق وأيقونات البحث.
- حجم خط أيقونة عربة التسوق: 25 بكسل
- حجم خط رمز البحث: 25 بكسل
لزيادة حجم الرمز عند التمرير ، حدد خيار التمرير.
- حجم خط رمز عربة التسوق (التمرير): 30 بكسل
- حجم خط رمز البحث (التمرير): 30 بكسل
أخيرًا ، انتقل إلى القسم التباعد وقم بتعيين المساحة المتروكة العلوية والسفلية.
- المساحة المتروكة (أعلى وأسفل): 5 بكسل
التصميم النهائي
هذا هو التصميم النهائي لتخطيط القائمة الثاني.
التصميم الثالث
من أجل تصميمنا النهائي ، سنضيف دائرة خلفية خلف رموز عربة التسوق باستخدام CSS المخصص.
اقرأ أيضا: Divi: كيفية إنشاء قائمة تحوم ثابتة وقابلة للتوسيع
دعونا نبدأ.
أولاً ، أضف لون خلفية إلى الوحدة.
- الخلفية: # efb6ac
ثم انتقل إلى علامة التبويب تصميم وافتح الخيار قائمة النص.
- لون الارتباط النشط: # e84322
- خط القائمة: Cinzel
- قائمة وزن الخط: عريض للغاية
نريد تغيير لون نص القائمة عند التمرير. أولاً ، قم بتعيين لون نص القائمة.
- قائمة ألوان النص (سطح المكتب): # e7644a
انقر فوق رمز التمرير وقم بتعيين لون نص التمرير.
- لون نص القائمة (تحوم): # e84322
بعد ذلك ، قم بتعيين حجم نص القائمة وتباعد الأحرف.
- حجم نص القائمة: 21 بكسل
- تباعد أحرف القائمة: 1 بكسل
نريد أيضًا أن يمتد تباعد الأحرف عند التمرير ، لذا حدد خيار التمرير للإعدادات.
- تباعد أحرف القائمة: 2 بكسل
اضبط محاذاة النص إلى اليسار.
- محاذاة النص: يسار
بعد ذلك ، قم بتغيير الإعدادات التالية من القائمة المنسدلة.
- لون خلفية القائمة المنسدلة: # efb6ac
- لون خط القائمة المنسدلة: # e7644a
اقرأ أيضا: Divi: كيفية إنشاء قسم الشهادات في شكل شبكة
- لون نص القائمة المنسدلة
- سطح المكتب: # e7644a
- تحوم: # e84322
- لون الارتباط النشط للقائمة المنسدلة: # e84322
اضبط خلفية قائمة الهاتف المحمول ولون النص.
- لون خلفية قائمة الجوال: # efb6ac
- لون نص قائمة الجوال:
- سطح المكتب: # e7644a
- تحوم: # e84322
عربة التسوق وتخصيص رمز البحث
أولاً ، اذهب إلى عناصر تحت علامة التبويب وصف المنتج وتمكين رمز عربة التسوق وأيقونة البحث.
- إظهار رمز عربة التسوق: نعم
- إظهار رمز التسوق: نعم
ثم ارجع إلى علامة التبويب تصميم وافتح إعدادات الرمز. اضبط لون الرمز.
- لون أيقونة عربة التسوق: # e7644a
- لون ايقونة البحث: # e7644a
- لون أيقونة قائمة همبرغر: # e7644a
سيتغير لون هذه الرموز عند التمرير. قم بتمكين خيارات التمرير وضبط اللون.
- لون رمز عربة التسوق (تحوم): # e84322
- لون رمز البحث (تحوم): # e84322
- لون أيقونة قائمة همبرغر (تحوم): # e84322
نريد أيضًا زيادة حجم الرمز عند التمرير. أولاً ، قم بتعيين حجم خط الرمز.
- حجم خط أيقونة عربة التسوق: 22 بكسل
- حجم خط رمز البحث: 22 بكسل
بعد ذلك ، قم بتعيين حجم خط الرمز عند التمرير.
- حجم خط رمز عربة التسوق (التمرير): 26 بكسل
- حجم خط رمز البحث (التمرير): 26 بكسل
ثم اذهب إلى القسم التباعد وإضافة الحشوة العلوية والسفلية.
- المساحة المتروكة (أعلى وأسفل): 5 بكسل
أخيرًا ، يمكننا إضافة CSS مخصص إلى العنوان العالمي لإضافة الدوائر الموجودة خلف عربة التسوق وأيقونة البحث.
يمكنك تخصيص CSS هذا كما تريد لمطابقة تصميم وحدة القائمة الخاصة بك.
افتح إعدادات قالب الرأس ، ثم انتقل إلى علامة التبويب متقدم وأدخل CSS المخصص التالي.
.et_pb_menu__icon.et_pb_menu__cart-button,
.et_pb_menu__icon.et_pb_menu__search-button {
padding: 2% 2% 2% 2%;
background-color:#F7D5C2;
border-radius: 50%;
}
التصميم النهائي
هذا يكمل تصميم تخطيط القائمة الثالث والأخير.
نتيجة نهائية
الآن دعونا نلقي نظرة على التصميم النهائي للقوائم الثلاثة المختلفة.
التصميم الأول
تحميل DIVI Now !!!
التصميم الثاني
التصميم الثالث
تحميل DIVI Now !!!
وفي الختام
من السهل تخصيص وحدة قائمة Divi وأيقونات سلة التسوق والبحث لإنشاء تخطيطات وتصميمات فريدة لك موقع انترنت.
يمكنك بسهولة تحسين مظهر وحدات القائمة الخاصة بك باستخدام إعدادات Divi المضمنة مثل تأثيرات التمرير و CSS المخصص.
نأمل أن يلهمك هذا البرنامج التعليمي لمشاريع Divi التالية. إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.
يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى المزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت.
لا تتردد في الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...