ديفي: كيفية إنشاء قناع خلفية لزجة

هل ترغب في إعطاء بُعد آخر لملف موقع على شبكة الإنترنت مع قناع الخلفية Divi لزج؟

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

سنوضح لك كيفية إنشاء قناع خلفية لاصق.

يجمع هذا البرنامج التعليمي بين الخيارات اللاصقة لـ Divi مع أوضاع مزج المرشح. 

مسح

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

مكتب

الجوال

قم بإنشاء تصميم في Divi

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

صورة الخلفية

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

• قم بتحميل صورة خلفية من اختيارك.
• حجم صورة الخلفية: الغلاف

مباعدة

قم بالتبديل إلى علامة التبويب تصميم القسم وإزالة إعدادات التباعد الافتراضية أدناه:

• المساحة المتروكة (أعلى وأسفل): 0 بكسل

فيضانات

ثم قم بإخفاء الفائض في القسم في علامة التبويب متقدم.

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

أضف السطر رقم 1

هيكل العمود

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

التحجيم

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

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

مباعدة

قم أيضًا بإزالة جميع الهوامش الافتراضية.

• المساحة المتروكة (أعلى وأسفل): 0 بكسل

مرشحات البحث

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

• وضع المزج: الشاشة

مؤشر Z

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

• الفهرس Z: 9

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

بعد ذلك ، سنفتح إعدادات العمود.

لون الخلفية

نستخدم خلفية بيضاء بالكامل.

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

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

نضيف أيضًا قيمة ارتفاع إلى العنصر الرئيسي في علامة التبويب متقدم.

height: 100vh;

أضف وحدة "نصية" إلى السطر

اترك مساحة المحتوى فارغة

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

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

لون الخلفية

سنستخدم لون خلفية أغمق لهذه الوحدة.

• لون الخلفية: # 0b3835

التحجيم

بعد ذلك سنصل إلى علامة التبويب تصميم وتعديل معلمات التحجيم على النحو التالي:

• عرض :
  • سطح المكتب: 20vw
  • الجهاز اللوحي والهاتف: 70 فولكس فاجن
• الطول:
  • سطح المكتب: 30vh
  • الجهاز اللوحي والهاتف: 10vh

مباعدة

نضيف أيضًا هامشًا علويًا.

• الهامش (أعلى): 3vh

الحدود

وسنقوم بتضمين الزوايا المستديرة.

• الزوايا الدائرية: 15 بكسل

أضف السطر 2

هيكل العمود

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

التحجيم

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

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

مؤشر Z

قم أيضًا بزيادة مؤشر z للصف. وهذا سوف يساعد على ضمان أن محتويات يبقى السطر فوق السطر السابق

• مؤشر Z: 12

أضف وحدة "نصية" إلى السطر

أضف محتوى H2

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

إعدادات النص H2

قم بتخصيص إعدادات نص H2 كما يلي:

• الخط: عرض Playfair
• محاذاة النص: توسيط
• لون النص: # 0b3835
• بحجم :
  • سطح المكتب: 150 بكسل
  • الجهاز اللوحي والهاتف: 45 بكسل
• ارتفاع الخط: 1,2 م

التحجيم

بعد ذلك ، انتقل إلى إعدادات الحجم وقم بتطبيق الإعدادات التالية:

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

مباعدة

قم أيضًا بتضمين هامش علوي سلبي.

أضف وحدة "زر" إلى الصف

زر إضافة محتوى إلى

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

محاذاة الزر

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

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

إعدادات زر

بعد ذلك ، انتقل إلى إعدادات الزر وقم بتطبيق الأنماط التالية:

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 15 بكسل
• لون نص الزر: #ffffff
• لون خلفية الزر: # 000000

• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 100 بكسل

• زر الخط: مونتسيرات
• وزن خط الزر: شبه عريض
• نمط الخط: TT

مباعدة

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

• الهامش (السفلي): 60vh
• المساحة المتروكة (أعلى وأسفل): 15 بكسل
• الحشو (يسار ويمين): 40 بكسل

قم بتطبيق التأثيرات اللاصقة

افتح الخط رقم 1

الآن بعد أن قمنا ببناء قاعدة تصميمنا ، حان الوقت لتطبيق الأنماط اللاصقة. افتح إعدادات الخط الأول.

ضع الخيارات اللاصقة

اذهب إلى علامة التبويب متقدم وقم بتطبيق الإعدادات المستمرة التالية:

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

خيارات مثبتة لوحدة النص

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

الحجم اللزج

بعد ذلك ، انتقل إلى إعدادات التحجيم وقم بتطبيق قيم التحجيم التالية:

• العرض (مثبت): 80 فولط
• ارتفاع (مثبت): 90vh

فترة انتقالية

أخيرًا ، انتقل إلى علامة التبويب متقدم وزيادة مدة الانتقال.

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

مسح

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

مكتب

تحميل DIVI Now !!!

الجوال

تحميل DIVI Now !!!

وفي الختام

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

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

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

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

ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.

...