هل ترغب في أن تكون مبدعًا من خلال إنشاء قائمة لاصقة قابلة للتوسيع عند التمرير باستخدام Divi ?
في هذا البرنامج التعليمي ، سنوضح لك كيفية إنشاء قائمة ثابتة قابلة للتوسيع عند التمرير باستخدام بواسطة Divi's Mechanic Layout Pack Pack .
سنتعامل مع تصميمين مختلفين للعينة يمكنك إعادة إنشائهما من البداية وتطبيقهما على أي نوع موقع انترنت التي تصنعها!
سيتم عرض القائمة عند التمرير فوق سطح المكتب وتنشيطها عند النقر فوق أجهزة الجوال.
دعونا نذهب!
مسح
قبل الغوص في هذا البرنامج التعليمي ، دعنا نلقي نظرة سريعة على النتيجة على أحجام الشاشات المختلفة.
مثال 1
حاسوب مكتب
الجوال
تحميل DIVI Now !!!
مثال 2
حاسوب مكتب
الجوال
تحميل DIVI Now !!!
خطوات عامة
تعطيل الملاحة الثابتة
الوصول إلى خيارات موضوع Divi
سنبدأ ببعض الخطوات العامة. هذه الخطوات هي نفسها لكلا المثالين وهي ضرورية لتحقيق النتيجة المرجوة.
إذا كنت تخطط لاستخدام قائمة ثابتة موسعة أسفل صفحتك ، فقد ترغب في ترك شريط القائمة الرئيسي في الجزء العلوي.
اقرأ أيضا: كيفية إنشاء تراكبات صور مخصصة في Divi
لهذا عليك أن تذهب Divi >> خيارات الموضوع من لوحة تحكم WordPress
تعطيل الملاحة الثابتة
هناك سوف تضطر إلى إلغاء التنشيط "شريط التنقل الثابت" للتأكد من عدم ترك مساحة أعلى الصفحة.
- شريط التنقل الثابت: معطل
إخفاء شريط القائمة الرئيسي على الصفحة
افتح إعدادات الصفحة
انتقل إلى الصفحة حيث تريد إضافة القائمة اللاصقة القابلة للتوسيع وافتح إعدادات الصفحة.
أضف CSS مخصص
إخفاء القائمة الرئيسية عن طريق إضافة الأسطر التالية من كود CSS إلى صفحتك.
#main-header {
display: none;
}
أضف قسمًا جديدًا في نهاية الصفحة
بغض النظر عن المثال الذي تريد إعادة إنشائه ، تظل بعض الخطوات الأساسية كما هي. الخطوة الأولى هي إضافة قسم عادي في أسفل الصفحة.
مباعدة
افتح إعدادات القسم وقم بتغيير الإعدادات التالية في علامة التبويب تصميم تحت الخيار التباعد .
- المساحة المتروكة (أعلى وأسفل): 0 بكسل
أضف سطرًا جديدًا
هيكل العمود
تابع بإضافة صف جديد باستخدام بنية العمود التالية:
التحجيم
بدون إضافة أي وحدات نمطية حتى الآن ، افتح إعدادات الخط وقم بتغيير الإعدادات التالية ، في علامة التبويب تصميم تحت الخيار التحجيم
- استخدام عرض مزراب مخصص: نعم
- عرض الحضيض: 1
- العرض: 100٪
- العرض الأقصى: 100٪
مباعدة
ثم قم بإزالة كل الحشو الافتراضي العلوي والسفلي ، تحت الخيار التباعد .
- المساحة المتروكة (أعلى وأسفل): 0 بكسل
العنصر الرئيسي
نسمح للصف بأكمله بالالتزام بأسفل صفحتنا عن طريق إضافة سطرين بسيطين من كود CSS إلى عنصر الصف الرئيسي.
bottom: 0px;
position: fixed;
مؤشر Z
وسنتأكد من بقاء السطر (ووحدة النص التي سنضيفها في الخطوات التالية) فوق كل شيء محتويات للصفحة عن طريق زيادة الفهرس Z، قم بتوسيع الخيار الموقع الحالي.
- مؤشر Z: 99
أضف وحدة التعليمات البرمجية إلى العمود
أضف كود CSS بين علامات الأنماط
يتمثل الجزء الأخير من الخطوات العامة في إضافة وحدة نمطية للتعليمات البرمجية إلى السطر الجديد. سيساعدنا رمز CSS الذي نضيفه في وحدة التعليمات البرمجية هذه في تحقيق التأثير الكاشف عند التمرير.
انظر أيضا: كيفية إنشاء قائمة عجلة دوارة على Hover in Divi
الصق الأسطر التالية من كود CSS في الوحدة النمطية:
<style>
.dt-menu li {
font-size: 0;
line-height: 0;
}
.dt-menu:hover li {
font-size: 2vh;
line-height: 2.1em;
}
</style>
تصميم المثال رقم 1
أضف وحدة نصية إلى العمود
إضافة محتوى
الآن بعد أن مررنا بجميع الخطوات ، يمكننا البدء في التركيز على مثالين مختلفين للتصميم ، بدءًا من المثال الأول!
أضف وحدة نصية إلى عمود صفك. في مجال محتويات، نستخدم نمط الفقرة لعرض النص "القائمة".
ثم نضع جميع عناصر القائمة في قائمة غير مرتبة. سنضيف أيضًا ارتباطًا لكل عنوان صفحة على حدة.
لون الخلفية الافتراضي
انتقل إلى إعدادات خلفية الوحدة النمطية وقم بتغيير لون الخلفية.
- الخلفية: #ffffff
لون الخلفية عند التمرير
قم بتغيير لون الخلفية هذا عند التمرير.
- الخلفية (تحوم): rgba (255,255,255,0.83،XNUMX،XNUMX،XNUMX)
خلفية التدرج
وقم أيضًا بإضافة خلفية متدرجة افتراضية.
- اللون الأيسر: rgba (255,255,255,0،XNUMX،XNUMX)
- اللون الصحيح: #ffffff
- مركز اليمين: 60٪
إعدادات النص الافتراضية
تواصل بالذهاب إلى علامة التبويب تصميم وتغيير إعدادات النص.
- خط النص: Khand
- وزن الخط: عريض
- لون النص: # 021827
- حجم النص: 3vh
- التوجه: المركز
تحوم إعدادات النص
قم بتغيير بعض إعدادات نص التمرير.
- لون النص (التمرير: rgba (255,255,255,0،XNUMX،XNUMX،XNUMX)
- حجم النص (التمرير): 0vh
إعدادات نص الارتباط
بعد ذلك ، انتقل إلى إعدادات نص الارتباط وقم بتغيير لون نص الارتباط.
- لون نص الرابط: # 000000
قائمة الافتراضيات (سطح المكتب)
قم بالتبديل إلى إعدادات نص القائمة الافتراضية وقم بتخصيصها كما يحلو لك. تأكد من أنك تستخدم "0 بكسل" لحجم النص في حالته الافتراضية.
- خط قائمة غير مرتبة: Khand
- نمط خط القائمة: TT
- قائمة محاذاة نص: توسيط
- لون النص غير المرتب: rgba (255,255,255,0،XNUMX،XNUMX،XNUMX)
- حجم نص القائمة غير المرتبة: 0 بكسل
- وزن نص القائمة: 0em
- وضع نمط قائمة غير مرتبة: في الداخل
تحوم إعدادات القائمة
ثم قم بتغيير بعض القيم عند التمرير للسماح بظهور عناصر القائمة.
- لون نص القائمة (تحوم): # 000000
- حجم نص القائمة غير المرتبة (التمرير): 2vh
- ارتفاع نص القائمة غير المرتبة (التمرير): 2,1 em
التباعد الافتراضي (سطح المكتب)
ثم انتقل إلى إعدادات التباعد (خيار التباعد ) وإعطاء شكل لوحدة النص.
- الهامش (يسار ويمين): 45vw (سطح المكتب) ، 39vw (كمبيوتر لوحي) ، 33vw (هاتف)
- الحشو (علوي وسفلي): 2vw (سطح المكتب) ، 4vw (جهاز لوحي) ، 6vw (هاتف)
تحوم التباعد
قم بتعديل هذه القيم نفسها عند التمرير.
- الهامش (يسار ويمين): 14vw
- الحشو (العلوي والسفلي): 8vw
الحد الافتراضي (سطح المكتب)
انتقل إلى إعدادات الحدود وتأكد من أن كل زاوية من الزوايا الدائرية لها قيمة "0 بكسل".
الحدود على تحوم
قم بتمكين خيارات التمرير في الزوايا الدائرية وقم بتغيير القيم إلى أعلى اليسار وأعلى اليمين.
- أعلى اليسار: 50vw
- أعلى اليمين: 50vw
صندوق الظل
استمر بإعطاء عمق للوحدة باستخدام ظل الصندوق. سيضمن هذا أن القائمة لا تمر مرور الكرام على الصفحة.
- مربع الظل قوة طمس: 1000 بكسل
- لون الظل: rgba (0,0,0,0.68،XNUMX،XNUMX،XNUMX)
فئة CSS
نضيف أيضًا فئة CSS إلى الوحدة.
- فئة CSS: قائمة dt
الانتقالات
أخيرًا ، قم بتقليل مدة الانتقال في إعدادات الانتقالات.
- مدة الانتقال: 100 مللي ثانية
تصميم المثال رقم 2
أضف وحدة نصية إلى العمود
إضافة محتوى
دعنا ننتقل إلى المثال الثاني! هنا سوف نضيف مرة أخرى "القائمة" باستخدام نمط نص الفقرة وعناصر القائمة باستخدام قائمة غير مرتبة. سنضيف أيضًا ارتباطًا لكل عنصر من عناصر القائمة على حدة.
لون الخلفية الافتراضي (سطح المكتب)
انتقل إلى إعدادات الخلفية وقم بتغيير لون الخلفية.
- الخلفية: #ffffff
لون الخلفية عند التمرير
قم بتغيير لون الخلفية عند التمرير.
- الخلفية (تحوم): # f71535
إعدادات النص الافتراضية (سطح المكتب)
ثم انتقل إلى علامة التبويب تصميم وقم بإجراء بعض التغييرات على مظهر النص.
- خط النص: Khand
- وزن الخط: عريض
- لون النص: # 021827
- حجم النص: 3vh
تحوم إعدادات النص
قم بتغيير هذه الإعدادات عند التمرير.
- لون النص (تحوم): rgba (255,255,255,0،XNUMX،XNUMX،XNUMX)
- حجم النص (التمرير): 0vh
إعدادات نص الارتباط
انتقل إلى إعدادات النص وقم بتغيير لون نص الرابط.
- لون نص الرابط: #ffffff
إعدادات نص القائمة الافتراضية
قم أيضًا بتغيير إعدادات التصميم لعناصر القائمة غير المرتبة.
- خط قائمة غير مرتبة: Khand
- نمط خط قائمة غير مرتبة: TT
- قائمة نص المحاذاة: مركز
- لون نص القائمة غير المرتبة: rgba (255,255,255,0،XNUMX،XNUMX،XNUMX)
- حجم نص القائمة: 0 بكسل
- ارتفاع سطر القائمة غير المرتبة: 0em
- وضع نمط قائمة غير مرتبة: في الداخل
تحوم إعدادات القائمة
وتغيير بعض هذه القيم عند المرور فوقها.
- لون نص القائمة غير المرتبة: #ffffff
- حجم نص القائمة: 2vh
- ارتفاع خط القائمة غير المرتبة: 2,1 em
التباعد الافتراضي (سطح المكتب)
ثم انتقل إلى إعدادات التباعد وامنح الوحدة بعض المساحة.
- الهامش (يمين): 88 vw (سطح المكتب والكمبيوتر اللوحي) ، 71 vw (الهاتف)
- الحشو (العلوي): 6 vw (سطح المكتب)) ، 10 vw (Tablet) ، 18 vw (Phone)
- الحشو (الجزء السفلي): 4 vw (سطح المكتب) ، 10 vw (Tablet) ، 12 vw (الهاتف)
- الحشوة اليسرى: 1vw
تحوم التباعد
قم بتغيير القيم عند التمرير.
- الهامش (يمين): 59vw
- الحشو: (أعلى) 13vw ، (سفلي) 8vw ، (يسار) 1vw ، (يمين) 13vw
الحدود
ولإنشاء تصميم ربع دائرة هذا ، سنقوم بتغيير الحد العلوي الأيمن في إعدادات الحدود.
- أعلى اليمين: 50vw
صندوق الظل
سنضيف أيضًا ظل مربع لإنشاء عمق على الصفحة.
- مربع قوة طمس الظل: 1000 بكسل
- لون الظل: rgba (0,0,0,0.68،XNUMX،XNUMX،XNUMX)
فئة CSS
بعد ذلك سنضيف فئة CSS في علامة التبويب متقدم.
- فئة CSS: قائمة dt
الانتقالات
وتقليل مدة الانتقال في علامة التبويب متقدم لإنشاء انتقال سريع.
- مدة الانتقال: 100 مللي ثانية
مسح
الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على كيفية ظهورها على أحجام الشاشات المختلفة.
المثال رقم 1
مكتب
الجوال
تحميل DIVI Now !!!
المثال رقم 2
حاسوب مكتب
الجوال
تحميل DIVI Now !!!
وفي الختام
في هذه المقالة ، أوضحنا لك كيفية إنشاء قائمة ثابتة قابلة للتوسيع باستخدام من حزمة Divi Mechanic Layout Pack. لقد غطينا مثالين مختلفين للتصميم يمكنك تعديلهما واستخدامهما في أي نوع موقع انترنت التي تصنعها!
نأمل أن يلهمك هذا البرنامج التعليمي لمشاريعك القادمة. Divi. إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.
يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...
