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

هل ترغب في إنشاء شبكة مع Divi أن تكون سائلاً عند التحويم؟

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

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

في هذا البرنامج التعليمي ، سنرشدك خلال عملية الإنشاء خطوة بخطوة.

دعونا نذهب.

مسح

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

مكتب

الجوال

لنبدأ عملية الإنشاء في Divi

أضف قسم جديد

لون الخلفية

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

انظر أيضا: ديفي: كيفية إنشاء تذييل مخصص

افتح أولاً إعدادات القسم وقم بتطبيق لون خلفية بيضاء.

• الخلفية: #ffffff

أضف السطر رقم 1

هيكل العمود

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

التحجيم

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

• استخدام عرض مزراب مخصص: نعم
• مزراب مع: 1
• العرض: 100٪
• العرض الأقصى: 100٪

مباعدة

ثم اسحب الخيار التباعد وقم بتغيير الإعدادات التالية:

• المساحة المتروكة (أعلى وأسفل): 0 بكسل

الحدود

في خيار Border ، قم أيضًا بإجراء التغييرات التالية:

• أنماط الحدود (أعلى وأسفل): 1 بكسل
• لون الحد (أعلى وأسفل): # d3d3d3

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

تحوم الخلفية

بعد ذلك ، دعنا نخصص إعدادات العمود 1. قم بتطبيق خلفية متدرجة على التمرير.

• اللون 1: rgba (255,255,255,0،XNUMX،XNUMX)
• اللون 2: # 000000
• نوع التدرج: خطي
• لون المركز 1: 30٪
• وضع التدرج فوق الصورة المتدرجة: نعم

صورة الخلفية عند التمرير

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

• حجم صورة الخلفية: الغلاف
• موقف صورة الخلفية: المركز

فئة CSS

وأكمل إعداد العمود عن طريق تعيين فئة CSS التالية في علامة التبويب متقدم :

• فئة CSS: عمود التمرير

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

إضافة نص بحجم H3 (العنوان 3)

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

إعدادات نص H3

ثم انتقل إلى علامة التبويب تصميم الوحدة النمطية وتعديل معلمات نص H3 على النحو التالي:

• الخط: أوزوالد
• وزن الخط وزن الخط: خفيف للغاية
• نمط خط العنوان 3: TT
• لون النص: # 0a0a0a
• حجم نص العنوان 3:
  • سطح المكتب: 3vw
  • الجهاز اللوحي: 7vw
  • الهاتف: 14vw
• العنوان 3 تباعد الأحرف: -2 بكسل

التحجيم

قم بتغيير العرض على أحجام الشاشات المختلفة في إعدادات التحجيم.

• عرض :
  • سطح المكتب: 44٪
  • الأجهزة اللوحية: 48٪
  • الهاتف: 50٪

مباعدة

لنقم أيضًا بتغيير المعلمات التالية في الخيار التباعد .

• الهامش (السفلي): 25vh
• الحشو (العلوي والسفلي): 5٪
• الحشو (يسار ويمين): 4٪

الحدود

بعد ذلك ، سنضيف حدودًا إلى اليمين وأسفل.

• عرض الحدود (لليمين ولأسفل): 1 بكسل
• لون الحد (يمين وأسفل): # d3d3d3

فئة CSS

وسنكمل أيضًا إعدادات الوحدة عن طريق تعيين فئة CSS التالية إلى وحدة النص:

• فئة CSS: hover-title

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

إضافة محتوى

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

إعدادات النص

التبديل إلى علامة التبويب تصميم من الوحدة وتعديل معلمات النص وفقًا لذلك:

• خط النص: كارلا
• لون النص: #ffffff
• المقاس:
  • سطح المكتب: 0,8 vw
  • الجهاز اللوحي: 2vw
  • الهاتف: 3.6vw
• ارتفاع الخط: 2,2 م

مباعدة

قم أيضًا بتطبيق قيم الهامش المخصصة.

• الحشو (السفلي): 10٪
• الحشو (يسار ويمين): 9٪

فئة CSS

وأكمل معلمات الوحدة باستخدام فئة CSS التالية للوحدة:

• فئة CSS: نص التمرير

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

إضافة وصف

الوحدة التالية والأخيرة التي نحتاجها هي وحدة نمطية أزرار. أدخل وصفا من اختيارك.

إعدادات زر

قم بتعديل معلمات الوحدة كما يلي:

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر:
  • سطح المكتب: 1vw
  • الكمبيوتر اللوحي: 2,5 فولت
  • الهاتف: 4vw
• عرض حد الزر: 0 بكسل
• نصف قطر الحدود: 0 بكسل

• خط الزر: كارلا
• إظهار رمز الزر: نعم
• وضع رمز الزر: الحق
• فقط إظهار الأيقونة على أكثر للزر: لا

مباعدة

أضف أيضًا قيم التباعد المخصصة.

• الهامش (السفلي): 8٪
• الهامش (يسار ويمين): 9٪
• الحشو (السفلي): 5٪
• الحشو (يمين): 20٪

ظل الصندوق

بعد ذلك ، قم بتطبيق ظل الصندوق.

• مربع الظل الوضع الأفقي: 0 بكسل
• مربع الظل الوضع الرأسي: 2 بكسل
• لون الظل: # 000000

فئة CSS

وأكمل إعدادات الوحدة عن طريق تخصيص فئة CSS التالية للزر:

• فئة CSS: زر التمرير

إعادة استخدام العمود 1

تحذف الأعمدة 2 و 3 و 4

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

العمود 1 استنساخ ثلاث مرات

سنعيد استخدام العمود 1 عن طريق استنساخه ثلاث مرات.

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

ثم قم بتغيير صور خلفية العمود المكررة في كل عمود مكرر.

تحرير المحتوى المكرر

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

حدود العمود الفريدة

العمود 1

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

• عرض الحد (يمين):
  • سطح المكتب: 1 بكسل
  • الجهاز اللوحي: 1 بكسل
  • الهاتف: 0 بكسل
• اللون (يمين): # d3d3d3
• عرض الحدود (سفلي):
  • سطح المكتب: 0 بكسل
  • الجهاز اللوحي: 1 بكسل
  • الهاتف: 1 بكسل
• لون الحد (أسفل): # d3d3d3

العمود 2

بعد ذلك لدينا العمود 2.

عرض الحد (يمين):

• سطح المكتب: 1 بكسل
• الجهاز اللوحي: 1 بكسل
• الهاتف: 0 بكسل

اللون (يمين): # d3d3d3 عرض الحدود (أسفل):

• سطح المكتب: 0 بكسل
• الجهاز اللوحي: 1 بكسل
• الهاتف: 1 بكسل

لون الحد (أسفل): # d3d3d3

العمود 3

وسنستخدم إعدادات الحدود التالية للعمود 3:

• عرض الحد (يمين):
  • سطح المكتب: 1 بكسل
  • الجهاز اللوحي: 1 بكسل
  • الهاتف: 0 بكسل
• اللون (يمين): # d3d3d3
• عرض الحدود (سفلي):
  • سطح المكتب: 0 بكسل
  • الجهاز اللوحي: 1 بكسل
  • الهاتف: 1 بكسل
• لون الحد (أسفل): # d3d3d3

أضف CSS مخصصًا إلى إعدادات الصفحة

افتح إعدادات الصفحة

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

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

أضف كود CSS

وانسخ والصق الأسطر التالية من كود CSS:

.hover-column:hover .hover-title {
background-color: #000000;
}
 
.hover-column:hover .hover-title h3 {
color: white !important;
}
 
.hover-button {
color: black;
}
 
.hover-column:hover .hover-button {
color: white !important;
box-shadow: 0px 2px 0px 0px #ffffff;
}
 
.hover-column:before {
position: absolute;
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(180deg,#ffffff 30%,#ffffff 100%);
z-index: -1;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
-ms-transition: all 0.8s ease;
transition: all 0.8s ease;
opacity: 1;
}
 
.hover-column:hover::before {
opacity: 0;
}

مسح

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على كيفية ظهورها على أحجام الشاشات المختلفة.

مكتب

الجوال

تحميل DIVI Now !!!

وفي الختام

في هذه المقالة ، أوضحنا لك كيفية إنشاء تصميم جميل للتمرير. 

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

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

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

...