آموزش وردپرس قالب وردپرس قالب رايگان وردپرس درس وردپرس
نمایش تصاویر عریض در لیست لینک ها (Promoted Links) - گروه ساقه

نمایش تصاویر عریض در لیست لینک ها (Promoted Links)

اعمال دسترسی در سطح نماها و ستون های لیست
تیر ۲۱, ۱۳۹۶
ساخت تم شیرپوینت با استفاده از ابزار Color Palette
تیر ۲۷, ۱۳۹۶

نمایش تصاویر عریض در لیست لینک ها (Promoted Links)

نمایش تصاویر عریض در لیست لینک ها (Promoted Links)

با استفاده از یک سری دستور css شما به راحتی می توانید تصویر مورد نظر برای لینک های ترفیع یافته (Promoted links) را به صورت عریض وارد کنید.


لینک های ترفیع یافته عریض بجای تصاویر پیش فرض که به صورت مربع هستند، به شکل مستطیل نمایش داده می شوند، که این امر فضای بیشتر برای عناوین لینک و توضیحات آن را میسر می سازد.

تبدیل لینک های ترفیع یافته به لینک های ترفیع یافته عریض

از طریق لینک زیر می توانید این مقاله را به صورت کامل در یک فایل PDF دانلود نمایید :


با فرض بر اینکه لیست لینک های ترفیع یافته شده را به سایت اضافه کرده اید، مراحل زیر را دنبال کنید:
۱٫ فایل zip زیر که حاوی ۵ فایل css می باشد را دانلود کنید


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

۳٫ فایل انتخاب شده را در کتابخانه “دارایی های سایت” آپلود نمایید.

۴٫ به صفحه ای که می خواهید لینک های ترفیع یافته در آن نمایش داده شوند بروید.

الف. جهت ویرایش صفحه بر روی آیکون “ویرایش” کلیک کنید.

ب. در یک ناحیه متنی از پایین صفحه کلیک کنید.

ج. بر روی زبانه “درج” کلیک کنید.

۵٫ اکنون یک webpart ویرایش دستور(script editor) در صفحه وارد کنید.

الف. بر روی تنظیمات webpart کلیک کنید.

ب. به پایین حرکت کرده و بر روی دسته “رسانه و محتوا” کلیک کنید.

ج. بر روی webpart ویرایش دستور کلیک کنید.

د. بر روی گزینه Add یا انتخاب کلیک کنید.

۶٫ بر روی webpart ویرایش دستور بمانید و بر روی فلش بالاپایینی کلیک کنید، ویرایش webpart را انتخاب کنید.

۷٫ اکنون یک گزینه Edit Snippet و یا ویرایش جزءکد باید ظاهر شود، بر روی آن کلیک کنید.

۸٫ یک لینک ارتباط به فایل css در کتابخانه دارایی های سایت در script editor وارد کنید. فرمت لینک ارتباطی باید به این شکل باشد :

<link href=”{URL to css file in Site Assets library}” rel=”stylesheet” type=”text/css” />

بطور مثال :

<link href=”../SiteAssets/Promoted-Links-wide-3-per-row.css” rel=”stylesheet” type=”text/css” />

۹٫ بر روی دکمه درج(insert) کلیک کنید تا script editor ذخیره شود.

۱۰٫ بر روی دکمه تایید(ok) در پنجره مشخصات webpart کلیک کنید تا بسته شود، سپس صفحه را ذخیره کنید.

مثالی از web part لینک های ترفیع یافته با تصاویر عریض در دو لینک

نکته : تصاویر شما برای بهترین حالت نمایش باید دارای اندازه شامل ۲۲۵ پیکسل برای عرض و ۱۵۰ پیکسل برای ارتفاع باشد.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *