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

هل ترغب في إضفاء بُعد آخر على موقعك الإلكتروني باستخدام قناع خلفية Divi Sticky؟

تتيح لك خيارات التثبيت في 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-index للصف. سيساعد ذلك على ضمان بقاء محتوى الصف أعلى من محتوى الصف السابق.

• مؤشر 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 التالية. إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.

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

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

...