كيفية إنشاء عنوان وضع مزج منقسم باستخدام Divi

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

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

معاينة

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

قم بتنزيل قسم بطل نمط Split Blend Mode مجانًا

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

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

تنزيل مجاني

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

تحميل

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

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

لنبدأ في إعادة التكوين!

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

تباعد

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

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

مربع الظل

انتقل إلى خيارات ظل الصندوق وأضف ظل مربع دقيقًا.

• مربع قوة طمس الظل: 70 بكسل
• لون الظل: rgba (0،0،0،0.07)

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

هيكل العمود

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

خلفية متدرجة

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

• اللون 1: # 00cbff
• اللون 2: # bf35ff
• اتجاه التدرج: 96 درجة

الصورة الخلفية

أضف صورة خلفية إلى الصف واستخدمها مع إعدادات صورة الخلفية التالية:

• حجم صورة الخلفية: الغلاف
• موقف صورة الخلفية: المركز
• تكرار صورة الخلفية: لا يوجد تكرار
• مزيج صورة الخلفية: شاشة

تحجيم

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

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• معادلة ارتفاعات العمود: نعم
• العرض: 100٪
• العرض الأقصى: 100٪

تباعد

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

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

عرض

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

display: flex;

إعدادات العمود 2

لون الخلفية

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

• لون الخلفية: #FFFFFF

المرشحات

انتقل إلى علامة تبويب التصميم وأضف وضع المزج إلى العمود بأكمله.

• وضع المزج: الشاشة

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

الرؤية

حان الوقت لبدء إضافة الوحدات! الوحدة الوحيدة التي نحتاجها في العمود الأول هي Divider Module. ستساعدنا هذه الوحدة في إنشاء مساحة في العمود الأول دون ظهور وحدة نمطية. تأكد من تعطيل خيار "إظهار الحاجز" في الحاجز.

• إظهار الحاجز:

تباعد

انتقل إلى إعدادات التباعد وأضف بعض الهامش السفلي لإنشاء مساحة في العمود الأول.

• الهامش السفلي: 50vw

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

أضف عنوان H1

إلى العمود الثاني! هنا ، سنبدأ بوحدة نص العنوان. أدخل بعض محتوى H1 من اختيارك.

إعدادات نص H1

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

• خط العنوان: بوبينز
• وزن خط العنوان: غامق
• لون نص العنوان: #FFFFFF
• حجم نص العنوان: 12vw
• تباعد حروف العنوان: -0.2vw

تباعد

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

• الهامش العلوي: 18vw
• الهامش السفلي: 2vw
• الهامش الأيسر: -27.3vw

المرشحات

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

• وضع المزج: الاختلاف

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

إضافة محتوى

إلى الوحدة الثانية! أضف بعض المحتوى من اختيارك.

إعدادات النص

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

• خط النص: بوبينز
• محاذاة النص: ضبط
• لون النص: # 000000
• حجم النص: 0.8vw (سطح المكتب) ، 1.5vw (جهاز لوحي) ، 2.3vw (هاتف)
• ارتفاع سطر النص: 2.5em (سطح المكتب والكمبيوتر اللوحي) ، 2.2em (هاتف)

تباعد

أضف بعض قيم الهامش المخصصة بعد ذلك.

• الهامش السفلي: 1vw
• الهامش الأيسر: 5vw
• الهامش الأيمن: 14vw (سطح المكتب) ، 4vw (كمبيوتر لوحي) ، 5vw (هاتف)

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

الرؤية

إلى الوحدة التالية ، وهي وحدة Divider Module. تأكد من تمكين خيار "إظهار الحاجز".

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

خط

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

• لون الخط: #FFFFFF
• نمط الخط: صلب
• موقف الخط: الأعلى

تحجيم

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

• وزن الحاجز: 0.7vw
• العرض: 9٪
• الارتفاع: 0 بكسل

تباعد

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

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

المرشحات

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

• وضع المزج: الاختلاف

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

أضف نسخة

إلى الوحدة التالية والأخيرة ، وهي وحدة الأزرار. أدخل نسخة من اختيارك.

انتقام

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

• محاذاة الزر: يسار

إعدادات الزر

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

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

تباعد

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

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

معاينة

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة عبر أحجام الشاشات المختلفة.

افكار اخيرة

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

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