كيفية تداخل حدود الصفوف أفقيًا مع Divi

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

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

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

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

معاينة

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

تنزيل الخط Mightype المجاني

أول شيء عليك القيام به هو تنزيل الخط المجاني Mightype المكتوب بخط اليد بواسطة AF studio. انتقل إلى الرابط التالي وقم بتمكين التنزيل المجاني عبر البريد الإلكتروني.

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

تباعد

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

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

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

هيكل العمود

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

العمود 1 خلفية متدرجة

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

• اللون 1: #ffffff
• اللون 2: rgba (0،255،233،0.25)
• نوع التدرج للعمود: شعاعي
• اتجاه العمود شعاعي: اليسار
• موضع بداية العمود: 59٪
• موضع نهاية العمود: 59٪
• عمود وضع التدرج فوق صورة الخلفية: نعم

نقش خلفية العمود 1

تابع عن طريق حفظ النمط التالي على جهاز الكمبيوتر الخاص بك وتحميله كصورة خلفية العمود 1:

بمجرد تحميل النمط ، استخدم إعدادات صورة الخلفية التالية:

• حجم صورة خلفية العمود: الحجم الفعلي
• تكرار صورة الخلفية للعمود: الفضاء

محاذاة الصف

قم بتمكين محاذاة الصف الأيمن أيضًا.

تحجيم

نستخدم أيضًا بعض إعدادات تغيير الحجم المخصصة لهذا الصف:

• استخدام العرض المخصص: نعم
• العرض المخصص: 950 بكسل

تباعد

هذه هي قيم التباعد التي تحتاج إلى إضافتها بعد ذلك:

• الهامش السفلي: 100 بكسل
• الهامش الأيمن: -30 بكسل (الجهاز اللوحي والهاتف)
• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

الحدود

أخيرًا وليس آخرًا ، أضف حدًا إلى أعلى ، ويسار ، وأسفل الصف:

• عرض الحدود: 14 بكسل
• لون الحدود: # 000000
• نمط الحد الأيسر: مزدوج

إضافة وحدة نص العنوان

أضف نسخة H2

يمكننا الآن البدء في إضافة وحداتنا! أضف وحدة نص عنوان وتأكد من أن نسختك هي H2.

لون الخلفية

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

تحميل Mightype Font

حدد موقع خط Mightype على جهاز الكمبيوتر الخاص بك بعد ذلك وقم بتحميله إلى مكتبة الخطوط الخاصة بك عن طريق النقر فوق زر التحميل في قائمة الخطوط الخاصة بك.

حدد ملف خط Mightype ، وقم بتسمية الخط الخاص بك وقم بتحميله إلى مكتبة الخطوط الخاصة بك.

إعدادات نص H2

بمجرد إضافة الخط الجديد ، امض قدمًا وقم بإجراء بعض التغييرات الأخرى على إعدادات نص H2:

• خط العنوان 2: Mightype
• لون نص العنوان: # 000000
• حجم نص العنوان 2: 150 بكسل (سطح المكتب) ، 100 بكسل (الجهاز اللوحي) ، 60 بكسل (الهاتف)

تباعد

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

• الهامش الأعلى: 200 بكسل
• الهامش السفلي: 100 بكسل
• الهامش الأيسر: -35٪
• الحشوة العلوية: 50 بكسل
• الحشو السفلي: 50 بكسل

وضع المزج

وللتأكد من أن لون خلفية وحدة النص لا يؤثر إلا على حدود الصف ، وليس خلفية العمود 1 ، قم بتمكين وضع المزج "Multiply" في إعدادات الفلاتر.

إضافة وحدة نص الوصف

لون الخلفية

أسفل عنوان Text Module مباشرة ، امض قدمًا وأضف وصفًا لوحدة نصية بلون خلفية أبيض.

إعدادات النص

انتقل إلى إعدادات النص وقم بإجراء بعض التغييرات:

• حجم النص: 22 بكسل (سطح المكتب) ، 18 بكسل (جهاز لوحي) ، 15 بكسل (هاتف)
• ارتفاع خط النص: 1.8em
• اتجاه النص: الوسط

تحجيم

قم بتصغير حجم وحدة النص هذه إلى '96٪ 'بعد ذلك.

تباعد

أضف بعض المسافات أيضًا:

• الهامش السفلي: 200 بكسل
• الهامش الأيسر: -50٪
• الحشوة العلوية: 20 بكسل
• الحشو السفلي: 20 بكسل

وضع المزج

واستخدم وضع المزج "Multiply" هنا أيضًا.

صف استنساخ

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

تغيير إعدادات الصف

العمود 1 خلفية متدرجة

أول شيء ستحتاج إلى تغييره هو خلفية العمود 1 المتدرجة:

• اللون 2: rgba (255،187،0،0.33)
• اتجاه العمود الشعاعي: يمين

محاذاة الصف

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

تباعد

نقوم أيضًا بضبط إعدادات التباعد:

• الهامش الأيسر: -25٪ (تابلت وهاتف)

الحدود

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

• عرض الحد الأيمن: 14 بكسل
• لون الحد الأيمن: # 000000
• نمط الحد الأيمن: مزدوج

تغيير إعدادات وحدة نص العنوان

تباعد

قم بتغيير إعدادات التباعد الخاصة بالعنوان Text Module التالي:

• الهامش الأيسر: 52٪ (سطح المكتب والجهاز اللوحي) ، 58٪ (الهاتف)
• الهامش الأيمن: -52٪ (سطح المكتب والجهاز اللوحي) ، 58٪ (الهاتف)

تغيير إعدادات نص الوصف

تباعد

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

• الهامش الأيسر: 50٪
• الهامش الأيمن: -50٪

معاينة

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

افكار اخيرة

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