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

في الإصدارات السابقة من Divi ، لم تكن إضافة تراكب متدرج إلى صورة خلفية المنظر خيارًا مضمنًا. ولكن ، مع خيارات الخلفية الجديدة لـ Divi (و Gradient Builder) ، يمكنك بسهولة إنشاء خلفيات جميلة المنظر مع تصميمات تراكب متدرجة لا حصر لها.

في هذا البرنامج التعليمي ، سوف نوضح لك كيفية استخدام خيارات خلفية Divi لإضافة تراكب متدرج ملون يمتزج مع صورة الخلفية باستخدام كل من طرق True و CSS Parallax.

نظرة خاطفة

فيما يلي نظرة سريعة على تصميمات الخلفية التي سنقوم ببنائها في هذا البرنامج التعليمي.

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

وهنا نفس التصميم باستخدام طريقة CSS Parallax. لاحظ أن التدرج يظل ثابتًا / مرتبطًا بصورة الخلفية بحيث يبدو أنه جزء من الصورة الفعلية وليس مجرد طبقة.

وإليك مثال على تراكب التدرج اللوني باستخدام توقفات لونية شبه شفافة بدون وضع مزج.

المفهوم

تتضمن الفكرة الأساسية لهذا التصميم خطوتين:

1. قم بإنشاء تدرج خلفية لقسم باستخدام منشئ التدرج مع التأكد من وضع التدرج فوق صورة الخلفية.

2. أضف صورة خلفية إلى نفس القسم الذي يستخدم إحدى طرق اختلاف المنظر ووضع مزج الألوان.

سيسمح هذا للتدرج الملون بتراكب صورة المنظر أثناء تحركها عند التمرير لأسفل الصفحة. تدمج صيغة Color blend تراكب التدرج مع الصورة للحصول على صورة جميلة تبدو رائعة مع اختلاف المنظر.

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

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

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

تنزيل مجاني

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

تحميل

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

لاستيراد تخطيط القسم إلى مكتبة Divi الخاصة بك ، قم بما يلي:

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

بمجرد الانتهاء من ذلك ، سيكون تخطيط القسم متاحًا في Divi Builder.

دعنا نصل إلى البرنامج التعليمي ، أليس كذلك؟

ما تحتاجه للبدء

للبدء ، سوف تحتاج إلى القيام بما يلي:

1. إذا لم تكن قد قمت بذلك بعد ، فقم بتثبيت وتفعيل Divi Theme.
2. قم بإنشاء صفحة جديدة في WordPress واستخدم Divi Builder لتحرير الصفحة على الواجهة الأمامية (منشئ مرئي).
3. اختر الخيار "البناء من الصفر".
4. لديك الآن لوحة قماشية فارغة لبدء التصميم في Divi!

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

1. قم بإنشاء صف التعبئة ونص العنوان

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

لبدء الأشياء ، أضف صفًا من عمود واحد إلى القسم الموجود في المنشئ.

بعد ذلك ، أضف وحدة نصية إلى الصف / العمود.

إعدادات النص

افتح إعدادات وحدة النص. ضمن علامة التبويب "المحتوى" ، أضف عنوان H2 إلى محتوى النص.

<h2>Say Hello to Divi</h2>

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

• خط العنوان 2: Inter
• وزن خط العنوان 2: غامق
• لون نص العنوان 2: #fff
• حجم نص العنوان 2: 8vw
• ارتفاع خط العنوان 2: 1.2em
• ظل النص في العنوان 2: انظر لقطة الشاشة
• العنوان 2 قوة تمويه الظل للنص: 0.28em
• لون ظل النص في العنوان 2: # 10076d

• العرض الأقصى: 50٪

إعدادات الصف

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

افتح إعدادات الصف. ضمن علامة التبويب "تصميم" ، قم بتحديث ما يلي:

• العرض: 100٪
• العرض الأقصى: 80vw

• الحشو: 15vw أعلى ، 15vw أسفل

2. تصميم خلفية متدرجة للقسم

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

إعدادات تدرج الخلفية

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

• توقف التدرج 1: # 0094ff (عند 0٪)
• توقف التدرج 2: # ff00c7 (عند 25٪)
• توقف التدرج 3: # 0094ff (عند 50٪)
• توقف التدرج 4: # ff00c7 (75٪)
• توقف التدرج 5: # 0094ff (عند 100٪)

• نوع التدرج: دائري
• موقف التدرج: أسفل اليسار
• وضع التدرج فوق صورة الخلفية: نعم

3. إضافة صورة خلفية المنظر مع وضع مزج الألوان

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

إعدادات صورة الخلفية

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

• استخدام تأثير المنظر: نعم
• طريقة المنظر: المنظر الحقيقي
• مزيج صورة الخلفية: اللون

لماذا وضع مزج الألوان؟

يمزج وضع مزج الألوان نسخة ذات تدرج رمادي من الصورة مع ألوان التدرج اللوني (تدرج اللون والتشبع). يحافظ هذا على الجودة المرئية للصورة باستخدام نظام ألوان جديد تمامًا.

4. أضف قناع خلفية (لم لا؟)

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

إعدادات قناع الخلفية

أثناء وجودك في خيارات الخلفية للقسم ، حدد علامة التبويب Background Mask وقم بتحديث ما يلي:

• القناع: شفرات
• تحويل القناع: انعكاس أفقي ، عكس
• حجم القناع: حجم مخصص
• عرض القناع: 72vw
• موضع القناع: أعلى اليمين

5. أضف بعض مساحة التمرير المؤقتة للاختبار

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

• الهامش: 80vh أعلى ، 80vh أسفل

لا تنس إزالة هذا التباعد عند إضافة القسم إلى صفحتك الخاصة.

النتائج النهائية

دعنا نلقي نظرة على النتيجة النهائية على صفحة مباشرة.

وهنا نفس التصميم باستخدام طريقة CSS Parallax. لاحظ أن التدرج يظل ثابتًا / مرتبطًا بصورة الخلفية بحيث يبدو أنه جزء من الصورة الفعلية وليس مجرد طبقة.

استخدام تراكب متدرج بدون وضع المزج

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

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

للقيام بذلك ، يمكنك خفض عتامة كل لون إلى ما يشبه 72٪ ثم إعادة تعيين خيار مزج صورة الخلفية إلى عادي.

هذا مثال لما سيبدو عليه هذا.

جرب المزيد من التدرجات!

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

افكار اخيرة

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

نأمل أن يكون هذا مفيدًا لموقعك على الويب أو لمشروعك التالي.

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

هتافات!