كيفية إنشاء نموذج معرض التمرير باستخدام خيارات تجاوز سعة Divi الجديدة

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

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

معاينة

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

سطح المكتب

متحرك

قم بتنزيل Scroll Gallery Mockup Design مجانًا

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

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

تنزيل مجاني

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

تحميل

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

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

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

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

تحجيم

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

• العرض: 25vw (Desktop) ، 60vw (Tablet) ، 80vw (Phone)
• أقصى عرض: 25vw (سطح المكتب) ، 60vw (كمبيوتر لوحي) ، 80vw (هاتف)

تباعد

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

• الهامش العلوي: 9vw
• القاع: 9vw
• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

الحدود

تابع بالانتقال إلى إعدادات حدود القسم وإنشاء شكل نموذج بالحجم الطبيعي للهاتف المحمول عن طريق إضافة "30 بكسل" لكل زاوية من الزوايا.

مربع الظل

أضف ظل مربع دقيق للسماح للشكل بالظهور.

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

أضف الصف رقم 1

هيكل العمود

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

لون الخلفية

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

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

تحجيم

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

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

تباعد

قم بإزالة المساحة المتروكة العلوية والسفلية الافتراضية بعد ذلك.

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

مربع الظل

وإضافة ظل مربع كذلك.

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

فهرس Z.

أخيرًا وليس آخرًا ، سوف نتأكد من أن الصف (وخاصة ظل الصندوق الخاص به) يتداخل مع الصف التالي عن طريق زيادة فهرس Z في إعدادات الرؤية.

• الفهرس Z: 99

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

أضف محتوى H2

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

إعدادات نص H2

بمجرد إضافة نسخة H2 ، انتقل إلى إعدادات نص H2 وقم بإجراء بعض التغييرات.

• خط العنوان 2: Abril Fatface
• العنوان 2 محاذاة النص: الوسط
• لون نص العنوان 2: # 000000
• حجم نص العنوان 2: 1.5vw (سطح المكتب) ، 3.5vw (الجهاز اللوحي) ، 5vw (الهاتف)

تباعد

أضف بعض الهامش العلوي والسفلي المخصص بعد ذلك.

• الهامش العلوي: 1.5vw (سطح المكتب والكمبيوتر اللوحي) ، 3.5vw (الهاتف)
• الهامش السفلي: 1.5vw (سطح المكتب والكمبيوتر اللوحي) ، 3.5vw (الهاتف)

أضف الصف رقم 2

هيكل العمود

إلى الصف الثاني! هنا ، نستخدم بنية العمود التالية:

تحجيم

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

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• العرض: 100٪
• العرض الأقصى: 100٪
• الارتفاع: 38vw (سطح المكتب) ، 100vw (الجهاز اللوحي) ، 120vw (الهاتف)
• أقصى ارتفاع: 38vw (سطح المكتب) ، 100vw (كمبيوتر لوحي) ، 120vw (هاتف)

تباعد

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

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

تجاوز عمودي

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

• تجاوز عمودي: التمرير

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

تحميل الصور

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

تحجيم

تأكد من تمكين خيار "Force Fullwidth" في وحدة الصورة لضمان الحصول على نتيجة سريعة الاستجابة.

• فرض عرض كامل: نعم

تباعد

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

• الهامش السفلي: 1vw

استنساخ وحدة الصورة عدة مرات كما تريد

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

تحميل صور مختلفة

بالطبع ، سترغب في تغيير الصورة في كل نسخة مكررة.

أضف الصف رقم 3

هيكل العمود

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

لون الخلفية

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

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

تحجيم

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

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

تباعد

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

• الحشوة العلوية: 2.1vw (سطح المكتب) ، 3.5vw (Tablet) ، 5vw (Phone)
• الحشوة السفلية: 2.1vw (سطح المكتب) ، 3.5vw (الكمبيوتر اللوحي) ، 5vw (الهاتف)

مربع الظل

وإضافة ظل مربع لخلق عمق.

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

فهرس Z.

للتأكد من تداخل هذا الصف (وخاصة ظل الصندوق) مع الصف السابق ، سنقوم بزيادة مؤشر Z.

• الفهرس Z: 99

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

أضف نسخة

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

انتقام

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

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

إعدادات الزر

قم بتعديل إعدادات الزر أيضًا.

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 1vw (سطح المكتب) ، 2.5vw (جهاز لوحي) ، 3.5vw (هاتف)
• لون نص الزر: #ffffff
• لون خلفية الزر: # 000000
• عرض حد الزر: 1 بكسل
• خط الزر: Abril Fatface

تباعد

وأنشئ الشكل الذي تريده باستخدام قيم المساحة المتروكة المخصصة.

• الحشوة العلوية: 0.5vw (سطح المكتب) ، 1vw (Tablet) ، 2vw (Phone)
• الحشوة السفلية: 0.5vw (سطح المكتب) ، 1vw (الكمبيوتر اللوحي) ، 2vw (الهاتف)
• الحشو الأيسر: 3vw (سطح المكتب) ، 7vw (كمبيوتر لوحي) ، 9vw (هاتف)
• الحشو الأيمن: 3vw (سطح المكتب) ، 7vw (كمبيوتر لوحي) ، 9vw (هاتف)

نمط شريط التمرير

أضف معرف CSS إلى الصف رقم 2

الأمر متروك لك فيما إذا كنت تريد تصميم شريط التمرير أم لا. إذا قمت بذلك ، فافتح الصف الثاني وأضف فئة CSS إليه.

• فئة CSS: شريط التمرير صورة

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

ثم افتح إعدادات الصف.

نمط شريط التمرير باستخدام CSS

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

.image-scrollbar::-webkit-scrollbar {
width: 10px;
}
.image-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
}
.image-scrollbar::-webkit-scrollbar-thumb {
background: #000000;
}

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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