کانال تلگرام

7 روش جالب برای نمایش گزیده ای از محتوا در یک وب سایت

تاریخ : ۱۷ فروردین ۱۳۹۸
گردآوری و تالیف : حمید رضا ملکی

گزیده ای از مقالات موجود در سایت می تواند نقش مهمی در تجربه کاربری سایت شما داشته باشد. آنها طعم و مزه محتوایی که در مقاله شما وجود دارد را به کاربران نشان میدهند و آنها را تشویق به کلیک بر روی مقاله و مشاهده ی کامل آن میکنند.

بسیاری از سیستم های مدیریت محتوا، مانند وردپرس ، توانایی ایجاد گزیده های دلخواه (یا نمایش تعدادی از کلمات اول یک مقاله) را به درستی در هسته خود تثبیت کرده اند.

tweet-rich-vs-plain-1920x1080

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

تب های گزیده های مطالب

هنگامی که فضا محدود است، استفاده از این تب های ناوبری میتواند عالی باشد. به این تب ها به عنوان راهی برای نمایش پست ها از منظر یک دسته بندی خاص نگاه کنید. همانطور که در نمونه مثال زیر مشاهده میکنید، در هر تب تنها گزیده ی یک مقاله را مشاهده میکنید. اما با کمی خلاقیت در کد نویسی میتوانید از این تب ها در صفحه اصلی خود برای نمایش دسته بندی های مقالات استفاده کنید.

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

See the Pen Simple Tabs Widget by Kevin Lesht (@klesht) on CodePen.

 

اسکرول تا زمان رسیدن به محتوای کامل مقاله

یک روش دیگر برای استفاده از گزیده های مطالب این است که از آنها در صفحه اصلی خود مقاله استفاده کنیم. در نمونه زیر گزیده ی مطلب در زمان بارگذاری مقاله نشان داده میشود. سپس با اسکرول کردن به سمت پایین محتوای مقاله نمایش داده میشود. در این نمونه خاص صفحه نمایش کاربر از طریق جاوا اسکریپت شناسایی شده و از آن برای نمایش مقاله در نقطه مشخص در زمان اسکرول کردن استفاده میشود.

See the Pen Element Viewport Detection by Ryan Altvater (@ryanaltvater) on CodePen.

 

استفاده از گزیده های مطالب در کارت ها

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

نکته ی جالبی که در مورد مثال زیر وجود دارد این است که به جای اینکه در هر کارت یک لینک برای هدایت کاربر به صفحه ی نمایش نسخه کامل مقاله وجود داشته باشد، محتوای مقاله در همین کارت بعد از کلیک بر روی یک دکمه به صورت کامل نمایش داده میشود. در اینجا استفاده از اسکرول میتواند فوق العاده مفید است. البته این حالت برای نمایش محتوای کوتاه تر مفید است.

See the Pen Article Card UI - Read More CSS Animation by Valentine (@wintr) on CodePen.

 

نمایش محتوای گزیده از طریق CSS

یک تصویر درست و حسابی، قطعا می تواند به عنوان راهی مفید برای تشویق خوانندگان برای حرکت به سمت مقاله مورد نظر شما باشد. اگر سایت شما تمرکز خود را بر استفاده از تصاویر جالب گذاشته است، این روش برای شما میتواند عالی باشد. در این صورت میتوان از CSS برای نمایش گزیده ی مطالب زمانی که کاربران به موس بر روی تصویر حرکت میکنند استفاده کرد. این روش برای هر سایتی مناسب نیست، اما زمانی که شما از تصاویر زیادی در وب سایتتان استفاده میکنید این روش میتواند مفید باشد.

See the Pen Text Overlay for Featured Images Using CSS Transitions by Mack Richardson (@mackorichardson) on CodePen.

 

نمایش محتوای گزیده از طریق CSS(روش سنتی)

روشی دیگر برای زمانی که از CSS برای نمایش گزیده ای از مطالب استفاده میکنید این است که به جای استفاده از کارت ها در چندین ستون آنها را به صورت افقی به شکل سنتی زیر هم قرار دهیم. مزیت این روش این است که به ما اجازه میدهد از فضای بیشتری برای نمایش گزیده و جزئیات مقاله بهره مند شویم.

See the Pen Article list concept with background image by Michal Niewitala 🍋 (@mican) on CodePen.

 

معرفی در یک صفحه کامل

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

See the Pen Article Intro Effects by Romswell Roswell Parian Paucar (@romswellparian) on CodePen.

 

استفاده از افکت ها برای نمایش گزیده ای از مطالب

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

See the Pen Reveal article display by JL (@boosmoke) on CodePen.

 

سخن پایانی

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

 

مقالات پیشنهادی

مشاهده همه مقالات
ثبت دیدگاه

برای ارسال دیدگاه لازم است ابتدا وارد سایت شوید