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

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

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

معاينة

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

سطح المكتب

مثال 1

المثال رقم 2

المثال رقم 3

متحرك

مثال 1

المثال رقم 2

المثال رقم 3

قم بتنزيل تأثيرات التحويم لتحويل الصورة مجانًا

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

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

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

تنزيل مجاني

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

تحميل

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

خطوات عامة

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

تباعد

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

• الهامش الأعلى: 200 بكسل
• الهامش السفلي: 200 بكسل
• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

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

هيكل العمود

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

لون خلفية العمود 2

بدون إضافة أي وحدات نمطية حتى الآن ، افتح إعدادات الصف وأضف لونًا للخلفية إلى العمود الثاني.

• لون خلفية العمود 2: #efefef

تحجيم

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

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

تباعد

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

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل
• العمود 2 أعلى الحشوة: 10vw
• الحشوة السفلية للعمود 2: 10vw
• العمود 2 الحشوة اليسرى: 5vw
• العمود 2 الحشوة اليمنى: 5vw

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

أضف محتوى H2

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

إعدادات نص H2

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

• خط العنوان 2: Times New Roman
• وزن خط العنوان 2: غامق
• لون نص العنوان 2: # 0f47ff
• حجم نص العنوان 2: 3.5vw

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

الرؤية

الوحدة التالية التي نحتاجها في العمود الثاني هي Divider Module. تأكد من تمكين خيار "إظهار الحاجز".

• إظهار الحاجز: نعم

اللون

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

• اللون: # ff961e

تحجيم

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

• وزن الحاجز: 1 بكسل
• العرض: 20٪
• محاذاة الوحدة: يسار
• الارتفاع: 0 بكسل

تباعد

وقم بإنشاء بعض المساحة للوحدة النمطية باستخدام قيم الهامش العلوية والسفلية التالية:

• الهامش العلوي: 1vw
• الهامش السفلي: 1vw

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

إضافة محتوى

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

إعدادات النص

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

• خط النص: Open Sans
• حجم النص: 0.7vw (سطح المكتب) ، 1.7vw (الجهاز اللوحي) ، 2.5vw (الهاتف)
• ارتفاع خط النص: 1.5vw (سطح المكتب) ، 2.5vw (Tablet) ، 3.5vw (الهاتف)
• اتجاه النص: ضبط

تحجيم

قم بتعديل إعدادات التحجيم أيضًا.

• العرض: 61٪ (سطح المكتب) ، 80٪ (الجهاز اللوحي والهاتف)

تباعد

وأضف بعض الهامش العلوي والسفلي المخصص.

• الهامش العلوي: 2vw
• الهامش السفلي: 2vw

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

إضافة محتوى

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

إضافة رابط

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

إعدادات النص

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

• خط النص: Times New Roman
• لون النص: # ff961e
• حجم النص: 1.5vw (سطح المكتب) ، 2.5vw (Tablet) ، 3.5vw (الهاتف)

تحجيم

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

• العرض: 48٪

تباعد

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

• الحشوة العلوية: 1vw
• الحشو السفلي: 1vw

الحدود

قم بإنهاء وحدة النص عن طريق إضافة حد سفلي بالإعدادات التالية:

• عرض الحد السفلي: 1 بكسل
• لون الحد السفلي: # 0f47ff

قسم استنساخ مرتين

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

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

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

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

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

لون الخلفية الافتراضي

قم بتغيير لون خلفية وحدة الصورة:

• لون الخلفية: # 0f47ff

لون الخلفية تحوم

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

• لون الخلفية: rgba (255،150،30،0.65)

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

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

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

تباعد

انتقل إلى إعدادات التباعد للوحدة النمطية وأضف بعض قيم الحشو المخصصة:

• إظهار المساحة أسفل الصورة:
• الحشوة العلوية: 22vw
• الحشو السفلي: 22vw

استدارة الترجمة الافتراضية

سنقوم أيضًا بتدوير الصورة عند التمرير. تأكد من ظهور الصورة في حالتها الأصلية قبل التمرير عبر إضافة "0deg" إلى الخيار الصحيح.

• اليمين: 0 درجة

تحوم ترجمة استدارة

غيّر هذه القيمة عند التمرير:

• اليمين: 180 درجة

الانتقالات

لإنشاء تأثير فوري ، سنزيل مدة الانتقال:

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

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

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

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

إلى المثال الثاني! مرة أخرى ، تأكد من ترك مربع الصورة فارغًا.

لون الخلفية الافتراضي

انتقل إلى إعدادات الخلفية وأضف لون الخلفية التالي (شفاف تمامًا):

• لون الخلفية: rgba (255،255،255،0)

لون الخلفية تحوم

قم بتعديل هذا اللون عند المرور بالماوس:

• لون الخلفية: rgba (0،0،0،0.65)

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

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

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

تباعد

بعد ذلك ، انتقل إلى إعدادات التباعد وقم بتعديل المساحة المتروكة العلوية والسفلية:

• إظهار المساحة أسفل الصورة:
• الحشوة العلوية: 22vw
• الحشو السفلي: 22vw

مقياس التحويل الافتراضي

تأكد من بقاء قيم مقياس التحويل الافتراضية "100٪".

• اليمين: 100٪
• القاع: 100٪

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

وقم بتغيير هذه القيم عند التمرير لإنشاء تأثير تحجيم.

• اليمين: 120٪
• القاع: 120٪

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

بشكل افتراضي ، نحتفظ بـ "0px" للخيار السفلي في إعدادات ترجمة التحويل.

• القاع: 0 بكسل

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

قم بتعديل هذه القيمة عند التمرير لتغيير موضع العنصر.

• القاع: 9vw

الانتقالات

نقوم أيضًا بإنشاء انتقال أسرع قليلاً عن طريق تغيير مدة الانتقال في علامة التبويب "خيارات متقدمة":

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

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

تغيير هيكل العمود

إلى المثال التالي والأخير! ابدأ بتعديل هيكل عمود الصف.

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

تحميل صورة 1: 1

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

تحجيم

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

• فرض عرض كامل: نعم

تباعد

قم بإزالة المساحة الموجودة أسفل الصورة في إعدادات التباعد التالية.

• إظهار المساحة أسفل الصورة:

الحد الافتراضي

بعد ذلك ، انتقل إلى إعدادات الحدود وأضف "500vw" إلى كل زاوية من الزوايا. نحن نتأكد من أن هذه القيمة عالية بما يكفي لتغطية جميع أحجام الشاشات.

تحوم الحدود

قم بإزالة الزوايا الدائرية التي أضفتها عند التمرير.

المرشحات الافتراضية

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

• التشبع: 100٪
• السطوع: 46٪
• العتامة: 3٪

مرشحات تحوم

قم بتمكين خيار التمرير فوق كل إعداد من الإعدادات المعدلة واستخدم القيم التالية:

• التشبع: 300٪
• السطوع: 46٪
• العتامة: 100٪

مقياس التحويل الافتراضي

بعد ذلك ، انتقل إلى خيارات التحويل وقم بتعديل خيارات مقياس التحويل الافتراضية:

• اليمين: 68٪
• القاع: 68٪

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

قم بتغيير هذه القيم عند التمرير.

• اليمين: 130٪
• القاع: 130٪

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

انتقل إلى قيم ترجمة التحويل وتأكد من بقاء قيم ترجمة التحويل الافتراضية كما هي:

• اليمين: 0 بكسل
• القاع: 0 بكسل

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

قم بتعديل القيم عند التمرير.

• يمين: 1vw
• القاع: 8vw

الانتقالات

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

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

معاينة

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

سطح المكتب

مثال 1

المثال رقم 2

المثال رقم 3

متحرك

مثال 1

المثال رقم 2

المثال رقم 3

افكار اخيرة

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

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