Divi: كيفية عرض مقتطفات من المقالة عند المرور فوقها

تريد معرفة كيفية عرض مقتطفات المقالة عند التمرير في Divi ?

يمكن أن تكون معاينة مقتطفات منشور المدونة عند التمرير طريقة فعالة للاحتفاظ بتخطيط شبكة مضغوط لمنشورات مدونتك دون التخلي عن تلك المقتطفات تمامًا. 

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

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

دعونا نبدأ!

مسح

أولاً ، إليك نظرة عامة على ما سننشئه في هذا البرنامج التعليمي.

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

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

قم بإنشاء خط

للبدء ، أدخل صفًا من عمود واحد في القسم

عرض الخط

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

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

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

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

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

ثم انتقل إلى إعدادات وحدة المدونة في علامة التبويب محتويات، ضمن العناصر، اضبط خيار "إظهار زر قراءة المزيد" على "نعم"

انتقل الآن إلى علامة تبويب النمط ، ضمن القالب ، حدد قالب "الشبكة" كتخطيط للمدونة.

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

فئة CSS: toggle-blog-excerpt

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

أضف CSS مخصصًا باستخدام وحدة Code.

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

لإضافة CSS ، سنستخدم وحدة Code. للقيام بذلك ، أضف وحدة رمز ضمن وحدة المدونة.

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

1. @media all and (min-width: 981px) {
2.   /* add transition for post content*/
3.   .toggle-blog-excerpt .et_pb_post .post-content {
4.     -webkit-transition: all 500ms !important;
5.     transition: all 500ms !important;
6.   }
7.   /* keep post content visible in visual builder */
8.   body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
9.     visibility:visible;
10.     opacity: 1;
11.     max-height:none;
12.   }
13.   /* hide post content */
14.   .toggle-blog-excerpt .et_pb_post .post-content {
15.     visibility: hidden;
16.     opacity: 0;
17.     max-height:0px;
18.   }
19.   /* show post content when hovering over post item */
20.   .toggle-blog-excerpt .et_pb_post:hover .post-content {
21.     visibility: visible;
22.     opacity:1;
23.     max-height: 500px;
24.   }
25.   /* set min-height for all post items */
26.   .toggle-blog-excerpt .et_pb_post {
27.     min-height: 400px; 
28.   }
29. }

دعونا نرى النتيجة التي تم الحصول عليها حتى الآن.

نتيجة

دعنا نضيف بعض التصميم الإضافي إلى وحدة المدونة باستخدام Divi builder

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

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

أسلوب عنوان المقال

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

نمط النص "قراءة المزيد"

• إقرأ المزيد خافت الضوء: نص غامق
• قراءة المزيد أسلوب النسخ: TT
• لون النص اقرأ المزيد: # 6D6A7E
• تباعد الأحرف اقرأ المزيد: 1 بكسل
• ارتفاع الخط اقرأ المزيد: 3.5em

تغيير عرض ترقيم صفحات النص

• إظهار ترقيم الصفحات ضوء خافت: نص غامق
• عرض لون النص ترقيم الصفحات: # 6D6A7E
• عرض تباعد الأحرف ترقيم الصفحات: 1 بكسل
• إظهار نمط نسخ ترقيم الصفحات: TT

إزالة الحدود

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

تحوم نمط مربع الظل

• مربع الظل: انظر لقطة الشاشة
• موقف البداية: 0px
• مربع قوة طمس الظل: 38 بكسل
• لون خط الترجمة: rgba (109,106,126,0.25،XNUMX،XNUMX،XNUMX)

نتيجة نهائية

وفي الختام

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

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

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