5 طرق للإبداع مع وحدة الشخص Divi

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

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

معاينة

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

سطح المكتب

متحرك

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

أعد إنشاء المثال رقم 1

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

لنبدأ في إنشاء المثال الأول! افتح صفحة جديدة أو موجودة وأضف قسمًا عاديًا.

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

هيكل العمود

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

تحجيم

افتح إعدادات الصف وقم بإجراء بعض التغييرات على إعدادات التحجيم.

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

تباعد

بعد ذلك ، افتح إعدادات التباعد وأضف بعض قيم الحشو المخصصة.

• الحشوة العلوية: 100 بكسل (سطح المكتب) ، 80 بكسل (الجهاز اللوحي والهاتف)
• الحشو السفلي: 100 بكسل (سطح المكتب) ، 80 بكسل (الجهاز اللوحي والهاتف)
• الحشو الأيسر: 100 بكسل (سطح المكتب) ، 30 بكسل (جهاز لوحي) ، 25 بكسل (هاتف)
• الحشو الأيمن: 100 بكسل (سطح المكتب) ، 30 بكسل (جهاز لوحي) ، 25 بكسل (هاتف)

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

تحميل الصور

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

مربع الظل

استمر بالذهاب إلى علامة تبويب التصميم وتطبيق ظل مربع دقيق.

المرشحات

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

• التشبع: 40٪
• التباين: 130٪

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

إضافة محتوى

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

خلفية متدرجة

أضف خلفية متدرجة إلى هذه الوحدة.

• اللون 1: rgba (11،15،229،0.41)
• اللون 2: rgba (45،237،255،0.87)
• اتجاه التدرج: 150 درجة

إعدادات نص العنوان

بعد ذلك ، قم بتغيير إعدادات نص العنوان في علامة تبويب التصميم.

• خط العنوان: Baloo
• لون نص العنوان: #ffffff
• حجم نص العنوان: 20 بكسل

إعدادات النص الأساسي

قم بتعديل إعدادات النص الأساسي أيضًا.

• وزن خط الجسم: خفيف
• لون النص الأساسي: #ffffff

تباعد

وأضف بعض قيم الهوامش والحشو المخصصة في إعدادات التباعد.

• الهامش الأيسر: -4vw (سطح المكتب والكمبيوتر اللوحي) ، 0vw (الهاتف)
• الهامش الأيمن: 8vw (سطح المكتب والكمبيوتر اللوحي) ، 0vw (الهاتف)
• الحشوة العلوية: 25 بكسل
• الحشو السفلي: 25 بكسل
• الحشو الأيسر: 20 بكسل

الحدود

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

• عرض الحد الأيسر: 3 بكسل
• لون الحد الأيسر: #ffffff

مربع الظل

جنبًا إلى جنب مع ظل الصندوق الذي سيساعدك على إنشاء عمق على الصفحة.

• مربع قوة طمس الظل: 80 بكسل

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

إضافة محتوى

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

إعدادات الرمز

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

• لون الأيقونة: # 50e8fe

تباعد

أخيرًا وليس آخرًا ، افتح إعدادات التباعد وأضف بعض قيم الحشو المخصصة.

• الحشوة العلوية: 30 بكسل
• الحشوة اليسرى: 30 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 0 بكسل (الهاتف)

أعد إنشاء المثال رقم 2

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

إلى المثال التالي! أضف قسمًا جديدًا إلى صفحتك.

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

هيكل العمود

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

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

بدون إضافة أي وحدات نمطية حتى الآن ، افتح إعدادات الصف وأضف لون خلفية العمود 2.

• لون خلفية العمود 2: # f4f4f4

تحجيم

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

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

تباعد

أضف بعض قيم الحشو المخصصة في إعدادات التباعد أيضًا.

• الحشوة العلوية: 100 بكسل (سطح المكتب) ، 80 بكسل (الجهاز اللوحي والهاتف)
• الحشو السفلي: 100 بكسل (سطح المكتب) ، 80 بكسل (الجهاز اللوحي والهاتف)
• الحشو الأيسر: 100 بكسل (سطح المكتب) ، 30 بكسل (جهاز لوحي) ، 25 بكسل (هاتف)
• الحشو الأيمن: 100 بكسل (سطح المكتب) ، 30 بكسل (جهاز لوحي) ، 25 بكسل (هاتف)

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

تحميل الصور

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

مربع الظل

ثم قم بإضافة ظل مربع للصورة.

• قوة مربع الظل الضبابية: 160 بكسل

المرشحات

يمكنك أيضًا اللعب مع إعدادات المرشحات.

• التشبع: 40٪
• التباين: 130٪

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

إضافة محتوى

في العمود الثاني ، الوحدة الأولى التي سنحتاجها هي وحدة الشخص. املأ حقول الاسم والموقع.

لون الخلفية

انتقل إلى إعدادات الخلفية وأضف لونًا شفافًا للخلفية.

• لون الخلفية: rgba (255،255،255،0.7)

إعدادات النص

بعد ذلك ، قم بتغيير اتجاه النص في إعدادات النص.

• اتجاه النص: الوسط

إعدادات نص العنوان

قم بتغيير إعدادات نص العنوان أيضًا.

• خط العنوان: Abril Fatface
• لون نص العنوان: # 000000
• حجم نص العنوان: 40 بكسل

إعدادات النص الأساسي

جنبا إلى جنب مع إعدادات النص الأساسي.

• وزن خط الجسم: خفيف
• لون النص الأساسي: # 000000
• حجم النص الأساسي: 15 بكسل

تباعد

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

• الهامش الأيسر: -21.64vw (سطح المكتب) ، -46.1vw (جهاز لوحي) ، 0vw (الهاتف)
• الحشوة العلوية: 30 بكسل
• الحشو السفلي: 30 بكسل

مربع الظل

ونقوم بتطبيق ظل مربع دقيق أيضًا.

• مربع قوة طمس الظل: 80 بكسل

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

إضافة محتوى

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

إعدادات الرمز

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

• لون الأيقونة: # 000000

تباعد

أضف بعض قيم الهوامش والحشو المخصصة أيضًا.

• الهامش العلوي: 3vw
• الحشوة العلوية: 30 بكسل
• الحشو السفلي: 30 بكسل
• الحشوة اليسرى: 30 بكسل
• الحشو الأيمن: 30 بكسل

أعد إنشاء المثال رقم 3

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

إلى المثال الثالث! أضف قسمًا جديدًا إلى صفحتك.

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

هيكل العمود

بعد ذلك ، أضف صفًا جديدًا إلى القسم باستخدام بنية العمود التالية:

تحجيم

افتح إعدادات الصف وقم بتغيير إعدادات التحجيم.

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

تباعد

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

• الحشوة العلوية: 100 بكسل (سطح المكتب) ، 80 بكسل (الجهاز اللوحي والهاتف)
• الحشو السفلي: 100 بكسل (سطح المكتب) ، 80 بكسل (الجهاز اللوحي والهاتف)
• الحشو الأيسر: 100 بكسل (سطح المكتب) ، 30 بكسل (جهاز لوحي) ، 25 بكسل (هاتف)
• الحشو الأيمن: 100 بكسل (سطح المكتب) ، 30 بكسل (جهاز لوحي) ، 25 بكسل (هاتف)

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

إضافة محتوى

حان الوقت لبدء إضافة الوحدات! أضف الوحدة النمطية للشخص الأول إلى العمود 1 واملأ حقول الاسم والموضع.

لون الخلفية

ثم أضف لون الخلفية إلى الوحدة النمطية.

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

إعدادات نص العنوان

قم بتعديل إعدادات نص العنوان أيضًا.

• وزن خط العنوان: غامق للغاية
• لون نص العنوان: # 000000
• حجم نص العنوان: 40 بكسل
• تباعد حرف العنوان: -4 بكسل

إعدادات النص الأساسي

افعل الشيء نفسه لإعدادات النص الأساسي.

• وزن خط الجسم: خفيف
• لون النص الأساسي: # 000000
• حجم النص الأساسي: 15 بكسل

تباعد

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

• الهامش العلوي: 40 بكسل (سطح المكتب) ، 0 بكسل (الجهاز اللوحي والهاتف)
• الحشوة العلوية: 30 بكسل
• الحشو السفلي: 30 بكسل
• الحشوة اليسرى: 30 بكسل
• الحشو الأيمن: 30 بكسل

الحدود

أضف "20 بكسل" إلى الزاوية اليسرى العلوية في إعدادات الحدود أيضًا.

مربع الظل

وأعطي الوحدة ظل مربع ملون.

• مربع قوة طمس الظل: 140 بكسل
• لون الظل: rgba (31،15،255،0.66)

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

إضافة محتوى

إلى وحدة الشخص الثاني في العمود 1! استخدم هذه الوحدة لعرض روابط الوسائط الاجتماعية والوصف.

لون الخلفية

بعد ذلك ، انتقل إلى إعدادات الخلفية وأضف لونًا للخلفية البيضاء.

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

إعدادات الرمز

قم بتغيير لون الرمز أيضًا.

• لون الأيقونة: # 000000

تباعد

تابع بإضافة بعض قيم التباعد المخصصة في إعدادات التباعد.

الحدود

وأضف "20 بكسل" إلى الركن الأيسر السفلي.

مربع الظل

أخيرًا وليس آخرًا ، أضف ظل الصندوق.

• مربع الظل الوضع الرأسي: 50 بكسل
• مربع قوة طمس الظل: 140 بكسل
• قوة انتشار الظل المربع: -10 بكسل
• لون الظل: rgba (2،219،219،0.26)

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

تحميل الصور

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

الحدود

أعط هذه الوحدة "20 بكسل" للزوايا الدائرية في إعدادات الحدود.

مربع الظل

وإضافة ظل مربع دقيق.

المرشحات

مرة أخرى ، لا تتردد في اللعب بإعدادات المرشحات لتغيير مظهر الصورة.

أعد إنشاء المثال رقم 4

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

إلى المثال الرابع! أضف قسمًا جديدًا إلى صفحتك.

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

هيكل العمود

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

تحجيم

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

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

تباعد

قم بتغيير إعدادات التباعد أيضًا.

• الحشوة العلوية: 100 بكسل (سطح المكتب) ، 80 بكسل (الجهاز اللوحي والهاتف)
• الحشو السفلي: 100 بكسل (سطح المكتب) ، 80 بكسل (الجهاز اللوحي والهاتف)
• الحشو الأيسر: 100 بكسل (سطح المكتب) ، 30 بكسل (جهاز لوحي) ، 25 بكسل (هاتف)
• الحشو الأيمن: 100 بكسل (سطح المكتب) ، 30 بكسل (جهاز لوحي) ، 25 بكسل (هاتف)

أضف وحدة الشخص إلى العمود 1

إضافة محتوى

حان الوقت لبدء إضافة الوحدات! أضف وحدة نمطية للشخص إلى العمود 1 واملأ جميع الحقول.

إعدادات الرمز

بعد ذلك ، انتقل إلى إعدادات الرمز وقم بتغيير لون الرمز.

• لون الأيقونة: # 000000

إعدادات النص

قم بتغيير اتجاه النص في إعدادات النص أيضًا.

• اتجاه النص: الوسط

إعدادات نص العنوان

ثم افتح إعدادات نص العنوان وقم بإجراء بعض التغييرات.

• وزن خط العنوان: غامق للغاية
• لون نص العنوان: # 000000
• حجم نص العنوان: 40 بكسل
• تباعد حرف العنوان: -4 بكسل

إعدادات النص الأساسي

قم بتعديل إعدادات النص الأساسي أيضًا.

• وزن خط الجسم: خفيف
• لون النص الأساسي: # 000000
• حجم النص الأساسي: 15 بكسل
• ارتفاع خط الجسم: 2em

تباعد

وقم بإنشاء شكل باستخدام قيم الحشو المخصصة في إعدادات التباعد.

• الحشوة العلوية: 280 بكسل (سطح المكتب) ، 200 بكسل (جهاز لوحي) ، 50 بكسل (هاتف)
• الحشوة السفلية: 280 بكسل (سطح المكتب) ، 200 بكسل (جهاز لوحي) ، 50 بكسل (هاتف)
• الحشو الأيسر: 200 بكسل (سطح المكتب) ، 150 بكسل (جهاز لوحي) ، 20 بكسل (هاتف)
• الحشو الأيمن: 200 بكسل (سطح المكتب) ، 150 بكسل (جهاز لوحي) ، 20 بكسل (هاتف)

الحدود

أنشئ دائرة بإضافة "700 بكسل" إلى كل ركن من أركان إعدادات الحدود وأضف حدًا دقيقًا أيضًا.

• عرض الحدود: 1 بكسل
• لون الحدود: # 333333

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

تحميل الصور

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

تباعد

قم بتعديل إعدادات التباعد في هذه الوحدة.

• الهامش العلوي: 7vw (سطح المكتب) ، -15vw (جهاز لوحي) ، -5vw (هاتف)
• الهامش الأيسر: -5vw (سطح المكتب) ، 0vw (الجهاز اللوحي والهاتف)

الحدود

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

مربع الظل

أضف ظل مربع دقيقًا أيضًا.

• قوة مربع الظل الضبابية: 160 بكسل
• قوة انتشار الظل المربع: -10 بكسل

المرشحات

وقم بإنهاء التصميم من خلال اللعب مع إعدادات المرشحات للصورة.

• التشبع: 0٪
• التباين: 130٪

أعد إنشاء المثال رقم 5

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

إلى المثال التالي والأخير! أضف قسمًا جديدًا إلى صفحتك.

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

هيكل العمود

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

العمود 1 خلفية متدرجة

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

• اللون 1: #dddddd
• اللون 2: #ffffff
• العمود 1 اتجاه التدرج: 90 درجة
• موضع البداية للعمود 1: 40٪
• موضع نهاية العمود 1: 40٪

تحجيم

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

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

تباعد

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

• الحشوة العلوية: 100 بكسل (سطح المكتب) ، 80 بكسل (الجهاز اللوحي والهاتف)
• الحشو السفلي: 100 بكسل (سطح المكتب) ، 80 بكسل (الجهاز اللوحي والهاتف)
• الحشو الأيسر: 100 بكسل (سطح المكتب) ، 30 بكسل (جهاز لوحي) ، 25 بكسل (هاتف)
• الحشو الأيمن: 100 بكسل (سطح المكتب) ، 30 بكسل (جهاز لوحي) ، 25 بكسل (هاتف)

أضف وحدة الشخص إلى العمود 1

إضافة محتوى

حان الوقت لبدء إضافة الوحدات! أضف وحدة نمطية للشخص إلى العمود 1 واملأ جميع الحقول.

إعدادات الرمز

بعد ذلك ، قم بتغيير لون الرمز في إعدادات الرمز.

• لون الأيقونة: # 000000

إعدادات النص

قم بتغيير اتجاه النص في إعدادات النص أيضًا.

• اتجاه النص: صحيح

إعدادات نص العنوان

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

• خط العنوان: Chenla
• لون نص العنوان: # 000000
• حجم نص العنوان: 50 بكسل
• تباعد حرف العنوان: -1 بكسل

إعدادات النص الأساسي

افعل الشيء نفسه لإعدادات النص الأساسي.

• وزن خط الجسم: خفيف
• لون النص الأساسي: # 000000
• حجم النص الأساسي: 15 بكسل
• ارتفاع خط الجسم: 2em

تباعد

تابع بإضافة بعض قيم الحشو المخصصة إلى إعدادات التباعد في الوحدة النمطية.

• الحشوة العلوية: 200 بكسل (سطح المكتب) ، 100 بكسل (الجهاز اللوحي والهاتف)
• الحشو السفلي: 200 بكسل (سطح المكتب) ، 100 بكسل (الجهاز اللوحي والهاتف)
• الحشوة اليسرى: 500 بكسل (سطح المكتب) ، 250 بكسل (جهاز لوحي) ، 50 بكسل (هاتف)
• الحشو الأيمن: 200 بكسل (سطح المكتب) ، 100 بكسل (جهاز لوحي) ، 50 بكسل (هاتف)

الحدود

أخيرًا ، أضف حدًا إلى الوحدة النمطية.

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

تحميل الصور

الوحدة التالية التي سنحتاجها هي وحدة صورة في العمود 2. انطلق وقم بتحميل صورة مربعة من اختيارك.

تباعد

بعد ذلك ، قم بإجراء بعض التغييرات على إعدادات التباعد في هذه الوحدة.

• الهامش العلوي: 7vw (سطح المكتب) ، -2vw (الجهاز اللوحي والهاتف)
• الهامش الأيسر: -10vw (سطح المكتب) ، 0vw (الجهاز اللوحي والهاتف)

مربع الظل

امنح وحدة الصورة ظل مربع أيضًا.

• قوة مربع الظل الضبابية: 160 بكسل
• قوة انتشار الظل المربع: -10 بكسل

المرشحات

وللحصول على أعلى ، العب مع إعدادات المرشحات.

• التشبع: 50٪
• التباين: 130٪

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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