كيفية تصميم وحدة Divi Post Slider مثل شريط التمرير في غرفة الأخبار في Facebook

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

قبل وبعد: وحدة Divi Post Slider

تُظهر الصورة الأولى أدناه وحدة شريط التمرير divi post بإعداداتها الافتراضية ، بينما الثانية عبارة عن تعديل تم إنشاؤه باستخدام بعض التعديلات في الإعدادات وبعض CSS المخصص.

قبل

بعد، بعدما

المفهوم والإلهام

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

تحضير عناصر التصميم

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

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

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

تنفيذ التصميم مع Divi

اشترك في قناتنا على اليوتيوب

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

نبدأ بإضافة قسم عادي بصف هيكل عمود واحد.

ثم أضف وحدة Post Slider Module إلى الصف.

تبدأ تعديلاتنا بإعدادات "المحتوى" ، حيث تكون أنت افتراضيًا بعد إضافة أي وحدة نمطية جديدة في Visual Builder.

قم بإجراء التغييرات التالية على إعدادات المحتوى الافتراضية:

اضبط "رقم المنشور" على العديد من المشاركات التي تريدها. في هذا المثال ، أستخدم 3.

ثم اضبط "Use Post Excerpt if Defined" إلى نعم ، واضبط "Automatic Excerpt Length" على 180.

نحن الآن جاهزون للانتقال إلى إعدادات التصميم عن طريق النقر فوق علامة التبويب في الجزء العلوي من إعدادات الوحدة النمطية.

قم بإجراء التغييرات التالية على إعدادات التصميم:

قم بتغيير "لون تراكب الخلفية" إلى الأبيض (#ffffff).

قم بتغيير “Dot Nav Custom Color” إلى # 576d90.

قم بتغيير "لون النص" إلى Dark.

الآن اجعل "Header Font" غامقًا ، واضبط "Header Font Size" على 34 بكسل ، واضبط "Header text Color" على # 3b5998 ، و "Header Line Height" على 42 بكسل.

الآن قم بتعيين "Body Text Color" على # 141924 ، و "Body Line Height" على 24 بكسل.

انقر الآن على "استخدام الأنماط المخصصة للزر" لتغييره إلى نعم. غيّر "حجم نص الزر" إلى 16 بكسل ، و "عرض حد الزر" إلى 0 بكسل ، و "لون نص تمرير الزر" إلى # 666666 ، و "لون خلفية تمرير الزر" إلى rgba (0،0،0،0).

الآن انقر فوق علامة التبويب "خيارات متقدمة" في الجزء العلوي من إعدادات الوحدة النمطية. في إدخال النص ضمن CSS ID ، أضف "fb-post-slider". يتيح لنا ذلك إضافة أنماط إلى هذه الوحدة المحددة دون التأثير على وحدات النشر الأخرى التي قد يتم عرضها على الصفحة.

أضف الآن كود CSS إلى العناصر المختلفة على النحو التالي:

قبل

position:absolute;
top:57px;
right:-6px;
content:"";
border:4px solid transparent;
border-top-color:#2C477F;
border-left-color:#2C477F;

العنصر الرئيسي

border-radius: 3px;
border:1px solid #dedede; 

بعد، بعدما

position:absolute;
top:25px;
right:-7px;
display:block;
content:"Top Stories";
color:#F9F4F7;
background-color:#4573CC;
padding:4px 15px;
border-radius:2px;
z-index:2!important;

وصف الشرائح

min-height:460px;
width: 35%;
min-width: 300px;
float:left;
padding: 57px 45px 50px 35px!important;
font-family: 'Alegreya Sans', sans-serif;
text-align:left

عنوان الشريحة

font-family: 'Alegreya Sans', sans-serif;

زر الشريحة

padding:0!important;
margin-top:0;

تحكم الشرائح

margin-bottom:-55px;

أسهم الشرائح

color:#ffffff!important;
background-color:rgba(0,0,0,.4);
font-weight:bold;
border-radius:2px;
 -ms-transform: scale(1.2, 2.5); /* IE 9 */
 -webkit-transform: scale(1.2, 2.5); /* Safari */
 transform: scale(1.2, 2.5);

الآن احفظ إعدادات الوحدة بالنقر فوق علامة الاختيار في الزاوية اليمنى السفلية من النموذج.

يمكنك أن ترى في Visual Builder أنه لا يزال هناك بعض الطرق للذهاب لجعل شريط تمرير المنشور يبدو تمامًا مثل الموجود على صفحة Facebook Newsroom.

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

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

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

#fb-post-slider.et_pb_post_slider_0 .et_pb_slide {
    background-size: 70%;
    background-position: top right;
    padding-left: 0;
    overflow: visible!important;
}
 
#fb-post-slider.et_pb_slider_with_overlay .et_pb_slide_overlay_container {
    width: 30%;
    min-width: 300px;
}

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

#fb-post-slider .et_pb_slide_content .post-meta {
    height: 0px;
    overflow: hidden
}
#fb-post-slider .et_pb_slide_content .post-meta .published {
    position: absolute;
    top: 32px;
    left: 35px;
    color: #898f9c;
    font-size: 16px
}

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

#fb-post-slider .et-pb-arrow-prev {
    display: none
}

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

#fb-post-slider.et_pb_post_slider_0 .et-pb-controllers a {
    height: 8px;
    width: 8px;
    order-radius: 50%
}
#fb-post-slider.et_pb_slider {
    overflow: visible!important
}

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

.et-pb-active-slide .et_pb_slide_description {
    animation-name: fadeIn;
}
.et_pb_slide.et-pb-active-slide {
    transition: opacity 2.5s!important
}
 
@media all and (max-width: 1252px) {
    #fb-post-slider.et_pb_post_slider_0 .et_pb_slide {
        background-size: 90%
    }
}
@media all and (max-width: 980px) {
    #fb-post-slider.et_pb_post_slider_0 .et_pb_slide {
        background-size: 100%;
        background-position: top center;
    }
}

يمكنك الآن حفظ الصفحة عن طريق النقر فوق الزر "حفظ" في الزاوية اليمنى السفلية من شاشتك. بمجرد حفظ الصفحة ، اخرج من المنشئ المرئي لرؤية شريط تمرير المنشور النهائي ، المستوحى من شريط تمرير المنشور في صفحة Facebook Newsroom.

افكار اخيرة

حسنًا ، سواء وجدت هذا التصميم المعين مفيدًا أم لا ، آمل أن يكون قد قدم نظرة تفصيلية على بعض الإعدادات الأكثر تقدمًا في Divi's Post Slider Module ، بالإضافة إلى إثارة خيالك بشأن ما هو ممكن.