كيفية تبديل مقتطفات منشور المدونة على Hover in Divi

نشرت: 2021-08-02

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

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

هيا بنا نبدأ!

نظرة خاطفة

فيما يلي نظرة سريعة على التصميم الذي سنقوم ببنائه في هذا البرنامج التعليمي.

قم بتنزيل Layout مجانًا

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

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

تنزيل مجاني

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

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

لاستيراد تخطيط القسم إلى مكتبة Divi الخاصة بك ، انتقل إلى مكتبة Divi.

انقر فوق الزر "استيراد".

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

ثم انقر فوق زر الاستيراد.

مربع إعلام divi

بمجرد الانتهاء من ذلك ، سيكون تخطيط القسم متاحًا في Divi Builder.

دعنا نصل إلى البرنامج التعليمي ، أليس كذلك؟

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

توسيع علامات تبويب الزاوية

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

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

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

كيفية تبديل مقتطفات منشور المدونة على Hover in Divi

إنشاء تخطيط وحدة المدونة

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

إنشاء صف

أضف صفًا من عمود واحد إلى القسم.

عرض الصف

في مشروط إعدادات الصف ، قم بتحديث إعدادات التصميم التالية لضبط العرض.

  • العرض: 95٪
  • العرض الأقصى: 1200 بكسل

أضف وحدة المدونة

داخل عمود الصف ، أضف وحدة مدونة جديدة.

إعدادات وحدة المدونة

بعد ذلك ، قم بتحديث إعدادات محتوى وحدة المدونة عن طريق تحديد إظهار زر قراءة المزيد.

ضمن علامة تبويب التصميم ، حدد تخطيط الشبكة للمدونة.

ضمن علامة التبويب خيارات متقدمة ، أضف فئة CSS التالية:

  • فئة CSS: toggle-blog-excerpt

سنستخدم هذه الفئة كمحدد لرمز CSS المخصص الخاص بنا في الخطوة التالية.

إضافة CSS مخصص مع وحدة التعليمات البرمجية

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

لإضافة CSS ، سنستخدم وحدة رمز. أضف وحدة رمز جديدة أسفل وحدة المدونة.

الصق CSS المخصص التالي المطلوب لتأثير تبديل مقتطف المنشور. تأكد من التفاف CSS في العلامات النمط اللازمة. 

@media all and (min-width: 981px) {
  /* add transition for post content*/
  .toggle-blog-excerpt .et_pb_post .post-content {
    -webkit-transition: all 500ms !important;
    transition: all 500ms !important;
  }
  /* keep post content visible in visual builder */
  body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
    visibility:visible;
    opacity: 1;
    max-height:none;
  }
  /* hide post content */
  .toggle-blog-excerpt .et_pb_post .post-content {
    visibility: hidden;
    opacity: 0;
    max-height:0px;
  }
  /* show post content when hovering over post item */
  .toggle-blog-excerpt .et_pb_post:hover .post-content {
    visibility: visible;
    opacity:1;
    max-height: 500px;
  }
  /* set min-height for all post items */
  .toggle-blog-excerpt .et_pb_post {
    min-height: 400px;  
  }
}

دعنا نتحقق من النتيجة حتى الآن على الصفحة المباشرة.

نتيجة

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

أضف تصميمًا إضافيًا إلى وحدة المدونة باستخدام Divi Builder

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

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

أسلوب عنوان المشاركة

  • وزن خط العنوان: غامق
  • لون نص العنوان: # 6d6a7e
  • حجم نص العنوان: 20 بكسل
  • ارتفاع خط العنوان: 1.3em

أسلوب قراءة المزيد Text

  • قراءة المزيد وزن الخط: جريء
  • المزيد Font Style: TT
  • قراءة المزيد لون النص: # 6d6a7e
  • المزيد Letter Spacing: 1px
  • قراءة المزيد Line Height: 3.5em

أسلوب ترقيم الصفحات

  • وزن خط ترقيم الصفحات: غامق
  • نمط خط ترقيم الصفحات: TT
  • لون نص ترقيم الصفحات: # 6d6a7e
  • تباعد ترقيم الصفحات: 1 بكسل

إزالة الحدود

  • عرض حدود تخطيط الشبكة: 0 بكسل

نمط مربع الظل على Hover

  • Box Shadow: انظر لقطة الشاشة
  • مربع الظل الوضع الرأسي: 0 بكسل
  • مربع قوة طمس الظل: 38 بكسل
  • لون الظل (سطح المكتب): شفاف
  • لون الظل (تحوم): rgba (109،106،126،0.25)

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

حول كود CSS

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

أولاً ، نحتاج إلى التفاف كل CSS في استعلام وسائط لن يطبق إلا CSS على متصفحات سطح المكتب. 

@media all and (min-width: 981px) {

}

ثانيًا ، نحتاج إلى إضافة انتقال مدته 500 مللي ثانية إلى محتوى المنشور / مقتطفات لتغييرات النمط التي ستحدث عند التمرير فوق عنصر المنشور.

  /* add transition for post content*/
  .toggle-blog-excerpt .et_pb_post .post-content {
    -webkit-transition: all 500ms !important;
    transition: all 500ms !important;
  }

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

  /* keep post content visible in visual builder */
  body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
    visibility:visible;
    opacity: 1;
    max-height:none;
  }

رابعًا ، نحتاج إلى إخفاء محتوى / مقتطف المنشور افتراضيًا عند تحميل الصفحة. للقيام بذلك نستخدم الرؤية: مخفية لإخفاء المحتوى. ثم نضيف العتامة: 0 حتى نتمكن من الحصول على تأثير انتقال يتلاشى ويتلاشى عندما نضيف عتامة: 1 إلى حالة التمرير. نستخدم أيضًا max-height: 0px للحصول على تأثير التبديل المنزلق عندما نضيف max-height: 500px إلى حالة التمرير.

  /* hide post content */
  .toggle-blog-excerpt .et_pb_post .post-content {
    visibility: hidden;
    opacity: 0;
    max-height:0px;
  }

خامساً ، نعرض محتوى / مقتطف المنشور عندما يكون عنصر المنشور (.et_pb_post) في حالة التمرير. للقيام بذلك ، نقوم بتغيير الرؤية إلى المرئي ، والتعتيم إلى 1 ، والحد الأقصى للارتفاع إلى 500 بكسل.

  /* show post content when hovering over post item */
  .toggle-blog-excerpt .et_pb_post:hover .post-content {
    visibility: visible;
    opacity:1;
    max-height: 500px;
  }

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

  /* set min-height for all post items */
  .toggle-blog-excerpt .et_pb_post {
    min-height: 400px;  
  }

إليك نظرة أخرى على الكود النهائي. 

@media all and (min-width: 981px) {
  /* add transition for post content*/
  .toggle-blog-excerpt .et_pb_post .post-content {
    -webkit-transition: all 500ms !important;
    transition: all 500ms !important;
  }
  /* keep post content visible in visual builder */
  body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
    visibility:visible;
    opacity: 1;
    max-height:none;
  }
  /* hide post content */
  .toggle-blog-excerpt .et_pb_post .post-content {
    visibility: hidden;
    opacity: 0;
    max-height:0px;
  }
  /* show post content when hovering over post item */
  .toggle-blog-excerpt .et_pb_post:hover .post-content {
    visibility: visible;
    opacity:1;
    max-height: 500px;
  }
  /* set min-height for all post items */
  .toggle-blog-excerpt .et_pb_post {
    min-height: 400px;  
  }
}

افكار اخيرة

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

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

هتافات!