Divi: كيفية إنشاء أقنعة وأنماط خلفية متحركة عند التمرير

هل ترغب في تصميم خلفية Divi متحركة عند التمرير في الصفحة بفضل الأقنعة والأنماط؟ هذا البرنامج التعليمي لك ...

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

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

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

نعتقد أنك ستحب النتيجة.

دعونا نبدأ!

مسح

فيما يلي توضيح سريع للشكل الذي ستبدو عليه الرسوم المتحركة في الخلفية للتمرير لهذا البرنامج التعليمي.

المفهوم

لا ينبغي أن يكون مفهوم هذا التصميم صعب الفهم. نبدأ بقسم له خلفية متدرجة.

ثم نقوم بإنشاء خط يتم وضعه (مطلق) بحيث يغطي القسم بالكامل (مثل التراكب). يمكننا إضافة نمط الخلفية إلى الصف.

بعد ذلك يمكننا إضافة قناع خلفية إلى العمود.

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

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

لنبدأ بإنشاء صفحة باستخدام Divi Builder

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

من لوحة تحكم WordPress ، انتقل إلى الصفحات> إضافة جديد لإنشاء صفحة جديدة.

أعطه عنوانًا منطقيًا لك وانقر استعمل Divi منشئ

ثم انقر فوق ابدأ البناء (البناء من الصفر)

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

اقرأ أيضا: Divi: كيفية استخدام "Gradient Builder" لتجميل صورك

كيفية إنشاء أقنعة وأنماط خلفية متحركة باستخدام Divi

تصميم خلفية القسم

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

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

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

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

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

يمكننا الآن إضافة تدرج خلفية مخصص إلى القسم.

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

• توقفات متدرجة:
  • 0٪: # 4158d0
  • 50٪: # c850c0
  • 100٪: # ffcc70

ثم قم بتغيير اتجاه التدرج الخطي:

• اتجاه التدرج: 270 درجة

إضافة صفوف إلى القسم

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

بعد ذلك، قم بتكرار السطر الذي قمت بإنشائه للتو. سيتم استخدام هذا السطر الثاني (المكرر) لملفنا محتويات كما تفعل عادة. 

يجب أن يكون لديك الآن سطر علوي للرسوم المتحركة للتمرير في الخلفية وخط لـ محتويات العادية.

تخصيص الخط

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

افتح إعدادات الخط. تحت علامة التبويب متقدم، قم بتحديث ما يلي:

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

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

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

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

• زيادة ارتفاعات العمود: نعم
• العرض: 100٪
• العرض الأقصى: 100٪
• ارتفاع: 100٪
• المساحة المتروكة: 0 بكسل (أعلى وأسفل)

الآن قد لا تتمكن من رؤية السطر ، لكنه الآن يغطي بشكل مثالي خلفية القسم بأكمله.

قم بإنشاء نمط خلفية للخط

في هذا المثال سنضيف النمط متنوع كخلفية خط.

افتح إعدادات الخط. تحت الخيار خلفيّة، حدد علامة التبويب نمط الخلفية وتحديث ما يلي:

• نمط الخلفية: قصاصات ورق
• نمط:
  • اللون: # f6bef7
  • الحجم: حجم مخصص
  • العرض: 35 فولط
  • كرر الأصل: المركز

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

أضف تأثيرات التمرير إلى الخط

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

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

حدد علامة التبويب الحركة الأفقية وتحديث ما يلي:

• تمكين الحركة الأفقية: نعم
• بداية الإزاحة: 0,5 (عند 0٪)
• تعويض متوسط: 0 (من 40٪ إلى 60٪)
• إزاحة النهاية: -0,5 (عند 100٪)

سيؤدي هذا إلى تحريك نمط خلفية الخط الذي يبدأ من 50 بكسل إلى اليسار وينتهي بـ 50 بكسل إلى اليمين.

حدد علامة التبويب "Scale Up and Down" وقم بتحديث ما يلي:

• تمكين التحجيم لأعلى ولأسفل: نعم
• مقياس البدء: 150٪ (عند 0٪)
• مقياس متوسط: 100٪ (من 40٪ إلى 60٪)
• مقياس النهاية: 150٪ (عند 100٪)

سيؤدي هذا إلى قياس نمط خلفية الصف عند التمرير.

حدد علامة التبويب « دوار  » وتحديث ما يلي:

• تمكين التدوير: نعم
• دوران بدء: 10 درجات (عند 0٪)
• دوران متوسط: 0 درجة (من 40٪ إلى 60٪)
• نهاية الدوران: -10 درجات (100٪)

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

أضف قناع الخلفية مع تأثيرات التمرير إلى العمود

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

للقيام بذلك ، افتح إعدادات العمود. تحت علامة التبويب قناع الخلفية، قم بتحديث ما يلي:

• القناع: طبقة النقطة
• اللون: #ffffff
• تحويل القناع: انعكاس أفقي

أضف تأثيرات التمرير إلى العمود

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

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

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

• تمكين التدوير: نعم
• بدء الدوران: -15 درجة (0٪)
• دوران متوسط: 0 درجة (من 40٪ إلى 60٪)
• نهاية الدوران: 15 درجة (عند 100٪)

إخفاء تجاوز القسم

حاليًا ، يظل الخط مرئيًا عندما يتسبب التمرير في توسيعه إلى ما بعد القسم.

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

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

الآن يبدو أفضل.

أنظر أيضا: Divi: 12 مجموعة من الأقنعة وأنماط الخلفية

إضافة محتوى إلى السطر الذي تم إنشاؤه لهذا الغرض

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

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

نتيجة نهائية

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

تحميل DIVI الآن !!!

وفي الختام

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

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

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

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

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

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

...