كيفية تصميم منشورات حديثة حسب تخطيط الفئة باستخدام تأثيرات التحويم الرائعة في Divi

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

في هذا البرنامج التعليمي ، سوف نوضح لك كيفية عرض المشاركات الأخيرة حسب الفئة. باستخدام Divi Builder فقط (وعدد قليل من وحدات المدونة) ، سننشئ قسمًا يعرض أحدث المنشورات من أربع فئات مختلفة. ستتضمن هذه المنشورات الحديثة حسب قسم الفئة علامات فئات فريدة ورسوم متحركة وتأثيرات تحوم - كل ذلك بدون مكون إضافي.

تحقق من ذلك!

نظرة خاطفة

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

قم بتنزيل أحدث المشاركات حسب تخطيط الفئة مجانًا

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

قم بتنزيل الملفات

تنزيل مجاني

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

تحميل

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

لاستيراد التخطيط إلى صفحتك ، ما عليك سوى استخراج ملف مضغوط واسحب ملف json إلى Divi Builder.

Letis للوصول إلى البرنامج التعليمي ، فهل نحن؟

ما تحتاجه للبدء

للبدء ، سوف تحتاج إلى القيام بما يلي:

1. إذا لم تكن قد قمت بذلك بعد ، فقم بتثبيت وتفعيل Divi Theme.
2. قم بإنشاء صفحة جديدة في WordPress واستخدم Divi Builder لتحرير الصفحة على الواجهة الأمامية (منشئ مرئي).
3. أيضًا ، تعتمد وظيفة قسم المنشورات الحديثة على وجود منشورات مدونة فعلية على موقعك مع فئات مخصصة لها. لذا تأكد من أن لديك عددًا قليلاً من منشورات المدونة الوهمية إذا كنت تستخدم موقع اختبار.

بعد ذلك ، سيكون لديك لوحة فارغة لبدء التصميم في Divi.

إنشاء المشاركات الأخيرة حسب قسم القسم في Divi

قم بإنشاء صف 4 أعمدة

لبدء الأشياء في Divi Builder ، قم بإنشاء صف مكون من 4 أعمدة.

إنشاء وحدة المدونة 1

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

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

محتوى المدونة

قم بتحديث خيارات محتوى المدونة على النحو التالي:

• نوع المشاركة: المشاركات
• عدد المشاركات: 1
• الفئات المتضمنة: أخبار (أو واحدة خاصة بك)
• استخدم مقتطفات ما بعد: لا
• طول المقتطف: 120

خيارات العنصر

ثم قم بتحديث خيارات العناصر كما يلي:

• عرض الفئات: NO
• إظهار المقتطفات: لا (سطح المكتب) ، نعم (التمرير والكمبيوتر اللوحي)
• إظهار ترقيم الصفحات: NO

تصميم المدونة

ثم قم بتحديث التصميم على النحو التالي:

• لون الخلفية (سطح المكتب): #ffffff
• لون الخلفية (تحوم): # 8ac829
• وزن خط العنوان: شبه عريض
• نمط خط العنوان: TT
• حجم نص العنوان: 24 بكسل
• تباعد حروف العنوان: 1 بكسل
• ارتفاع خط العنوان: 1.4em
• لون النص الأساسي: #ffffff
• وزن الخط الميتا: خفيف
• تباعد الحروف الوصفية: 3 بكسل

• الحد الأدنى للارتفاع: 450 بكسل (سطح المكتب) ، تلقائي (جهاز لوحي)
• الحشو: 5٪ لأعلى ، 5٪ أسفل ، 5٪ يسار ، 5٪ يمين
• Box Shadow: انظر لقطة الشاشة
• نمط الرسوم المتحركة: تكبير

هذا يعتني بتصميم أول وحدة مدونة لدينا. الآن نحن بحاجة إلى إنشاء علامة الفئة المخصصة لدينا.

إنشاء علامة الفئة 1

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

محتوى النص

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

تصميم علامة التصنيف

ضمن إعدادات تصميم النص ، قم بتحديث ما يلي:

• لون الخلفية: # 8ac829
• وزن خط النص: غامق للغاية
• لون نص النص: #ffffff
• محاذاة النص: مركز
• العرض: 120 بكسل
• الهامش: 80 بكسل للأعلى ، -80 بكسل للأسفل
• الحشو: 10 بكسل للأعلى ، 10 بكسل للأسفل
• نمط الرسوم المتحركة: تتلاشى
• تأخير الرسوم المتحركة: 1000 مللي ثانية
• الفهرس Z: 1

نظرًا لأننا نستخدم الهامش السلبي لإسقاط العلامة فوق بطاقة المدونة ، فسنحتاج إلى ضبط الفهرس z على 1 بحيث تظل العلامة أعلى وحدة المدونة.

الآن بعد أن انتهينا من وظيفة واحدة ، يمكننا نشر وضع عرض الإطار الشبكي ونسخ هذه الوحدات النمطية إلى الأعمدة الأخرى.

انسخ وحدة النص والمدونة في العمود 1 والصقها في الأعمدة 2 و 3 و 4 بحيث يكون لديك نفس الوحدات النمطية في كل عمود.

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

تحديث الوحدات في العمود 2

البقاء في عرض الإطار السلكي ، افتح إعدادات وحدة المدونة في العمود 2 ، وقم بتحديث ما يلي:

• الفئات المشمولة: الأعمال (أو الخاصة بك)
• لون الخلفية (تحوم): # f64937

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

• Body: "نشاط تجاري"
• لون الخلفية: # f64937

تحديث الوحدات في العمود 3

ثم افتح إعدادات وحدة المدونة في العمود 3 ، وقم بتحديث ما يلي:

• الفئات المدرجة: المال (أو الخاص بك)
• لون الخلفية (تحوم): # 6529c7

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

• النص الأساسي: "المال"
• لون الخلفية: # 6529c7

وحدات التحديث في العمود 4

ثم افتح إعدادات وحدة المدونة في العمود 4 ، وقم بتحديث ما يلي:

• الفئات المشمولة: التدريب (أو التدريب الخاص بك)
• لون الخلفية (تحوم): # f17809

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

• الجسم: "التدريب"
• لون الخلفية: # f17809

تحديث إعدادات الصف

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

• استخدام عرض مزراب مخصص: نعم
• عرض المزراب: 2
• العرض: 94٪
• العرض الأقصى: 1400 بكسل
• الارتفاع: 540 بكسل (سطح المكتب) ، تلقائي (جهاز لوحي)
• المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

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

تحديث الإعدادات لكل عمود

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

• مقياس التحويل (تحوم): 115٪

ثم أضف CSS المخصص التالي إلى العنصر الرئيسي على شاشة الكمبيوتر اللوحي فقط:

transform: none !important

سيؤدي هذا المقتطف الصغير إلى تعطيل تأثير تحويم مقياس التحويل للجوال.

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

تحديث اعدادات القسم

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

• لون الخلفية المتدرج الأيسر: # 6529c7
• تدرج الخلفية اللون الصحيح: # f64937
• اتجاه التدرج: 270 درجة
• الحشو: 10vw أعلى ، 10vw أسفل

النتيجة النهائية

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

وها هي الرسوم المتحركة وتأثيرات التمرير.

افكار اخيرة

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

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

أتطلع إلى الاستماع منك في التعليقات.

هتافات!