Divi: كيفية إنشاء انتقالات خلفية بين العناصر

هل تريد إنشاء انتقالات خلفية بين العناصر Divi ?

قم بإنشاء انتقالات سلسة في تصميم الخلفية بين العناصر Divi طريقة رائعة لتحسين تصميمك موقع انترنت Divi.

يتيح لك هذا الانتقال بسلاسة لقناع التدرج والنمط والخلفية بين خط وقسم بطريقة إبداعية.

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

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

دعونا نبدأ.

مسح

إليك نظرة سريعة على التصميم الذي سنقوم ببنائه في هذا البرنامج التعليمي.

فيما يلي بعض نماذج التصميمات الأخرى الممكنة مع بعض التغييرات البسيطة على الأقنعة وأنماط الخلفية.

قم بإنشاء صفحة جديدة باستخدام Divi Builder

للبدء ، سوف تحتاج إلى القيام بما يلي:

من لوحة تحكم WordPress ، انتقل إلى الصفحات> إضافة جديد لإنشاء صفحة جديدة.

أعطه عنوانًا منطقيًا لك وانقر استخدم Divi Builder

ثم انقر فوق ابدأ البناء (البناء من الصفر)

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

إنشاء انتقال سلس في الخلفية بين قسم Divi والخط

إنشاء رأس كمحتوى عنصر نائب

اقرأ أيضا: Divi: كيفية إنشاء علامات تبويب مع تأثير التمرير من الخطوط

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

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

أضف نصًا بحجم H1.

تحت علامة التبويب تصميم، قم بتحديث تصميم نص العنوان حسب الرغبة.

• الخط: Roboto Condensed
• وزن الخط: عريض
• النمط: TT
• محاذاة النص: توسيط
• لون النص: # 000000
• حجم نص العنوان: 4vw
• تباعد الأحرف: 0.1em
• ارتفاع الخط: 1.3em

تصميم خلفية القسم

المساحة المتروكة المضافة إلى القسم

بمجرد وضع الرأس المزيف في مكانه ، افتح إعدادات القسم وقم بتحديث التباعد على النحو التالي:

• الحشو (العلوي والسفلي): 15vw

تمت إضافة تدرج الخلفية إلى القسم

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

• توقفات متدرجة:
  • 0٪: # 4f0f75 (عند 0٪)
  • 25٪: # 2843c9 (بنسبة 25٪)
  • 50٪: # 4ae2e0 (بنسبة 50٪)
  • 75٪: # 3881ff (عند 75٪)
  • 100٪: # 4f0f75 (عند 100٪)

إضافة نمط الخلفية إلى القسم

تحت علامة التبويب نمط الخلفية، قم بتحديث ما يلي:

• نمط: خطوط قطرية
• لون النمط: rgba (79,15,117,0.23،XNUMX،XNUMX،XNUMX)
• التحويل: تدوير
• حجم النمط: حجم مخصص
• العرض: 7vw
• الارتفاع: 5vw
• أصل تكرار النمط: المركز

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

إضافة قناع خلفية إلى القسم

تحت علامة التبويب قناع الخلفية، يضاف ما يلي:

• قناع الخلفية: طبقة النقطة
• لون القناع: rgba (0,0,0,0.7،XNUMX،XNUMX،XNUMX)
• عرض القناع: 100vw
• المنصب: المركز

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

تصميم خلفية الخط

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

لتسريع عملية تصميم خلفية الخط ، انسخ إعدادات خلفية القسم.

ثم الصق الخلفية على السطر الحالي.

في هذه المرحلة ، يمكنك بالفعل رؤية كيف يقوم نمط الخلفية والقناع الموجود على الخط بإجراء انتقال سلس إلى خلفية القسم.

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

اضبط حجم الصف والحشو باستخدام VW

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

• العرض: 75vw
• العرض الأقصى: 75vw

• الحشو (أعلى ، أسفل ، يسار ويمين): 10vw

ضبط توقف التدرج على الخط

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

تحت علامة التبويب تدرج الخلفية، سنحتفظ بنقاط التدرج الأوسط الثلاث الموروثة من خلفية القسم) ونزيل نقطتي التدرج الأول والأخير.

ثم اضبط المحطة الأولى على 0٪ والإيقاف الثالث على 100٪. بمجرد الانتهاء من ذلك ، يجب أن يكون لديك التدرجات التالية.

• توقف متدرج
  • 0٪: # 2843c9
  • 50٪: # 4ae2e0
  • 100٪: # 3881ff

أضف ظل الصندوق إلى الخط

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

• Box Shadow: انظر لقطة الشاشة
• الوضع الرأسي: 0 بكسل
• مربع قوة طمس الظل: 4vw
• لون الظل: rgba (0,0,0,0.5،XNUMX،XNUMX،XNUMX)

ضبط لون نمط خلفية الخط

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

تحت الخيار نمط الخلفية قم بتحديث ما يلي:

• لون النمط: rgba (255,255,255,0.23،XNUMX،XNUMX،XNUMX)

ضبط لون قناع خلفية الخط

يمكننا أيضًا تحديث لون القناع للخط لإبراز التصميم حقًا.

تحت علامة التبويب قناع الخلفية، قم بتحديث ما يلي:

• لون القناع: #ffffff
• تحويل القناع: مقلوب

نتيجة نهائية

دعونا نرى النتيجة النهائية.

تحميل DIVI الآن !!!

المزيد من الاحتمالات

فيما يلي بعض نماذج التصميمات الأخرى الممكنة مع بعض التغييرات البسيطة على الأقنعة وأنماط الخلفية.

أنظر أيضا: Divi: كيفية استخدام "Gradient Builder" لتجميل صورك

تحميل DIVI الآن !!!

وفي الختام

المفتاح لإنشاء انتقالات سلسة لتصميم الخلفية في Divi هو استخدام وحدات طول VW هذه بحكمة.

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

نأمل أن تضيف هذه التقنية مهارة تصميم مفيدة أخرى للمشاريع المستقبلية.

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

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

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

ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.

...