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

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

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

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

معاينة

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

هيا بنا نبدأ!

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

لون الخلفية

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

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

تباعد

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

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

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

هيكل العمود

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

تحجيم

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

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

تباعد

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

• الحشوة اليسرى للعمود 1: 100 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 50 بكسل (الهاتف)
• مساحة العمود 2 المخصصة: 50 بكسل
• مساحة العمود 3 المخصصة: 50 بكسل

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

مربع المحتوى

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

إعدادات نص H2

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

• خط العنوان 2: Source Code Pro
• نمط خط العنوان 2: أحرف كبيرة
• لون نص العنوان 2: #ffffff
• حجم نص العنوان 2: 100 بكسل
• العنوان 2 تباعد الأحرف: 24 بكسل

تباعد

قلل المساحة الموجودة في الجزء العلوي باستخدام بعض الهامش العلوي السلبي.

• الهامش الأعلى: -50 بكسل

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

إعدادات النص

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

• خط النص: Source Code Pro
• لون النص: #ffffff
• اتجاه النص: ضبط

تحجيم

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

• العرض: 68٪

تباعد

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

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

إضافة وحدة نص كتلة إلى العمود 2

مربع المحتوى

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

لون الخلفية

أضف لون خلفية أسود إلى وحدة النص.

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

إعدادات النص

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

• خط النص: Source Code Pro
• اتجاه النص: يسار
• لون النص: فاتح

إعدادات نص الارتباط

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

• نمط خط الارتباط: أحرف كبيرة وتسطير
• لون تسطير الرابط: #ffffff
• لون نص الرابط: # edf000
• حجم نص الرابط: 16 بكسل
• تباعد حروف الارتباط: 3 بكسل

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

يحتاج عنوان H3 الموجود في مربع المحتوى الخاص بنا إلى الإعدادات التالية:

• نمط خط العنوان 3: أحرف كبيرة
• حجم نص العنوان 3: 33 بكسل

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

استمر بفتح إعدادات نص H4 وإجراء بعض التغييرات هناك أيضًا.

• لون نص العنوان 4: # 4f4f4f
• حجم نص العنوان 4: 19 بكسل
• العنوان 4 تباعد الأحرف: -1 بكسل

تحجيم

لإنشاء الشكل الدقيق الذي نريده ، سنقوم بتقليل عرض وحدة النص بعد ذلك.

• العرض: 88٪ (كمبيوتر مكتبي) ، 60٪ (كمبيوتر لوحي) ، 90٪ (هاتف)

تباعد

سنحتاج إلى تغيير إعدادات التباعد أيضًا.

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

الحدود

ثم أضف حدًا دقيقًا إلى وحدة النص.

• عرض الحدود: 2 بكسل
• لون الحدود: # 424242

مربع الظل

وللنهاية ، أضف ظل صندوق ملون.

• مربع الظل الأفقي: 19 بكسل
• مربع الظل الرأسي: 16 بكسل
• قوة انتشار الظل المربع: -4 بكسل
• لون الظل: # f2ff00

وحدة استنساخ كتلة النص مرتين ووضعها في العمود 3

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

تعديلات وحدة النص الأحمر

تغيير لون نص الارتباط

افتح وحدة النص الأولى في العمود الثالث وقم بتغيير لون الارتباط.

• لون نص الرابط: # e02b20

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

بعد ذلك ، انتقل إلى إعدادات التباعد وأضف بعض الهامش العلوي.

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

تغيير لون ظل الصندوق

قم بتغيير Box Shadow Color إلى نفس اللون المستخدم لنص الارتباط.

• لون الظل: # e02b20

تعديلات وحدة النص الأزرق

تغيير لون نص الارتباط

قم بتغيير لون ارتباط وحدة النص الثانية في العمود الثالث أيضًا.

• لون نص الرابط: # 0ff3ff

تغيير الحجم

قم بتغيير إعدادات التحجيم بعد ذلك.

• الحجم: 67٪ (كمبيوتر مكتبي) ، 60٪ (كمبيوتر لوحي) ، 90٪ (هاتف)

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

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

• الهامش العلوي: -20 بكسل (سطح المكتب) ، -30 بكسل (جهاز لوحي) ، 50 بكسل (الهاتف)
• الهامش الأيسر: -160 بكسل (سطح المكتب) ، 200 بكسل (جهاز لوحي) ، 0 بكسل (الهاتف)

تغيير لون ظل الصندوق

للإنهاء ، قم بتغيير لون ظل الصندوق إلى نفس اللون الأزرق المستخدم في نص الرابط ، وبذلك تكون قد انتهيت!

• لون الظل: # 0ff3ff

معاينة

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

افكار اخيرة

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