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

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

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

هيا بنا نبدأ.

نظرة خاطفة

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

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

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

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

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

تنزيل مجاني

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

تحميل

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

لاستيراد تخطيط القسم إلى مكتبة Divi الخاصة بك ، قم بما يلي:

1. انتقل إلى مكتبة Divi.
2. انقر فوق الزر "استيراد" أعلى الصفحة.
3. في نافذة قابلية النقل المنبثقة ، حدد علامة التبويب استيراد
4. اختر ملف التنزيل من جهاز الكمبيوتر الخاص بك (تأكد من فك ضغط الملف أولاً واستخدم ملف JSON).
5. ثم انقر فوق زر الاستيراد.

بمجرد الانتهاء من ذلك ، سيكون تخطيط القسم متاحًا في Divi Builder.

دعنا نصل إلى البرنامج التعليمي ، أليس كذلك؟

ما تحتاجه للبدء

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

1. إذا لم تكن قد قمت بذلك بعد ، فقم بتثبيت وتفعيل Divi Theme.
2. قم بإنشاء صفحة جديدة في WordPress واستخدم Divi Builder لتحرير الصفحة على الواجهة الأمامية (منشئ مرئي).
3. اختر الخيار "البناء من الصفر".

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

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

الجزء 1: إنشاء عنوان كمحتوى وهمي

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

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

أضف عنوان H1 إلى محتوى الجسم.

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

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

إضافة حشوة فولكس فاجن إلى القسم

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

• الحشو: 15vw أعلى ، 15vw أسفل

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

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

• توقف التدرج 1: # 4f0f75 (عند 0٪)
• توقف التدرج 2: # 2843c9 (عند 25٪)
• توقف التدرج 3: # 4ae2e0 (عند 50٪)
• توقف التدرج 4: # 3881ff (عند 75٪)
• توقف التدرج 5: # 4f0f75 (عند 100٪)

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

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

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

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

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

ضمن علامة التبويب Mask ، أضف ما يلي:

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

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

3. تصميم خلفية الصف

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

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

ثم الصق الخلفية في الصف الحالي.

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

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

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

• العرض: 75vw
• العرض الأقصى: 75vw
• الحشو: 10vw أعلى ، 10vw أسفل ، 10vw يسار ، 10vw يمين

نظرة عامة على التباعد والتحجيم بوحدات طول فولكس فاجن

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

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

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

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

• توقف التدرج 1: # 2843c9 (عند 0٪)
• توقف التدرج 2: # 4ae2e0 (عند 50٪)
• توقف التدرج 3: # 3881ff (عند 100٪)

أضف Box Shadow إلى الصف

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

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

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

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

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

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

يمكننا أيضًا تحديث لون القناع للصف لجعل التصميم بارزًا حقًا! ضمن علامة تبويب القناع ، قم بتحديث ما يلي:

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

النتيجة النهائية

دعنا نتحقق من النتيجة النهائية.

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

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

افكار اخيرة

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

أتطلع إلى الاستماع منك في التعليقات.

هتافات!