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

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

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

معاينة

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

سطح المكتب

متحرك

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

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

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

تنزيل مجاني

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

تحميل

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

1. إنشاء تصميم بطل

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

لون الخلفية

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

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

تباعد

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

• الحشوة السفلية: 120vh

أضف الصف رقم 1

هيكل العمود

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

تحجيم

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

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

تباعد

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

• الهامش العلوي:
  • سطح المكتب: 10vh
  • الجهاز اللوحي والهاتف: 5vh

فهرس Z.

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

• الفهرس Z: 10

كافة إعدادات العمود

بمجرد الانتهاء من إعدادات الصف العامة ، افتح كل عمود على حدة.

العنصر الرئيسي CSS

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

الهاتف فقط:

width: 50% !important;
margin: 0 !important;

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

ثم افتح إعدادات العمود 2.

فهرس Z.

ويرفع مؤشر Z إلى 12. وهذا سيضع هذا العمود فوق العمود الثالث.

• الفهرس Z: 12

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

تحميل الصور

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

تباعد

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

• الهامش السفلي:
  • الجهاز اللوحي والهاتف: 10 بكسل
• الهامش الأيمن:
  • الجهاز اللوحي والهاتف: 2٪

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

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

تغيير الصور

تأكد من تغيير الصورة في كل وحدة مكررة.

تغيير وحدة الصورة رقم 2 & # 4 التباعد

بعد ذلك ، افتح إعدادات وحدات الصورة النمطية في العمود 2 و 4 ، وقم بتطبيق قيم التباعد التالية عليها:

• الهامش السفلي:
  • الجهاز اللوحي والهاتف: 10 بكسل
• الهامش الأيسر:
  • الجهاز اللوحي والهاتف: 2٪
• الهامش الأيمن: /

أضف الصف رقم 2

هيكل العمود

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

خلفية متدرجة

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

• اللون 1: # 111111
• اللون 2: rgba (255،255،255،0)

تحجيم

قم بتعديل إعدادات التحجيم بعد ذلك.

• العرض: 100٪
• العرض الأقصى: 2580 بكسل

تباعد

ثم ، قم بتطبيق بعض المساحة المتروكة العلوية والسفلية.

• الحشو العلوي: 20vh
• الحشوة السفلية: 20vh

موقع

لوضع هذا الصف أعلى شبكة الصور ، سنستخدم إعدادات الموضع وفقًا لذلك:

• الموقف: مطلق
• الموقع: توب سنتر
• الفهرس Z: 12

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

أضف محتوى H1

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

إعدادات نص H1

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

• خط العنوان: Kumbh Sans
• وزن خط العنوان: غامق
• نمط خط العنوان: أحرف كبيرة
• محاذاة نص العنوان: الوسط
• لون نص العنوان: #ffdbaa
• حجم نص العنوان:
  • سطح المكتب: 120 بكسل
  • الجهاز اللوحي: 60 بكسل
  • الهاتف: 40 بكسل
• تباعد حروف العنوان
  • سطح المكتب: -3 بكسل
  • الجهاز اللوحي والهاتف: 0 بكسل
• ظل نص العنوان:
  • حدد: الخيار الثالث
  • لون ظل نص العنوان: rgba (0،0،0،0.4)

تحجيم

قم بتعديل إعدادات التحجيم بعد ذلك.

• العرض الأقصى: 900 بكسل
• محاذاة الوحدة: المركز

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

أضف نسخة

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

محاذاة الزر

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

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

إعدادات الزر

ثم ، نمط الزر.

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر:
  • سطح المكتب: 20 بكسل
  • الجهاز اللوحي: 16 بكسل
  • الهاتف: 14 بكسل
• حجم نص الزر: # 111111
• لون خلفية الزر: #ffffff
• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 100 بكسل

• خط الزر: Kumbh Sans
• وزن خط الزر: غامق

تباعد

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

• الحشوة العلوية:
  • سطح المكتب والجهاز اللوحي: 20 بكسل
  • الهاتف: 15 بكسل
• الحشوة السفلية:
  • سطح المكتب والجهاز اللوحي: 20 بكسل
  • الهاتف: 15 بكسل
• الحشوة اليسرى:
  • سطح المكتب والكمبيوتر اللوحي: 50 بكسل
  • الهاتف: 40 بكسل
• الحشوة اليمنى:
  • سطح المكتب والكمبيوتر اللوحي: 50 بكسل
  • الهاتف: 40 بكسل

2. تطبيق الإعدادات الثابتة

بدوره الصف رقم 1 لزجة

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

• موقف مثبت: التمسك بالأعلى
• حد الالتصاق السفلي: القسم
• الإزاحة من العناصر اللاصقة المحيطة: نعم
• الانتقال الافتراضي والأنماط الثابتة: نعم

عتامة مثبتة

بعد ذلك ، قم بتغيير العتامة في إعدادات المرشحات.

• الافتراضي: 20٪
• مثبت: 100٪

وحدة الصورة رقم 1 إعدادات ثابتة

تباعد

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

• الهامش العلوي الثابت: -20٪
• الهامش الأيمن الثابت: -20٪

انتقال

قم بزيادة مدة الانتقال أيضًا.

• مدة الانتقال: 700 مللي ثانية

وحدة الصورة رقم 2 التباعد اللاصق

تباعد

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

• الهامش العلوي الثابت: 20٪
• الهامش الأيسر الثابت: -30٪

انتقال

قم بزيادة مدة الانتقال هنا أيضًا.

• مدة الانتقال: 1000 مللي ثانية

وحدة الصورة رقم 3 التباعد اللاصق

تباعد

بعد ذلك ، لدينا وحدة الصورة في العمود 3. استخدم قيم التباعد اللاصق التالية:

• الهامش العلوي الثابت: -10٪
• الهامش الأيسر الثابت: -25٪
• الهامش الأيمن الثابت: -25٪

انتقال

قم بتغيير مدة النقل وفقًا لذلك:

• مدة الانتقال: 700 مللي ثانية

وحدة الصورة رقم 4 التباعد اللاصق

تباعد

وأخيرًا ، افتح وحدة الصورة في العمود 4. قم بتطبيق قيم التباعد اللاصق التالية:

• الهامش العلوي الثابت: -20٪
• الهامش الأيسر الثابت: -30٪

انتقال

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

• مدة الانتقال: 1000 مللي ثانية

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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