كيفية تشغيل انتقالات الصور باستخدام خيارات Divi اللاصقة

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

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

معاينة

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

سطح المكتب

متحرك

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

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

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

تنزيل مجاني

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

تحميل

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

1. خطوات عامة

أضف القسم رقم 1

تباعد

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

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

أضف صفًا جديدًا

هيكل العمود

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

تحجيم

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

• العرض الأقصى: 1480 بكسل
• محاذاة الصف: الوسط

تباعد

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

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

فهرس Z.

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

• الفهرس Z: 1

العمود تجاوز

بعد ذلك ، افتح إعدادات العمود واضبط الفائض على مخفي.

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

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

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

الوحدة الوحيدة التي نحتاجها في هذا الصف هي وحدة صورة. اترك مربع الصورة فارغًا.

الصورة الخلفية

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

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

تباعد

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

• الحشوة العلوية:
  • سطح المكتب: 300 بكسل
  • الجهاز اللوحي والهاتف: 150 بكسل
• الحشوة السفلية:
  • سطح المكتب: 300 بكسل
  • الجهاز اللوحي والهاتف: 150 بكسل

أضف القسم رقم 2

تباعد

أضف قسمًا آخر أسفل القسم السابق مباشرةً. افتح إعدادات القسم وقم بإزالة المساحة المتروكة العلوية الافتراضية في إعدادات التباعد.

• الحشوة العلوية: 0 بكسل

أضف صفًا جديدًا

هيكل العمود

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

فهرس Z.

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

• الفهرس Z: 2

إضافة وحدة دعوة إلى العمل إلى العمود

إضافة محتوى

في هذا الصف ، الوحدة الوحيدة التي نحتاجها هي وحدة Call to Action. أضف المحتوى الذي تختاره.

إضافة ارتباط الزر

جنبا إلى جنب مع زر الارتباط.

لون الخلفية

ثم أضف لون خلفية بيضاء.

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

إعدادات النص

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

• محاذاة النص: يسار
• لون النص: غامق

إعدادات نص العنوان

صمم نص العنوان أيضًا.

• خط العنوان: عرض Playfair
• نمط خط العنوان: مائل
• حجم نص العنوان
  • سطح المكتب: 45 بكسل
  • الجهاز اللوحي: 40 بكسل
  • الهاتف: 35 بكسل
• تباعد حروف العنوان: 1 بكسل

إعدادات النص الأساسي

بالإضافة إلى النص الأساسي.

• خط الجسم: كارلا
• ارتفاع خط الجسم: 2em

إعدادات الزر

ثم ، نمط الزر.

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 18 بكسل
• لون نص الزر: # 000000
• لون التدرج 1: #ffffff
• لون التدرج 2: # ffdc91
• نوع التدرج: خطي
• موقف البداية: 50٪
• موقف النهاية: 50٪

• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 0 بكسل
• خط الزر: كارلا
• نمط خط الزر: أحرف كبيرة
• زر العرض: نعم

• وضع رمز الزر: يسار
• فقط إظهار الرمز عند التمرير للزر: لا
• الحشوة العلوية: 10 بكسل
• الحشو السفلي: 10 بكسل
• الحشوة اليسرى: 15٪
• الحشوة اليمنى: 15٪

تحجيم

نحن نقوم بتعديل إعدادات التحجيم عبر أحجام الشاشات المختلفة أيضًا.

• عرض:
  • سطح المكتب: 65٪
  • الجهاز اللوحي: 80٪
  • الهاتف: 100٪
• محاذاة الوحدة: المركز

تباعد

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

• الهامش العلوي:
  • سطح المكتب: -150 بكسل
  • الجهاز اللوحي: -50 بكسل
  • الهاتف: 0 بكسل
• الهامش السفلي: 50 بكسل
• الحشوة العلوية: 150 بكسل
• الحشو السفلي: 150 بكسل

مربع الظل

وسنكمل إعدادات الوحدة بإضافة ظل مربع دقيق.

• قوة Box Shadwo Blur: 30 بكسل
• لون الظل: rgba (0،0،0،0.11)

2. تطبيق تأثير لاصق على الصف

افتح الصف في القسم رقم 1

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

تطبيق تأثير لاصق

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

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

تأكد من وجود أعلى إزاحة متساوية فوق القسم الأول

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

• الهامش العلوي: 400 بكسل

3. تطبيق تأثير كين بيرن على وحدة الصورة

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

مثال 1

إعدادات الصف الثابت

مربع الظل

لإعادة إنشاء المثال رقم 1 ، الذي كنت قادرًا على رؤيته في معاينة هذا المنشور ، افتح إعدادات الصف وقم بتطبيق إعدادات ظل المربع التالية:

• مربع الظل الوضع الرأسي: 0 بكسل
• قوة انتشار الظل المربع: 0 بكسل
• لون الظل: rgba (0،0،0،0)

• الوضع الرأسي اللاصق: 100 بكسل
• لون الظل اللاصق: # ffdc91

انتقال

قم بتضمين انتقال سلس في علامة التبويب المتقدمة أيضًا.

• مدة الانتقال: 500 مللي ثانية
• منحنى سرعة الانتقال: سهولة

إعدادات وحدة الصورة اللاصقة

مقياس التحويل

بعد ذلك ، افتح وحدة الصورة وقم بتطبيق تأثير مقياس التحويل في حالة لزجة.

• كلاهما: 100٪

• كلاهما مثبت: 130٪

انتقال

تأكد من الانتقال السلس عن طريق تعديل إعدادات النقل للوحدة وفقًا لذلك:

• مدة الانتقال: 1200 مللي ثانية
• منحنى سرعة الانتقال: سهولة

المثال رقم 2

إعدادات الصف الثابت

تحويل الترجمة

إلى المثال الثاني! افتح إعدادات الصف وقم بتطبيق إعدادات ترجمة التحويل التالية:

• اليمين: 20٪

• مثبت لليمين: 0٪

انتقال

قم بتعديل إعدادات انتقال الصف أيضًا.

• مدة الانتقال: 500 مللي ثانية
• منحنى سرعة الانتقال: سهولة

إعدادات وحدة الصورة اللاصقة

المرشحات

بعد ذلك ، افتح وحدة الصورة ولعب مع المرشحات في الحالة الافتراضية واللزجة.

• التشبع: 0٪
• سطوع: 50٪

• التشبع اللزج: 100٪
• السطوع اللاصق: 100٪

انتقال

أكمل إعدادات الوحدة ، وهذا البرنامج التعليمي ، عن طريق تغيير إعدادات الانتقال على النحو التالي:

• مدة الانتقال: 500 مللي ثانية
• منحنى سرعة الانتقال: سهولة

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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