استخدام مخططات العمود للتأكيد على شبكة تصميم Divi الخاصة بك

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

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

معاينة

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

سطح المكتب

متحرك

قم بتنزيل The Column Outlines Layout مجانًا

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

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

تنزيل مجاني

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

تحميل

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

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

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

فيضانات

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

• الفائض الأفقي: مخفي
• الفائض العمودي: مخفي

أضف الصف رقم 1

هيكل العمود

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

تحجيم

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

• العرض: 100٪
• العرض الأقصى: 100٪
• محاذاة الصف: صحيح

تباعد

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

• الهامش الأعلى: 200 بكسل
• الحشو الأيسر: 47٪ (كمبيوتر مكتبي) ، 6٪ (كمبيوتر لوحي) ، 10٪ (هاتف)
• الحشو الأيمن: 6٪ (تابلت)، 10٪ (هاتف)

الحدود

سنكمل إعدادات الصف العامة عن طريق إضافة حد علوي وسفلي.

• عرض الحد العلوي والسفلي: 4 بكسل
• لون الحد العلوي والسفلي: #bdffed

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

تباعد

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

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

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

تباعد

افتح إعدادات العمود الثاني بعد ذلك واستخدم إعدادات التباعد التالية له:

• حشوة علوية: 12٪
• حشوة سفلية: 12٪
• الحشو الأيسر: 5٪ (كمبيوتر مكتبي) ، 20٪ (كمبيوتر لوحي) ، 15٪ (هاتف)
• الحشو الأيمن: 5٪ (كمبيوتر مكتبي) ، 20٪ (كمبيوتر لوحي) ، 15٪ (هاتف)

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

أضف محتوى H2

حان الوقت لإضافة وحدات ، بدءًا من وحدة نصية تحتوي على محتوى H2 في العمود 1.

إعدادات نص H2

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

• خط العنوان 2: Source Code Pro
• وزن خط العنوان 2: غامق
• لون نص العنوان 2: rgba (35،38،211،0.46)
• حجم نص العنوان 2: 4vw (سطح المكتب) ، 60 بكسل (الجهاز اللوحي) ، 50 بكسل (الهاتف)
• العنوان 2 تباعد الأحرف: 5 بكسل

• العنوان 2 ظل النص الأفقي الطول: 0.05em
• العنوان 2 طول ظل النص عموديًا: 0.07em
• لون ظل النص في العنوان 2: #bdffed

الحركة العمودية

سنضيف بعض الحركة العمودية أيضًا.

• تمكين الحركة العمودية: نعم
• بداية الإزاحة: 2
• الإزاحة المتوسطة: 0
• إزاحة النهاية: -2
• مشغل تأثير الحركة: منتصف العنصر

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

إضافة محتوى

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

إعدادات النص

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

• خط النص: Source Code Pro
• لون النص: rgba (35،38،211،0.76)
• حجم النص: 15 بكسل
• ارتفاع خط النص: 2em

الحركة العمودية

سنستخدم بعض الحركة العمودية لهذه الوحدة أيضًا.

• تمكين الحركة العمودية: نعم
• بداية الإزاحة: 2
• الإزاحة المتوسطة: 0
• إزاحة النهاية: -2
• مشغل تأثير الحركة: منتصف العنصر

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

أضف نسخة

آخر وحدة نحتاجها في العمود 1 هي وحدة الأزرار. أضف نسخة من اختيارك.

إعدادات الزر

انتقل إلى علامة تبويب تصميم الوحدة وقم بتصميم الزر على النحو التالي:

• استخدام الأنماط المخصصة للزر: نعم
• لون نص الزر: # 2326d3
• نصف قطر حدود الزر: 0 بكسل

• خط الزر: Source Code Pro
• إظهار رمز الزر: نعم
• وضع رمز الزر: يسار
• فقط إظهار الرمز عند التمرير للزر: لا

تباعد

ثم أضف بعض قيم المساحة المتروكة المخصصة.

• الحشوة العلوية: 20 بكسل
• الحشو السفلي: 20 بكسل
• الحشو الأيسر: 50 بكسل
• الحشوة اليمنى: 50 بكسل

الحركة العمودية

وأكمل إعدادات الوحدة بإضافة بعض الحركة العمودية.

• تمكين الحركة العمودية: نعم
• بداية الإزاحة: 2
• الإزاحة المتوسطة: 0
• إزاحة النهاية: -2
• مشغل تأثير الحركة: منتصف العنصر

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

تحميل صورة بنسبة 1: 1

في العمود 2 ، الوحدة الوحيدة التي نحتاجها وحدة صورة. قم بتحميل صورة بنسبة 1: 1.

تحجيم

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

• فرض عرض كامل: نعم

الحدود

سنحول الصورة إلى دائرة بإضافة بعض الزوايا الدائرية بعد ذلك.

• جميع الزوايا: 50vw

مربع الظل

ثم نضيف ظل الصندوق.

• مربع الظل الأفقي: 30 بكسل
• مربع الظل الرأسي: 30 بكسل
• لون الظل: rgba (38،255،197،0.3)

الحركة العمودية

وسنكمل إعدادات الوحدة بإضافة بعض الحركة الرأسية.

• تمكين الحركة العمودية: نعم
• بداية الإزاحة: -2
• الإزاحة المتوسطة: 0
• إزاحة النهاية: 2
• مشغل تأثير الحركة: منتصف العنصر

استنساخ صف كامل مرتين

بمجرد الانتهاء من الصف الأول ، يمكنك استنساخه مرتين.

تغيير كل المحتوى والصور

تأكد من تغيير كل المحتوى والصور المكررة.

أضف الهامش السفلي إلى الصف الأخير

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

• الهامش السفلي: 200 بكسل

خصص صفًا جديدًا (أعلى القسم) لمخططات العمود

هيكل العمود

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

تحجيم

افتح إعدادات الصف ، وانتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات الحجم على النحو التالي:

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

تباعد

نحن نزيل جميع الحشو الافتراضي العلوي والسفلي أيضًا.

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

موقع

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

• الموقف: مطلق
• الموقع: توب سنتر

عرض CSS لكل عنصر العمود الرئيسي

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

width: 20% !important;

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

تباعد

بعد ذلك ، افتح إعدادات العمود 1 وقم بتعديل قيم المساحة المتروكة عبر أحجام الشاشات المختلفة.

• الحشوة العلوية: 150 فولت في الساعة (سطح المكتب) ، 250 في الساعة (الجهاز اللوحي والهاتف)
• الحشوة السفلية: 150 فولت في الساعة (سطح المكتب) ، 250 في الساعة (الجهاز اللوحي والهاتف)

الحدود

أضف حدًا يسارًا أيضًا.

• عرض الحد الأيسر: 5 بكسل
• لون الحد الأيسر: #bdffed
• نمط الحد الأيسر: متقطع

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

لون الخلفية

بعد ذلك ، سنفتح إعدادات العمود 2 ونضيف لون الخلفية.

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

الحدود

سنستخدم الحد الأيمن أيضًا.

• عرض الحد الأيمن: 4 بكسل
• لون الحد الأيمن: #bdffed
• نمط الحد الأيمن: صلب

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

الحدود

في العمود الثالث ، سنستخدم الحد الأيمن بالإعدادات التالية:

• عرض الحد الأيمن: 4 بكسل
• لون الحد الأيمن: rgba (35،38،211،0.12)
• نمط الحد الأيمن: متقطع

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

الحدود

بعد ذلك ، سنفتح إعدادات العمود 4 ونغير إعدادات الحدود وفقًا لذلك:

• عرض الحد الأيمن: 4 بكسل
• لون الحد الأيمن: #bdffed
• نمط الحد الأيمن: صلب

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

الحدود

سنكمل إعدادات العمود عن طريق إضافة حد أيمن إلى العمود 5 أيضًا.

• عرض الحد الأيمن: 4 بكسل
• لون الحد الأيمن: rgba (35،38،211،0.12)
• نمط الحد الأيمن: متقطع

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

الرؤية

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

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

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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