كيفية إنشاء تحولات خلفية متدرجة جميلة مع Divi

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

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

معاينة

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

مثال 1

المثال رقم 2

المثال رقم 3

قم بتنزيل أقسام الأبطال مجانًا

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

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

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

تنزيل مجاني

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

تحميل

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

خطوات عامة

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

تباعد

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

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

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

هيكل العمود

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

تحجيم

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

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

تباعد

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

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

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

أضف محتوى H1

لنبدأ في إضافة وحدات! أول ما نحتاجه هو وحدة نصية بها بعض محتوى H1.

إعدادات نص H1

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

• خط العنوان: مونتسيرات
• محاذاة نص العنوان: الوسط
• لون نص العنوان: # 000000
• حجم نص العنوان: 3vw (سطح المكتب) ، 6vw (الجهاز اللوحي والهاتف)
• تباعد حروف العنوان: 0.7vw

تحجيم

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

• العرض: 48٪ (سطح المكتب) ، 60٪ (الجهاز اللوحي والهاتف)
• محاذاة الوحدة: المركز

تباعد

أكمل تصميم الوحدة بإضافة بعض الهامش العلوي.

• الهامش العلوي: 10vw

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

الرؤية

إلى الوحدة التالية! أضف وحدة Divider وتأكد من تمكين خيار "Show Divider".

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

خط

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

• لون الخط: # 000000

تحجيم

انتقل إلى إعدادات التحجيم وقم بتطبيق الإعدادات التالية:

• وزن الحاجز: 0.1vw
• العرض: 10٪ (كمبيوتر مكتبي) ، 16٪ (كمبيوتر لوحي) ، 25٪ (هاتف)
• محاذاة الوحدة: المركز

تباعد

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

• الحشوة العلوية: 2vw (سطح المكتب) ، 4vw (جهاز لوحي) ، 6vw (هاتف)
• الحشوة السفلية: 2vw (سطح المكتب) ، 4vw (جهاز لوحي) ، 6vw (هاتف)

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

إضافة محتوى

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

إعدادات النص

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

• خط النص: Open Sans
• محاذاة النص: ضبط
• ارتفاع خط النص: 2.3em

تحجيم

قم بتعديل العرض ومحاذاة الوحدة في إعدادات التحجيم التالية:

• العرض: 30٪ (كمبيوتر مكتبي) ، 54٪ (كمبيوتر لوحي) ، 70٪ (هاتف)
• محاذاة الوحدة: المركز

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

أضف نسخة

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

انتقام

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

• محاذاة الزر: الوسط

إعدادات الزر

قم بتعديل إعدادات الزر أيضًا.

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 0.8vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 2.8vw (هاتف)
• لون نص الزر: # 000000
• عرض حد الزر: 1 بكسل
• نصف قطر حدود الزر: 1 بكسل
• زر الخط: مونتسيرات

تباعد

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

• الهامش العلوي: 2vw (سطح المكتب) ، 8vw (الجهاز اللوحي والهاتف)
• الهامش السفلي: 10vw
• الحشوة العلوية: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)
• الحشوة السفلية: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)
• الحشو الأيسر: 3vw (سطح المكتب) ، 6vw (كمبيوتر لوحي) ، 8vw (هاتف)
• الحشو الأيمن: 3vw (سطح المكتب) ، 6vw (كمبيوتر لوحي) ، 8vw (هاتف)

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

بمجرد الانتهاء من القسم ، يمكنك استنساخه مرتين ؛ واحد لكل مثال.

إعادة إنشاء انتقال تحوم الخلفية المتدرجة # 1

الجزء

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

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

• اللون 1: # d1d1ff
• اللون 2: # f7f7f7
• اتجاه التدرج: 90 درجة
• موقف البداية: 50٪
• موقف النهاية: 50٪

تحوم خلفية متدرجة

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

• اللون 1: # f7f7f7
• اللون 2: # ffc1c7
• اتجاه التدرج: 90 درجة
• موقف البداية: 50٪
• موقف النهاية: 50٪

صف

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

افتح إعدادات الصف التالي وقم بتطبيق الإعدادات الافتراضية التالية لخلفية التدرج:

• اللون 1: # 7032ff
• اللون 2: rgba (255،255،255،0)
• اتجاه التدرج: 90 درجة
• موقف البداية: 10٪
• موضع النهاية: 10٪

تحوم خلفية متدرجة

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

• اللون 1: rgba (255،255،255،0)
• اللون 2: # ff324a
• اتجاه التدرج: 90 درجة
• موقف البداية: 90٪
• موضع النهاية: 90٪

إعادة إنشاء انتقال تحوم الخلفية المتدرجة # 2

الجزء

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

إلى المثال الثاني! افتح إعدادات القسم وأضف خلفية التدرج التالية:

• اللون 1: # f7f7f7
• اللون 2: #eceaff
• اتجاه التدرج: 156 درجة
• موقف البداية: 50٪
• موقف النهاية: 50٪

تحوم خلفية متدرجة

أضف خلفية متدرجة مختلفة عند التمرير:

• اللون 1: #ffeaec
• اللون 2: # f7f7f7
• اتجاه التدرج: 204 درجة
• موقف البداية: 50٪
• موقف النهاية: 50٪

صف

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

افتح إعدادات الصف التالي وقم بتطبيق إعدادات الخلفية المتدرجة التالية:

• اللون 1: # a932ff
• اللون 2: rgba (255،255،255،0)
• نوع التدرج: شعاعي
• اتجاه شعاعي: أسفل اليسار
• موقف البداية: 14٪
• موضع النهاية: 14٪

تحوم خلفية متدرجة

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

• اللون 1: # ff324a
• اللون 2: rgba (255،255،255،0)
• نوع التدرج: شعاعي
• اتجاه شعاعي: أعلى اليسار
• موقف البداية: 14٪
• موضع النهاية: 14٪

عمودي

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

انتقل إلى إعدادات العمود وأضف الخلفية المتدرجة التالية:

• اللون 1: # a932ff
• اللون 2: rgba (255،255،255،0)
• نوع التدرج: شعاعي
• الاتجاه الشعاعي: أعلى اليمين
• موقف البداية: 14٪
• موضع النهاية: 14٪

تحوم خلفية متدرجة

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

• اللون 1: # ff324a
• اللون 2: rgba (255،255،255،0)
• نوع التدرج: شعاعي
• الاتجاه الشعاعي: أسفل اليمين
• موقف البداية: 14٪
• موضع النهاية: 14٪

إعادة إنشاء انتقال تحوم الخلفية المتدرجة # 3

الجزء

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

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

• اللون 1: # ffc1c7
• اللون 2: #ffffff
• نوع التدرج: شعاعي
• اتجاه شعاعي: أعلى
• موقف البداية: 45٪
• موضع النهاية: 45٪

تحوم خلفية متدرجة

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

• اللون 1: # ffc1c7
• اللون 2: #ffffff
• نوع التدرج: شعاعي
• اتجاه شعاعي: يسار
• موقف البداية: 20٪
• موضع النهاية: 20٪

صف

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

افتح إعدادات الصف التالي وأضف خلفية التدرج التالية:

• اللون 1: # d3dfff
• اللون 2: rgba (255،255،255،0)
• نوع التدرج: شعاعي
• اتجاه شعاعي: أسفل
• موقف البداية: 45٪
• موضع النهاية: 45٪

تحوم خلفية متدرجة

قم بتعديل خلفية التدرج وفقًا لذلك:

• اللون 1: # d3dfff
• اللون 2: rgba (255،255،255،0)
• نوع التدرج: شعاعي
• الاتجاه الشعاعي: صحيح
• موقف البداية: 20٪
• موضع النهاية: 20٪

عمودي

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

أخيرًا وليس آخرًا ، أضف خلفية متدرجة للعمود وبذلك تكون قد انتهيت!

• اللون 1: # f7f7f7
• اللون 2: rgba (255،255،255،0)
• نوع التدرج: شعاعي
• اتجاه شعاعي: المركز
• موقف البداية: 41٪
• موضع النهاية: 41٪

معاينة

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

مثال 1

المثال رقم 2

المثال رقم 3

افكار اخيرة

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

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