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

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

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

هيا بنا نبدأ!

نظرة خاطفة

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

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

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

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

تنزيل مجاني

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

تحميل

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

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

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

انقر فوق الزر "استيراد".

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

ثم انقر فوق زر الاستيراد.

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

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

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

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

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

بعد ذلك ، سيكون لديك لوحة فارغة لبدء التصميم في Divi.

كيفية إنشاء تصميمات خلفية زجاجية متجمدة في Divi

الطريقة 1: إنشاء خلفية زجاجية مصنفة باستخدام خاصية Backdrop-Filter CSS`

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

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

هيريس كيفية القيام بذلك.

إضافة صورة خلفية القسم

أولاً ، أضف صفًا من عمود واحد إلى القسم.

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

إضافة لون خلفية الصف وفلتر الصور الخلفية

بعد ذلك ، افتح إعدادات الصف وأضف لون خلفية بيضاء شبه شفافة كما يلي:

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

ضمن علامة تبويب التصميم ، قم بتحديث حجم الصف وتباعده كما يلي:

• العرض: 90٪
• العرض الأقصى: 900 بكسل
• الحشو: 5٪ لأعلى ، 5٪ أسفل ، 5٪ يسار ، 5٪ يمين

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

-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);

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

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

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

ثم الصق HTML التالي في النص الأساسي أسفل علامة تبويب النص:

<h2>Frosted Glass Background</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

لتحسين التصميم ، دعنا نقوم بتحديث أنماط النص على النحو التالي:

• وزن خط النص: شبه عريض
• لون نص النص: # 33345b
• حجم نص النص: 16 بكسل
• ارتفاع خط النص: 2em
• خط العنوان 2: بوبينز
• وزن خط العنوان 2: غامق
• نمط خط العنوان 2: TT
• العنوان 2 محاذاة النص: اليسار
• لون نص العنوان 2: # 33345b
• حجم نص العنوان 2: 70 بكسل (سطح المكتب) ، 40 بكسل (جهاز لوحي) ، 25 بكسل (هاتف)
• العنوان 2 تباعد الأحرف: 2 بكسل
• ارتفاع خط العنوان 2: 1.3em

نتيجة

ها هي النتيجة النهائية. قال لك أن ذلك سيكون سهلا!

الطريقة 2: إنشاء خلفية زجاجية مصنّعة باستخدام المنظر والوحدات النمطية ذات الطبقات

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

هيريس كيفية القيام بذلك.

إضافة قسم مع صورة خلفية المنظر

أولاً ، قم بإنشاء قسم عادي جديد تحت القسم الذي أنشأناه للتو.

ثم أضف صفًا من عمود واحد إلى القسم.

امنح القسم صورة خلفية بتأثير Parallax باستخدام طريقة CSS:

• استخدام تأثير المنظر: نعم
• طريقة المنظر: CSS

إضافة نفس المحتوى مثل وحدة النص السابقة

بعد ذلك ، انسخ وحدة النص من القسم الأول / المثال أعلاه والصقه في صف القسم الجديد.

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

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

• الحشو: 10٪ أعلى ، 10٪ أسفل ، 10٪ يسار ، 10٪ يمين

ضمن علامة التبويب خيارات متقدمة ، قم بتحديث رؤية الفائض كما يلي:

• الفائض الأفقي: مخفي
• الفائض العمودي: مخفي

أضف طبقة صورة خلفية غير واضحة مع وحدة نصية

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

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

انطلق وأضف وحدة نصية جديدة ضمن وحدة النص الحالية.

انقل وحدة النص فوق وحدة النص التي تحتوي على محتوى النص.

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

بعد ذلك ، أضف نفس صورة الخلفية إلى وحدة النص باستخدام نفس تأثير CSS parallax:

• استخدام تأثير المنظر: نعم
• طريقة المنظر: CSS

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

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

• طمس: 10 بكسل

الآن لدينا نسخة غير واضحة من صورة الخلفية المنظر.

بعد ذلك ، امنح وحدة النص موضعًا مطلقًا:

• الموقف: مطلق

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

• العرض: 100٪
• ارتفاع: 100٪

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

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

تتمثل الخطوة التالية في إضافة وحدة نصية أخرى أعلى وحدة نص الصورة غير الواضحة لتكون بمثابة تراكب خفيف لإكمال التصميم.

لإنشاء التراكب ، قم بتكرار وحدة نص الصورة غير الواضحة.

افتح إعدادات وحدة النص المكرر واحذف صورة الخلفية.

ثم أضف لون الخلفية التالي:

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

ضمن علامة تبويب التصميم ، أعد مرشح التمويه إلى 0 بكسل.

الآن تحقق من النتيجة النهائية.

الطريقة الثالثة: إنشاء خلفية زجاجية بلورية باستخدام أحجام الصور الفعلية والوحدات النمطية ذات الطبقات

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

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

المقطع السابق مكرر

لبدء التصميم ، قم بتكرار القسم الثاني الذي يحتوي على مثالنا الثاني.

تحديث خلفية القسم

افتح إعدادات القسم ، واحذف صورة الخلفية وأضف لون الخلفية التالي:

• لون الخلفية: # 33345b

تحديث خلفية العمود والحشو

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

• صورة الخلفية: الحجم الفعلي

بعد ذلك ، قم بتحديث إعدادات العمود بالحشو الجديد كما يلي:

• الحشو: 10٪ أعلى ، 10٪ أسفل ، 15٪ يسار ، 15٪ يمين

تحديث صورة الوحدة النمطية لنص الصورة غير الواضحة

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

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

تغيير الحجم وموقع الموضع للصورة غير الواضحة والوحدات النمطية للنص المتراكب

لإنشاء التباعد المطلوب حول وحدة نص الصورة المموهة الخلفية ووحدة نص التراكب ، استخدم التحديد المتعدد لتحديد كلتا الوحدتين وتحديث خيارات التحجيم على النحو التالي:

• العرض: 80٪
• ارتفاع: 80٪

ثم قم بتحديث موقع الموضع المطلق إلى المركز:

• الموقع: في الوسط

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

إنشاء تخطيطات أعمدة متعددة مع تعديلات طفيفة

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

فيما يلي مثال على التخطيط المكون من عمودين.

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

ها هي النتيجة النهائية لجميع الأمثلة.

افكار اخيرة

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

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

هتافات!