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 التالية. إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.

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

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

...