الدليل النهائي لاستخدام المنظر مع Divi

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

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

هيا بنا نذهب.

ما هو المنظر؟

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

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

فهم كيف يعمل المنظر مع Divi

باستخدام Divi ، من السهل حقًا نشر Parallax على أي صورة خلفية داخل أي قسم أو صف أو عمود أو وحدة نمطية. كل ما عليك فعله هو ضبط خيار Parallax Effect على "YES" ثم تحديد طريقة Parallax (CSS أو True Parallax).

طريقة CSS

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

طريقة المنظر الحقيقية

الطريقة الثانية تسمى True Parallax. يطلق عليه "صحيح" ربما لأنه يمثل الفكرة التقليدية لتأثير المنظر. تستخدم هذه الطريقة CSS و JavaScript لإنشاء حركة تمرير أبطأ قليلاً من العناصر الأخرى في الصفحة. هذا تمثيل أكثر شبهاً بالحياة للحركة بسبب إدراك المسافة التي تخلقها بين الصورة البطيئة الحركة في الخلفية والعناصر المتحركة الأسرع في المقدمة.

ماذا يحدث عند تمكين المنظر في Divi؟

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

ماذا يحدث عند اختيار طريقة CSS؟

عند تحديد CSS Parallax ، يتم تغليف الصورة في div جديد بموضع مطلق يمتد بالحجم الكامل لنافذة المتصفح. فيما يلي فئات CSS ومقتطفات من التعليمات البرمجية التي تقوم بذلك في Divi:

.et_parallax_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}
/*** This sets the image to fixed when using the CSS method ***/
.et_pb_section_parallax .et_pb_parallax_css, .et_pb_slides .et_parallax_bg.et_pb_parallax_css {
    background-attachment: fixed;
}

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

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

نسبة أبعاد الصورة صحيحة (1920 × 1080) وحجم أغلفة الصورة ويناسب القسم بشكل جيد دون أي تداخل عند عرضها على شاشة بحجم 1366 × 766. المساحة البيضاء الموجودة أسفل الصورة هي باقي محتويات الصفحة.

الآن هذا ما يحدث عند تحديد اختلاف المنظر لصورتك.

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

ماذا يحدث عند اختيار طريقة اختلاف المنظر الحقيقية؟

إذا كانت لديك مجموعة True Parallax ، فسيتم تغليف الصورة في div جديد بنفس فئة CSS:

.et_parallax_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

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

إليك الكود الذي يتم إدراجه في علامة الصورة لصورة الخلفية المنظر الخاصة بي مع نافذة المتصفح الخاصة بي 1366 × 766:

    height: 960.8px;
    transform: translate(0px, 220.5px);

لاحظ الرقمين في خاصية التحويل. يتحكم هذان الرقمان في موضع صورة الخلفية. الرقم الأول (0 بكسل) يضع الصورة على طول المحور س (أفقيًا). نظرًا لأنه مضبوط على 0 بكسل ، فلن يتم نقل الصورة. يضع الرقم الثاني الصورة على طول المحور y (عموديًا). نظرًا لأنه يبلغ حاليًا 220.5 بكسل ، فهذا يعني أنه يتم دفع الصورة لأسفل الصفحة 220.5 بكسل.

لاحظ أيضًا أن قيمة الارتفاع (960.8 بكسل) أكبر من ارتفاع نافذة المتصفح (766 بكسل) بنحو 200 بكسل. هذا لاستيعاب الصورة التي يتم دفعها 220.5 بكسل بعد الجزء السفلي من نافذة المتصفح.

عندما يتم تحديد True Parallax Method ، ربما لاحظت أن صورتك يتم تفجيرها أكثر من طريقة CSS. وذلك لأن موضع الصورة يمتد بنسبة 30٪ إضافية من ارتفاع المتصفح.

تذكر الرسم التوضيحي للخلفية العادية؟

إليك ما يحدث للصورة بعد تحديد True Parallax (قبل البدء في التمرير بالطبع):

كما ترى ، يتم سحب الصورة أكثر قليلاً من أسفل نافذة المتصفح. تبلغ مساحة نافذة المتصفح هذه حوالي 1080 × 700 ، لذا فهي صغيرة إلى حد ما ، لكنني أردت أن أوضح لك ما يحدث على نافذة سطح مكتب أصغر.

لماذا يقوم المنظر الحقيقي بتمديد الصورة حتى الآن؟

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

لماذا يستخدم True Parallax جافا سكريبت؟

السبب الرئيسي وراء احتياج True Parallax إلى JavaScript هو أن صورة الخلفية تحتاج إلى التحرك بسرعة مختلفة عن العناصر الأخرى عند التمرير. تذكر ماريو براذرز؟

باستخدام True Parallax ، إذا قمت بزيادة حجم المستعرض الخاص بي ، فإن قيمة الارتفاع تزداد ديناميكيًا أيضًا من خلال JavaScript مع التأكد من أن صورتي دائمًا كبيرة بما يكفي للمتصفح.

إذا قمت بالتمرير لأسفل الصفحة ، فإن قيمة موضع الترجمة (220.5 بكسل في المثال أعلاه) تزداد ، مما يؤدي إلى تحريك الوضع الرأسي (المحور ص) للصورة إلى أسفل الصفحة.

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

ما نوع الصورة التي يجب علي استخدامها؟

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

فيما يلي 5 نصائح عامة لاختيار النوع الصحيح من الصور من أجل المنظر

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

ما هو حجم صورة الخلفية المنظر التي يجب أن تستخدمها؟

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

نظرًا لأن حجم الشاشة الأكثر شيوعًا هو حوالي 1366 × 766 ، فأنا بالتأكيد أتأكد من أن جميع صور اختلاف المنظر في الخلفية بهذا الحجم على الأقل. ولكن نظرًا لشعبية الشاشات الأكبر حجمًا ، سأختار حجمًا أكبر مثل 1920 × 1080. سيؤدي هذا إلى التأكد من رؤية المستخدمين لصورة عالية الجودة على أجهزة الكمبيوتر المكتبية الأكبر حجمًا.

تكمن مشكلة وجود صورة بأبعاد 1920 × 1080 في أنه نادرًا ما يكون لديك قسم مرئي يبلغ ارتفاعه 1080 بكسل. لذلك يمكنك الاعتماد على الجزء السفلي من تلك الصور التي تظل مخفية.

نصائح مفيدة للحصول على صورة الخلفية المنظر الخاص بك لتبدو بشكل صحيح

للرؤوس والأقسام العليا

إن أسهل طريقة للتأكد من أن صورتك مرئية بالكامل وتبدو رائعة هي استخدام وحدة الرأس Fullwidth. بهذه الطريقة ستبدو صورة الخلفية دائمًا رائعة بغض النظر عن حجم الشاشة. ولكن ، إذا كنت تستخدم صورة خلفية المنظر باستخدام Fullwidth Header Module ، فقد تحتاج إلى إضافة بعض الحشو إلى أعلى وأسفل الوحدة لإظهار المزيد من الصورة. يمكنك القيام بذلك باستخدام Visual Builder. انتقل إلى إعدادات وحدة الرأس. ضمن علامة التبويب خيارات متقدمة ، أدخل ما يلي في مربع نص العنصر الرئيسي:

Padding: 250px 0 250px;

يجب أن يقودك ذلك إلى الاتجاه الصحيح.

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

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

للأقسام العادية / الوسطى

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

للأقسام السفلية / التذييلات

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

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

فيما يلي مثال على صور خلفية True Parallax في أعلى الصفحة ووسطها وأسفلها.

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

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

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

Parallax Image Hacks: تغيير موضع الصورة باستخدام CSS المخصص

إذا كنت تريد تغيير موضع خلفية المنظر ، فيمكنك استخدام محدد css ".et_parallax_bg". هنا هو css الافتراضي الذي يضع الصورة لتأثير المنظر.

.et_parallax_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

إذا لاحظت ، افتراضيًا ، يتم تعيين خاصية موضع الخلفية لطريقة css parallax على النحو التالي على "أعلى الوسط". ولكن إذا أردت تغيير الموضع الأصلي لصورة الخلفية ، فيمكنك ضبط قيم خاصية موضع الخلفية.

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

انتقل إلى إعدادات القسم ، ضمن علامة التبويب "متقدم" ، وأدخل فئة CSS تسمى "الفقرة".
انتقل الآن إلى إعدادات الصفحة وحدد علامة التبويب خيارات متقدمة.

ثم استخدم مربع CSS المخصص لإدخال أي من الأمثلة التالية لـ Custom CSS:

في حالة استخدام طريقة CSS ، يمكنك جعل صورة الخلفية في المنتصف عموديًا عن طريق إضافة css المخصص التالي:

.parahacks .et_parallax_bg {
    Background-position: center center !important;
}

لمحاذاة صورة الخلفية إلى الأسفل ، أضف ملف css المخصص التالي:

.parahacks .et_parallax_bg {
    background-position: bottom center !important;
}

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

.parahacks .et_parallax_bg {
    background-position: center -150px !important;
}

إذا كنت تستخدم طريقة True Parallax ، فيجب عليك حساب 220 بكسل الإضافي (أكثر أو أقل اعتمادًا على ارتفاع المتصفح) للصورة المخفية في الأسفل. لجعل صورة الخلفية أكثر توسيطًا رأسيًا ، تحتاج إلى ضبط خاصية موضع الخلفية باستخدام قيمة بكسل سالبة مثل:

.parahacks .et_parallax_bg {
    background-position: center -100px !important;
}

لجعل صورة الخلفية أكثر محاذاة للأسفل ، أضف css المخصص التالي:

.parahacks .et_parallax_bg {
    background-position: center -220px !important;
}

TL ؛ DR؟ إليك ملخص فيديو للنقاط الرئيسية

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

في الختام

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

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

هتافات!