كيفية إنشاء تداخلات متحركة للحدود لإبراز المحتوى باستخدام Divi

هل تبحث عن طريقة فريدة لوضع جزء معين من صفحتك في دائرة الضوء؟ استمر في القراءة! اليوم ، سوف نوضح لك كيفية إنشاء تداخلات حدود متحركة لإبراز المحتوى على صفحتك. سننشئ ثلاثة حدود متحركة مختلفة متداخلة على الصفحة المقصودة لـ App Developer Layout Pack ، ولكن يمكنك استخدام هذه التقنية لأي نوع من مواقع الويب التي تقوم بإنشائها. سيساعدك بالتأكيد على إضافة بُعد إضافي إلى صفحتك. نأمل أن يلهمك هذا البرنامج التعليمي لإنشاء تداخلات حدود متحركة بديلة خاصة بك أيضًا.

دعنا نذهب اليها!

معاينة

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

مثال 1

المثال رقم 2

المثال رقم 3

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

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

أول شيء عليك القيام به هو إنشاء صفحة جديدة باستخدام الصفحة المقصودة لـ App Developer Layout Pack.

قسم بطل الاستنساخ

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

أعد إنشاء المثال رقم 1

أضف صفًا جديدًا إلى قسم الأبطال

هيكل العمود

لنبدأ في إعادة إنشاء المثال الأول! أضف صفًا جديدًا في قسم التخصص باستخدام بنية العمود التالية:

أضف وحدة نصية

اترك مربع المحتوى فارغًا

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

تباعد

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

• الهامش الأعلى: -480 بكسل
• الحشوة العلوية: 223 بكسل
• الحشو السفلي: 223 بكسل

الحدود

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

• عرض الحدود: 9 بكسل
• لون الحدود: # 0ae2ff
• نمط الحدود: البداية

مربع الظل

إضافة ظل مربع أيضا.

• مربع قوة طمس الظل: 1 بكسل
• قوة انتشار الظل المربع: 15 بكسل
• لون الظل: rgba (10،226،255،0.59)

حيوية

واللعب مع إعدادات الرسوم المتحركة لجعل المحتوى يبرز.

• نمط الرسوم المتحركة: قلب
• كرر الرسوم المتحركة: مرة واحدة
• اتجاه الرسوم المتحركة: صحيح
• مدة الرسوم المتحركة: 1500 مللي ثانية
• تأخير الرسوم المتحركة: 1500 مللي ثانية
• كثافة الرسوم المتحركة: 500٪

أعد إنشاء المثال رقم 2

أضف صفًا جديدًا إلى قسم البطل المكرر

إلى المثال الثاني! أضف صفًا جديدًا إلى قسم البطل المكرر باستخدام بنية العمود التالية:

أضف وحدة نصية # 1

اترك مربع المحتوى فارغًا

نحن ، مرة أخرى ، نستخدم وحدة نصية فارغة.

تباعد

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

• الهامش الأعلى: -480 بكسل
• الحشوة العلوية: 223 بكسل
• الحشو السفلي: 223 بكسل

الحدود

تابع عن طريق إضافة حد إلى وحدة النص.

• عرض الحدود: 9 بكسل
• لون الحدود: # 0ae2ff
• نمط الحدود: مزدوج

حيوية

ولعب مع إعدادات الرسوم المتحركة لإنشاء تأثير متداول.

• نمط الرسوم المتحركة: لفة
• كرر الرسوم المتحركة: مرة واحدة
• اتجاه الرسوم المتحركة: المركز
• مدة الرسوم المتحركة: 4500 مللي ثانية
• تأخير الرسوم المتحركة: 1500 مللي ثانية
• كثافة الرسوم المتحركة: 100٪
• بدء تعتيم الرسوم المتحركة: 100٪

وحدة استنساخ النص

بمجرد الانتهاء من تعديل أول وحدة نصية ، انطلق واستنسخها.

تغيير التباعد

افتح إعدادات التكرار وقم بتغيير قيمة الهامش العلوي في إعدادات التباعد.

• الهامش الأعلى: -495 بكسل

تغيير الحدود

قم بتعديل لون الحدود أيضًا.

• لون الحدود: #eded

تغيير الرسوم المتحركة

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

• تكرار الرسوم المتحركة: حلقة
• مدة الرسوم المتحركة: 5000 مللي ثانية
• تأخير الرسوم المتحركة: 2000 مللي ثانية

أعد إنشاء المثال رقم 3

تغيير تباعد وحدة الصورة في العمود 2

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

• الهامش العلوي: 70 بكسل (سطح المكتب) ، 0 بكسل (الجهاز اللوحي والهاتف)

أضف لون الخلفية إلى وحدات النص الموجودة

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

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

أضف وحدة نصية إلى العمود 1

اترك مربع المحتوى فارغًا

يمكننا الآن البدء في إضافة أول تداخل حد متحرك! أضف وحدة نصية جديدة إلى العمود الأول (انظر شاشة الطباعة) وتأكد من ترك مربع المحتوى فارغًا.

تباعد

انتقل إلى إعدادات التباعد في وحدة النص بعد ذلك وقم بإنشاء الشكل والتداخل باستخدام قيم الهامش والحشو المخصص.

• الهامش الأعلى: -230 بكسل
• الهامش الأيسر: 80 بكسل
• الهامش الأيمن: 100 بكسل
• الحشوة العلوية: 120 بكسل
• الحشو السفلي: 120 بكسل

الحدود

أضف حدًا بعد ذلك.

• عرض الحدود: 13 بكسل
• لون الحدود: # bcf5f3
• نمط الحدود: مزدوج

حيوية

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

• نمط الرسوم المتحركة: أضعاف
• كرر الرسوم المتحركة: مرة واحدة
• اتجاه الرسوم المتحركة: صحيح
• كثافة الرسوم المتحركة: 100٪

فهرس Z.

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

• مؤشر Z: -1

استنساخ وحدة النص ووضعها في نهاية العمود 1

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

تغيير الحدود

قم بتغيير لون الحدود.

• لون الحدود: # ffc0ec

تغيير الرسوم المتحركة

وإضافة تأخير للرسوم المتحركة أيضًا.

• تأخير الرسوم المتحركة: 1000 مللي ثانية

أضف وحدة نصية إلى العمود 3

اترك مربع المحتوى فارغًا

تابع بإضافة وحدة نص إلى العمود الثالث (انظر شاشة الطباعة) وتأكد من ترك مربع المحتوى فارغًا.

تباعد

انتقل إلى إعدادات التباعد وقم بإنشاء الشكل والتداخل باستخدام قيم الهوامش والحشو المخصصة.

• الهامش الأعلى: -230 بكسل
• الهامش الأيسر: 100 بكسل
• الهامش الأيمن: -80 بكسل
• الحشوة العلوية: 120 بكسل
• الحشو السفلي: 120 بكسل

الحدود

أضف حدًا من اختيارك بعد ذلك.

• عرض الحدود: 13 بكسل
• لون الحدود: # 7479ff
• نمط الحدود: مزدوج

حيوية

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

• نمط الرسوم المتحركة: أضعاف
• كرر الرسوم المتحركة: مرة واحدة
• اتجاه الرسوم المتحركة: يسار
• تأخير الرسوم المتحركة: 2000 مللي ثانية
• كثافة الرسوم المتحركة: 100٪

فهرس Z.

تأكد من ظهور الوحدة أسفل المحتوى باستخدام فهرس Z سلبي.

• مؤشر Z: -1

استنساخ وحدة النص ووضعها في نهاية العمود 3

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

تغيير الحدود

قم بتغيير لون حدود النسخة المكررة.

• لون الحدود: # b3d1ff

تغيير الرسوم المتحركة

أضف بعض التأخير الإضافي للرسوم المتحركة وأنت انتهيت!

• تأخير الرسوم المتحركة: 3000 مللي ثانية

معاينة

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على نتيجة جميع الأمثلة الثلاثة التي قمنا بإعادة إنشائها خلال هذا البرنامج التعليمي.

مثال 1

المثال رقم 2

المثال رقم 3

افكار اخيرة

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