هل ترغب في عرض ميزاتك أو منتجاتك على شكل علامة تبويب Divi مع تأثير التمرير؟
هل تبحث عن طرق إبداعية جديدة لعرض الميزات و / أو المنتجات على صفحات الويب الخاصة بك؟
إذا كان الأمر كذلك، فتابع القراءة، ففي هذه المقالة سنشرح لك كيفية عرض الميزات في علامات التبويب عند التمرير باستخدام خيارات Divi المدمجة فقط. إمكانيات هذا النهج لا حصر لها، وستساعدك بالتأكيد على فهم Divi بشكل أعمق.
لن يظهر تأثير تحريك المؤشر فوق علامة التبويب إلا على أجهزة الكمبيوتر المكتبية. أما على الشاشات الأصغر حجماً، فستظهر بشكلها الطبيعي.
دعونا نذهب!
مسح
قبل الغوص في هذا البرنامج التعليمي ، دعنا نلقي نظرة على النتيجة التي نريد تحقيقها.
لنبدأ عملية الإنشاء مع Divi
إضافة قسم جديد
خلفية التدرج
أضف صفحة جديدة أو افتح صفحة موجودة وأضف قسمًا جديدًا. افتح إعدادات القسم وأضف خلفية متدرجة إلى القسم.
- اللون الأيسر: # f2f2f2
- اللون الصحيح: #ffffff
- اتجاه التدرج: 87 درجة
- المركز الأيسر: 20٪
- الموضع الصحيح: 80٪
مباعدة
بعد ذلك، قم بتعديل إعدادات التباعد التالية:
- المساحة المتروكة (أعلى وأسفل): 0 بكسل
أضف سطرًا جديدًا
هيكل العمود
تابع بإضافة صف جديد إلى القسم باستخدام بنية العمود التالية:
لون الخلفية
دون إضافة أي وحدات أخرى، افتح إعدادات الخط وقم بتغيير لون الخلفية.
- لون الخلفية: #ffffff
التحجيم والمحاذاة
في علامة التبويب تصميمقم بتوسيع الخيار التحجيم وقم بتغيير الإعدادات التالية:
- استخدام عرض مزراب مخصص: نعم
- عرض الحضيض: 1
- العرض: 400 بكسل
- محاذاة الصف: اليسار
تحوم التحجيم
غيّر الخيار عرض في إعدادات تحجيم التمرير. سيسمح هذا للخط بالتمدد عند التمرير.
- العرض (تحوم): 2 بكسل
مباعدة
بعد ذلك، قم بالوصول إلى إعدادات التباعد في الخيار التباعد
- المساحة المتروكة (أعلى وأسفل): 0 بكسل
الحدود (سطح المكتب)
أضف '20px' إلى الزاوية العلوية اليمنى من السطر، وأضف أيضًا حدًا أيسرًا للسطر.
- الزوايا الدائرية (سطح المكتب): 20 بكسل (الزاوية اليمنى العليا)
- عرض الحد الأيسر: 20 بكسل
- لون الحد الأيسر: # 6d44ff
الحدود على تحوم
قم بإزالة الزاوية العلوية اليمنى المستديرة من '20px' عند تمرير المؤشر عليها عن طريق إضافة '0px' بدلاً من ذلك.
بوكس شادو (سطح المكتب)
أخيرًا ، أضف ظلًا دقيقًا.
- مربع قوة طمس الظل: 80 بكسل
- قوة انتشار الظل المربع: -10 بكسل
- لون الظل: rgba (0,0,0,0.11،XNUMX،XNUMX،XNUMX)
تحوم الظل
وقم بتغيير لون الظل إلى لون شفاف تمامًا عند تمرير المؤشر فوقه.
- مربع الظل: rgba (255,255,255,0،XNUMX،XNUMX)
أضف الوحدة النمطية Blurb إلى الصف
إضافة محتوى
بعد الانتهاء من تعديل جميع إعدادات الصف، يمكننا المتابعة وإضافة وحدة Blurb إلى العمود. يمكنك استخدام أي وحدة أخرى من اختيارك.
بمجرد إضافة الوحدة، قم بإضافة المحتوى الذي تختاره.
حدد الرمز
ثم حدد أيقونة من اختيارك.
إعدادات الرمز
وقم بتغيير مظهر الأيقونة في إعدادات الأيقونة. انتقل إلى علامة التبويب تصميم
- لون الأيقونة: # 5323ff
- وضع الصورة / الرمز: علوي
- عرض الصورة / الرمز: 50 بكسل
إعدادات عنوان النص (سطح المكتب)
ثم قم بتغيير إعدادات العنوان.
- خط العنوان: بوبينز
- محاذاة النص: توسيط
- لون نص العنوان: # 5323ff
- حجم نص العنوان: 25 بكسل
- تباعد الأحرف: -1 بكسل
- ارتفاع الخط: 1 م
تحوم إعدادات عنوان النص
وتغيير ارتفاع صف العنوان عند التمرير.
- ارتفاع خط العنوان: 1,5 م
إعدادات النص الأساسي (سطح المكتب)
بعد ذلك، انتقل إلى إعدادات نص الصفحة وقم بإجراء بعض التغييرات. يتضمن ذلك تغيير حجم النص إلى "0 بكسل". سيساعدنا هذا على جعل نص الصفحة يظهر فقط عند تمرير المؤشر فوقه.
- خط الجسم: بوبينز
- وزن خط الجسم: خفيف
- محاذاة النص: توسيط
- لون النص الأساسي: # 000000
- حجم النص الأساسي: 0 بكسل (سطح المكتب) ، 15 بكسل (الجهاز اللوحي والهاتف)
- ارتفاع الخط: 2,2 م
إعدادات النص الأساسي عند التمرير
للتأكد من ظهور النص الأساسي عند التمرير ، قم بتغيير حجم نص التمرير.
- حجم النص الأساسي: 15 بكسل
التباعد (سطح المكتب)
لإعطاء الوحدة بعض المساحة، نقوم بتعديل معلمات التباعد التالية:
- المساحة المتروكة (أعلى وأسفل): 80 بكسل
تحوم التباعد
سنقوم بتعديل إعدادات تباعد التمرير.
- المساحة المتروكة (أعلى وأسفل): 80 بكسل
- الحشو (يسار ويمين): 20vw
صف استنساخ 3 مرات
بمجرد الانتهاء من تحرير الصف الأول ووحدة Blurb الخاصة به ، يمكنك المضي قدمًا واستنساخ الصف عدة مرات كما تريد.
تحرير الخط والوحدة النمطية للدعاية والاعلان # 2
تغيير لون حدود الخط
لنبدأ بتغيير لون الحد الأيسر للخط.
- لون الحد الأيسر: # 00ffcc
تعديل محتوى وأيقونة Blurb
بعد ذلك، افتح إعدادات وحدة Blurb وقم بتغيير الأيقونة.
قم بتغيير لون أيقونة وحدة Blurb
بلون الأيقونة.
- لون الأيقونة: # 00eda6
تغيير لون العنوان
ولون نص العنوان.
- لون نص العنوان: # 00eda6
تحرير الخط والوحدة النمطية Burb # 3
لون حد الخط
دعنا نغير لون حدود الخط الأيسر.
- لون الحد الأيسر: #afebff
تعديل محتوى وأيقونة Blurb
لنقم أيضاً بتغيير الأيقونة ومحتوى النص التمهيدي.
قم بتغيير لون أيقونة وحدة Blurb
قم أيضاً بتغيير لون الأيقونة.
- لون الأيقونة: # 68d9ff
تغيير لون نص العنوان
ولون نص العنوان أيضًا.
- لون نص العنوان: # 68d9ff
تحرير الخط والوحدة النمطية للدعاية والاعلان # 4
تغيير لون حدود الخط
في الوحدة التالية والأخيرة ، قم أيضًا بتغيير لون الحد الأيسر للخط.
- لون الحد الأيسر: # dd87cf
تعديل محتوى وأيقونة Blurb
افتح وحدة Blurb في الصف وقم بتعديل أيقونة الوحدة ومحتواها.
قم بتغيير لون أيقونة وحدة Blurb
بلون الأيقونة.
- لون الأيقونة: # dd6aca
تغيير لون نص العنوان
ولون نص العنوان أيضًا.
- لون نص العنوان: # dd6aca
مسح
والآن بعد أن انتهينا من البرنامج التعليمي، دعونا نلقي نظرة أخيرة على النتيجة.
تحميل DIVI Now !!!
خاتمة
في هذه المقالة ، أوضحنا لك كيفية استخدام خيارات Divi المضمنة فقط لإنشاء علامات تبويب متاحة عند التمرير.
سيساعدك هذا الأسلوب على مشاركة محتوى حول الميزات أو المنتجات بشكل تفاعلي.
نأمل أن يلهمك هذا البرنامج التعليمي لمشاريع Divi التالية. إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.
يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...