۷ روش جالب برای نمایش محتوا در یک وب سایت
گزیده ای از مقالات موجود در سایت می تواند نقش مهمی در تجربه کاربری سایت شما داشته باشد. آنها طعم و مزه محتوایی که در مقاله شما وجود دارد را به کاربران نشان میدهند و آنها را تشویق به کلیک بر روی مقاله و مشاهده ی کامل آن میکنند.
بسیاری از سیستم های مدیریت محتوا، مانند وردپرس ، توانایی ایجاد گزیده های دلخواه (یا نمایش تعدادی از کلمات اول یک مقاله) را به درستی در هسته خود تثبیت کرده اند.
اما وقتی صحبت از عمل میرسد، گزیده ی مقالات اغلب نادیده گرفته می شود. به همین دلیل است که در اینجا مجموعه ای از روش های منحصر به فرد را جمع آوری کرده ایم تا به شما نشان دهیم گزیده ی یک مطلب یا مقاله چیزی فراتر از یک متن ساده در صفحه اصلی یک وبسایت است. نمونه های زیر ظاهر گزیده ی مطالب را بهبود میبخشند و حتی قابلیت هایی را به آنها اضافه میکنند.
تب های گزیده های مطالب
هنگامی که فضا محدود است، استفاده از این تب های ناوبری میتواند عالی باشد. به این تب ها به عنوان راهی برای نمایش پست ها از منظر یک دسته بندی خاص نگاه کنید. همانطور که در نمونه مثال زیر مشاهده میکنید، در هر تب تنها گزیده ی یک مقاله را مشاهده میکنید. اما با کمی خلاقیت در کد نویسی میتوانید از این تب ها در صفحه اصلی خود برای نمایش دسته بندی های مقالات استفاده کنید.
حتی میتوانید در هر دسته بندی از 5 مقاله استفاده کنید. در این مورد خاص، دیدگاه کاربر توسط جاوا اسکریپت شناسایی می شود و برای نمایش مقاله در یک نقطه خاص در طول اسکرو استفاده می شود. این باعث استفاده از برخی جلوه های ویژه فانتزی می شود.
اسکرول تا زمان رسیدن به محتوای کامل مقاله
یک روش دیگر برای استفاده از گزیده های مطالب این است که از آنها در صفحه اصلی خود مقاله استفاده کنیم. در نمونه زیر گزیده ی مطلب در زمان بارگذاری مقاله نشان داده میشود. سپس با اسکرول کردن به سمت پایین محتوای مقاله نمایش داده میشود. در این نمونه خاص صفحه نمایش کاربر از طریق جاوا اسکریپت شناسایی شده و از آن برای نمایش مقاله در نقطه مشخص در زمان اسکرول کردن استفاده میشود.
استفاده از گزیده های مطالب در کارت ها
کارت های محتوا به شیوه ای بسیار محبوب برای نمایش لیستی از مقالات تبدیل شده اند(روشی که در لرن سورس برای مشاهده آخرین مطالب در صفحه اصلی استفاده شده است). در یک طراحی عاقلانه، کارت ها می توانند بسیار سازمان یافته و جمع و جور باشند. علاوه بر این، آنها همچنین یک جلوه بصری جداگانه بین پست ها ایجاد می کنند که خواندن و تماشای آنها را ساده تر میکند.
نکته ی جالبی که در مورد مثال زیر وجود دارد این است که به جای اینکه در هر کارت یک لینک برای هدایت کاربر به صفحه ی نمایش نسخه کامل مقاله وجود داشته باشد، محتوای مقاله در همین کارت بعد از کلیک بر روی یک دکمه به صورت کامل نمایش داده میشود. در اینجا استفاده از اسکرول میتواند فوق العاده مفید است. البته این حالت برای نمایش محتوای کوتاه تر مفید است.
یک تصویر درست و حسابی، قطعا می تواند به عنوان راهی مفید برای تشویق خوانندگان برای حرکت به سمت مقاله مورد نظر شما باشد. اگر سایت شما تمرکز خود را بر استفاده از تصاویر جالب گذاشته است، این روش برای شما میتواند عالی باشد. در این صورت میتوان از CSS برای نمایش گزیده ی مطالب زمانی که کاربران به موس بر روی تصویر حرکت میکنند استفاده کرد. این روش برای هر سایتی مناسب نیست، اما زمانی که شما از تصاویر زیادی در وب سایتتان استفاده میکنید این روش میتواند مفید باشد.
نمایش محتوای گزیده از طریق CSS(روش سنتی)
روشی دیگر برای زمانی که از CSS برای نمایش گزیده ای از مطالب استفاده میکنید این است که به جای استفاده از کارت ها در چندین ستون آنها را به صورت افقی به شکل سنتی زیر هم قرار دهیم. مزیت این روش این است که به ما اجازه میدهد از فضای بیشتری برای نمایش گزیده و جزئیات مقاله بهره مند شویم.
در نمونه مثال زیر صفحه ای از یک مقاله مد نظر است و از یک صفحه کامل برای نشان دادن عنوان، تصاویر و گزیده مطالب استفاده میکند. با اسکرول کردن به سمت پایین میتوانید محتوای کامل مقاله را مشاهد کنید. این روش برای مقالات طولانی مفید است.
استفاده از افکت ها برای نمایش گزیده ای از مطالب
در نگاه اول، گزیده های زیر به اندازه کافی خوب به نظر میرسند. اما با قرار دادن نشانگر موس بر روی هر کدام اتفاق جالبی می افتد. با این کار گزیده ای که بر روی آن قرار داریم کمی گسترده تر شده و محیط دیگر گزیده ها تیره میشود. این روش عالی برای زمانی است که میخواهید گزیده های خود را در کانون توجه قرار دهید
مثال های بالا ثابت می کنند که گزیده ها نباید خسته کننده باشند. در حقیقت، آنها می توانند برای شما یک دارایی محسوب شوند. با کمی خلاقانه فکر کردن، میتوانیم قابلیت های بزرگتری را بر روی آنها فعال کنیم و از آنها برای جذب کاربران استفاده کنیم.
منبع: لرن سورس
