إنشاء لوحة تحكم ملاحة مذهلة مع هياكل الأعمدة الجديدة لديفي

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

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

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

معاينة

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

لوحات الألوان

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

ضوء

• اللون رقم 1: # f6f6f6 (خلفية القسم)
• اللون رقم 2: #ffffff (خلفية العمود)
• اللون # 3: # 333333 (لون نص العنوان)
• اللون # 4: # 000000 (لون المقسم)
• اللون رقم 5: # 6F6B68 (دعاية لون النص الأساسي)
• اللون رقم 6: # e5e5e5 (خلفية العمود 2)
• اللون رقم 7: #ffffff (لون خلفية دعاية)

داكن

• اللون # 1: # 141414
• اللون رقم 2: # 212121
• اللون # 3: #ffffff
• اللون رقم 4: #ffffff
• اللون رقم 5: #dddddd
• اللون رقم 6: # 212121
• اللون # 7: # 333333

ألوان متبادلة

• اللون # 7: # 0457ff
• اللون رقم 8: # cc0432
• اللون # 9: # 839e00
• اللون # 10: # c68e00

لنبدأ في الإنشاء

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

لون الخلفية

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

• لون الخلفية: اللون رقم 1 (البحث في لوحة الألوان)

تباعد

لإنشاء مساحة إضافية في الأعلى والأسفل ، سنطبق بعض الحشو المخصص أيضًا:

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

أضف الصف رقم 1

هيكل العمود

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

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

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

• لون خلفية العمود 1: اللون رقم 2 (البحث في لوحة الألوان)

تحجيم

انتقل إلى علامة تبويب التصميم التالية وقم بتغيير إعدادات التحجيم لصفك:

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

تباعد

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

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

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

إعدادات نص H1

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

• وزن خط العنوان: غامق
• محاذاة نص العنوان: يسار
• لون نص العنوان: اللون رقم 3 (البحث في لوحة الألوان)
• حجم نص العنوان: 75 بكسل (سطح المكتب) ، 55 بكسل (جهاز لوحي) ، 36 بكسل (هاتف)

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

لون المقسم

أسفل عنوان Text Module مباشرة ، امض قدمًا وأضف وحدة Divider باللون التالي:

• لون الحاجز: اللون # 4 (ابحث في لوحة الألوان)

تحجيم

افتح إعدادات التحجيم بعد ذلك واضبط عرض المقسّم:

• العرض: 27٪

تباعد

أضف بعض المساحة أعلى الحاجز أيضًا:

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

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

إعدادات النص

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

• اتجاه النص: ضبط

تحجيم

قم بتغيير إعدادات التحجيم لهذه الوحدة أيضًا:

• العرض: 80٪ (سطح المكتب) ، 100٪ (الجهاز اللوحي والهاتف)

تباعد

وأضف بعض المساحة في الجزء العلوي من الوحدة النمطية الخاصة بك باستخدام الهامش المخصص:

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

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

أيقونة

يمكننا الآن الانتقال إلى العمود الثاني. سنبدأ بإنشاء إحدى وحدات Blurb Modules. بعد ذلك ، يمكننا استنساخ هذه الوحدة وتغييرها وفقًا لذلك. بعد إضافة Blurb Module وتغيير المحتوى ، حدد رمزًا من اختيارك.

لون الخلفية

تابع عن طريق إضافة لون الخلفية إلى Blurb Module الخاص بك:

• لون الخلفية: Color # 7 (Find in Color Palette)

نمط الخلفية

احفظ النمط الصغير التالي على جهاز الكمبيوتر الخاص بك:

قم بتحميله كصورة الخلفية الخاصة بك مع الإعدادات التالية:

• حجم صورة الخلفية: الحجم الفعلي
• موقف صورة الخلفية: المركز
• تكرار صورة الخلفية: كرر

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

انتقل إلى علامة التبويب Design ، وافتح إعدادات Image & Icon وقم بتغيير الإعدادات وفقًا لذلك:

• لون الأيقونة: اللون رقم 7 (ابحث في لوحة الألوان)
• رمز الدائرة: نعم
• لون الدائرة: #FFFFFF
• استخدم حجم خط الأيقونة: 33 بكسل

إعدادات النص

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

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

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

يحتاج عنوان الوحدة النمطية الخاصة بنا إلى بعض التغييرات الإضافية أيضًا:

• وزن خط العنوان: غامق للغاية
• نمط خط العنوان: أحرف كبيرة

تباعد

أخيرًا وليس آخرًا ، أضف بعض الحشو المخصص لمنح الوحدة النمطية Blurb الشكل والمظهر اللذين تريدهما:

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

استنساخ وحدة Blurb ثلاث مرات ومكان 2 في العمود المتبقي

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

تغيير وحدات Blurb النمطية الجديدة

تغيير الايقونة

لكل نسخة مكررة ، ستحتاج إلى تغيير الرمز الذي يتم استخدامه.

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

وبالمثل ، ستحتاج إلى تغيير لون الخلفية إلى لون من اختيارك أو أحد الألوان في لوحة الألوان (اللون رقم 8 أو رقم 9 أو رقم 10).

تغيير لون الأيقونة

قم بتغيير لون الأيقونة إلى نفس اللون الذي تستخدمه للخلفية.

أضف الصف رقم 2

هيكل العمود

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

تحجيم

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

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

تباعد

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

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

أضف وحدة نصية

إعدادات نص H2

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

• وزن خط العنوان 2: غامق
• العنوان 2 محاذاة النص: اليسار
• لون نص العنوان 2: اللون # 3 (البحث في لوحة الألوان)
• حجم نص العنوان: 32 بكسل

إضافة وحدة المقسم

لون المقسم

مباشرة أسفل العنوان Text Module ، أضف وحدة Divider باللون التالي:

• اللون: Color # 4 (Find in Color Palette)

تحجيم

قم بتغيير عرض الحاجز بعد ذلك:

• العرض: 9٪

تباعد

أخيرًا ، أضف بعض المساحة إلى الجزء العلوي من الحاجز الخاص بك:

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

أضف الصف رقم 3

هيكل العمود

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

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

افتح إعدادات الصف وأضف لون الخلفية التالي إلى كل عمود من أعمدتك:

• لون خلفية العمود: اللون # 6 (البحث في لوحة الألوان)

تحجيم

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

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

تباعد

وأضف بعض الحشو أيضًا:

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

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

أيقونة

يمكننا الآن البدء في إضافة الوحدات المختلفة. سنبدأ مع Blurb Module في العمود الأول. بعد إضافة المحتوى ، حدد أيقونة من اختيارك.

لون الخلفية

امنح وحدة Blurb الخاصة بك لون خلفية بعد ذلك:

• لون الخلفية: Color # 7 (Find in Color Palette)

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

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

• لون الأيقونة: #ffffff
• رمز الدائرة: نعم
• لون الدائرة: اللون # 7 (ابحث في لوحة الألوان)
• استخدام حجم خط الأيقونة: نعم
• حجم خط الأيقونة: 33 بكسل

إعدادات النص

غيّر أيضًا اتجاه النص لوحدة Blurb Module الخاصة بك:

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

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

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

• وزن خط العنوان: غامق للغاية
• نمط خط العنوان: أحرف كبيرة
• لون نص العنوان: اللون رقم 3 (بحث في لوحة الألوان)

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

يحتاج النص الأساسي لوحدة Blurb Module إلى لون آخر أيضًا:

• لون نص النص: اللون # 5 (البحث في لوحة الألوان)

تباعد

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

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

أضف وحدة الزر إلى العمود 1

محاذاة الزر

أسفل وحدة Blurb مباشرةً ، امض قدمًا وأضف وحدة زر. افتح إعداداته وقم بتغيير زر محاذاة:

• محاذاة الزر: الوسط

إعدادات الزر

قم بتغيير مظهر الزر الخاص بك بعد ذلك:

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 15 بكسل
• لون نص الزر: اللون # 3
• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 0 بكسل
• وزن الخط: عريض للغاية
• نمط الخط: أحرف كبيرة

تباعد

أضف بعض الهامش في الجزء السفلي من وحدة الأزرار أيضًا:

• الهامش السفلي: 30 بكسل

استنساخ وحدة Blurb & Button ثلاث مرات ووضعها في الأعمدة المتبقية

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

تغيير وحدات Blurb النمطية الجديدة

تغيير الايقونة

قم بتغيير رمز كل وحدة Blurb Module مكررة إلى أيقونة جديدة للاختيار.

تغيير لون الأيقونة

قم بتغيير لون الأيقونة أيضًا. لا تتردد في استخدام الأرقام # 8 و # 9 و # 10 من لوحة الألوان.

صف استنساخ

تحديد & استنساخ صف

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

صف المكان

بعد ذلك ، سنضعه أسفل الصف الأخير الذي أنشأناه مباشرةً.

صف استنساخ

تحديد & استنساخ صف

افعل نفس الشيء مع الصف الذي يحتوي على وحدات Blurb المميزة.

صف المكان

وضعه تحت عنوانك الجديد.

تغيير هيكل العمود

لإظهار المزيد من الميزات في هذا الصف ، سنقوم بتغيير بنية العمود إلى 5 أعمدة بدلاً من 4:

أضف لون خلفية العمود 5

أضف لون خلفية العمود إلى العمود الجديد أيضًا:

• لون خلفية العمود: اللون # 6 (البحث في لوحة الألوان)

وحدات الاستنساخ Blurb والأزرار ووضعها في العمود 5

انسخ أحد وحدات Blurb Modules في صفك واملأ المساحة بوضع النسخة المكررة في العمود 5. قم بتغيير لون الرمز والأيقونة أيضًا.

استنساخ صف مكون من 5 أعمدة

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

معاينة

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

افكار اخيرة

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