چگونه یک محفظه اسکرول برای ماژول نظرات Divi خود ایجاد کنیم

بخش نظرات یک پست وبلاگ به خوانندگان اجازه می دهد تا با دیگران تعامل داشته باشند. همچنین به کاربران این امکان را می دهد که بتوانند با افرادی که نظر شما را می پذیرند مکالمه ایجاد کنند. برای پست‌های ویژه‌ای که سر و صدای زیادی پیدا می‌کنند، بخش نظرات می‌تواند بسیار گیج‌کننده باشد! ممکن است بخواهید راهی برای آسان تر کردن بخش نظرات طولانی پیدا کنید. ایجاد نظرات پیمایشی در Divi را در نظر بگیرید!

با ایجاد یک محفظه اسکرول برای ماژول نظرات Divi خود، می توانید میزان پیمایشی را که خوانندگان وبلاگ خود باید طی کنند به حداقل برسانید. بنابراین آنها تجربه بهتری با سایت شما دارند. در نظر گرفتن عوامل تجربه کاربر هنگام ساخت سایت بسیار مهم است، و با افزودن یک نظر قابل پیمایش در Divi، لذت بردن از سایت خود را برای خوانندگان آسانتر می کنید، که همیشه چیز خوبی است.

چرا نظرات چیز خوبی است

قبل از اینکه به آموزش بپردازیم، اجازه دهید نگاهی گذرا به نظرات به طور کلی بیندازیم. در Divi ما یک ماژول نظر داریم. این ماژول به کاربران سایت شما اجازه می دهد تا در یک صفحه یا پست نظر بگذارند. این ماژول همچنین به افراد امکان می‌دهد نظرات گذشته را که توسط سایر خوانندگان سایت شما در یک پست گذاشته شده است را بخوانند. هنگامی که یک پست جذاب است، می تواند افراد را تشویق کند که بخواهند افکار، نظرات و سوالات خود را در زیر پست به نویسنده (معروف به شما) بسپارند. این نمونه ای از شکل ظاهری وبلاگ Elegant Themes است:

این بخش نظرات برای 3 بهترین افزونه جستجوی صوتی برای پست وردپرس در وبلاگ ما است. در آن می بینید که چندین خواننده نقد، تشکر و غیره گذاشته اند. نویسنده پست نیز برای پاسخگویی به خوانندگان وقت گذاشته است. این نوع تعامل برای وبلاگ و وب سایت شما خوب است زیرا نشان می دهد که ارزشی برای خوانندگان خود ارائه می دهید. همچنین به شما کمک می کند تا رابطه قوی تری با کسانی که از سایت شما استفاده می کنند و بازدید می کنند ایجاد کنید. اکنون که نظرات را در طبیعت دیده‌ایم، بیایید ببینیم چگونه می‌توانیم بخش نظرات را در پست‌های وبلاگ خود با استفاده از ماژول نظرات Divi مدیریت کنیم.

پیمایش نظرات در Divi: یک نمای کلی

برای این آموزش، از قالب پست وبلاگ از بسته نرم افزاری Divi layout استفاده می کنیم. در اینجا یک نمای کلی از قالب آورده شده است:

توجه داشته باشید که چگونه چندین نظر در مورد این پست وجود دارد؟ ما می‌توانیم با افزودن یک نوار پیمایش عمودی، پیمایش این قسمت از صفحه وبلاگ خود را آسان‌تر کنیم. برای این آموزش، یک نوار اسکرول عمودی به ردیفی که حاوی ماژول نظر است اضافه می کنیم. در مرحله بعد، از مقداری CSS برای استایل دادن به نوار اسکرول استفاده می کنیم تا با اسکرول اصلی صفحه متفاوت به نظر برسد. آماده؟ بیایید وارد آن شویم!

پیمایش نظرات در Divi: The Tutorial

قبل از شروع ایجاد نظرات قابل پیمایش در Divi با ماژول نظرات، باید قالب پست وبلاگ نرم افزار را نصب کنید. دستورالعمل های این پست وبلاگ را برای نصب قالب پست وبلاگ خود دنبال کنید.

تنظیمات خط نظر را وارد کنید

هنگامی که قالب شما نصب و ویرایش شد تا رضایت شما را جلب کند، ردیفی را که حاوی ماژول نظر است وارد می کنیم. به پایین اسکرول کنید به بخشی که شامل ماژول نظرات است. نشانگر ماوس را نگه دارید ردیف (طرح کلی سبز) و روی نماد چرخ دنده کلیک کنید. با این کار ماژول تنظیمات ردیف باز می شود.

حداکثر ارتفاع ردیف را تنظیم کنید

قبل از شروع یک ظاهر طراحی یا فعال کردن اسکرول، باید حداکثر ارتفاع را برای ردیف تعیین کنیم. برای انجام این کار، ما روی تب Design کلیک کنید. سپس ما روی تب Sizing کلیک کنید. سپس وارد الف می شویم حداکثر ارتفاع 550 پیکسل به گزینه حداکثر ارتفاع.

تنظیمات ردیف پیشرفته را وارد کنید

پس از اینکه حداکثر ارتفاع ردیف را تعیین کردیم، روی تب Advanced در کادر modal کلیک می کنیم. اینجاست که جادوی اسکرول اتفاق می افتد! به گزینه Vertical Overflow در پایین تر در تب Advanced توجه کنید. ما به زودی به آن باز خواهیم گشت.

نوار پیمایش عمودی با سرریز عمودی را فعال کنید

به پایین اسکرول کنید تا زمانی که به سرریز عمودی برسید. روی منوی کشویی کلیک کنید و اسکرول را انتخاب کنید.

در حالی که ما نوار اسکرول عمودی خود را داریم، می‌توانیم آن را با برخی از CSS و پدهای قدرتمند تقویت کنیم.

اضافه کردن بالشتک برای جلوگیری از همپوشانی

برای جلوگیری از همپوشانی نوار پیمایش جدید با دکمه‌های ما در بخش نظرات، مقداری بالشتک به سمت راست و چپ ردیف خود اضافه می‌کنیم. برای انجام این، به تب Design بروید از مودال تنظیمات ردیف. بعدی، به پایین اسکرول کنید تا به فاصله. روی نماد پیوند کلیک کنید بین کادرهای متنی Left و Right Padding. ما انجامش خواهیم داد یک پد 55 پیکسلی اضافه کنید در هر طرف خط

از آنجایی که مقداری فضا به نوار اسکرول خود اضافه کرده‌ایم، بیایید اکنون آن را با چند CSS سفارشی زیبا کنیم.

شناسه CSS را به خط اضافه کنید

بازگشت به پیشرفته بخش خط، به بالا بروید. شناسه CSS خود را اضافه کنید – برای این آموزش از آن استفاده خواهیم کرد پیمایش کرد – که در قسمت Custom CSS تنظیمات قالب اصلی فراخوانی می کنیم.

CSS سفارشی را به استایل نوارهای اسکرول اضافه کنید

اکنون وارد CSS سفارشی قالب پست وبلاگ خود می شویم. این تضمین می کند که CSS ما برای هر پست وبلاگ در وب سایت ما فعال خواهد بود، زیرا این الگو برای همه پست های وبلاگ در Divi Theme Builder اعمال می شود. برای وارد کردن تنظیمات CSS سفارشی برای قالب بدن خود، روی سه نقطه در دکمه بنفش کلیک کنید در مرکز پایین سازنده. بعدی، نماد چرخ دنده را انتخاب کنید.

CSS سفارشی را به نظرات اسکرول استایل در Divi اضافه کنید

ما می خواهیم نوار اسکرول را برای محفظه اسکرول خود سبک دهیم تا استفاده از آن را از نوارهای اسکرول اصلی پنجره مرورگر خود متمایز کنیم. برای این کار از مقداری CSS استفاده می کنیم. وقتی در تنظیمات قالب بدنه قرار گرفتید، تب Advanced را انتخاب کنید. بعدی، به تب Custom CSS بروید.

هنگامی که در برگه CSS سفارشی قالب صفحه اصلی قرار گرفتیم، کد CSS زیر را کپی و جایگذاری کنید:

/* Custom Scrollbar CSS */
/* Firefox */
#scrollie {
scrollbar-width: auto;
scrollbar-color: #000000 #ffffff;
}

/* Chrome, Edge, and Safari */
#scrollie::-webkit-scrollbar {
width: 16px;
}

#scrollie::-webkit-scrollbar-track {
background: #ffffff;
}

#scrollie::-webkit-scrollbar-thumb {
background-color: #000000;
border-radius: 0px;
border: 3px solid #ffffff;
}

اگر از شناسه CSS دیگری استفاده کرده‌اید، مطمئن شوید که قطعه کد را در وب‌سایت خود به‌روزرسانی کرده‌اید تا این موضوع را منعکس کند. شما می توانید ویرایش کنید یا به CSS اضافه کنید تا حاشیه های خود را به گونه ای طراحی کنید که با نام تجاری و وب سایت شما مطابقت داشته باشد. در مورد ما، ما یک طرح مسطح را برای مطابقت با سبک بسته طرح‌بندی نرم‌افزار Divi انتخاب کردیم.

قالب پست وبلاگ خود را ذخیره کنید

هنگامی که از ویرایش های CSS خود راضی بودید، حتما قالب صفحه وبلاگ خود را ذخیره کنید. روی دکمه سبز رنگ Save در پایین سمت راست منوی پایین در Divi Theme Builder کلیک کنید.

پس از ذخیره تنظیمات، از بخش نظرات به‌روزرسانی شده در وبلاگ خود دیدن کنید!

پیمایش نظرات در Divi: نتیجه

ایجاد یک محفظه اسکرول برای ماژول نظرات Divi به کاربران شما کمک می کند تا تجربه بهتری با بخش نظرات شما داشته باشند. تعامل کاربر یک عامل مهم برای پرورش در وبلاگ شما است. با قابلیت پیمایش ماژول نظر، استفاده آسان را برای خوانندگان خود فراهم می‌کنید وقتی که از پست‌های مختلف وبلاگ شما لذت می‌برند.