آیا به دنبال راهی برای اضافه کردن حاشیه گرادیان به گالری تصویر در المنتور هستید؟ تصاویر نقش بسیار مهمی در هر وبسایت دارند. تصویر می تواند به راحتی اطلاعات بصری در مورد خدمات شما را به مشتریان ارائه دهد. اگر می خواهید به بخش گالری تصاویر خود یک نگاه منحصر به فرد بدهید، این مقاله به شما کمک خواهد کرد.
المنتور ابزارک گالری تصاویر را ارائه می دهد که می توانید از آن برای نمایش تصاویر استفاده کنید. شما می توانید محصولات، خدمات، پیشنهادات و بسیاری از امکانات خود را در بخش گالری به مشتریان خود نمایش دهید. افزودن حاشیه با رنگ های گرادیان به قسمت گالری تصاویر شما می تواند ظاهری شگفت انگیز و متفاوت به گالری شما ببخشد که به راحتی توجه کاربران را جلب می کند.در این مقاله، به شما آموزش خواهیم داد که با ساده ترین روش ممکن حاشیه گرادیان به تصاویر در گالری خود با استفاده از ویراشگر المنتور اضافه کنید. (برای استفاده از این قابلیت باید المنتور خود را به نسخه ی پرمیموم ارتقا دهید)
نکته : برای خرید افزونه المنتور پرو اینجا کلیک کنید.
نحوه اضافه کردن حاشیه گرادیان به گالری تصویر در المنتور
صفحه ای را با ویرایشگر المنتور باز کنید و روی آیکون “+” کلیک کنید تا یک بخش اضافه شود. سپس یک ستون تکی را برای بخش گالری تصاویر انتخاب کنید.
حالا از قسمت ابزارک ها، به دنبال گالری بگردید و آن را بکشید و در بخش ساخته شده قرار دهید.
بعد از افزودن گالری، می توانید آن را سفارشی سازی و طراحی کنید. ابتدا از گزینه های تنظیمات، نوع گالری را مانند تک تصویره یا چند تصویری را انتخاب کنید. سپس باید تصاویر را اضافه کنید و ترتیب آن ها را تعیین کنید. همچنین می توانید ویژگی بارگذاری تنبل را فعال یا غیرفعال کنید.
قسمت طرح بندی
شما همچنین می توانید طرح بندی را به شبکه (grid)، ماسونری (masonry) یا متعادل سازی (justified) تغییر دهید. پس از آن، می توانید تعداد ستون ها، فاصله بین آیتم ها و اندازه های تصویر را تنظیم کنید. از گزینه Overlay می توانید عنوان و توضیحاتی را به آن اضافه کنید.
قسمت استایل
حالا به بخش استایل (Style) بروید در آن گزینه های مختلفی برای طراحی بخش گالری وجود دارد.
قسمت پیشرفته
برای افزودن یک حاشیه گرادیان، باید چند خط کد CSS را روی ابزارک اضافه کنید. پس از اتمام ویرایش و استایل کردن آن به قسمت پیشرفته بروید و سپس به قسمت (CSS) سفارشی بروید و کد های CSS زیر را در آنجا اضافه کنید.
selector .elementor-gallery-item
{
background-image:
linear-gradient(to left,#FFA500,#c779d0,#FFFF00,#808000);
padding: 5px 5px 5px 5px;
}
می توانید کد ها را همانطور که هستند نگه دارید یا آن ها را مطابق با نیاز خود تغییر دهید. برای افزودن رنگ، می توانید کد رنگ را بر اساس نیاز های خود تغییر دهید. این کد رنگ مورد نظر شما را در حاشیه گرادیانتی اعمال خواهد کرد. همچنین می توانید مقدار فاصله خارجی را تغییر دهید تا نحوه نمایش آن را ببینید.
تمام شد! حاشیه گرادیانتی برای بخش گالری تصاویر شما آماده است. وقتی کار خود را به پایان رسانده اید، بر روی دکمه انتشار یا بروز رسانی کلیک کنید تا تغییرات ذخیره شوند.
