كيفية الجمع بين التداخلات مع خيارات Divi اللاصقة لإنشاء انتقالات سهلة

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

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

معاينة

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

سطح المكتب

متحرك

قم بتنزيل The Layout مجانًا

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

قم بتنزيل الملفات

تنزيل مجاني

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

تحميل

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

1. إعادة إنشاء هيكل التصميم

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

تباعد

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

• الحشوة السفلية: 100vh

أضف الصف رقم 1

هيكل العمود

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

تحجيم

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

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

فهرس Z.

قم بتعيين فهرس من الألف إلى الياء لهذا الصف أيضًا.

• الفهرس Z: 1

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

اترك مربع الصورة فارغًا

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

استخدم صورة الخلفية بدلاً من ذلك

واستخدم صورة خلفية من اختيارك بدلاً من ذلك.

• حجم صورة الخلفية: الغلاف

تحجيم

قم بتغيير عرض الوحدة بعد ذلك.

• العرض: 100٪

تباعد

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

• الحشو العلوي: 40vh
• الحشوة السفلية: 40vh

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

أضف محتوى H2

إلى الوحدة التالية ، وهي وحدة نصية تحتوي على بعض محتوى H2 من اختيارك.

إعدادات نص H2

قم بتغيير إعدادات نص H2 للوحدة وفقًا لذلك:

• خط العنوان 2: مونتسيرات
• العنوان 2 محاذاة النص: الوسط
• لون نص العنوان 2: #ffffff
• حجم نص العنوان 2:
  • سطح المكتب: 10vw
  • الجهاز اللوحي: 14vw
  • هاتف: 15vw
• العنوان 2 تباعد الأحرف: -0.5vw

تحجيم

تأكد من أن الوحدة هي "100٪" أيضًا.

• العرض: 100٪

موقع

وقم بتغيير موضع الوحدة النمطية في علامة التبويب "خيارات متقدمة".

• الموقف: مطلق
• الموقع: المركز

أضف الصف رقم 2

هيكل العمود

إلى الصف التالي. استخدم هيكل العمود التالي:

تحجيم

بدون إضافة وحدات بعد ، افتح إعدادات الصف ، وانتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات الحجم على النحو التالي:

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• العرض: 90٪
• العرض الأقصى: 100٪

فهرس Z.

قم بتعيين فهرس من الألف إلى الياء لهذا الصف أيضًا.

• الفهرس Z: 2

تباعد العمود 1

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

• الحشوة اليسرى: 5٪
• الحشوة اليمنى: 5٪

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

أضف محتوى H3

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

إعدادات نص H3

انتقل إلى علامة تبويب تصميم الوحدة وتغيير إعدادات نص H3 وفقًا لذلك:

• خط العنوان 3: مونتسيرات
• نمط خط العنوان 3: تسطير
• العنوان 3 لون التسطير: #ffffff
• نمط تسطير العنوان 3: صلب
• لون نص العنوان 3: #ffffff
• حجم نص العنوان 3:
  • سطح المكتب: 4vw
  • الجهاز اللوحي والهاتف: 10vw
• العنوان 3 تباعد الأحرف: -3 بكسل

تباعد

أضف بعض المساحة المتروكة الصحيحة على أحجام الشاشات الأصغر.

• الحشو الأيمن: 20٪ (الجهاز اللوحي والهاتف فقط)

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

إضافة محتوى

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

لون الخلفية

قم بتغيير لون الخلفية بعد ذلك.

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

إعدادات النص

بعد ذلك ، قم بتعديل إعدادات النص كما يلي:

• خط النص: عرض Playfair
• نمط خط النص: مائل
• حجم الخط:
  • سطح المكتب: 1.6vw
  • الجهاز اللوحي: 3vw
  • الهاتف: 4vw
• ارتفاع خط النص: 1.5em

تباعد

قم بتطبيق بعض قيم الحشو المخصصة أيضًا.

• الحشو العلوي: 10vh
• الحشوة السفلية: 10vh
• الحشوة اليسرى: 10٪
• الحشوة اليمنى: 10٪

أضف وحدة الزر إلى العمود 2

أضف نسخة

الوحدة التالية والأخيرة التي سنضيفها هي وحدة الأزرار إلى العمود 2. أضف نسخة من اختيارك.

إعدادات الزر

انتقل إلى علامة تبويب تصميم الوحدة وقم بتغيير إعدادات الزر على النحو التالي:

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر:
  • سطح المكتب: 1.2vw
  • الجهاز اللوحي: 2.5vw
  • الهاتف: 3.5vw
• لون نص الزر: # 000000
• لون خلفية الزر: #ffffff
• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 0 بكسل
• زر الخط: مونتسيرات

• نمط خط الزر: تسطير
• لون تسطير الزر: # 000000
• نمط تسطير الزر: صلب

تباعد

أضف بعض قيم المساحة المتروكة المخصصة أيضًا.

• الحشوة العلوية: 20 بكسل
• الحشو السفلي: 20 بكسل
• الحشو الأيسر: 50 بكسل
• الحشوة اليمنى: 50 بكسل

موقع

وقم بتغيير موضع الوحدة النمطية في علامة التبويب "خيارات متقدمة".

• الموقف: مطلق
• الموقع: أسفل اليمين

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

وحدة الصورة في الصف رقم 1

الإعدادات الثابتة

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

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

تحجيم لزجة

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

• العرض اللاصق: 80٪

تباعد ثابت

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

• الحشوة العلوية اللاصقة: 50vh
• الحشوة السفلية اللاصقة: 50vh

خلفية متدرجة لزجة

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

• اللون 1: # 00336b
• اللون 2: rgba (41،196،169،0)
• نوع التدرج: خطي
• اتجاه التدرج: 90 درجة
• وضع التدرج فوق صورة الخلفية: نعم

انتقال

ولضمان انتقال سلس ، سنزيد مدة انتقال الوحدة.

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

العمود 2 في الصف رقم 2

العمود 2 إعدادات مثبتة

بعد ذلك ، سنحول العمود الثاني من الصف الثاني أيضًا إلى اللزوجة.

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

وحدة النص في عمود مثبت

لون الخلفية اللاصق

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

• لون الخلفية اللاصق: # 333333

لون النص اللاصق

بعد ذلك ، قم بتعديل لون النص في حالة لزجة.

• لون النص اللاصق: #ffffff

انتقال

وأكمل إعدادات الوحدة بزيادة مدة الانتقال في علامة التبويب "خيارات متقدمة". هذا كل شيء!

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

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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