كيفية استخدام هياكل الأعمدة الجديدة لـ Divi لإنشاء انتقالات قسم مذهلة

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

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

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

معاينة

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

استخدم الصفحة المقصودة لـ Divi's Makeup Artist Layout Pack

سنستخدم الصفحة المقصودة لـ Divi's Makeup Artist Layout Pack. إذا كنت تريد التحقق من حزمة التخطيط ، فانتقل إلى منشور المدونة التالي. على الرغم من أننا نعرض هذا البرنامج التعليمي باستخدام حزمة تخطيط معينة ، إلا أنه يمكنك بسهولة استخدام التقنيات الموجودة في التخطيطات الأخرى أيضًا.

انتقال القسم # 1

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

حدد

افتح الصفحة المقصودة لـ Makeup Artist Layout Pack باستخدام Divi's Visual Builder. بعد ذلك ، أضف قسمًا عاديًا جديدًا أسفل قسم الأبطال مباشرةً:

تباعد

قم بإزالة كل التباعد الافتراضي للقسم الخاص بك بعد ذلك:

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

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

هيكل العمود

تابع عن طريق إضافة صف جديد إلى القسم بهيكل العمود التالي:

تحجيم

قم بزيادة عرض الصف أيضًا:

• جعل هذا الصف بعرض كامل: نعم
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 0

تباعد

قم بإزالة المساحة المتروكة الافتراضية العلوية والسفلية بعد ذلك:

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

منقي

لجعل الصف أكثر حيوية ، قم بزيادة التشبع في إعدادات الفلتر:

• التشبع: 200٪

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

إخفاء الحاجز

لإنشاء المربع الأول في تصميمنا ، سنقوم بإضافة وحدة Divider Module إلى العمود 1. قم بتعطيل خيار "Show Divider".

خلفية متدرجة

بعد ذلك ، أضف خلفية متدرجة إلى Divider Module:

• اللون 1: rgba (255،255،255،0)
• اللون 2: rgba (176،182،219،0.34)

تباعد

لإنشاء المربع ، قم بتغيير قيم التباعد:

• الهامش العلوي: -120 بكسل
• الحشوة العلوية: 120 بكسل
• الحشو السفلي: 120 بكسل

وحدة استنساخ مقسم ووضعها في العمود 2

بمجرد الانتهاء من تعديل وحدة DIvider ، قم باستنساخها ووضعها في العمود الثاني.

تغيير خلفية التدرج

يجب إجراء بعض التغييرات على هذه النسخة ، بدءًا من الخلفية المتدرجة:

• اللون 1: rgba (228،237،234،0.58)
• اللون 2: rgba (255،255،255،0)

تغيير التباعد

قم بتغيير إعدادات التباعد أيضًا. سيؤدي ذلك إلى زيادة المسافة بين وحدة Divider هذه والوحدة الموجودة في العمود الأول.

• الهامش العلوي: 142 بكسل
• الحشوة العلوية: 120 بكسل
• الحشو السفلي: 120 بكسل

وحدة تقسيم الاستنساخ رقم 1 مرتين ووضعها في العمود 3 و 5

انسخ وحدة Divider Module الأرجواني مرتين وضع التكرارات في العمود 3 و 5.

استنساخ مقسم الوحدة رقم 2 ووضعه في العمود 4

استنساخ وحدة Divider Module الخضراء أيضًا وضعها في العمود 4.

إخفاء وحدة التقسيم في العمود 3 و 4 و 5 على الجهاز اللوحي والهاتف

افتح وحدة الحاجز في العمود 3

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

إخفاء على الجهاز اللوحي والهاتف

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

نسخ أنماط الرؤية

سنحتاج أيضًا إلى إخفاء المقسمات في العمود 4 و 5. لتسريع العملية ، انسخ إعدادات الرؤية للمقسم في العمود 3:

لصق أنماط الرؤية

وقم بلصقها في وحدات Divider في العمود 4 و 5.

انتقال القسم # 2

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

حدد

لإنشاء انتقال القسم الثاني ، أضف قسمًا جديدًا هنا:

أعلى الحاجز

افتح إعدادات القسم وأضف الحاجز العلوي التالي:

• نمط الحاجز: البحث في القائمة
• لون المقسم: #ffffff
• ارتفاع الحاجز: 236 بكسل
• فاصل الفاصل: عمودي
• ترتيب الفاصل: فوق محتوى القسم

مقسم سفلي

وبالمثل ، أضف مقسمًا سفليًا أيضًا:

• نمط الحاجز: البحث في القائمة
• لون المقسم: #ffffff
• ارتفاع الحاجز: 236 بكسل
• ترتيب الحاجز: فوق محتوى القسم

تباعد

قم بتغيير إعدادات التباعد بعد ذلك:

• الهامش الأعلى: 100 بكسل
• الهامش السفلي: 100 بكسل
• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

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

هيكل العمود

حان الوقت لإضافة صف إلى القسم الجديد! اختر هيكل العمود التالي:

تحجيم

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

• جعل هذا الصف بعرض كامل: نعم
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

تباعد

قم بإزالة كل الحشوة الافتراضية العلوية والسفلية أيضًا:

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

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

لون الخلفية

بعد ذلك ، أضف وحدة Divider Module إلى العمود الأول. افتح إعداداته وأضف لون الخلفية:

• لون الخلفية: rgba (176،182،219،0.34)

لون المقسم

قم بتغيير لون الحاجز أيضًا:

• لون المقسم: #ffffff

نمط المقسم

بعد ذلك ، انتقل إلى إعدادات الأنماط واستخدم نمط المقسم التالي:

• نمط المقسم: مزدوج

وزن المقسم

يجب أن يكون وزن الحاجز كما يلي:

• وزن الحاجز: 18 بكسل

تباعد

أخيرًا وليس آخرًا ، قم بزيادة حجم وحدة Divider باستخدام حشوة مخصصة:

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

وحدة استنساخ مقسم ووضعها في العمود 2

بمجرد الانتهاء من وحدة Divider في العمود الأول ، قم بنسخها ووضع النسخة المكررة في العمود الثاني.

تغيير لون الخلفية

قم بتغيير لون الخلفية لهذه النسخة طبقًا لذلك:

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

وحدة استنساخ مقسم رقم 1 ووضعها في العمود 3 و 5

تابع عن طريق استنساخ وحدة Divider الأرجواني مرتين ووضع التكرارات في العمود 3 و 5.

استنساخ مقسم الوحدة رقم 2 ووضعه في العمود 4

انسخ وحدة Divider Module الخضراء أيضًا وضع النسخة المكررة في العمود 4.

إخفاء وحدة التقسيم في العمود 3 و 4 و 5 على الجهاز اللوحي والهاتف

إخفاء على الجهاز اللوحي والهاتف

سنفعل نفس الشيء الذي فعلناه لمثال انتقال القسم الأول. افتح إعدادات Divider Module في العمود 3 وقم بإخفائها على الهاتف والجهاز اللوحي.

نسخ أنماط الرؤية

انسخ أنماط الرؤية هذه.

لصق أنماط الرؤية

وقم بلصقها في وحدات Divider في العمود 4 و 5.

انتقال القسم # 3

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

حدد

لإضافة قسم الانتقال الأخير إلى صفحتك ، أضف قسمًا جديدًا هنا:

أعلى الحاجز

افتح إعدادات القسم وأضف الحاجز العلوي:

• نمط الحاجز: البحث في القائمة
• لون المقسم: #ffffff
• ارتفاع الحاجز: 150 بكسل
• ترتيب الفاصل: فوق محتوى القسم

مقسم سفلي

أضف واحدة سفلية بعد ذلك:

• نمط الحاجز: البحث في القائمة
• لون المقسم: #ffffff
• ارتفاع الحاجز: 150 بكسل
• فاصل الفاصل: عمودي
• ترتيب الفاصل: فوق محتوى القسم

تباعد

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

• الهامش الأعلى: 100 بكسل
• الهامش السفلي: 100 بكسل
• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

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

هيكل العمود

يحتوي الصف الذي سنحتاجه في هذا القسم على بنية العمود التالية:

تحجيم

بدون إضافة أي وحدات نمطية ، افتح إعدادات الصف وقم بزيادة عرض الصف الخاص بك:

• جعل هذا الصف بعرض كامل: نعم
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

تباعد

قم بإزالة كل المساحة المتروكة الافتراضية العلوية والسفلية بعد ذلك:

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

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

إخفاء الحاجز

تابع عن طريق إضافة Divider Module إلى العمود الأول. قم بتعطيل خيار "إظهار الحاجز".

لون الخلفية

أضف لونًا للخلفية إلى الحاجز بدلاً من ذلك:

• لون الخلفية: rgba (176،182،219،0.34)

تباعد

قم بزيادة حجم الوحدة باستخدام الحشوة العلوية والسفلية:

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

وحدة استنساخ مقسم ووضعها في العمود 2

تغيير لون الخلفية

انسخ وحدة Divider في العمود الأول وضع النسخة المكررة في العمود الثاني. افتح إعداداته وقم بتغيير لون الخلفية:

• لون الخلفية: rgba (228،237،234،0.58)

وحدة استنساخ مقسم رقم 1 ووضعها في العمود 3 و 5

استنساخ وحدة Divider أرجوانية مرتين وضعها في العمود 3 و 5.

استنساخ مقسم الوحدة رقم 2 ووضعه في العمود 4

انسخ وحدة Divider Module الخضراء أيضًا وضع النسخة المكررة في العمود 4.

إخفاء وحدة التقسيم في العمود 3 و 4 و 5 على الجهاز اللوحي والهاتف

إخفاء على الجهاز اللوحي والهاتف

إخفاء وحدة Divider في العمود 3 على الجهاز اللوحي والهاتف.

نسخ أنماط الرؤية

انسخ أنماط الرؤية هذه.

لصق أنماط الرؤية

وقم بلصقها في Divider Module في العمود 4 و 5 وتكون قد انتهيت!

معاينة

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

افكار اخيرة

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