نمایش آخرین مطالب وبلاگ در صفحه اصلی فروشگاه مشابه دیجی کالا یکی از بهترین راهها برای جلب توجه کاربران، افزایش تعامل و هدایت آنها به محتوای آموزشی، خبری یا تبلیغاتی است. وبسایتهای موفق مانند دیجیکالا از این تکنیک برای بهبود تجربه کاربری (UX)، افزایش زمان ماندگاری کاربران و تقویت سئوی سایت استفاده میکنند.
در این قسمت از دوره آموزش طراحی سایت فروشگاهی با استفاده از ویجت حلقه شبکه (Loop Grid) المنتور پرو، میتوانید بدون نیاز به کدنویسی یا افزونههای اضافی، بخشی پویا و جذاب مشابه دیجیکالا در صفحه اصلی سایت خود ایجاد کنید.
آموزش گامبهگام نمایش آخرین مطالب وبلاگ در صفحه اصلی
۱. ایجاد قالب آیتم وبلاگ (Loop Item)
برای نمایش مطالب وبلاگ بهصورت سفارشی، ابتدا باید یک قالب حلقه شبکه ای (Loop Item) در المنتور طراحی کنید. این قالب تعیین میکند که هر مطلب وبلاگ چگونه نمایش داده شود.
- به پیشخوان وردپرس > المنتور > قالبها بروید.
- از منوی قالبها، گزینه Loop را انتخاب کنید و روی افزودن جدید کلیک کنید.
- نوع قالب را روی Loop Item تنظیم کنید و نامی مانند «قالب آیتم وبلاگ دیجیکالا» انتخاب کنید.
- در ویرایشگر المنتور:
- تصویر شاخص (Post Thumbnail): ویجت تصویر شاخص را اضافه کنید و اندازه آن را روی «متوسط» یا «بزرگ» تنظیم کنید.
- عنوان نوشته (Post Title): ویجت عنوان پست را زیر تصویر قرار دهید و فونت خوانا (مانند IRANSans یا Vazir) انتخاب کنید.
- خلاصه مطلب (Post Excerpt): برای نمایش توضیح مختصر، ویجت خلاصه مطلب را اضافه کنید و تعداد کلمات را روی ۲۰-۳۰ کلمه تنظیم کنید.
- متادیتا (اختیاری): ویجتهایی مانند تاریخ انتشار یا دستهبندی را برای اطلاعات بیشتر اضافه کنید.
- دکمه ادامه مطلب: یک دکمه با انکرتکست «بیشتر بخوانید» اضافه کنید و لینک آن را به لینک پویا (Dynamic Link) پست تنظیم کنید.
- استایلدهی: استایل قالب را ساده و مشابه دیجیکالا طراحی کنید:
- فونت عنوان: درشت و خوانا (اندازه ۱۸-۲۰ پیکسل)
- حاشیهها: حداقل حاشیه برای ظاهری تمیز
- رنگها: از پالت رنگی خنثی (مانند خاکستری و سفید) استفاده کنید.
- قالب را ذخیره کنید و منتشر کنید.
Alt Text برای تصویر: قالب آیتم وبلاگ در المنتور با تصویر شاخص، عنوان و دکمه ادامه مطلب.
۲. افزودن ویجت حلقه شبکه (Loop Grid) به صفحه اصلی
اکنون که قالب آیتم آماده است، وقت آن است که مطالب وبلاگ را در صفحه اصلی نمایش دهید:
- به پیشخوان وردپرس > صفحات بروید و صفحه اصلی سایت را با المنتور باز کنید.
- یک سکشن جدید در محل موردنظر (مانند بالای فوتر یا زیر اسلایدر) ایجاد کنید.
- ویجت Loop Grid را از پنل المنتور به سکشن بکشید.
- در تنظیمات ویجت Loop Grid:
- Loop Item: قالبی که در مرحله قبل طراحی کردید را انتخاب کنید.
- Query:
- نوع نوشته را روی Post تنظیم کنید.
- Order By: گزینه «Date» و «Descending» را انتخاب کنید تا آخرین مطالب نمایش داده شوند.
- Number of Posts: تعداد مطالب را روی ۳ یا ۴ تنظیم کنید (مشابه دیجیکالا).
- Layout:
- تعداد ستونها: ۳ ستون برای دسکتاپ و ۱ ستون برای موبایل.
- فاصله بین آیتمها: ۱۰-۱۵ پیکسل برای چینش منظم.
- یک عنوان (مانند «آخرین مطالب وبلاگ») بالای سکشن اضافه کنید. از ویجت Heading استفاده کنید و فونت را درشت و خوانا تنظیم کنید.
- یک دکمه «مشاهده همه» در کنار عنوان قرار دهید و لینک آن را به صفحه اصلی وبلاگ تنظیم کنید.
۳. تنظیم استایل مشابه دیجیکالا برای نمایش آخرین مطالب وبلاگ
برای ایجاد ظاهری مشابه دیجیکالا، استایل ویجت Loop Grid را سفارشی کنید:
- تعداد ستونها:
- دسکتاپ: 4 ستون برای نمایش منظم و جذاب.
- تبلت: ۲ ستون.
- موبایل: ۱ ستون برای خوانایی بهتر.
- فاصلهگذاری: فاصله بین آیتمها را روی ۱۰-۱۲ پیکسل تنظیم کنید تا چینش تمیز و حرفهای باشد.
- گوشههای گرد (Border Radius): برای تصاویر شاخص، مقدار Border Radius را روی ۸-۱۰ پیکسل تنظیم کنید.
- افکت هاور: در تب Style، افکت Zoom یا Scale (مثلاً ۱.۰۵) را برای تصاویر شاخص در حالت هاور فعال کنید.
- فونتها:
- عنوان: فونت IRANSans یا Vazir با اندازه ۱۸-۲۰ پیکسل.
- خلاصه مطلب: فونت کوچکتر (۱۴-۱۶ پیکسل) برای خوانایی.
- رنگها: از رنگهای خنثی (مانند خاکستری تیره برای متن و سفید برای پسزمینه) استفاده کنید تا با طراحی دیجیکالا همخوانی داشته باشد.
Alt Text برای تصویر: ویجت حلقه شبکه المنتور با استایل مشابه دیجیکالا در صفحه اصلی.
سؤالات متداول
۱. آیا برای نمایش آخرین مطالب وبلاگ در صفحه اصلی به افزونه اضافی نیاز است؟
خیر، با المنتور پرو و ویجت حلقه شبکه (Loop Grid) میتوانید این کار را بدون افزونه اضافی انجام دهید.
۲. چگونه میتوانم مطالب وبلاگ را فقط از یک دستهبندی خاص نمایش دهم؟
در تنظیمات Query ویجت Loop Grid، گزینه «Categories» را انتخاب کنید و دستهبندی موردنظر را مشخص کنید.
۴. چگونه میتوانم ظاهر مطالب را دقیقاً شبیه دیجیکالا کنم؟
از فونتهای خوانا (مانند IRANYekanX)، رنگهای خنثی، گوشههای گرد برای تصاویر و افکتهای هاور ملایم استفاده کنید.
نتیجهگیری
با اجرای این آموزش، میتوانید نمایش آخرین مطالب وبلاگ را بهصورت پویا و با ظاهری مشابه دیجیکالا در صفحه اصلی سایت خود انجام دهید. این روش نه تنها ظاهر سایت شما را حرفهایتر میکند، بلکه باعث افزایش تعامل کاربران، بهبود سئو و تقویت اعتبار برند شما میشود. برای بهروزرسانی خودکار مطالب، نیازی به ویرایش دستی نیست و ویجت حلقه شبکه المنتور این کار را بهصورت پویا انجام میدهد.
2 پاسخ
خیلی آموزش هاتون عالیه حرف ندارین
زنده باشید ، خوشحالم که استفاده کردید