كيفية عرض الميزات في علامات تبويب التحويم باستخدام Divi
نشرت: 2019-02-10هل تبحث عن طرق جديدة ومبتكرة لعرض الميزات و / أو المنتجات على صفحات الويب الخاصة بك؟ إذا كان الأمر كذلك ، فاستمر في القراءة لأنه في هذا المنشور ، سنوضح لك كيفية عرض الميزات في علامات تبويب التمرير باستخدام خيارات Divi المضمنة فقط. الاحتمالات التي لديك مع هذا النهج لا حصر لها وستسمح لك بالتأكيد بفهم Divi على مستوى أعمق. سيحدث تأثير تمرير علامة التبويب فقط في بيئات سطح المكتب الملائمة للتمرير. عندما يتم عرض علامات تبويب التمرير من أحجام شاشات أصغر ، سيتم سرد الميزات في شكلها الأصلي.
دعنا نذهب اليها!
معاينة
قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة على النتيجة على أحجام الشاشات المختلفة.
سطح المكتب
متحرك
لنبدأ في الإنشاء!
اشترك في قناتنا على اليوتيوب
إضافة قسم جديد
خلفية متدرجة
أضف صفحة جديدة أو افتح صفحة موجودة وأضف قسمًا جديدًا. افتح إعدادات القسم وأضف خلفية متدرجة إلى القسم. سنستخدم خلفية التدرج لتغطية الجزء الأيسر من علامات تبويب التمرير كما يمكنك ملاحظته في شاشات الطباعة أعلاه.
- اللون 1: # f2f2f2
- اللون 2: #ffffff
- اتجاه التدرج: 87 درجة
- موقف البداية: 20٪
- موضع النهاية: 20٪
تباعد
بعد ذلك ، قم بإزالة المساحة المتروكة العلوية والسفلية المخصصة للقسم عن طريق إضافة "0 بكسل" إلى كلا الخيارين.
- الحشوة العلوية: 0 بكسل
- الحشو السفلي: 0 بكسل
أضف صفًا جديدًا
هيكل العمود
تابع بإضافة صف جديد إلى القسم باستخدام بنية العمود التالية:
لون الخلفية
بدون إضافة أي وحدات بعد ، افتح إعدادات الصف وقم بتغيير لون الخلفية.
- لون الخلفية: #ffffff
محاذاة الصف
قم بتعديل محاذاة الصف أيضًا.
- محاذاة الصف: اليسار
التحجيم الافتراضي
وتغيير إعدادات التحجيم أيضًا.
- استخدام العرض المخصص: نعم
- الوحدة: PX
- العرض المخصص: 400 بكسل
- استخدام عرض مزراب مخصص: نعم
- عرض الحضيض: 1
تحوم التحجيم
قم بتعديل خيار العرض المخصص في إعدادات التحجيم عند التمرير. سيسمح هذا للصف بالتمدد عند المرور فوقه.
- العرض المخصص: 2000 بكسل
تباعد
بعد ذلك ، انتقل إلى إعدادات التباعد وقم بإزالة القيم المتروكة العلوية والسفلية الافتراضية.
- الحشوة العلوية: 0 بكسل
- الحشو السفلي: 0 بكسل
الحد الافتراضي
أضف "20 بكسل" إلى الركن الأيمن العلوي من الصف وأضف حدًا أيسرًا للصف أيضًا.
- عرض الحد الأيسر: 20 بكسل
- لون الحد الأيسر: # 6d44ff
تحوم الحدود
قم بإزالة الزاوية المستديرة العلوية اليمنى "20 بكسل" عند التمرير بإضافة "0 بكسل" بدلاً من ذلك.
ظل المربع الافتراضي
أخيرًا وليس آخرًا ، أضف ظل مربع دقيقًا.
- مربع قوة طمس الظل: 80 بكسل
- قوة انتشار الظل المربع: -10 بكسل
- لون الظل: rgba (0،0،0،0.11)
تحوم مربع الظل
وقم بتعديل لون الظل إلى لون شفاف تمامًا عند التحويم.
- لون الظل: rgba (255،255،255،0)
أضف الوحدة النمطية Blurb إلى الصف
إضافة محتوى
الآن بعد أن انتهينا من تعديل جميع إعدادات الصف ، يمكننا المضي قدمًا وإضافة وحدة Blurb Module إلى العمود. لا تتردد في استخدام أي وحدة أخرى من اختيارك. بمجرد إضافة الوحدة ، أضف بعض المحتوى الذي تختاره.
حدد أيقونة
حدد أيقونة من اختيارك بعد ذلك.
إعدادات الرمز
وتغيير مظهر الأيقونة في إعدادات الأيقونة.
- لون الأيقونة: # 5323ff
- وضع الرمز: الأعلى
- استخدام حجم خط الأيقونة: نعم
- حجم خط الأيقونة: 54 بكسل
الإعدادات الافتراضية لنص العنوان
قم بتعديل إعدادات نص العنوان بعد ذلك.
- خط العنوان: بوبينز
- محاذاة نص العنوان: الوسط
- لون نص العنوان: # 5323ff
- حجم نص العنوان: 25 بكسل
- تباعد حرف العنوان: -1 بكسل
- ارتفاع خط العنوان: 1em
تحوم إعدادات نص العنوان
وقم بتعديل ارتفاع خط العنوان عند التمرير.
- ارتفاع خط العنوان: 1.5em
الإعدادات الافتراضية للنص الأساسي
بعد ذلك ، انتقل إلى إعدادات النص الأساسي وقم بإجراء بعض التغييرات. يتضمن ذلك تغيير حجم النص إلى "0 بكسل". سيساعدنا هذا في جعل النص الأساسي يظهر عند التمرير فقط.
- خط الجسم: بوبينز
- وزن خط الجسم: خفيف
- محاذاة النص الأساسي: الوسط
- لون النص الأساسي: # 000000
- حجم النص الأساسي: 0 بكسل (سطح المكتب) ، 15 بكسل (الجهاز اللوحي والهاتف)
- ارتفاع خط الجسم: 2.2em
تحوم إعدادات النص الأساسي
للتأكد من ظهور النص الأساسي عند التمرير ، قم بتغيير حجم النص عند التمرير.
- حجم النص الأساسي: 15 بكسل
التباعد الافتراضي
لإعطاء الوحدة بعض المساحة للتنفس ، نضيف بعض الحشو العلوي والسفلي المخصص للوحدة.
- الحشوة العلوية: 80 بكسل
- الحشو السفلي: 80 بكسل
تحوم التباعد
سنقوم بتعديل إعدادات التباعد عند التمرير. لن تتمكن من رؤية النتيجة النهائية قبل الخروج من Visual Builder لأننا نطبق خيارات التمرير على كل من الصف والوحدة النمطية Blurb.
- الحشوة العلوية: 80 بكسل
- الحشو السفلي: 80 بكسل
- الحشو الأيسر: 20vw
- الحشوة اليمنى: 20vw
صف استنساخ 3 مرات
بمجرد الانتهاء من تعديل الصف الأول ووحدة Blurb النمطية الخاصة به ، يمكنك المضي قدمًا واستنساخ الصف عدة مرات كما تريد.
تغيير وحدة الصف والدليل رقم 2
تغيير تباعد الصفوف
افتح أول نسخة مكررة وأضف بعض الهامش الأيسر المخصص. سيسمح لنا ذلك بإنشاء تأثير الدرج الذي يمكنك ملاحظته في معاينة هذا المنشور.
- الهامش الأيسر: 6vw
تغيير لون حدود الصف
قم بتغيير لون الحد الأيسر للصف أيضًا.
- لون الحد الأيسر: # 00ffcc
تغيير محتوى وأيقونة Blurb
ثم افتح الوحدة النمطية Blurb وقم بتغيير الرمز.
تغيير لون رمز الوحدة النمطية للدعاية والإعلان
جنبا إلى جنب مع لون الأيقونة.
- لون الأيقونة: # 00eda6
تغيير لون نص العنوان
ولون نص العنوان.
- لون نص العنوان: # 00eda6
تغيير وحدة الصف والدليل رقم 3
تغيير تباعد الصفوف
أضف بعض الهامش الأيسر المخصص للنسخة الثانية أيضًا.
- الهامش الأيسر: 12vw
تغيير لون حدود الصف
تغيير لون حد الصف الأيسر.
- لون الحد الأيسر: #afebff
تغيير محتوى وأيقونة Blurb
جنبا إلى جنب مع رمز دعاية مغالى فيها والمحتوى.
تغيير لون رمز الوحدة النمطية للدعاية والإعلان
قم بتعديل لون الرمز أيضًا.
- لون الأيقونة: # 68d9ff
تغيير لون نص العنوان
ولون نص العنوان أيضا.
- لون نص العنوان: # 68d9ff
تغيير وحدة الصف والدليل رقم 4
تغيير تباعد الصفوف
إلى التكرار التالي والأخير! أضف بعض الهامش الأيسر المخصص للصف.
- الهامش الأيسر: 18vw
تغيير لون حدود الصف
قم بتغيير لون الحد الأيسر للصف أيضًا.
- لون الحد الأيسر: # dd87cf
تغيير محتوى وأيقونة Blurb
افتح الوحدة النمطية Blurb في الصف وقم بتغيير رمز ومحتوى الوحدة النمطية.
تغيير لون رمز الوحدة النمطية للدعاية والإعلان
جنبا إلى جنب مع لون الأيقونة.
- لون الأيقونة: # dd6aca
تغيير لون نص العنوان
ولون نص العنوان كذلك.
- لون نص العنوان: # dd6aca
معاينة
الآن بعد أن انتهينا من البرنامج التعليمي ، دعنا نلقي نظرة أخيرة على النتيجة على أحجام الشاشات المختلفة.
سطح المكتب
متحرك
افكار اخيرة
في هذا المنشور ، أوضحنا لك كيفية استخدام خيارات Divi المضمنة فقط لإنشاء علامات تبويب تحوم. سيساعدك هذا الأسلوب على مشاركة المحتوى حول الميزات أو المنتجات بطريقة تفاعلية. إذا كان لديك أي أسئلة أو اقتراحات ، فتأكد من ترك تعليق في قسم التعليقات أدناه!