كيفية استخدام خيارات محاذاة الصف الجديدة من Divi بشكل خلاق

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

هيا بنا نبدأ!

معاينة التصميم

إليك نظرة سريعة على ما سننشئه اليوم (على سطح المكتب):

وإليك كيف سيبدو التصميم على الهاتف المحمول:

كيفية استخدام خيارات محاذاة الصف الجديدة من Divi بشكل خلاق

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

إعدادات مخصص الموضوع

شريط القوائم الأساسي

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

• إخفاء صورة الشعار: تمكين
• ارتفاع القائمة: 30
• حجم النص: 17
• تباعد الأحرف: -1
• نمط الخط: أحرف كبيرة
• لون النص: #FFFFFF
• لون الارتباط النشط: #FFFFFF
• لون الخلفية: rgba (255 ، 255 ، 255 ، 0)
• لون خلفية القائمة المنسدلة: rgba (255 ، 255 ، 255 ، 0)

قسم البطل

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

إعدادات القسم

خلفية متدرجة

بمجرد إضافة القسم القياسي ، يمكنك إضافة خلفية متدرجة إليه:

• اللون الأول: # 9e5555
• اللون الثاني: # 000000
• نوع التدرج: خطي
• اتجاه التدرج: 180 درجة
• موقف البداية: 50٪
• موقف النهاية: 50٪

إعدادات الصف

تراكيب الالوان

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

الصورة الخلفية

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

محاذاة الصف الأوسط

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

جعل الصف بعرض كامل

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

حشوة مخصصة

آخر شيء يتعين علينا القيام به ضمن إعدادات الصف هو إضافة حشوة مخصصة "300 بكسل" إلى الأعلى والأسفل.

أول وحدة نصية

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

• خط النص: Arvo
• حجم خط النص: 64 (كمبيوتر مكتبي) ، 47 (جهاز لوحي) ، 33 (هاتف)
• لون النص: #FFFFFF
• ارتفاع خط النص: 1em
• اتجاه النص: الوسط

وحدة النص الثانية

ثم أضف وحدة نصية أخرى. تحتوي وحدة النص الثانية ، بدلاً من ذلك ، على الإعدادات التالية:

• خط النص: لاتو
• حجم خط النص: 25 (كمبيوتر مكتبي) ، 18 (جهاز لوحي) ، 16 (هاتف)
• لون النص: #FFFFFF
• ارتفاع خط النص: 1.7em
• اتجاه النص: الوسط

القسم الثاني

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

إعدادات القسم

خلفية متدرجة

بعد إضافة قسم ثانٍ ، أضف خلفية التدرج اللوني التالية إليه:

• اللون الأول: # 000000
• اللون الثاني: # d6d6d6
• نوع التدرج: خطي
• اتجاه التدرج: 184 درجة
• موقف البداية: 20٪
• موضع النهاية: 20٪

أضف صف سطح المكتب

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

إعدادات الصف

خلفية العمود

ضمن علامة التبويب "المحتوى" ، أضف "#FFFFFF" كلون خلفية العمود الثاني.

محاذاة الصف الأيمن

انتقل إلى علامة التبويب "تصميم" وحدد محاذاة الصف الصحيح.

جعل الصف بعرض كامل

بعد ذلك ، افتح فئة Sizing الفرعية وقم بتمكين خيار "Make This Row Fullwidth".

حشوة مخصصة

آخر شيء ستحتاج إلى القيام به في إعدادات الصف هو إضافة حشوة علوية "300 بكسل" إلى الصف والحشو التالي للعمود الثاني:

• أعلى: 35 بكسل
• اليمين: 35 بكسل
• الأسفل: 150 بكسل
• اليسار: 35 بكسل

العمود 1

وحدة المقسم الأول

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

انتقل إلى علامة التبويب "تصميم" وحدد "#FFFFFF" كلون الفاصل.

ثم اختر "صلب" كنمط الحاجز و "علوي" ليكون موضع الحاجز ضمن الفئة الفرعية للأنماط.

آخر شيء ستحتاج إلى القيام به ضمن علامة التبويب "التصميم" في وحدة Divider Module هو إجراء التعديلات التالية على فئة "التحجيم" الفرعية:

• وزن الحاجز: 3
• الارتفاع: 0 بكسل
• العرض: 20٪
• محاذاة الوحدة: صحيح

أول وحدة نصية

أسفل وحدة Divider مباشرةً ، أضف الوحدة النمطية الأولى للنص واستخدم الإعدادات التالية ضمن الفئة الفرعية للنص في علامة التبويب التصميم:

• خط النص: Arvo
• حجم خط النص: 30 بكسل
• لون النص: # 000000
• ارتفاع خط النص: 1.6em
• اتجاه النص: الوسط

استنساخ وحدة الحاجز الأول وتغيير المحاذاة

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

وحدة النص الثانية

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

• خط النص: لاتو
• حجم خط النص: 14
• ارتفاع خط النص: 1.7em
• اتجاه النص: الوسط

العمود 2

وحدة الصورة

أول شيء ستحتاج إلى إضافته إلى العمود الثاني هو وحدة صورة مع الإعدادات التالية ضمن فئة التباعد الفرعية في علامة التبويب التصميم:

• عرض المساحة أسفل الصورة: نعم
• الهامش العلوي: -300 بكسل
• اليسار: -80 بكسل

وحدة النص

بعد ذلك ، أضف وحدة نصية أسفل وحدة الصورة مباشرةً واختر الإعدادات التالية ضمن الفئة الفرعية للنص في علامة التبويب التصميم:

• خط النص: لاتو
• حجم خط النص: 14
• ارتفاع خط النص: 1.7em
• اتجاه النص: الوسط

وحدة متابعة وسائل التواصل الاجتماعي

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

تعطيل على الجهاز اللوحي والهاتف

بمجرد الانتهاء من كل ذلك ، يمكنك المضي قدمًا وتعطيل الصف على الهاتف والكمبيوتر اللوحي.

أضف صف الجوال

استنساخ صف سطح المكتب

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

تبديل الأعمدة

ابدأ بتبديل الوحدات النمطية الموجودة في كلا العمودين.

لون خلفية العمود

بعد ذلك ، أزل لون خلفية العمود الثاني وضعه في العمود الأول بدلاً من ذلك.

حشوة العمود

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

استخدم محاذاة الصف الأوسط

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

تعطيل على سطح المكتب

أخيرًا وليس آخرًا ، تأكد من تعطيل الصف على سطح المكتب.

القسم الثالث

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

إعدادات القسم

خلفية متدرجة

أضف قسمًا قياسيًا جديدًا واستخدم خلفية التدرج التالية:

• اللون الأول: # d6d6d6
• اللون الثاني: # 9e5555
• نوع التدرج: خطي
• اتجاه التدرج: 184 درجة
• موقف البداية: 30٪
• موضع النهاية: 30٪

الهامش المخصص

ثم أضف هامشًا مخصصًا "-200 بكسل" أيضًا.

صف سطح المكتب

تحسب نفس طريقة العمل للقسم الثالث ؛ سنقوم بإنشاء إصدار سطح المكتب والجهاز اللوحي / الهاتف.

استنساخ صف سطح المكتب للقسم الثاني

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

تبديل الأعمدة

أحد التغييرات التي نحتاج إلى إجرائها هو تبديل الوحدات الموجودة في كلا العمودين.

لون خلفية العمود

بعد ذلك ، سنحتاج أيضًا إلى إزالة لون خلفية العمود الثاني وإضافة "# 000000" كلون خلفية العمود الأول.

حشوة العمود

احذف الحشوة المخصصة للعمود 2 واستخدم "35 بكسل" للحشوة المخصصة العلوية واليمنى والسفلية واليسرى للعمود الأول.

استخدم محاذاة الصف الأيسر

أيضًا ، قم بتغيير محاذاة الصف من اليمين إلى اليسار.

الهامش المخصص لوحدة الصورة

ستحتاج فئة التباعد الفرعية لوحدة الصورة إلى بعض التغييرات أيضًا:

• أعلى: -150 بكسل
• اليمين: -80 بكسل

الهامش المخصص لوحدة الحاجز الأول

بعد ذلك ، أضف هامشًا علويًا "200 بكسل" إلى وحدة Divider Module الأولى داخل العمود الثاني.

استخدم الألوان المعاكسة

كما يمكنك أن تلاحظ ؛ استخدام الألوان هو عكس القسم الثاني. انطلق وقم بتغيير كل ألوان الخط إلى "#FFFFFF" وألوان الفاصل إلى "# 000000".

تعطيل على الجهاز اللوحي والهاتف

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

صف المحمول

استنساخ صف سطح المكتب السابق

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

استخدم محاذاة الصف الأوسط

افتح إعدادات الصف وقم بتغيير محاذاة الصف إلى المركز.

الهامش المخصص لوحدة الصورة

شيء آخر عليك القيام به هو تغيير الهامش العلوي لوحدة الصورة إلى "-20٪".

تعطيل على سطح المكتب

أخيرًا وليس آخرًا ، تأكد من تعطيل هذا الصف الأخير على سطح المكتب.

نتيجة

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

والنتيجة التالية على الجوال:

افكار اخيرة

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

تأكد من الاشتراك في النشرة الإخبارية عبر البريد الإلكتروني وقناة YouTube حتى لا يفوتك إعلان كبير أو نصيحة مفيدة أو Divi freebie!