كيفية دمج أقنعة الخلفية مع فواصل الأقسام في Divi

يضيف الجمع بين أقنعة الخلفية وفواصل الأقسام في Divi طبقة أخرى من الإبداع إلى ترسانة قوية بالفعل من خيارات تصميم الخلفية. إذا لم تكن لديك خبرة كبيرة في خيارات خلفية 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. اختر الخيار "البناء من الصفر".
4. لديك الآن لوحة قماشية فارغة لبدء التصميم في Divi!

كيفية الجمع بين أقنعة الخلفية والفواصل في Divi

1. قم بإضافة حجم المقطع والتباعد

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

افتح إعدادات القسم. ضمن علامة التبويب تصميم ، قم بتحديث الحجم والتباعد كما يلي:

• ارتفاع الحد الأدنى: 50vw
• المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

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

2. قم بإنشاء تدرج الخلفية

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

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

• نقطة توقف اللون 1: # 1a2a6c (بنسبة 20٪)
• توقف اللون 2: # b21f1f (عند 60٪)
• توقف اللون 2: # fdbb2d (عند 100٪)

3. قم بإنشاء قناع الخلفية

الآن بعد أن أصبح لدينا تدرج لوني ، نحن جاهزون لإنشاء قناع خلفية.

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

• القناع: شيفرونز
• لون القناع: # 000
• تحويل القناع: مقلوب
• نسبة عرض القناع: انظر لقطة الشاشة

4. أضف فواصل خلفية القسم

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

للقيام بذلك ، انقر فوق علامة التبويب تصميم وأضف الفواصل التالية:

أولاً ، أضف حاجزًا علويًا ضمن علامة التبويب "علوي".

• نمط الحاجز: انظر لقطة الشاشة
• لون الفاصل: # 000
• ارتفاع الحاجز: 10vw

بعد ذلك ، أضف حاجزًا سفليًا ضمن علامة التبويب "أسفل".

• نمط الحاجز: انظر لقطة الشاشة
• لون الفاصل: # 000
• ارتفاع الحاجز: 10vw
• انعكاس الحاجز: قلب رأسي

النتائج

ها هي النتيجة حتى الآن.

تعديل خيارات الخلفية والفواصل لمزيد من التصاميم

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

التصميم البديل # 1

بالنسبة لتصميمنا البديل الأول ، سنقوم بتدوير قناع الخلفية الحالي واستبدال فواصل نصف دائرة بالمثلثات.

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

• تحويل القناع: قلب رأسي ، تدوير
• نسبة عرض القناع: انظر لقطة الشاشة

بعد ذلك ، قم بتحديث فواصل الأقسام كما يلي:

أعلى الحاجز

• نمط الحاجز: انظر لقطة الشاشة
• ارتفاع الحاجز: 13vw

مقسم سفلي

• نمط الحاجز: انظر لقطة الشاشة
• ارتفاع الحاجز: 13vw
• انقلاب الحاجز: تعطيل

النتائج

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

التصميم البديل # 2

بالنسبة لتصميمنا البديل الثاني والأخير ، سنقوم باستبدال قناع Chevrons بقناع Diagonal Bars 2 ونمنحه أيضًا مقسمًا جديدًا للقسم العلوي لإضافة تأثير رقيق على التصميم.

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

• القناع: قضبان قطرية 2
• تحويل القناع: قلب أفقي
• نسبة عرض القناع: انظر لقطة الشاشة

بعد ذلك ، قم بتحديث فواصل الأقسام كما يلي:

أعلى الحاجز

• نمط الحاجز: انظر لقطة الشاشة
• فليب فاصل: فليب هوريزونتال

مقسم سفلي

• نمط المقسم: لا شيء

النتائج

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

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

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

تحقق منها!

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

افكار اخيرة

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

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

هتافات!