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

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

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

دعنا نذهب اليها!

معاينة

قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على النتيجة على أحجام الشاشات المختلفة.

سطح المكتب

كما تلاحظ في ملف GIF أدناه ، لدينا انتقال سلس مع مؤشر الماوس يكشف عن محتوى العمود عند التمرير.

متحرك

من ناحية أخرى ، في أحجام الشاشات الأصغر ، سيتم عرض محتوى العمود بالفعل دون الحاجة إلى التمرير.

لنبدأ في إعادة التكوين!

اشترك في قناتنا على اليوتيوب

إضافة قسم عادي جديد

تباعد

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

• الحشوة العلوية: 10vw
• الحشو السفلي: 15vw

أضف صفًا جديدًا

هيكل العمود

تابع بإضافة صف جديد إلى القسم باستخدام بنية العمود التالية:

تحجيم

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

• جعل هذا الصف بعرض كامل: نعم
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

تباعد

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

• الحشو الأيسر: 8vw
• الحشوة اليمنى: 8vw
• العمود 1 الحشوة اليمنى: 2vw
• العمود 2 الحشوة اليسرى: 1vw
• العمود 2 الحشوة اليمنى: 1vw
• العمود 3 الحشوة اليسرى: 2vw

أضف وحدة النص رقم 1 إلى العمود 1

إضافة محتوى

حان الوقت لبدء إضافة الوحدات! ابدأ بوحدة نصية في العمود 1. أضف بعض محتوى H3 المفضل.

إعدادات نص H3

بعد ذلك ، انتقل إلى إعدادات نص العنوان وقم بإجراء بعض التغييرات على مظهر محتوى H3.

• عنوان الخط 3: Didact Gothic
• وزن خط العنوان 3: غامق
• العنوان 3 محاذاة النص: الوسط
• لون نص العنوان 3: # 3567ff
• حجم نص العنوان 3: 1.2vw (سطح المكتب) ، 20 بكسل (الجهاز اللوحي والهاتف)

تباعد

أضف بعض قيم التباعد المخصصة إلى وحدة النص بعد ذلك.

• الهامش السفلي: 4vw
• الحشوة العلوية: 4vw
• الحشو السفلي: 4vw

مربع الظل

وإعطاء الوحدة ظل مربع دقيق.

• مربع الظل الرأسي: 36 بكسل
• مربع قوة طمس الظل: 60 بكسل
• لون الظل: rgba (0،0،0،0.06)

أضف وحدة النص رقم 2 إلى العمود 1

إضافة محتوى

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

إعدادات النص

بعد ذلك ، انتقل إلى علامة تبويب التصميم وقم بإجراء بعض التغييرات على إعدادات النص.

• خط النص: Open Sans
• حجم النص: 0.8vw (سطح المكتب) ، 14 بكسل (الجهاز اللوحي والهاتف)
• تباعد الحروف النصية: -0.05vw
• ارتفاع خط النص: 2.2em
• اتجاه النص: مبرر
• لون النص: غامق

تباعد

تلاعب بالهامش المخصص وقيم الحشو في إعدادات التباعد أيضًا.

• الهامش السفلي: 3vw
• الحشوة العلوية: 2vw
• الحشوة السفلية: 2vw
• الحشوة اليسرى: 4vw
• الحشوة اليمنى: 4vw

الحدود

وأضف الحدود اليمنى واليسرى للوحدة باستخدام الإعدادات التالية:

• عرض الحد الأيمن: 1 بكسل
• لون الحد الأيمن: # e5e5e5

أضف وحدة الزر إلى العمود 1

أضف نسخة

الوحدة التالية التي نحتاجها في العمود الأول هي وحدة الأزرار. أضف نسخة من اختيارك.

انتقام

بعد ذلك ، انتقل إلى علامة تبويب التصميم وقم بتغيير محاذاة الزر إلى المركز.

• محاذاة الزر: الوسط

إعدادات الزر

استمر بفتح إعدادات الزر وتغيير مظهر الزر ليجعله يتطابق مع التصميم العام الذي نهدف إلى تحقيقه.

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 1vw (سطح المكتب) ، 15 بكسل (الجهاز اللوحي والهاتف)
• لون نص الزر: # 000000
• عرض حد الزر: 1 بكسل
• لون حدود الزر: #dddddd
• نصف قطر حدود الزر: 0 بكسل
• تباعد أحرف الأزرار: -0.05vw
• وزن الخط: عريض
• نمط الخط: أحرف كبيرة

تباعد

العب مع قيم التباعد في وحدة الزر أيضًا.

• الهامش السفلي: 100 بكسل (الجهاز اللوحي والهاتف)
• الحشوة العلوية: 0.8vw (سطح المكتب) ، 10 بكسل (الجهاز اللوحي والهاتف)
• الحشوة السفلية: 0.8vw (سطح المكتب) ، 10 بكسل (الكمبيوتر اللوحي والهاتف)
• الحشوة اليسرى: 3.5vw (سطح المكتب) ، 50 بكسل (الجهاز اللوحي والهاتف)
• الحشوة اليمنى: 3.5vw (سطح المكتب) ، 50 بكسل (الجهاز اللوحي والهاتف)

استنساخ الوحدات النمطية في العمود 1 مرتين ووضع التكرارات في الأعمدة المتبقية

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

تغيير لون النص للوحدة النمطية للنص # 1 في العمود 2

افتح وحدة النص الأولى في العمود 2 وقم بتغيير لون النص.

• لون نص العنوان 3: # 6d28c1

تغيير لون النص للوحدة النمطية للنص # 1 في العمود 3

افعل نفس الشيء بالنسبة لوحدة النص الأولى في العمود الثالث.

• لون نص العنوان 3: # 15668e

أضف وحدة نص التراكب إلى العمود 1

إضافة محتوى

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

خلفية متدرجة

تابع بإضافة خلفية متدرجة إلى الوحدة النمطية.

• اللون 1: # 6a30ff
• اللون 2: # 3567ff
• اتجاه التدرج: 124 درجة

إعدادات النص

قم بتغيير إعدادات النص بعد ذلك.

• خط النص: Didact Gothic
• لون النص: #ffffff
• حجم النص: 2vw
• اتجاه النص: الوسط

تباعد

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

• الهامش العلوي: -38vw
• الحشوة العلوية: 15vw
• الحشو السفلي: 15vw

الحدود

أضف بعض الزوايا الدائرية إلى وحدة النص بعد ذلك.

مربع الظل

جنبا إلى جنب مع الظل مربع خفية.

• مربع قوة طمس الظل: 40 بكسل
• لون الظل: rgba (0،0،0،0.16)

المرشحات الافتراضية

بعد ذلك ، انتقل إلى إعدادات الفلاتر وتأكد من أن التعتيم هو 100٪ افتراضيًا.

• العتامة: 100٪

مرشحات تحوم

غيّر التعتيم عند التمرير إلى "0٪". سيؤدي ذلك إلى اختفاء الوحدة النمطية وسيسمح بظهور جميع محتويات العمود بدلاً من ذلك.

• العتامة: 0٪

لغة تنسيق ويب حسب الطلب

للتأكد من بقاء وحدة النص أعلى محتوى العمود بالكامل ، أضف سطرين من كود CSS في علامة التبويب المتقدمة في وحدة النص.

z-index: 99;
position: relative

الرؤية

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

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

بمجرد الانتهاء من تعديل وحدة نص التراكب ، انطلق واستنسخها مرتين. ضع كل واحدة من التكرارات في العمودين المتبقيين.

تغيير خلفية التدرج لوحدة نص التراكب في العمود 2

قم بتغيير لون الخلفية المتدرج للنسخة الأولى.

• اللون 1: # d530ff
• اللون 2: # 6d28c1

تغيير خلفية متدرجة لوحدة نص التراكب في العمود 3

وافعل الشيء نفسه بالنسبة للنسخة الثانية أيضًا.

• اللون 1: # 41ff30
• اللون 2: # 15668e

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

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

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

تنزيل مجاني

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

تحميل

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

معاينة

سطح المكتب

متحرك

افكار اخيرة

في هذا المنشور ، أوضحنا لك كيفية الكشف عن محتوى العمود عند التمرير. يمكنك استخدام هذا الأسلوب مع أي نوع من مواقع الويب التي تنشئها لإضافة مستوى إضافي من التفاعل. إذا كان لديك أي أسئلة أو اقتراحات ، فتأكد من ترك تعليق في قسم التعليقات أدناه!