إن تصميم الويب الحديث يدور دائمًا حول كسر الشبكة. يتم ذلك عن طريق تحويل العناصر ووضع علامات في مواضع تكسر البنية الطبيعية للشبكة. يمكنك رؤيتها مطبقة في تصميمات الشبكة المكسورة على تخطيطات Divi المذهلة. يتضمن هذا عادةً نقل الوحدات النمطية خارج العمود أو الصف بحيث تمتد خارج الحاوية أو تتداخل مع عناصر الصفحة الأخرى. ولكن ربما لم تفكر في نقل العمود.
في هذا البرنامج التعليمي، سأعرض لك كيفية قياس أعمدة Divi ووحداتها النمطية للحصول على تصميمات شبكة مكسورة فريدة. مع الخبر خيارات العمود من Divi، يمكنك بسهولة نقل الأعمدة بالإضافة إلى الوحدات التي تحتوي عليها. يتيح لك هذا تصميم كل من الوحدة والعمود بأنماط فريدة لتصميم شبكة مكسورة إبداعية.
لنبدأ!
مسح
فيما يلي نظرة عامة على أمثلة التصميم التي سنبنيها في هذا البرنامج التعليمي.
ما تحتاجه للبدء
للبدء ، تحتاج إلى ما يلي:
- تم تثبيت موضوع Divi وتفعيله
- تم إنشاء صفحة جديدة للبناء من البداية على الواجهة الأمامية (مُنشئ بصري)
- بعض الصور لاستخدامها في المحتوى الخيالي
بعد ذلك ، سيكون لديك لوحة قماش فارغة لبدء التصميم في Divi.
ركود الأعمدة والوحدات النمطية لإنشاء تصميم فريد لشبكة مقطوعة في Divi
ابدأ بإنشاء قسم منتظم جديد مع صف من عمودين.
ثم أضف دعوة إلى وحدة الإجراء في العمود 1.
قم بتغيير نص العنوان إلى "Divi Module" أو عنوان قصير آخر من اختيارك.
ثم قم بتحديث الوحدة النمطية بلون خلفي غامق ، ثم قم بتحرير نص العنوان كما يلي:
لون الخلفية: #333333
محاذاة النص: يسار
عنوان الخط: مرير
حجم نص العنوان: 50px
العنوان تباعد الحروف: 2px
ثم قم بتحديث زر استدعاء وحدة الإجراء كما يلي:
حجم نص الزر: 16px
لون نص الزر: #333333
لون خلفية الزر: لون
حد الزر: # fffff
نصف قطر حد الزر: 25px
التباعد بين حروف الأزرار: 2px
زر الخط: Raleway حجم
أزرار الخط: غامق
نمط الخط الرئيسي: TT
ثم انسخ الوحدة النمطية والصق التكرار في عمود 2 بحيث يكون لديك نفس المكالمة إلى وحدة الإجراءات في كل عمود.
تحديث تباعد الأسطر
أضف الآن بعض الهوامش العلوية والسفلية لإفساح المجال للتصميم.
الهامش: 20٪ للأعلى ، 20٪ لأسفل
إضافة صور خلفية العمود
على الرغم من أننا لن نتمكن من رؤيتها بعد ، فإننا سنضيف صور خلفية لكل عمود. ستصبح مرئية بمجرد نقل الوحدة الخاصة بنا خارج حاوية العمود مع ترجمة التحويل.
تابع ، افتح الإعدادات في عمود 1 وأضف صورة خلفية.
ثم افتح إعدادات عمود 2 وأضف صورة خلفية.
أضف مربع ظل لكل عمود
افتح إعدادات العمود 1 وأضف ظل المربع التالي:
Box Shadow: انظر لقطة الشاشة
موضع الظل الأفقي للموضع: 0px
الموضع العمودي لصندوق الظل: 0px
مربع الظل الانتشار: 100px
لون الظل: rgba (151 ، 178 ، 193 ، 0.21)
ثم أضف نمط ظل المربع نفسه إلى عمود 2. لتسريع الأمور ، يمكنك استخدام خيارات النقر بزر الماوس الأيمن لنسخ أنماط ظل المربع إلى عمود 1 ، ثم لصقها في أنماط ظل المربع الخاصة بعمود 2.
ستلاحظ أن الظلال في المربع ستتداخل. سيساعد استخدام لون شبه لامع شبه شفاف في إنشاء تأثير طبقات فائقة. هذه هي الميزة الرئيسية لاستخدام ظلال الصندوق في التصميم. بخلاف الحدود ، يمكنك إضافة ظلال كبيرة تشبه الحدود ولكنها لا تؤثر على تباعد التخطيط الفعلي.
تراكب الأعمدة باستخدام تحويل الترجمة
في هذه المرحلة ، نحن على استعداد لتغيير الأعمدة والوحدات لإكمال تصميم الشبكة المتقطع. أولاً ، نحتاج إلى نقل الأعمدة إلى الحافة الخارجية للصفحة. ثم يمكننا نقل الوحدات إلى المركز لاحقًا.
Stagger Column 1
افتح المعلمة عمود 1 وإضافة خاصية تحويل الترجمة التالية.
تحويل ترجمة المحور X: 25٪
تحويل تحويل المحور ص: -25٪ (سطح المكتب) ، -5٪ (الكمبيوتر اللوحي)
Stagger Column 2
بالنسبة لعمود 2 ، أضف خاصية تحويل التحويل التالية.
تحويل ترجمة المحور X: -25٪
تحويل ترجمة المحور ص: 25٪ (سطح المكتب) ، 5٪ (الكمبيوتر اللوحي)
إزاحة الوحدات النمطية باستخدام تحويل الترجمة
نحن الآن جاهزون لنشر وحداتنا عن طريق نقلها خارج حاوية العمود. سيعرض هذا صورة الخلفية للعمود ويسمح لنا بإضافة ظل منطقة أخرى إلى الوحدة للحصول على عنصر تصميم إضافي متداخل.
إزاحة وحدة 1
افتح إعدادات استدعاء إجراء عمود 1 وقم بتحديث ما يلي:
تحويل ترجمة المحور X: -60٪
تحويل ترجمة المحور ص: 50٪ (سطح المكتب) ، 10٪ (الكمبيوتر اللوحي)
إضافة مربع الظل إلى وحدة 1
ثم أضف ظل المربع التالي إلى وحدة استدعاء الإجراء في العمود 1:
Box Shadow: انظر لقطة الشاشة
موضع الظل الأفقي للموضع: 0px
الموضع العمودي لصندوق الظل: 0px
مربع الظل الانتشار: 100px
لون الظل: rgba (151,178,193,0.21)
تباعد وحدة 2
لنقل الوحدة النمطية في عمود 2 ، قم بتحديث ما يلي:
تحويل ترجمة المحور السيني: 60٪
تحويل ترجمة المحور ص: -50٪ (سطح المكتب) ، -10٪ (الجهاز اللوحي)
إضافة مربع الظل إلى وحدة 2
بعد ذلك، يمكننا إضافة ظل مربع إلى وحدة الحث على اتخاذ إجراء في العمود 2. نحتاج إلى جعل ظل المربع هذا شفافًا بالكامل تقريبًا لأنه سيتداخل مع الوحدة 1 ولا نريد أن نجعل من الصعب قراءة المحتوى.
Box Shadow: انظر لقطة الشاشة
موضع الظل الأفقي للموضع: 0px
الموضع العمودي لصندوق الظل: 0px
مربع الظل الانتشار: 100px
لون الظل: rgba (151,178,193,0.09)
إضافة إطار صندوق الظل
لإكمال التصميم ، أضف ظل المنطقة إلى السطر الذي يعمل كعنصر تصميم إطار في الخلفية.
Box Shadow: انظر لقطة الشاشة
الموضع العمودي لصندوق الظل: 0px
لون الظل: #97b2c1
الأفكار النهائية
آمل أن يكون هذا البرنامج التعليمي قد أعطاك فكرة بسيطة عن كيفية موازنة أعمدة Divi والوحدات النمطية لإنشاء تصميمات الشبكة المعطلة الخاصة بك. هذه التقنية بسيطة للغاية. يتضمن بشكل أساسي عددًا قليلاً من خصائص ترجمة التحويل لتعويض الأعمدة والوحدات النمطية ، بالإضافة إلى ظلال الصندوق لإنشاء نمط واحد مكسور. لا تتردد في استكشاف المزيد من خيارات الألوان وتقديم المزيد من التعديلات لترى إلى أين يمكن أن يأخذك التصميم.
آمل أن أسمع منك في التعليقات.