كيفية إنشاء انتقالات قسم جميلة باستخدام ميزات التصميم الجديدة لديفي

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

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

نظرة خاطفة

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

كيفية إنشاء انتقالات قسم جميلة باستخدام ميزات التصميم الجديدة لديفي

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

إعادة إنشاء الأقسام

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

إنشاء القسم الأول

ابدأ بإنشاء أول قسم قياسي واختيار صف كامل العرض.

إعدادات القسم

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

أول وحدة نصية

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

• خط النص: Comfortaa
• حجم خط النص: 50
• ارتفاع خط النص: 1.7em
• اتجاه النص: الوسط

وحدة النص الثانية

افعل نفس الشيء لوحدة النص الثانية ولكن استخدم الإعدادات التالية بدلاً من ذلك:

• خط النص: Comfortaa
• حجم خط النص: 16
• ارتفاع خط النص: 1.7em
• اتجاه النص: الوسط

وحدة الزر

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

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

أثناء وجودك في فئة الأزرار الفرعية ، استخدم الخلفية المتدرجة التالية للزر:

• اللون الأول: # 2b87da
• اللون الثاني: # 29c4a9
• نوع التدرج: خطي
• اتجاه التدرج: 162 درجة
• موقف البداية: 0٪
• موضع النهاية: 100٪

إنشاء القسم الثاني

أضف قسمًا قياسيًا آخر ولكن اختر صفًا من ثلاثة أعمدة بدلاً من ذلك.

إعدادات القسم

سيستفيد القسم الثاني من حشوة "300 بكسل" للجزء العلوي والسفلي أيضًا.

الوحدة النمطية Blurb

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

بمجرد القيام بذلك ، انتقل إلى علامة التبويب التصميم واستخدم الإعدادات التالية لفئة الرموز الفرعية:

• لون الأيقونة: # 515151
• وضع الصورة / الرمز: علوي
• استخدام حجم خط الأيقونة: نعم
• حجم خط الأيقونة: 55 بكسل

بعد ذلك ، تأكد من تطبيق الإعدادات التالية على الفئة الفرعية لنص العنوان:

• خط الرأس: Comfortaa
• محاذاة نص الرأس: الوسط
• حجم خط الرأس: 18

وأخيرًا ، هذه هي إعدادات الفئة الفرعية للنص الأساسي:

• خط الجسم: Comfortaa
• محاذاة النص الأساسي: الوسط
• حجم خط الجسم: 14
• ارتفاع خط الجسم: 1.7em

وحدة استنساخ دعاية

بمجرد إنشاء Blurb Module ، قم باستنساخه مرتين ووضعه في العمودين الآخرين من الصف.

1. على طول الطريق قطري

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

إعدادات الخلفية المتدرجة للقسم الأول

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

• اللون الأول: #dddddd
• اللون الثاني: # f7f7f7
• نوع التدرج: خطي
• اتجاه التدرج: 183 درجة
• موقف البداية: 85٪
• مركز النهاية: 70.05٪

إعدادات الخلفية المتدرجة للقسم الثاني

سيحتاج القسم الثاني إلى إعدادات الخلفية المتدرجة التالية بدلاً من ذلك:

• اللون الأول: # f7f7f7
• اللون الثاني: #dddddd
• نوع التدرج: خطي
• اتجاه التدرج: 183 درجة
• موقف البداية: 85٪
• مركز النهاية: 69.05٪

قم بإزالة الحشوة العلوية للقسم الثاني

آخر شيء عليك القيام به في هذا المثال هو إزالة الحشوة العلوية للقسم الثاني.

2. قابلني في منتصف الطريق

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

إعدادات الخلفية المتدرجة للقسم الأول

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

• اللون الأول: rgba (255،255،255،0)
• اللون الثاني: rgba (224،43،32،0.07)
• نوع التدرج: شعاعي
• اتجاه شعاعي: أعلى اليسار
• موقف البداية: 60٪
• موقف النهاية: 50٪

إعدادات الخلفية المتدرجة للقسم الثاني

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

• اللون الأول: rgba (255،255،255،0)
• اللون الثاني: rgba (224،43،32،0.33)
• نوع التدرج: شعاعي
• الاتجاه الشعاعي: أسفل اليمين
• موقف البداية: 58٪
• موقف النهاية: 50٪

3. الانصهار

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

إعدادات الخلفية المتدرجة للقسم الأول

بالنسبة إلى القسم الأول ، ستحتاج إلى خلفية التدرج التالية:

• اللون الأول: rgba (12،113،195،0.19)
• اللون الثاني: rgba (255،255،255،0.39)
• نوع التدرج: شعاعي
• اتجاه شعاعي: أسفل اليسار
• موقف البداية: 50٪
• موقف النهاية: 50٪

إعدادات الخلفية المتدرجة للقسم الثاني

بالنسبة للقسم الثاني ، سنستخدم إعدادات الخلفية المتدرجة التالية:

• اللون الأول: rgba (224،43،32،0.17)
• اللون الثاني: rgba (255،255،255،0.39)
• نوع التدرج: شعاعي
• الاتجاه الشعاعي: أعلى اليمين
• موقف البداية: 50٪
• موقف النهاية: 50٪

إضافة قسم قياسي جديد في الوسط

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

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

سيحتاج هذا القسم الجديد إلى خلفية متدرجة أيضًا ، باستخدام الإعدادات التالية:

• اللون الأول: rgba (12،113،195،0.19)
• اللون الثاني: rgba (224،43،32،0.17)
• نوع التدرج: خطي
• اتجاه التدرج: 92 درجة
• موقف البداية: 43٪
• موضع النهاية: 62٪

4. معكوس

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

إعدادات الخلفية المتدرجة للقسم الأول

الخلفية المتدرجة للقسم الأول هي كما يلي:

• اللون الأول: # f2f2f2
• اللون الثاني: rgba (104،153،193،0.58)
• نوع التدرج: شعاعي
• الاتجاه الشعاعي: أسفل اليمين
• موقف البداية: 7.9٪
• المركز الختامي: 7.9٪

إعدادات الخلفية المتدرجة للقسم الثاني

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

• اللون الأول: rgba (104،153،193،0.58)
• اللون الثاني: # f2f2f2
• نوع التدرج: شعاعي
• الاتجاه الشعاعي: أعلى اليمين
• موقف البداية: 8٪
• موضع النهاية: 8٪

5. المؤشرات

يبدو المثال الخامس أنظف وأضيق الحدود قليلاً من الأمثلة الأخرى. يمكنك إدراك الانتقال بطريقتين من خلال رؤية المؤشرات أو الدوائر (أو كليهما).

إعدادات الخلفية المتدرجة للقسم الأول

استخدم خلفية التدرج التالية للقسم الأول:

• اللون الأول: # f4f4f4
• اللون الثاني: #ffffff
• نوع التدرج: شعاعي
• اتجاه شعاعي: أعلى
• موقف البداية: 88٪
• مركز النهاية: 88.05٪

إعدادات الخلفية المتدرجة للقسم الثاني

أخيرًا ، قم بتطبيق إعدادات الخلفية المتدرجة التالية على القسم الثاني:

• اللون الأول: rgba (43،135،218،0)
• اللون الثاني: rgba (12،113،195،0.43)
• نوع التدرج: شعاعي
• اتجاه شعاعي: أسفل
• مركز البداية: 87٪
• مركز النهاية: 87٪

6. اللغز

المثال الأخير بالتأكيد يجعل الأقسام تشعر وكأنها تنتمي معًا.

إعدادات الخلفية المتدرجة للقسم الأول

افتح إعدادات القسم الأول واستخدم الخلفية المتدرجة التالية:

• اللون الأول: rgba (160،181،193،0.46)
• اللون الثاني: rgba (255،255،255،0)
• نوع التدرج: شعاعي
• اتجاه شعاعي: أعلى
• مركز البداية: 56.3٪
• موضع النهاية: 43٪

إعدادات الخلفية المتدرجة للقسم الثاني

بعد ذلك ، استخدم إعدادات الخلفية المتدرجة التالية للقسم الثاني:

• اللون الأول: rgba (242،242،242،0)
• اللون الثاني: rgba (160،181،193،0.46)
• نوع التدرج: شعاعي
• اتجاه شعاعي: أعلى
• موقف البداية: 56٪
• موضع النهاية: 40٪

تغيير مساحة القسم الأول

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

قم بإزالة الحشوة العلوية للقسم الثاني

أخيرًا ، سنقوم بإزالة الحشوة العلوية للقسم الثاني أيضًا.

افكار اخيرة

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

تأكد من الاشتراك في النشرة الإخبارية عبر البريد الإلكتروني وقناة YouTube حتى لا يفوتك إعلان كبير أو نصيحة مفيدة أو Divi freebie!

صورة مميزة بواسطة NikVector / shutterstock.com