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

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

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

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

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

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

دعونا نبدأ!

مسح

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

المفهوم

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

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

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

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

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

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

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

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

أعطه عنوانًا منطقيًا لك وانقر استخدم Divi Builder

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

تخصيص الخط

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

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

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

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

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

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

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

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

أنشئ نمطًا للخلفية للخط

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

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

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

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

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

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

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

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

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

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

حدد علامة التبويب "التكبير والتصغير" وقم بتحديث ما يلي:

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

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

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

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

...