تتميز بأحدث منشورات المدونة الخاصة بك في تصميم مذهل للهاتف المحمول مع Divi

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

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

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

معاينة

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

لنبدأ في إعادة التكوين!

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

خلفية متدرجة

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

• اللون 1: # 2e1b8f
• اللون 2: #ffffff
• اتجاه التدرج: 90 درجة
• مركز البداية: 53.3٪
• مركز النهاية: 53.3٪

تباعد

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

• الهامش الأعلى: 100 بكسل
• الهامش السفلي: 100 بكسل
• الحشوة اليسرى: 26vw (سطح المكتب) ، 13vw (كمبيوتر لوحي) ، 0vw (هاتف)
• الحشو الأيمن: 22.8vw (سطح المكتب) ، 11.4vw (كمبيوتر لوحي) ، 0vw (هاتف)

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

هيكل العمود

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

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

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

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

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

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

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

تحجيم

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

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

عرض

الآن ، للتأكد من ظهور الأعمدة الثلاثة بجوار بعضها البعض على أحجام شاشة أصغر ، نحتاج إلى إضافة سطر واحد من كود CSS إلى العنصر الرئيسي في الصف.

display: flex;

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

حدد أيقونة

حان الوقت لبدء إضافة الوحدات! ابدأ بوحدة Blurb Module في العمود 1 وحدد رمزًا من اختيارك.

خلفية متدرجة

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

• اللون 1: # 5000ff
• اللون 2: rgba (41،196،169،0)
• نوع التدرج: شعاعي
• اتجاه شعاعي: المركز
• موقف البداية: 28٪
• موضع النهاية: 28٪

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

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

• لون الأيقونة: #ffffff
• وضع الصورة / الرمز: علوي
• استخدام خط الأيقونة: نعم
• حجم خط الأيقونة: 22 بكسل

تباعد

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

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

الحدود

وأضف حدًا سفليًا دقيقًا لإنهاء تصميم Blurb Module.

• عرض الحد السفلي: 1 بكسل
• لون الحد السفلي: #ffffff
• نمط الحد السفلي: متقطع

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

إضافة محتوى

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

إعدادات النص

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

• خط النص: Didact Gothic
• وزن خط النص: غامق
• لون النص: #ffffff

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

إضافة محتوى

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

لون الخلفية

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

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

إعدادات النص

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

• خط النص: Source Serif Pro
• وزن خط النص: غامق
• لون النص: # 000000
• حجم النص: 13 بكسل
• اتجاه النص: الوسط

تحجيم

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

• العرض: 60٪
• محاذاة الوحدة: يسار

تباعد

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

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

مربع الظل

جنبا إلى جنب مع الظل مربع خفية.

• مربع قوة طمس الظل: 80 بكسل
• لون الظل: rgba (0،0،0،0.23)

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

إضافة محتوى

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

إعدادات النص

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

• خط النص: Source Serif Pro
• لون النص: # a8a8a8
• حجم النص: 12 بكسل

إعدادات نص H3

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

• عنوان الخط 3: Didact Gothic
• وزن خط العنوان 2: غامق
• حجم نص العنوان 3: 17 بكسل

تباعد

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

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

صف استنساخ مرتين

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

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

غيّر رمز كل نسخة مكررة.

تعديل المحتوى والروابط

جنبًا إلى جنب مع المحتوى والروابط المتضمنة ، لقد انتهيت!

معاينة

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

افكار اخيرة

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