كيفية ترتيب أعمدة Divi والوحدات النمطية لتصميمات الشبكة المكسورة الفريدة

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

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

هيا بنا نبدأ!

نظرة خاطفة

فيما يلي نظرة سريعة على أمثلة التصميم التي سنقوم ببنائها في هذا البرنامج التعليمي.

قم بتنزيل Stagger Divi Columns and Modules Layout مجانًا

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

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

تنزيل مجاني

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

تحميل

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

لاستيراد التخطيط إلى صفحتك ، ما عليك سوى استخراج ملف مضغوط واسحب ملف json إلى Divi Builder.

دعنا نصل إلى البرنامج التعليمي ، فهل نحن؟

شرح الفكرة الأساسية

تتضمن الفكرة الأساسية وراء كيفية ترتيب أعمدة Divi والوحدات النمطية لتصميمات الشبكة المعطلة الفريدة استخدام خاصية تحويل تحويل Divi لوضع الأعمدة والوحدات النمطية التي تحتوي عليها.

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

على سبيل المثال ، يمكنك إضافة خلفية فريدة (لون وصورة وما إلى ذلك) مع ظل مربع إلى عمودك وخلفية مختلفة تمامًا وظل مربع إلى الوحدة النمطية الخاصة بك.

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

ما تحتاجه للبدء

للبدء ، ستحتاج إلى ما يلي:

1. موضوع Divi مثبت ونشط
2. تم إنشاء صفحة جديدة للبناء من الصفر على الواجهة الأمامية (منشئ بصري)
3. زوجان من الصور لاستخدامها في محتوى وهمي

بعد ذلك ، سيكون لديك لوحة فارغة لبدء التصميم في Divi.

أعمدة ووحدات مذهلة لإنشاء تصميم فريد للشبكة المكسورة في Divi

أولاً ، قم بإنشاء قسم عادي جديد بصف من عمودين.

ثم أضف وحدة دعوة للعمل في العمود 1.

قم بتغيير نص العنوان إلى "Divi Module" أو عنوان قصير آخر من اختيارك.

ثم قم بتحديث الوحدة بلون الخلفية الداكن ثم قم بتغيير نص العنوان كما يلي:

لون الخلفية: # 333333
محاذاة النص: يسار
خط العنوان: المر
حجم نص العنوان: 50 بكسل
تباعد حروف العنوان: 2 بكسل

ثم قم بتحديث زر وحدة الدعوة إلى اتخاذ إجراء كما يلي:

حجم نص الزر: 16 بكسل
لون نص الزر: # 333333
لون خلفية الزر:
لون حدود الزر: #ffffff
نصف قطر حدود الزر: 25 بكسل
تباعد حرف الزر: 2 بكسل
خط الزر: Raleway
وزن خط الزر: غامق
نمط خط الزر: TT

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

تحديث تباعد الصفوف

الآن دعنا نضيف بعض الهامش العلوي والسفلي إلى الصف لإفساح المجال للتصميم.

الهامش: 20٪ أعلى ، 20٪ قاع

أضف صور خلفية العمود

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

انطلق وافتح إعدادات العمود 1 وأضف صورة خلفية.

ثم افتح إعدادات العمود 2 وأضف صورة خلفية.

أضف Box Shadow إلى كل عمود

افتح إعدادات العمود 1 وأضف ظل المربع التالي:

Box Shadow: انظر لقطة الشاشة
مربع الظل الوضع الأفقي: 0 بكسل
مربع الظل الوضع الرأسي: 0 بكسل
قوة انتشار الظل المربع: 100 بكسل
لون الظل: rgba (151،178،193،0.21)

ثم أضف نفس نمط ظل المربع إلى العمود 2. لتسريع الأمور ، يمكنك استخدام خيارات النقر بزر الماوس الأيمن لنسخ أنماط ظل المربع في العمود 1 ثم لصقها في أنماط ظل المربع في العمود 2.

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

Stagger Divi Columns باستخدام Transform Translate

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

عمود Stagger 1

افتح إعداد العمود 1 وأضف خاصية ترجمة التحويل التالية.

تحويل محور X للترجمة: 25٪
تحويل محور ص للترجمة: -25٪ (سطح مكتب) ، -5٪ (كمبيوتر لوحي)

عمود Stagger 2

للعمود 2 ، أضف خاصية ترجمة التحويل التالية.

تحويل محور X للترجمة: -25٪
تحويل محور Y للترجمة: 25٪ (سطح مكتب) ، 5٪ (كمبيوتر لوحي)

ترتيب الوحدات النمطية باستخدام ترجمة التحويل

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

وحدة Stagger 1

افتح إعدادات وحدة الحث على اتخاذ إجراء في العمود 1 وقم بتحديث ما يلي:

تحويل محور X للترجمة: -60٪
تحويل محور Y للترجمة: 50٪ (سطح مكتب) ، 10٪ (كمبيوتر لوحي)

أضف ظل الصندوق إلى الوحدة 1

ثم أضف ظل المربع التالي إلى وحدة الدعوة إلى اتخاذ إجراء في العمود 1:

Box Shadow: انظر لقطة الشاشة
مربع الظل الوضع الأفقي: 0 بكسل
مربع الظل الوضع الرأسي: 0 بكسل
قوة انتشار الظل المربع: 100 بكسل
لون الظل: rgba (151،178،193،0.21)

وحدة Stagger 2

لنقل الوحدة في العمود 2 ، قم بتحديث ما يلي:

تحويل محور X للترجمة: 60٪
تحويل محور ص للترجمة: -50٪ (سطح المكتب) ، -10٪ (كمبيوتر لوحي)

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

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

Box Shadow: انظر لقطة الشاشة
مربع الظل الوضع الأفقي: 0 بكسل
مربع الظل الوضع الرأسي: 0 بكسل
قوة انتشار الظل المربع: 100 بكسل
لون الظل: rgba (151،178،193،0.09)

إضافة إطار الظل مربع الصف

لإكمال التصميم ، دعنا نضيف ظل مربع إلى الصف الذي يعمل كعنصر تصميم إطار موجود في الخلفية.

Box Shadow: انظر لقطة الشاشة
مربع الظل الوضع الرأسي: 0 بكسل
لون الظل: # 97b2c1

تصميم نهائي

الآن دعنا نتحقق من التصميم النهائي.

سطح المكتب

لوح

هاتف

تجربة تصاميم مختلفة

ما هو رائع في هذا التصميم هو أنه يتيح لك بسهولة تغيير عدد الوحدات والألوان والتباعد بين التصميمات الجديدة. ويمكنك ترتيب أعمدة ووحدات Divi في مواضع مختلفة أيضًا.

إضافة تباعد إلى الوحدة النمطية لإنشاء صورة خلفية عمود متساوية الحجم للوحدة

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

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

الحشو: 20٪ أعلى ، 15٪ أسفل

ولاحظ كيف تتناسب صورة الخلفية في العمود 1 مع حجم الوحدة.

إضافة المزيد من الوحدات

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

على سبيل المثال ، قم بتكرار الوحدة النمطية في العمود 2 ولاحظ كيف تتسع صورة الخلفية لتلائم المساحة المطلوبة للوحدتين في العمود.

ثم يمكنك نقل الوحدة العلوية في العمود 2 إلى اليمين قليلاً لتصميم بديل لطيف.

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

تغيير الألوان

إذا كنت تبحث عن مطابقة التخطيط مع نظام الألوان الخاص بك ، فهناك طريقة رائعة للقيام بذلك وهي تحديث ألوان ظل الصندوق.

فيما يلي مثال لما سيبدو عليه عند تحديث ظلال المربع شبه الشفافة للعمود 1 والوحدة 1 والوحدة 2.

افكار اخيرة

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

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

هتافات!