كيفية التمرير لأسفل للكشف عن عنوان صورة معرض الصور والتعليق عليها مع Divi

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

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

معاينة

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

سطح المكتب

متحرك

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

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

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

تنزيل مجاني

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

تحميل

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

https://youtu.be/p6Bh7wz3HMc

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

1. تحميل الصور مع العناوين والتعليقات التوضيحية

انتقل إلى مكتبة الوسائط

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

تحميل الصور

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

أضف العناوين والتعليقات التوضيحية

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

2. إنشاء تصميم مع Divi

قم بإنشاء صفحة جديدة أو افتح صفحة موجودة

بمجرد تحميل صورك ، حان الوقت لبناء التصميم في Divi. قم بإنشاء صفحة جديدة أو افتح صفحة جديدة وقم بتمكين Visual Builder في الأعلى.

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

لون الخلفية

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

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

أضف الصف رقم 1

هيكل العمود

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

تباعد

بدون إضافة وحدات بعد ، افتح إعدادات الصف ، وانتقل إلى علامة تبويب التصميم وقم بتطبيق الهامش العلوي والسفلي التالي:

• الهامش الأعلى: 5٪
• الهامش السفلي: 5٪

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

أضف محتوى H2

حان الوقت لإضافة وحدات ، بدءًا من وحدة نصية في العمود 1 تحتوي على بعض محتوى H2.

إعدادات نص H2

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

• خط العنوان 2: مونتسيرات
• حجم نص العنوان 2:
  • سطح المكتب: 62 بكسل
  • الجهاز اللوحي: 48 بكسل
  • الهاتف: 32 بكسل
• ارتفاع خط العنوان 2: 1.3em

تحجيم

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

• عرض ماكس:
  • سطح المكتب: 500 بكسل
  • الجهاز اللوحي: 400 بكسل
  • الهاتف: 250 بكسل

أضف وحدة Divider Module إلى العمود 1

الرؤية

الوحدة التالية والأخيرة التي نحتاجها في العمود 1 هي وحدة Divider Module. تأكد من تمكين خيار "إظهار الحاجز".

• إظهار الحاجز: نعم

خط

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

• لون الخط: # ffc000

تحجيم

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

• وزن الحاجز: 5 بكسل
• العرض الأقصى: 100 بكسل
• الارتفاع: 5 بكسل

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

إضافة محتوى

في العمود 2 ، الوحدة الوحيدة التي نحتاجها هي وحدة نصية مع بعض محتوى الوصف.

إعدادات النص

قم بتغيير إعدادات نص الوحدة كما يلي:

• خط النص: لاتو
• ارتفاع خط النص: 2.2em

تباعد

قم بتطبيق بعض الهامش العلوي أيضًا.

• الهامش الأعلى: 50 بكسل

أضف القسم رقم 2

أضف قسمًا آخر أسفل القسم السابق.

خلفية متدرجة

افتح إعدادات القسم وقم بتطبيق خلفية متدرجة.

• اللون 1: #eded
• اللون 2: #ffffff
• نوع التدرج: خطي
• موقف البداية: 20٪
• موضع النهاية: 20٪

تباعد

انتقل إلى علامة تبويب تصميم القسم وقم بإزالة جميع الحشوة الافتراضية العلوية والسفلية.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

أضف الصف رقم 1

هيكل العمود

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

لون الخلفية

بدون إضافة وحدات بعد ، افتح إعدادات الصف وقم بتطبيق لون الخلفية.

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

تحجيم

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

• استخدام عرض مزراب مخصص: نعم
• عرض المزراب: 2
• العرض: 90٪
• العرض الأقصى: 1580 بكسل

تباعد

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

• الحشوة العلوية: 150 بكسل
• الحشو السفلي: 0 بكسل
• الحشوة اليسرى: 5٪
• الحشوة اليمنى: 5٪

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

حدد الصور التي تم تحميلها

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

عناصر

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

• إظهار العنوان والتسمية التوضيحية
  • سطح المكتب: نعم
  • الجهاز اللوحي والهاتف: لا
• إظهار ترقيم الصفحات: لا

تخطيط

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

• التخطيط: الشبكة
• اتجاه الصورة المصغرة: عمودي

تراكب

نحن نقوم بتعديل إعدادات التراكب أيضًا.

• لون أيقونة التراكب: #ffffff
• تراكب لون الخلفية: rgba (0،0،0،0.25)

إعدادات النص

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

• لون النص: فاتح

إعدادات نص العنوان

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

• مستوى عنوان العنوان: H3
• خط العنوان: مونتسيرات
• حجم نص العنوان: 20 بكسل

إعدادات نص التسمية التوضيحية

نحن بصدد تغيير إعدادات نص التسمية التوضيحية أيضًا.

• خط التسمية التوضيحية: Lato
• لون نص التسمية التوضيحية: #efefef
• تباعد حروف التسمية التوضيحية: 0.5 بكسل
• ارتفاع سطر التسمية التوضيحية: 1.9em

معرض عنصر CSS

بعد ذلك ، ننتقل إلى علامة التبويب المتقدمة. بمجرد الوصول إلى هناك ، سنضيف الأسطر التالية من كود CSS إلى مربع CSS بعنوان عنصر المعرض:

padding-top: 20px;
padding-left: 7%;
padding-right: 7%;

المعرض التسمية التوضيحية لعنصر CSS

وسنستخدم خطوط الكود هذه داخل مربع CSS لتسمية عنصر المعرض:

padding-top: 20px;
padding-left: 7%;
padding-right: 7%;
padding-bottom: 20px;

3. تطبيق تأثير الكشف

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

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

• معرف CSS: معرض divi

أضف وحدة التعليمات البرمجية أسفل وحدة المعرض

بعد ذلك ، سنضيف وحدة رمز أسفل وحدة المعرض.

أضف علامات الأنماط

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

أدخل كود CSS بين علامات الأنماط

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

#divi-gallery .et_pb_gallery_item h3, #divi-gallery .et_pb_gallery_item p {
visibility: hidden;
opacity: 0;
transform: translateY(-50px);
background-color: #FE7541;
margin-bottom: 0px !important;
margin-top: 0px !important;
}
  
#divi-gallery .et_pb_gallery_item h3, #divi-gallery .et_pb_gallery_item p, #divi-gallery .et_pb_gallery_image {
-webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
-moz-transition: 300ms all cubic-bezier(.4,0,.2,1);   
-o-transition: 300ms all cubic-bezier(.4,0,.2,1); 
-ms-transition: 300ms all cubic-bezier(.4,0,.2,1);   
transition: 300ms all cubic-bezier(.4,0,.2,1); 
}

#divi-gallery .et_pb_gallery_item:hover h3, #divi-gallery .et_pb_gallery_item:hover p {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
  
#divi-gallery .et_pb_gallery_item:hover div {
transform: translateY(-10px);
}

هذا كل شيء! احفظ إعدادات صفحتك واخرج من Visual Builder لعرض النتيجة عندما تحوم فوق أحد عناصر المعرض.

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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