كيفية الكشف عن المحتوى على Hover مع توسيع علامات تبويب الزاوية في Divi (تنزيل مجاني)

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

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

هيا بنا نبدأ!

نظرة خاطفة

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

قم بتنزيل Layout مجانًا

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

قم بتنزيل الملفات

تنزيل مجاني

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

تحميل

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

لاستيراد التخطيط إلى صفحتك ، ما عليك سوى استخراج ملف مضغوط واسحب ملف json إلى Divi Builder.

Letis للوصول إلى البرنامج التعليمي ، فهل نحن؟

ما تحتاجه للبدء

للبدء ، سوف تحتاج إلى القيام بما يلي:

1. إذا لم تكن قد قمت بذلك بعد ، فقم بتثبيت وتفعيل Divi Theme.
2. قم بإنشاء صفحة جديدة في WordPress واستخدم Divi Builder لتحرير الصفحة على الواجهة الأمامية (منشئ مرئي).
3. اختر الخيار "البناء من الصفر".

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

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

الجزء 1: إنشاء علامة تبويب زاوية موسعة من الموضع الأيمن السفلي

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

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

• عرض المزراب: 4

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

لنبدأ بإضافة وحدة دعاية مغالى فيها.

أضف الوحدة النمطية Blurb

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

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

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

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

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

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

العمود 1 الحدود

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

CSS مخصص و Overflow

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

height: 400px;

التحديث التالي:

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

يعد هذا الارتفاع المخصص ضروريًا حتى تقوم الوحدة النمطية الخاصة بنا (علامة تبويب الزاوية) بتوسيع الارتفاع الكامل للعمود. وهناك حاجة إلى الفائض المخفي حتى نتمكن من إخفاء معظم وحدة blurb خارج العمود حتى حالة التمرير.

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

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

• العنوان: 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>
  

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

تصميم وحدة Blurb

امنح الدعاية الدعاية لون خلفية عند التمرير على النحو التالي:

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

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

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

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

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

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

• مقياس التحويل المحور Y: 50٪
• مقياس التحويل المحور X: 50٪
• تحويل المحور Y للترجمة: 50٪
• تحويل ترجمة المحور س: 30٪
• أصل التحويل: أسفل اليمين

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

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

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

direction: rtl

ملاحظة: يشير الاتجاه "rtl" إلى "من اليمين إلى اليسار" والذي يقوم بتبديل الترتيب الافتراضي للمحتوى (من اليسار إلى اليمين).

نتيجة

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

الجزء 2: إنشاء علامة تبويب زاوية موسعة من الموضع الأيسر السفلي

قم بتكرار العمود

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

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

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

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

تحديث إعدادات Blurb

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

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

• Transform Translate X Axis (سطح المكتب): -30٪
• Transform Origin (سطح المكتب): أسفل اليسار

ثم تأكد من حذف CSS المخصص في مربع Blurb Content.

نتيجة

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

الجزء 3: إنشاء علامة تبويب زاوية موسعة من الموضع الأيمن العلوي

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

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

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

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

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

بعد ذلك ، افتح الإعداد الخاص بوحدة blurb وقم بتحديث ما يلي:

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

Blurb Custom CSS

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

أضف CSS المخصص التالي إلى مربع Blurb Title:

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

ثم أضف CSS التالي إلى Blurb Content Box:

direction: rtl;
height: 100%;

الجزء 4: إنشاء علامة تبويب زاوية موسعة من الموضع الأيسر العلوي

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

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

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

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

تحديث إعدادات Blurb

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

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

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

• Transform Translate X Axis (سطح المكتب): -30٪
• أصل التحويل: أعلى اليسار

Blurb Custom CSS

ثم أضف CSS المخصص التالي إلى مربع Blurb Title:

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

ثم أضف CSS التالي إلى مربع Blurb Content:

height: 100%;

الجزء 4: الانتهاء من تصميم التخطيط

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

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

• لون الخلفية: #efefef

إضافة العنوان

لإنشاء العنوان ، أضف صفًا في منتصف الصفين وأضف وحدة نصية إلى صف العمود الواحد.

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

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

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

النتيجة النهائية

تحقق من النتيجة النهائية للتخطيط مع توسيع علامات تبويب الزاوية.

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

افكار اخيرة

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

أتطلع إلى الاستماع منك في التعليقات.

هتافات!