Divi: كيفية الكشف عن المحتوى عند التمرير فوق علامات التبويب

هل تريد أن يظهر المحتوى عند تمرير مؤشر الماوس فوق علامات التبويب القابلة للتوسيع في زاوية Divi؟

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

في هذا الدرس، سنُنشئ تصميمًا فريدًا تمامًا لـ Divi يُظهر المحتوى عند تمرير المؤشر عليه باستخدام علامات تبويب قابلة للتوسيع في الزوايا. سنُوضح لك تحديدًا كيفية تصميم علامة تبويب قابلة للتوسيع في الزوايا الأربع لعمود في Divi.

دعونا نبدأ!

مسح

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

قم بإنشاء صفحة جديدة باستخدام Divi Builder

من لوحة تحكم WordPress ، انتقل إلى الصفحات> إضافة جديد لإنشاء صفحة جديدة.

أعطه عنوانًا منطقيًا لك وانقر استخدم Divi Builder

ثم انقر فوق ابدأ البناء (البناء من الصفر)

بعد ذلك ، سيكون لديك لوحة قماش فارغة لبدء التصميم في Divi.

إنشاء تخطيط تراكبات المحتوى القابل للتوسيع في Divi

تصميم لسان زاوية قابل للتمديد من الموضع السفلي الأيمن

للبدء ، أضف صفًا من عمودين إلى القسم العادي.

قبل إضافة وحدة نمطية، قم بتحديث معلمات السطر كما يلي:

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 4

بالنسبة لهذا العنصر الأول المعروض، سنقوم بإنشاء صورة خلفية للعمود تحتوي على علامة تبويب في الزاوية (باستخدام وحدة نمطية). دعاية مغالى فيها) في الجزء السفلي الأيمن من العمود الذي يتم توسيعه ويغطي العمود / الصورة بالكامل عند التمرير.

اقرأ أيضا دليلنا على ديفي: كيفية إنشاء شبكة عمود السوائل عند المرور فوقها

لنبدأ بإضافة وحدة Blurb.

أضف الوحدة النمطية للدعاية إلى العمود 1

إعدادات العمود 1

بمجرد وضع الدعاية المغلوطة في مكانها ، افتح إعدادات الصف ، وقم بتحديث ما يلي:

• صورة الخلفية [أدرج الصورة]
• حجم صورة الخلفية: الحجم الفعلي

ملاحظة: في هذا المثال ، نستخدم صور بيرة خلفية شفافة مأخوذة من حزمة التخطيط مصنع الجعة"تبلغ أبعادها 128 بكسل في 359 بكسل، ولهذا السبب نستخدم حجم الصورة الفعلي."

حدود العمود 1

• الزوايا الدائرية: 10 بكسل أسفل اليمين
• عرض الحدود (لليمين ولأسفل): 2 بكسل
• لون الحد (يمين وأسفل): # e94558

CSS مخصص و overflow

ضمن علامة التبويب "متقدم"، أضف CSS المخصص التالي إلى العنصر الرئيسي:

height: 400px;

قم بتوسيع الخيار "الرؤية" وقم بإجراء التغييرات التالية:

• الفائض الأفقي: مخفي
• الفائض العمودي: مخفي

إضافة محتوى إلى الوحدة النمطية Blurb

نحن الآن جاهزون لبدء تخصيص وحدة Blurb ضمن العمود 1. افتح إعدادات الوحدة وقم بتحديث ما يلي:

• العنوان: Mango IPA
• الجسم :

<p>Vivamus suscipit tortor eget felis porttitor volutpat. Pellentesque in ipsum id orci porta dapibus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur arcu erat, accumsan id imperdiet</p>
<p>Hops: Lorem Ipsum<br /> Yeast: Dolor Amet</p>
<p>4.8% ABV / 4 IBUs</p>

• صورة: أضف نفس الصورة المستخدمة لخلفية العمود

تخصيص وحدة الدعاية والإعلان

قم بتغيير لون خلفية النص التمهيدي عند تمرير المؤشر فوقه كما يلي:

• الخلفية (سطح المكتب): شفافة
• سطح المكتب (تحوم): rgba (255,255,255,0.9،XNUMX،XNUMX،XNUMX)

تحت علامة التبويب تصميم، قم بتحديث ما يلي:

• وضع الصورة / الرمز: صحيح
• خط العنوان: أوزوالد
• وزن الخط: شبه عريض
• نمط الخط: TT
• حجم النص: 40 بكسل
• لون النص الأساسي (سطح المكتب): شفاف
• لون النص الأساسي (تحوم): # 121212

• عرض الصورة / الرمز: 100 بكسل (سطح المكتب) ، 64 بكسل (الهاتف)
• عرض المحتوى: 100٪
• ارتفاع: 100٪
• الحشو (سطح المكتب): 15٪ (أعلى وأسفل) ، 8٪ (يسار ويمين)
• الحشو (التمرير): 8٪ (أعلى ، أسفل ، يسار ويمين)

• الزوايا الدائرية (سطح المكتب): 20 بكسل أعلى اليسار
• الزوايا الدائرية (تحوم): 10 بكسل أعلى اليسار
• عرض الحدود (العلوي واليسار): 4 بكسل (سطح المكتب) ، 2 بكسل (تحوم)
• لون الحد (العلوي واليسار): # e94558

خيار التحويل (سطح المكتب)

• مقياس التحويل (X و Y): 50٪

• تحويل الترجمة
  • المحور ص: 50٪
  • المحور س: 30٪

اقرأ أيضًا دليلنا على: ديفي: كيفية إنشاء تذييل لاصق بتأثير "كشف"

• أصل التحويل: أسفل ويمين

خيارات التحويل (تحوم)

• مقياس التحويل (Y و X) (تحوم): 100٪

• ترجمة التحويل (Y و X) (تحوم): 0٪

لقلب صورة العرض التقديمي إلى اليمين، أضف CSS المخصص التالي إلى المنطقة محتوى دعاية :

direction: rtl

ملاحظة: "rtl" تعني "من اليمين الى اليسار"، مما يغير الترتيب الافتراضي للمحتوى (من اليسار إلى اليمين).

نتيجة

لنلقِ نظرة على النتيجة النهائية لعلامة التبويب الركنية المتوسعة بدءًا من الموضع السفلي الأيمن. لاحظ كيف تتوسع لتملأ العمود بأكمله عند تمرير المؤشر فوقها.

تصميم لسان زاوية قابل للتمديد من الموضع السفلي الأيسر

عمود مكرر

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

تحديث إعدادات عمود 2

بعد ذلك ، افتح إعدادات العمود 2 وقم بتحديث ما يلي:

• الزوايا الدائرية: 10 بكسل أسفل اليسار
• عرض الحدود (يمين): 0 بكسل
• عرض الحدود (يسار): 2 بكسل
• اللون: # e94558

تحديث معلمات وحدة Blurb

بعد ذلك ، قم بتحديث إعدادات Blurb كما يلي:

• محاذاة النص: صحيح
• الزوايا الدائرية (سطح المكتب): 20 بكسل أعلى اليمين
• الزوايا الدائرية (تحوم): 10 بكسل أعلى اليمين
• عرض الحد الأيسر: 0 بكسل
• عرض الحد الأيمن: 4 بكسل (سطح المكتب) ، 2 بكسل (تحوم)
• لون الحد الأيمن: # e94558

• ترجمة التحويل (المحور السيني) (سطح المكتب): -30٪
• Transform Origin (سطح المكتب): أسفل اليسار

ثم تأكد من إزالة CSS المخصص في منطقة محتوى Blurb.

نتيجة

ها هي النتيجة. لاحظ كيف يكون هذا متماثلًا مع الأول وينمو من الموضع الأيسر السفلي للعمود.

تصميم لسان زاوية قابل للتمديد من الموضع العلوي الأيمن

نحن الآن جاهزون للبدء في تصميماتنا النهائية لعلامات التبويب الركنية القابلة للتوسيع. وللبدء بسرعة، دعونا نكرر الصف بأكمله الذي يحتوي على النص التمهيدي الذي صممناه بالفعل.

تحديث إعدادات عمود 1

ثم افتح إعدادات الصف المكرر ، ثم افتح إعدادات العمود 1 وقم بتحديث ما يلي:

• الزوايا الدائرية: 10 بكسل أعلى اليمين
• عرض الحد السفلي: 0 بكسل
• عرض الحد العلوي: 2 بكسل
• لون الحد العلوي: # e94558

تحديث معلمات وحدة Blurb

بعد ذلك ، افتح إعداد الوحدة النمطية Blurb وقم بتحديث ما يلي:

• الزوايا الدائرية (سطح المكتب): 20 بكسل أسفل اليسار
• الزوايا الدائرية (تحوم): 10 بكسل أسفل اليسار
• عرض الحد العلوي: 0 بكسل
• عرض الحد السفلي: 4 بكسل (سطح المكتب) ، 2 بكسل (تحوم)
• عرض الحد السفلي: # e94558

• ترجمة التحويل (المحور ص) (سطح المكتب): -50٪
• أصل التحويل: أعلى اليمين

عرف المغلق

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

أضف CSS المخصص التالي إلى المنطقة عنوان دعاية :

position: absolute;
bottom: 0;
left: 15px;

ثم أضف CSS التالي إلى منطقة المحتوى محتوى دعاية :

direction: rtl;
height: 100%;

تصميم لسان زاوية قابل للتمديد من الموضع العلوي الأيسر

أما بالنسبة لتأثير التمرير الرابع والأخير لعلامة التبويب الركنية المتوسعة، فسنضعها في الزاوية العلوية اليسرى لإكمال التصميم المتناظر لتخطيط الشبكة بالكامل.

تحديث إعدادات عمود 2

ضمن إعدادات الصف ، افتح إعدادات العمود 2 وقم بتحديث ما يلي:

• زوايا الحدود: 10 بكسل أعلى اليسار
• عرض الحد السفلي: 0 بكسل
• عرض الحد العلوي: 2 بكسل
• لون الحد العلوي: # e94558

تحديث معلمات وحدة Blurb

بعد ذلك ، افتح إعدادات نص الوحدة النمطية Blurb في العمود 2 وقم بتحديث ما يلي:

• الزوايا الدائرية (سطح المكتب): 20 بكسل أسفل اليمين
• الزوايا الدائرية (تحوم): 10 بكسل أسفل اليمين
• عرض الحد العلوي: 0 بكسل
• عرض الحد السفلي: 4 بكسل (سطح المكتب) ، 2 بكسل (تحوم)
• لون الحد السفلي: # e94558

ثم قم بتحديث خيارات التحويل:

• ترجمة التحويل (المحور الصادي) (سطح المكتب): -50٪
• أصل التحويل: أعلى اليسار

عرف المغلق

ثم أضف CSS المخصص التالي إلى المنطقة عنوان دعاية :

position: absolute;
bottom: 0%;
right: 0%;

أضف أيضًا CSS التالية في المربع محتوى دعاية :

height: 100%;

الانتهاء من تصميم المخطط

لون خلفية القسم

أضف لون خلفية القسم كما يلي:

• الخلفية: #efefef

أضف عنوانا

لإنشاء العنوان ، أضف سطرًا إلى عمود في منتصف السطرين

ثم أضف وحدة نصية.

أضف المحتوى: "موسمي".

ثم قم بتحديث الإعدادات التالية:

• الخط: Merriweather
• وزن الخط: عريض
• النمط: TT
• محاذاة النص: توسيط
• لون النص: # 999999
• الحجم: 50 بكسل (سطح المكتب) ، 30 بكسل (جهاز لوحي) ، 24 بكسل (هاتف)
• تباعد الأحرف: 1em

• المساحة المتروكة (يسار): 50 بكسل (سطح المكتب) ، 30 بكسل (جهاز لوحي) ، 24 بكسل (هاتف)

نتيجة نهائية

اكتشف النتيجة النهائية للتصميم مع علامات التبويب الركنية القابلة للتوسيع.

وهنا التصميم على الهاتف المحمول.

تحميل DIVI Now !!!

خاتمة

ستعمل علامات التبويب الموجودة في الزاوية والموضحة في هذا البرنامج التعليمي بالتأكيد مع أي نوع من المحتوى الذي ترغب في عرضه على موقع Divi الخاص بك. 

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

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

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

ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.

...