إنشاء تخطيط ملء الشاشة مع انتقالات صورة خلفية المنظر في Divi

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

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

نظرة خاطفة

ألق نظرة على بعض التصاميم التي سنبنيها معًا.

ابدء

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

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

تحضير صفحتك الجديدة

بمجرد أن تكون لديك صور جاهزة. قم بإنشاء صفحة جديدة وقم بإعطاء صفحتك عنوانًا. ثم انشر Divi Builder واختر "Build from Scratch". ثم انقر فوق الزر للبناء على الواجهة الأمامية.

أنت الآن جاهز لبدء التنفيذ!

الفكرة الأساسية

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

إليك كيفية القيام بذلك.

إنشاء مقطع الرأس بعرض كامل

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

قم بتحديث إعدادات الرأس ذات النطاق الكامل مع بعض المحتويات بما يلي:

العنوان: "عصير الطماطم"
الزر رقم 1 نص الرابط: "انظر الوصفة"
المحتوى: "المحتوى الخاص بك يذهب هنا. قم بتحرير أو إزالة هذا النص في الصفحة أو في إعدادات محتوى الوحدة النمطية. "
صورة الشعار: [شاهد لقطة الشاشة] (الصورة 240 × 300 بكسل)

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

لون الخلفية: rgba (255،255،255،0.92)

جعل ملء الشاشة: نعم

إظهار زر التمرير لأسفل: نعم
الرمز: انظر لقطة الشاشة
التمرير لأسفل لون الأيقونة: # 222222

لون النص: غامق

مستوى عنوان العنوان: H2
خط العنوان: Raleway
حجم نص العنوان: 50 بكسل

خط الجسم: لاتو
حجم النص الأساسي: 16 بكسل
تباعد حروف الجسم: 1 بكسل

حجم نص الزر: 16 بكسل
الزر fOne لون النص: #ffffff
لون خلفية الزر الأول: # 222222
نصف قطر الحد الواحد للزر: 50 بكسل
تباعد حرف واحد للزر: 2 بكسل
نمط خط زر واحد: TT

العرض: 45٪ (كمبيوتر مكتبي) ، 60٪ (كمبيوتر لوحي) ، 100٪ (هاتف ذكي)

احفظ التغييرات.

عناصر التصميم الرئيسية هنا هي خيار "Make fullscreen" و "Width: 45٪". سيسمح هذا للقسم بتمديد العرض والارتفاع الكاملين لنافذة المتصفح في جميع الأوقات. ويقلص العرض المخصص وحدة الرأس لفضح خلفية القسم التي سنضيفها بعد ذلك.

إضافة خلفية القسم

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

تكرار الأقسام

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

إنشاء صورة خلفية ثابتة باستخدام نفس صورة خلفية القسم مع CSS Parallax

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

تحقق من النتيجة.

استخدام صور خلفية مختلفة مع انتقالات CSS Parallax

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

بمجرد الحصول على صورة خلفية مختلفة (مع CSS Parallax) لكل قسم من الأقسام الأربعة ، تحقق من النتيجة.

استخدام صور خلفية مختلفة مع انتقالات اختلاف المنظر الحقيقي

إذا كنت ترغب في تغيير تأثير انتقال صورة الخلفية ، فيمكنك تغيير طريقة اختلاف المنظر من CSS إلى True Parallax لجميع صور الخلفية ذات الأقسام الأربعة.

افتح أحد إعدادات القسم وقم بتغيير طريقة CSS إلى "True Parallax".

ثم ستحتاج إلى أن تفعل الشيء نفسه بالنسبة للأقسام الثلاثة المتبقية. أو يمكنك ببساطة النقر بزر الماوس الأيمن على خيار Parallax Method وتحديد "Extend Parallax Method" لجميع وحدات ترويسة عرض كامل في جميع أنحاء الصفحة.

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

استكشاف محاذاة وحدة مختلفة

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

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

لمحاذاة الوحدة إلى يمين الصفحة ، ما عليك سوى تحديث محاذاة الوحدة إلى اليمين.

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

فيما يلي مثال على محاذاة مركزية مع خلفية ثابتة (نفس صورة الخلفية لكل منها مع اختلاف CSS).

فيما يلي مثال على محاذاة مركزية مع صور خلفية مختلفة باستخدام طريقة CSS Parallax.

فيما يلي مثال على المحاذاة المركزية مع صور خلفية مختلفة باستخدام طريقة True Parallax.

فيما يلي مثال على المحاذاة الصحيحة مع صور الخلفية المختلفة باستخدام مزيج من css و parallax الحقيقي.

افكار اخيرة

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

أتطلع إلى الاستماع منك في التعليقات.

هتافات!