كيفية إنشاء لوحة نتائج اللعبة مع حزمة تخطيط نادي كرة القدم من Divi's

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

معاينة

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

قم بتحميل حزمة تخطيط حزمة تصميم نادي كرة القدم

لإنشاء هذا البرنامج التعليمي ، سنستخدم الصفحة المقصودة لـ Soccer Club Layout Pack ، لذا تابع وأضف صفحة جديدة باستخدام هذا التخطيط.

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

ثم أضف قسمًا جديدًا هنا:

لون الخلفية

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

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

تباعد

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

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

صف الاستنساخ والمكان في القسم

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

لتوفير الوقت ، سنقوم باستنساخ صف العنوان في القسم التالي.

ضع في قسم جديد

تغيير النص

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

أضف الصف رقم 2

هيكل العمود

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

لون الخلفية

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

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

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

أضف لون خلفية العمود 1 أيضًا.

• لون خلفية العمود 1: #fcfcfc

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

كرر نفس الخطوة للعمود 3.

• لون خلفية العمود 3: #fcfcfc

تحجيم

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

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

تباعد

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

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

الحدود

لمطابقة حزمة التخطيط ، أضف حدًا علويًا وسفليًا إلى الصف.

• عرض الحد السفلي: 8 بكسل
• لون الحد السفلي: # 00aaff

مربع الظل

أخيرًا ، أضف ظل مربع دقيقًا لإنشاء عمق على الصفحة.

• مربع الظل الرأسي: 20 بكسل
• مربع قوة طمس الظل: 80 بكسل
• قوة انتشار الظل المربع: -20 بكسل
• لون الظل: rgba (0،0،0،0.56)

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

إضافة محتوى

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

لون الخلفية

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

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

إعدادات النص

تواصل من خلال اللعب مع إعدادات النص.

• خط النص: Squada One
• نمط خط النص: أحرف كبيرة
• لون النص: # 333333
• حجم النص: 20 بكسل
• اتجاه النص: الوسط

تباعد

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

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

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

إضافة محتوى

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

إعدادات النص

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

• خط النص: Open Sans
• وزن خط النص: غامق
• لون النص: # 333333
• حجم النص: 18 بكسل
• اتجاه النص: الوسط

تباعد

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

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

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

تحميل شعار النادي

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

تحجيم

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

• العرض: 45٪ (كمبيوتر مكتبي) ، 16٪ (كمبيوتر لوحي) ، 28٪ (هاتف)
• محاذاة الوحدة: المركز

تباعد

تابع عن طريق إضافة قيم الهامش المخصصة في إعدادات التباعد.

• الهامش العلوي: 20 بكسل
• الهامش السفلي: 50 بكسل

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

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

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

بالطبع ، ستحتاج إلى تغيير محتوى كل وحدة مستنسخة.

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

إضافة محتوى

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

لون الخلفية

أضف لون الخلفية الذي يطابق حزمة التخطيط بعد ذلك.

• لون الخلفية: # 00aaff

إعدادات النص

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

• خط النص: Squada One
• نمط خط النص: أحرف كبيرة
• لون النص: #FFFFFF
• حجم النص: 42 بكسل
• اتجاه النص: الوسط

تباعد

بعد ذلك ، انتقل إلى إعدادات التباعد وأعطي الوحدة مزيدًا من المساحة المتروكة.

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

الرؤية

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

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

إضافة محتوى

يجب أن تحتوي وحدة النص الثانية في العمود 2 على نتيجة اللعبة.

إعدادات النص

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

• خط النص: Squada One
• لون النص: # 333333
• حجم النص: 150 بكسل
• ارتفاع خط النص: 1em
• اتجاه النص: الوسط

تباعد

تابع عن طريق تعديل قيم التباعد.

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

الرؤية

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

استنساخ كلتا الوحدتين ووضعهما في العمود 1

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

تغيير الرؤية

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

أضف الصف رقم 3

هيكل العمود

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

لون الخلفية

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

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

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

قم بتغيير لون خلفية العمود 2 أيضًا.

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

تحجيم

قم بإزالة كل المسافات بين الأعمدة في إعدادات تغيير الحجم بعد ذلك.

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 0
• معادلة ارتفاع العمود: نعم

تباعد

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

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل
• الحشوة السفلية للعمود 1: 100 بكسل
• الحشوة اليمنى للعمود 1: 10 بكسل
• العمود 3 الحشو الأيسر: 10 بكسل

الحدود

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

• عرض الحد السفلي: 8 بكسل
• لون الحد السفلي: # 00aaff

مربع الظل

لإنشاء عمق للصفحة ، أضف ظل مربع الصف.

• مربع الظل الرأسي: 20 بكسل
• مربع قوة طمس الظل: 80 بكسل
• قوة انتشار الظل المربع: -20 بكسل
• لون الظل: rgba (0،0،0،0.56)

الرؤية

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

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

إضافة محتوى

أضف وحدة نصية جديدة إلى العمود الأول الذي يحتوي على تفاصيل الهدف الأول.

إعدادات النص

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

• خط النص: Squada One
• نمط خط النص: أحرف كبيرة
• لون النص: # 333333
• حجم النص: 27 بكسل
• اتجاه النص: صحيح

تباعد

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

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

الحدود

استمر بإضافة حد سفلي دقيق.

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

استنساخ وحدة النص مرتين

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

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

• الهامش الأعلى: 200 بكسل
• الحشو السفلي: 20 بكسل

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

تغيير إعدادات النص

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

• اتجاه النص: يسار

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

يجب زيادة الهامش العلوي أيضًا.

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

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

يمكنك الآن استنساخ وحدة النص هذه مرة أخرى.

أضف الصف رقم 4

هيكل العمود

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

لون الخلفية

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

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

تحجيم

قم بإزالة كل المسافة بين الأعمدة بعد ذلك.

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

تباعد

أضف بعض الحشو العلوي والسفلي الإضافي.

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

الحدود

سنحتاج إلى حد سفلي دقيق لهذا الصف أيضًا.

• عرض الحد السفلي: 8 بكسل
• لون الحد السفلي: # 00aaff

مربع الظل

بعد ذلك ، أضف ظل الصندوق إلى الصف.

• مربع الظل الرأسي: 20 بكسل
• مربع قوة طمس الظل: 80 بكسل
• قوة انتشار الظل المربع: -20 بكسل
• لون الظل: rgba (0،0،0،0.56)

الرؤية

أخيرًا ، قم بإخفاء الصف الموجود على سطح المكتب.

أضف وحدة نصية # 1

إضافة محتوى

أضف وحدة نصية جديدة إلى عمود الصف وأضف تفاصيل الهدف.

إعدادات النص

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

• خط النص: Squada One
• نمط خط النص: أحرف كبيرة
• حجم النص: 27 بكسل
• اتجاه النص: صحيح

تباعد

استخدم قيم التباعد المخصصة بعد ذلك.

• الحق مارين: 150 بكسل
• الحشو السفلي: 20 بكسل

الحدود

نحن نضيف حدًا سفليًا دقيقًا أيضًا.

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

وحدة استنساخ النص

تغيير إعدادات النص

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

• اتجاه النص: يسار

تباعد

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

• أعلى Marign: 200 بكسل
• الهامش الأيسر: 150 بكسل

استنساخ كلتا الوحدتين النصيتين عدة مرات حسب الحاجة

يمكنك الآن استنساخ هذه الوحدات عدة مرات كما تريد لإظهار جميع الأهداف المختلفة.

معاينة

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

افكار اخيرة

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