تحتوي الوحدة النمطية Divi Blog على خيار تخطيط في شكل شبكة مفيدة لمشاركات المدونة الخاصة بك. ينظم قالب الشبكة منشورات المدونة الخاصة بك في مربعات أو خرائط تبسط رؤية العناصر على الشاشة بالمقارنة مع العرض القياسي.

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

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

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

دروس أخرى في موضوع Divi

• المواقع 5 للاستخدام مطعم ديفي موضوع
• كيفية إضافة نص على ديفي المنتج WooCommerce
• كيفية تغيير لون القائمة بين الصفحات على ديفي
• الميزات التي لا تعرفها عن Divi
• كيفية إنشاء شريط التمرير على ديفي
• كيفية تحرير دور المستخدم على Divi

دعونا نبدأ.

تكوين شبكة تخطيط لبلوق الخاص بك

قبل البدء في تصميم بطاقات وحدة المدونة ، تأكد من أن لديك مقالات على الأقل في 12 تم إنشاؤها بالفعل مع صورة في المربع.

بمجرد إنشاء رسائلك ، قم بإنشاء صفحة جديدة. في صفحتك الجديدة ، قم بنشر وحدة المدونة في عمود كامل العرض في جزء قياسي:

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

• التخطيط: الشبكة (شبكة)
• عدد المقالات: 12
• إظهار الصورة المميزة: نعم
• زر اقرأ المزيد: ON

ضمن CSS المخصص ، أدخل "gridcard" في مربع نص CSS ID. ستكون وسيلة لنا لتخصيص وحدة المدونة هذه فقط.

حفظ التغييرات

كيفية فهم تخطيط "الشبكة" للمدونة

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

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

يتم ترتيب بطاقات تذكرة المدونة من أعلى إلى أسفل في كل عمود. لذلك ، إذا كنت تريد منحهم رقمًا ، فستحتاج إلى حساب 1 إلى 4 على كل طول من أعلى إلى أسفل:

نظرًا لأنك تعرف الترتيب العددي لكل بطاقة مدونة أسفل كل عمود ، يمكنك أيضًا تحديد كل بطاقة كرقم فردي أو زوجي على النحو التالي:

تصاميم بوابة مثال

المثال رقم 1: تصميم شبكة "متقلب"

بالنسبة لهذا المثال الأول ، سأستهدف جميع البطاقات الفردية في وحدة المدونة (البطاقات 1 و 3) في العمود الأول مما يمنحها لون خلفية رمادي داكن. للقيام بذلك ، انتقل إلى "Divi → Theme options" وأضف CSS التالي في مربع نص CSS المخصص:

#gridcard .column: أولا الطفل المادة: الألف الطفل (الغريب) {خلفية: #333. }

وفيما يلي تفصيل ما يفعل هذا الرمز:

#gridcard = معرف وحدة المدونة بالكامل

.column: first-child = حدد العمود الأول في وحدة المدونة

post: nth-child (odd) = يحدد جميع العناصر الفردية (أو البطاقات) في العمود

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

ثم إضافة نص أبيض من شأنها أن تذهب على خلفية داكنة بإضافة CSS التالية:

#gridcard .column: أولا الطفل المادة: الألف الطفل (الغريب) .entry-العنوان، #gridcard .column: أولا الطفل المادة: الألف الطفل (الغريب) .POST الفوقية، #gridcard .column: أولا الطفل المادة: الألف الطفل (الغريب) ل.post الفوقية، #gridcard .column: أولا الطفل المادة: الألف الطفل (الغريب) .POST المحتوى ص {لون: # FFFFFF. }

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

هذه هي النتيجة:

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

#gridcard .column: مقال آخر تابع: nth-child (فردي) {background: # 333؛ } #gridcard .column: آخر مقالة فرعية: nth-child (odd) .entry-title، #gridcard .column: last-child article: nth-child (odd). post-meta، #gridcard .column: last- مقالة فرعية: nth-child (odd) .post-meta a، #gridcard .column: last-child article: nth-child (odd) .post-content p {color: #ffffff؛ }

يستهدف هذا الرمز العمود "الأخير" (في هذه الحالة ، العمود الثالث هو العمود الأخير) مع عنصر اللقب "last-child".

للعمود الثاني (أو وسط) ، استهدف البطاقات الزوجية لإكمال تأثير رقعة الشطرنج. للقيام بذلك نحتاج إلى إضافة CSS التالية:

#gridcard .column: nth-child (2) مقال: nth-child (حتى) {background: # 333؛ } #gridcard .column: nth-child (2) مقال: nth-child (even) .entry-title، #gridcard .column: nth-child (2) مقال: nth-child (even) .post-meta، # Gridcard .column: nth-child (2) article: nth-child (even) .post-meta a، #gridcard .column: nth-child (2) article: nth-child (even) .post-content p {color : #fff؛ }

الآن تذهب للتحقق من صفحة بلوق لرؤية تخطيط اللوحة من بطاقات وحدة البلوغ.

مثال رقم 2: إضافة تأثيرات التحويم باستخدام تخطيط متقلب

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

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

#gridcard .column: مقال من أول طفل: nth-child (فردي) ، #gridcard .column: مقال آخر طفل: nth-child (فردي) ، #gridcard .column: nth-child (2) مقالة: nth-child (حتى) {background: # 333؛ } #gridcard .column: مقال أول فرعي: nth-child (غريب) .entry-title، #gridcard .column: مقال أول فرعي: nth-child (فردي). post-meta، #gridcard .column: first- مقالة فرعية: nth-child (odd) .post-meta a، #gridcard .column: مقالة الطفل الأول: nth-child (odd) .post-content p، #gridcard .column: last-child article: nth-child (odd) .entry-title، #gridcard .column: last-child article: nth-child (odd) .post-meta، #gridcard .column: last-child article: nth-child (odd). post-meta a ، #gridcard .column: last-child article: nth-child (odd) .post-content p، #gridcard .column: nth-child (2) article: nth-child (even) .entry-title، #gridcard. العمود: nth-child (2) article: nth-child (even) .post-meta، #gridcard .column: nth-child (2) article: nth-child (even) .post-meta a، #gridcard .column : nth-child (2) article: nth-child (even) .post-content p {color: #fff؛ } #gridcard .column: nth-child (2) article: nth-child (even): hover img، #gridcard .column: مقال أول تابع: nth-child (فردي): hover img، #gridcard .column: last -مقالة الطفل: nth-child (فردي): hover img {-webkit-filter: grayscale (1)؛ مرشح: تدرج الرمادي (1) ؛ } #gridcard .column: nth-child (2) article: nth-child (فردي): hover img، #gridcard .column: مقالة أول فرعية: nth-child (حتى): hover img، #gridcard .column: last -مقال الطفل: nth-child (even): hover img {-webkit-filter: brightness (1.5)؛ عامل التصفية: السطوع (1.5) ؛ }

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

إضافة CSS التالية وأكثر CSS أعلاه:

#gridcard .column article، #gridcard .column article img {-webkit-transfer: all 0.8s؛ -موز-الانتقال: كل 0.8 ثانية ؛ الانتقال: كل 0.8 ثانية ؛ } #gridcard .column: مقال أول تابع: nth-child (فردي): hover، #gridcard .column: last-child article: nth-child (فردي): hover، #gridcard .column: nth-child (2) مقال: nth-child (even): hover {background: #fff؛ } #gridcard .column: مقالة أول فرعية: nth-child (فردي): hover .entry-title، #gridcard .column: مقالة أول فرعية: nth-child (فردي): hover .post-meta، #gridcard. العمود: مقال أول طفل: nth-child (فردي): hover .post-meta a، #gridcard .column: مقال أول فرعي: nth-child (فردي): hover .post-content p، #gridcard .column: مقال آخر طفل: nth-child (غريب): hover .entry-title، #gridcard .column: last-child article: nth-child (odd): hover .post-meta، #gridcard .column: last-child article : nth-child (فردي): hover .post-meta a، #gridcard .column: last-child article: nth-child (odd): hover .post-content p، #gridcard .column: nth-child (2) مقال: nth-child (even): hover .entry-title، #gridcard .column: nth-child (2) مقال: nth-child (even): hover .post-meta، #gridcard .column: nth-child ( 2) مقال: nth-child (even): hover .post-meta a، #gridcard .column: nth-child (2) مقالة: nth-child (even): hover .post-content p {color: # 333؛ } #gridcard .column: مقالة أول فرعية: nth-child (زوجي): hover، #gridcard .column: last-child article: nth-child (even): hover، #gridcard .column: nth-child (2) مقال: nth-child (غريب): hover {background: # 333؛ } #gridcard .column: مقالة أول فرعية: nth-child (زوجي): hover .entry-title، #gridcard .column: مقالة أول فرعية: nth-child (حتى): hover .post-meta، #gridcard. العمود: مقال أول طفل: nth-child (حتى): hover .post-meta a، #gridcard .column: مقالة أول فرعي: nth-child (حتى): hover .post-content p، #gridcard .column: مقال آخر طفل: nth-child (حتى): hover .entry-title، #gridcard .column: last-child article: nth-child (even): hover .post-meta، #gridcard .column: last-child article : nth-child (even): hover .post-meta a، #gridcard .column: last-child article: nth-child (even): hover .post-content p، #gridcard .column: nth-child (2) مقال: nth-child (غريب): hover .entry-title، #gridcard .column: nth-child (2) مقال: nth-child (فردي): hover .post-meta، #gridcard .column: nth-child ( 2) مقال: nth-child (فردي): hover .post-meta a، #gridcard .column: nth-child (2) مقال: nth-child (فردي): hover .post-content p {color: #fff؛ }

اذهب الآن لترى التأثير على مدونتك.

مثال # 3: تخصيص الخرائط بخطوط

بالنسبة للمثال الثالث ، سأقوم بتطبيق نفس الخلفية الداكنة والنص الأبيض على البطاقات الموجودة في كل صف آخر (وليس العمود). للقيام بذلك ، تحتاج إلى استهداف جميع البطاقات الزوجية في كل عمود. انتقل إلى "Divi → Options" للموضوع وتأكد من تعطيل أو إزالة أي كود CSS سابق أضفته منذ بداية هذا البرنامج التعليمي. ثم أضف CSS التالية:

مقال #gridcard: nth-child (حتى) {background-color: # 333؛ } #gridcard article: nth-child (even) .entry-title، #gridcard article: nth-child (even) .post-meta، #gridcard article: nth-child (even) .post-meta a، #gridcard article : nth-child (حتى) .post-content p {color: #fff؛ }

هنا ما هي النتيجة:

مثال # 4: تصميم خريطة شبكة محددة

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

انتقل إلى الصفحة التي تعرض وحدة المدونة الخاصة بك وانقر بزر الماوس الأيمن على إحدى بطاقاتك. في مربع الخيارات الذي يظهر ، حدد "فحص" (قد تحتوي بعض المتصفحات على "فحص العنصر" أو شيء مشابه. سيؤدي هذا إلى نشر نافذة أدوات المطور التي تعرض كلاً من html و css صفحة الويب. ابحث عن علامة المقالة التي تغلف مقالتك وقم بتدوين معرف المقالة المخصص لها. هذا هو المحدد الذي يجب استخدامه لاستهداف بطاقتك الفردية. على سبيل المثال ، لدي النقر بزر الماوس الأيمن والنقر للفحص للعثور على المعرف "post-3466".

على النحو التالي:

لاستهداف هذه البطاقة CSS لمنحه خلفية رمادية مع خط أبيض، يجب عليك استخدام CSS التالية:

# post-3466 {background: # 333333؛ } # post-3466 .entry-title، # post-3466 .post-meta، # post-3466 .post-meta a، # post-3466 .post-content p {color: #fff؛ }

الآن الخريطة لديها هذا النمط المحدد المطبق عليها.

هذا كل شيئ!

الأفكار النهائية

هذه مجرد أمثلة قليلة للعديد من الأنماط المختلفة التي يمكنك تحقيقها باستخدام هذا النوع من استهداف CSS لبطاقات وحدة المدونة. لم يعد عليك الحفاظ على نفس النمط لكل بطاقة. يمكنك تصميمها كما تريد.

إذا كان لديك أي أسئلة أو اقتراحات لا تتردد في تقدم لهم بالنسبة لي.

[vc_row center_row = "نعم"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" expand "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = ”# 18b69d” custom_hover_background = ”# 118d7a” custom_color = ”# ffffff” custom_hover_color = ”# ffffff” icon_right = ”fa fa-download”] DOWNLOAD DIVI THEME [/ vcex_button] [/ width_column] [= vc_column] / 1 ″] [vcex_button url = ”https://www.elegantthemes.com/affiliates/idevaffiliate.php؟id=2&url=23065&tid40632=tutorials” target = ”blank” layout = ”توسيع” align = ”center” font_family = ”Raleway” font_weight = ”1 ″ style =” flat ”custom_background =” # c700e ”custom_hover_background =” # 4226d8f ”custom_color =” # ffffff ”custom_hover_color =” # ffffff ”icon_right =” fa fa-download ”] تنزيل TEMPLATES DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

دروس ديفي أخرى

• المواقع 5 للاستخدام مطعم ديفي موضوع
• كيفية إضافة نص على منتج Divi WooCommerce
• كيفية تغيير لون القائمة بين صفحات Divi
• كيفية تخصيص شبكات بلوق مع ديفي
• كيفية استخدام دور ديفي محرر على وورد
• كيفية إنشاء كامل الشاشة المنزلق ديفي
• كيفية تغيير لون القوائم بين صفحات Divi
• الميزات التي ربما لا تعرفها عن Divi
• كيفية استخدام Divi Builder على وورد
• كيفية استخدام وحدة Divi Video scrolling
• كيفية استخدام وحدة Divi Builder Flip
• كيفية إضافة وحدة شهادة على Divi Builder
• كيفية استخدام وحدة Divi النصية
• كيفية إنشاء شريط التمرير على ديفي
• كيفية تحرير دور مستخدم Divi
• كيفية استخدام وحدة Divi Social Media
• كيفية استخدام وحدة متجر على موضوع ووردبرس]
• كيفية استخدام وحدة Divi الشريط الجانبي
• كيفية استخدام Divi Price Table Module
• كيفية استخدام وحدة العنوان لمنشورات Divi
• كيفية إضافة وحدة فيديو ديفي
• كيفية استخدام وحدة الملاحة المادة
• كيفية استخدام وحدة البحث Divi
• كيفية استخدام وحدة محفظة Divi
• كيفية استخدام وحدة الشخص على Divi Builder
• كيفية استخدام وحدة المحفظة مع فلتر Divi
• كيفية استخدام وحدة المنزلق بعرض كامل
• كيفية استخدام Divi Builder Image Module
• كيفية استخدام وحدة التنقل كاملة العرض في Divi Builder
• كيفية استخدام وحدة معرض الصور
• كيفية استخدام وحدة بطاقة Divi Builder Full-Width
• كيفية استخدام وحدة Divi Full Width Portfolio
• كيفية استخدام وحدة الرأس Divi ذات العرض الكامل
• كيفية استخدام Divi Counter Module
• كيفية استخدام شريط التمرير المقالات على Divi Builder
• كيفية استخدام وحدة Divi Email Optin