استخدام إعدادات مرشح العمود الجديد من Divi لإنشاء تأثيرات مزج مذهلة

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

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

معاينة

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

سطح المكتب

متحرك

قم بتنزيل مخطط أوضاع مزيج العمود مجانًا

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

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

تنزيل مجاني

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

تحميل

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

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

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

أضف قسمًا جديدًا بصف مكون من 3 أعمدة

ابدأ التصميم بإضافة قسم جديد بصف من ثلاثة أعمدة.

تباعد الأقسام

افتح إعدادات القسم واضبط التباعد.

• الهامش الأيمن والأيسر: 3vw
• الحشوة العلوية والسفلية: 84 بكسل

إعدادات الصف

خلفية

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

• لون الخلفية: رمادي متوسط ​​# c4c4c4

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

• مزيج صورة الخلفية: مضاعفة

تحجيم

اضبط إعدادات التحجيم للصف التالي.

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

تباعد

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

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

مربع الظل

تابع بإضافة ظل مربع بسيط إلى الصف.

• ظل المربع: الخيار الأول

الرؤية

اضبط فهرس Z في علامة تبويب الرؤية.

• الفهرس Z: 1

عمود النمط 1

أدخل إعدادات العمود الأول.

المرشحات

قم بتطبيق وضع مزج الشاشة على العمود في علامة تبويب المرشحات.

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

تحوم مقياس التحويل

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

• مقياس التحويل: 105٪ على محوري x و y

الرؤية

أدخل علامة تبويب الرؤية للعمود واضبط إعدادات تجاوز السعة.

• التدفق الأفقي: مرئي
• التدفق العمودي: مرئي

الانتقالات

انتقل إلى علامة التبويب الانتقالات واضبط مدة الانتقال لإنشاء انتقال سلس.

• مدة الانتقال: 500 مللي ثانية

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

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

خلفية

صمم الخلفية بتدرج لوني.

• الخلفية: التدرج
• لون التدرج الأول: # 5498ff
• لون التدرج الثاني: # 16fff3
• اتجاه التدرج: 235 درجة
• موقف البداية: 37٪

تباعد

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

• الحشوة العلوية والسفلية: 6vw
• الحشوة اليسرى واليمنى: 3vw

نص العنوان

أدخل إعدادات نص العنوان وحدد نمط إعدادات نص H2 وفقًا لذلك:

• وزن خط العنوان 2: غامق للغاية
• نمط خط العنوان 2: TT
• لون نص العنوان 2: أسود #oooooo
• حجم نص العنوان 2:
  • سطح المكتب: 5vw
  • الجهاز اللوحي: 11vw
  • هاتف: 13vw
• ارتفاع خط العنوان 2:
  • سطح المكتب: 4.3vw
  • الجهاز اللوحي: 9vw
  • الهاتف: 10.5vw

المرشحات

انتقل إلى إعدادات المرشحات وأضف وضع مزج الشاشة.

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

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

تابع بإضافة وحدة النص الثانية إلى العمود 1 مع بعض محتويات الفقرة التي تختارها.

صمم وحدة النص على النحو التالي:

خلفية

أضف لون خلفية بيضاء.

• لون الخلفية: أبيض #fffffff

نص

أدخل علامة تبويب التصميم واضبط النص وفقًا لذلك:

• خط النص: مونتسيرات
• محاذاة النص: مضبوط
• لون النص: رمادي غامق # 333333
• حجم الخط:
  • سطح المكتب: 0.8vw
  • الجهاز اللوحي: 2vw
  • هاتف: 2.5vw
• تباعد الحروف النصية: -0.04vw
• ارتفاع خط النص:
  • سطح المكتب: 2.7vw
  • الجهاز اللوحي: 5.5vw
  • الهاتف: 6vw

تباعد

اضبط إعدادات التباعد أيضًا لإنشاء مساحة فارغة حول النص.

• الهامش العلوي والسفلي: 0.5vw
• الحشوة العلوية والسفلية:
  • سطح المكتب: 5vw
  • الجهاز اللوحي + الهاتف: 15vw
• الحشو الأيسر: 5vw
• الحشوة اليمنى:
  • سطح المكتب: 5vw
  • الجهاز اللوحي + الهاتف: 25vw

المرشحات

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

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

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

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

صمم الوحدة على النحو التالي:

إضافة رابط

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

خلفية

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

• الخلفية: التدرج
• لون التدرج للخلفية واحد: # 5498ff
• لون الخلفية المتدرج الثاني: # 16fff3
• اتجاه التدرج: 235 درجة

نص

أدخل علامة تبويب التصميم وقم بتنسيق النص على النحو التالي:

• خط النص: مونتسيرات
• وزن خط النص: ثقيل
• نمط خط النص: تحته خط
• لون تسطير النص: أبيض #ffffff
• لون النص: أسود # 000000
• حجم الخط:
  • سطح المكتب: 1.5vw
  • الجهاز اللوحي: 3.3vw
  • الهاتف: 4vw
• ارتفاع خط النص: 1em

تباعد

اضبط إعدادات التباعد لجعل النص مناسبًا بشكل أفضل في الوحدة.

• الحشوة العلوية والسفلية:
  • سطح المكتب: 2vw
  • الجهاز اللوحي: 6vw
  • الهاتف: 9vw
• الحشوة اليسرى: 3vw

تكرار العمود الأول مرتين

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

العمود 2 / وحدة النص 1 الخلفية

• لون التدرج للخلفية واحد: # c870ff
• لون التدرج للخلفية الثاني: # ff355a

ظل مربع العمود 2 / وحدة النص 2

• ظل المربع: الخيار السادس
• مربع قوة طمس الظل: 20 بكسل
• قوة انتشار الظل المربع: 17 بكسل
• لون ظل الصندوق: rgba (225،33،255،0.06)

العمود 2 / وحدة النص 3 الخلفية

اضبط تدرج الخلفية لوحدة النص الثالثة لمطابقة الوحدة الأولى.

• لون التدرج للخلفية واحد: # c870ff
• لون التدرج للخلفية الثاني: # ff355a

العمود 3 / وحدة النص 1 الخلفية

إلى العمود الثالث! قم بتغيير الخلفية المتدرجة لوحدة النص 1 وفقًا لذلك:

• لون التدرج للخلفية واحد: # ff4800
• لون التدرج للخلفية الثاني: # fc9a2a

العمود 2 / وحدة النص 3 الخلفية

• لون التدرج للخلفية واحد: # ff4800
• لون التدرج للخلفية الثاني: # fc9a2a

معاينة

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

سطح المكتب

متحرك

انها التفاف

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