
ویجت گالری در المنتور
المان گالری در المنتور ابزاری قدرتمند برای نمایش تصاویر به شکل حرفهای و کاربرپسند است. با این آموزش یاد بگیرید چگونه گالریهای زیبا و واکنشگرا طراحی کنید.
در دنیای طراحی سایت، تصاویر و محتوای بصری اهمیت بسیار بالایی دارند. هر وبسایتی که بخواهد جذاب و حرفهای به نظر برسد، نیازمند بخشهایی است که تصاویر را به شکل مرتب، زیبا و کاربرپسند نمایش دهد. المنتور با ارائهی المان گالری (Gallery Widget) این امکان را فراهم کرده تا بدون یک خط کدنویسی، تصاویر سایت را به شکل گالریهای مدرن و تعاملی نمایش دهید.
المان گالری در المنتور برای انواع سایتها کاربرد دارد؛ از وبلاگها و سایتهای عکاسی گرفته تا فروشگاههای آنلاین و سایتهای شرکتی که میخواهند پروژهها و نمونه کارهای خود را به شکلی جذاب نمایش دهند.
Table of contents [Show]
- 1 کاربردهای ویجت گالری در المنتور
- 2 ویژگیها و مزایای ویجت گالری در المنتور
- 3 بخش محتوای ویجت گالری در المنتور
- 4 بخش استایل در ویجت گالری المنتور
- 5 بخش پیشرفته در ویجت گالری المنتور
- 5. 1 گزینه طرح بندی در Gallery Widget المنتور
- 5. 2 بخش موشن افکت در ویجت گالری المنتور
- 5. 3 بخش تبدیل در ویجت گالری المنتور
- 5. 4 گزینه پس زمینه در المان گالری المنتور
- 5. 5 تنظیمات حاشیه ویجت گالری در المنتور
- 5. 6 گزینه ماسک المان گالری در المنتور
- 5. 7 آموزش واکنش گرا در ویجت گالری در المنتور
- 5. 8 گزینه ویژگی ها در Gallery Widget المنتور
- 5. 9 بخش css سفارشی ویجت گالری وردپرس
- 6 آموزش قدم به قدم ساخت گالری در المنتور
- 7 نکات سئو سایت و بهینهسازی برای ویجت گالری المنتور
- 8 جمعبندی
کاربردهای ویجت گالری در المنتور
المان گالری بسیار انعطافپذیر است و میتواند در بخشهای مختلف سایت استفاده شود. رایجترین کاربردها عبارتند از:
نمایش نمونه کارهای عکاسی یا طراحی
عکاسان، طراحان گرافیک و هنرمندان میتوانند آثار خود را در قالب گالری زیبا و تعاملی نمایش دهند.
گالری محصولات در فروشگاههای آنلاین
تصاویر محصولات را میتوان به شکل شبکهای یا اسلایدر نمایش داد تا کاربران تجربه خرید بهتری داشته باشند.
نمایش پروژهها و دستاوردهای شرکتی
شرکتها میتوانند پروژهها و نمونه کارهای خود را با دستهبندی و افکتهای مختلف در گالری نشان دهند.
آرشیو تصاویر وبلاگ
برای وبلاگها، نمایش تصاویر مرتبط با هر مقاله در یک گالری حرفهای باعث میشود صفحه جذابتر و تعاملیتر شود.
نمایش رویدادها و مراسمها
سایتهای خبری یا سایتهای سازمانی میتوانند تصاویر رویدادها، همایشها و سمینارها را در قالب گالری مرتب نمایش دهند.
پیشنهاد مطالعه: المان نوشتهها در المنتور چیست؟
ویژگیها و مزایای ویجت گالری در المنتور
المان گالری المنتور امکانات فراوانی دارد که آن را از سایر روشهای نمایش تصاویر متمایز میکند:
۱. طراحی بدون کدنویسی
هر بخشی از گالری، از اندازه تصاویر گرفته تا فاصله بین آنها و افکتهای حرکت، به راحتی قابل تنظیم است.
۲. انواع Layout و سبکها
میتوانید تصاویر را به صورت Grid، Masonry، Justified یا Carousel نمایش دهید تا ظاهر سایت حرفهای و مدرن شود.
۳. افکتهای انیمیشن و تعامل کاربر
افکتهای Hover، Lightbox و افکتهای حرکتی باعث میشوند گالری جذابتر و تعاملی شود.
۴. واکنشگرایی کامل
گالری به صورت کامل Responsive است و تصاویر روی موبایل، تبلت و دسکتاپ به بهترین شکل نمایش داده میشوند.
۵. پشتیبانی از تصاویر داینامیک
اگر از Custom Fields یا ACF استفاده میکنید، المان گالری میتواند تصاویر داینامیک شما را هم نمایش دهد.
پیشنهاد مطالعه: روش های بهینه سازی تصاویر سایت
شما میتوانید فیلم کامل آموزش این ویجت را که توسط استاد اسماعیلی از اساتید مجرب مجموعه آرتا رسانه، تدریس شده، در ادامه به صورت 100% رایگان مشاهده کنید. برای دیدن ویدئوی این المان به کانال یوتیوب آرتا رسانه مراجعه نمایید.
جادوی گالری در المنتور!
در این ویدیو یاد میگیری چطور با المان گالری (Gallery Widget) در المنتور تصاویر سایتت را به بهترین شکل نمایش بدهی.
بخش محتوای ویجت گالری در المنتور

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

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

بخش پیشرفته (Advanced) در ویجت سربرگ (Heading) المنتور، مجموعه ای از تنظیمات قدرتمند را ارائه می دهد که فراتر از محتوا و استایل پایه هستند و به شما کنترل دقیقی بر چید مان، فاصله و جلوههای ویژه میدهند در این بخش میتوانید حاشیه های داخلی (Padding) و خارجی (Margin) را برای کنترل دقیق فضای اطراف تیتر تنظیم کنید همچنین، گزینه هایی برای افزودن افکت های حرکتی جذاب مانند انیمیشن های ورود، تنظیمات ریسپانسیو برای پنهان کردن تیتر در دستگاه های خاص، و افزودن کلاس های CSS سفارشی یا شناسههای ID برای استایل دهی اختصاصی وجود دارد. این تنظیمات پیشرفته به طراحان اجازه می دهد تا کنترل کامل بر موقعیت یابی و تعامل پذیری تیتر در صفحه داشته باشند.
در بخش طرح بندی (Layout) یا همان تنظیمات ابعادی در تب استایل ویجت المنتور، شما می توانید نحوه قرارگیری و اندازه تصویر را در صفحه کنترل کنید این تنظیمات شامل تعیین عرض و حداکثر عرض با استفاده از واحدهای مختلف مانند پیکسل یا درصد هستند که انعطاف پذیری بالایی برای نمایش تصویر در دستگاههای مختلف فراهم می کنند همچنین، با استفاده از گزینه تراز بندی میتوانید موقعیت افقی تصویر چپ، راست، وسط را تنظیم کرده و با مدیریت حاشیههای داخلی و خارجی در بخش پیشرفته، فضای اطراف تصویر را مدیریت کنید تا مطمئن شوید تصویر به درستی و به صورت واکنش گرا در جریان کلی طراحی صفحه شما قرار می گیرد.
بخش موشن افکت در ویجت گالری المنتور
گزینه موشن افکت به شما این قابلیت را می دهد که انیمیشنها و جلوههای حرکتی جذاب به عناصر صفحه خود اضافه کنید تا وب سایت شما پویاتر و جذاب تر شود . این تنظیمات شامل دو دسته اصلی هستند: انیمیشنهای ورودی که هنگام بارگذاری یا اسکرول کاربر به سمت عنصر فعال می شوند؛ و افکتهای اسکرول که با حرکت دادن صفحه، باعث ایجاد جلوههایی مانند حرکت پارالاکس عمودی یا افقی، شفافیت تدریجی یا مقیاس پذیری می شوند استفاده از موشن افکت ها می تواند توجه کاربر را به بخشهای خاصی جلب کند، اما استفاده بیش از حد از آنها ممکن است باعث حواس پرتی یا کاهش عملکرد وب سایت شود.
بخش تبدیل در ویجت گالری المنتور
گزینه تبدیل مجموعه ای از ابزارهای قدرتمند CSS را در اختیار شما قرار می دهد تا بتوانید ظاهر و موقعیت عناصر را بدون تأثیرگذاری بر چیدمان کلی صفحه تغییر دهید این قابلیت شامل توابعی مانند چرخش برای چرخاندن عنصر در زوایای مختلف، مقیاس برای کوچک یا بزرگ کردن اندازه آن، کج کردن برای ایجاد جلوه های زاویه دار، و انتقال برای جابجایی دقیق عنصر در محورهای افقی و عمودی است با استفاده از این ابزارها، میتوانید جلوههای بصری خلاقانه و تعاملی ایجاد کنید و با فعال سازی گزینه هاور ، این تبدیلها را به صورت انیمیشنی هنگام قرار گرفتن ماوس کاربر روی عنصر اعمال نمایید.
گزینه پس زمینه در المان گالری المنتور
در بخش پسزمینه المنتور، که در تنظیمات سکشنها، ستونها، کانتینرها و حتی برخی ویجتها در دسترس است، شما می توانید ظاهر پشت عناصر خود را به طور کامل سفارشی سازی کنید . این بخش شامل چند ین گزینه قدرتمند است: می توانید از یک رنگ کلاسیک ساده استفاده کنید، یک گرادیانت زیبا با ترکیب دو یا چند رنگ ایجاد نمایید، یا یک تصویر را به عنوان پس زمینه آپلود کنید هنگام استفاده از تصاویر، تنظیماتی مانند موقعیت، اندازه ، و تکرار تصویر وجود دارد همچنین، در نسخه های پیشرفته تر المنتور، امکان استفاده از پسزمینه ویدئویی یا حتی نمایش اسلاید تصاویر نیز فراهم است که به شما اجازه می دهد پسزمینه هایی جذاب و تعاملی ایجاد کنید و با استفاده از پوشش پسزمینه، خوانایی متن روی تصویر را بهبود بخشید.
تنظیمات حاشیه ویجت گالری در المنتور
تنظیمات حاشیه (Border) کنترل کاملی بر خطوط اطراف هر عنصر به شما می دهد این تنظیمات به شما امکان می دهند که سبک حاشیه را انتخاب کنید مثلاً توپر ، نقطهچین ، خط چین و غیره، ضخامت دلخواه را برای هر چهار طرف تعیین کنید و رنگ حاشیه را متناسب با طراحی خود تنظیم نمایید . علاوه بر این، ویژگی بسیار کاربردی شعاع مرزوجود دارد که با استفاده از آن می توانید گوشه های تیز عنصر را گرد کنید و جلوههای بصری نرمتر یا مدرن تری ایجاد نمایید این تنظیمات به شما کمک می کنند تا عناصر مختلف صفحه را کادربندی کرده و ساختار بصری واضح تری در طراحی خود ایجاد کنید.
گزینه ماسک المان گالری در المنتور
ویژگی ماسک (Masking) به شما اجازه می دهد تا شکل ظاهری یک عنصر، مانند تصویر یا پس زمینه، را از حالت مستطیل پیش فرض خارج کنید با استفاده از این قابلیت، می توانید از اشکال آمادهای مانند دایره، لوزی، مثلث یا حتی اشکال سفارشی استفاده کنید تا محتوای شما به جای نمایش در یک قاب چهارگوش، در داخل آن شکل خاص نمایش داده شود این ویژگی یک ابزار طراحی خلاقانه است که بدون نیاز به نرمافزارهای گرافیکی پیچیده، به شما امکان می دهد جلوههای بصری منحصر به فردی ایجاد کرده و بخشهای خاصی از تصویر را پنهان یا برجسته نمایید.
آموزش واکنش گرا در ویجت گالری در المنتور
واکنش گرا (Responsive) یا واکنشگرایی در طراحی وب به رویکردی گفته می شود که در آن چید مان و ظاهر یک وب سایت به طور خودکار با اندازه صفحه نمایش دستگاه کاربر تنظیم می شود هدف اصلی این است که وب سایت شما در هر دستگاهی، از جمله رایانه های رومیزی، لپتاپها، تبلتها و تلفنهای هوشمند، به بهترین شکل ممکن نمایش داده شود و تجربه کاربری بهینه ای فراهم کند در المنتور، قابلیت های واکنش گرایی بسیار برجسته هستند و شما می توانید در حالتهای مختلف نمایشی دسکتاپ، تبلت و موبایل تنظیمات متفاوتی را برای مواردی مانند اندازه فونت، حاشیه ها، تعداد ستونها و حتی نمایش یا پنهان کردن عناصر خاص اعمال کنید.
افزونه المنتوربرای ورد پرس دارای مجموعه ای گسترده از ویژگیها است که آن را به یکی از محبوب ترین سازندگان صفحات بصری تبدیل کرده است ویژگی اصلی آن رابط کاربری کشیدن و رها کردن است که به کاربران اجازه می دهد بدون دانش کدنویسی، صفحات وب حرفه ای طراحی کنند المنتور شامل کتابخانه ای غنی از ویجتها برای افزودن انواع محتوا مانند متن، تصویر، دکمه، فرم و غیره، و همچنین قابلیت های پیشرفته ای مانند سیستم طراحی ، تنظیمات واکنشگرا برای نمایش در دستگاههای مختلف، و امکان استفاده از قالبهای آماده (Templates) است علاوه بر این، ویژگی هایی مانند ویرایش زنده کنترل کامل بر استایل دهی و گزینه های پیشرفته طرح بندی، المنتور را به ابزاری قدرتمند برای طراحان وب تبدیل کرده است.
بخش css سفارشی ویجت گالری وردپرس
در بخش پیشرفته(Advanced) المنتور پرو، گزینه CSS سفارشی یک ویژگی بسیار قدرتمند است که به کاربران امکان می دهد کدهای استایل دهی دلخواه خود را مستقیماً به یک ویجت، ستون، کانتینر یا سکشن خاص اضافه کنند این ویژگی برای طراحانی مفید است که نیاز به کنترل دقیقی فراتر از تنظیمات پیشفرض المنتور دارند، مانند اعمال جلوههای بصری منحصر به فرد یا رفع مشکلات جزئی چیدمان . با استفاده از این قابلیت، کد CSS نوشته شده تنها بر روی همان عنصر خاص اعمال می شود و بدون نیاز به دسترسی به فایل های اصلی قالب یا نصب افزونههای اضافی، امکان شخصی سازی بی نهایت ظاهر وب سایت را فراهم می کند .
آموزش قدم به قدم ساخت گالری در المنتور
در ادامه مراحل افزودن گالری در صفحه را با هم مرور میکنیم
مرحله ۱: افزودن ویجت Gallery
ابتدا در صفحه مورد نظر، ویجت Gallery را از لیست المانها بکشید و در بخش دلخواه رها کنید.
مرحله ۲: انتخاب تصاویر
در تب Content، تصاویر مورد نظر خود را اضافه کنید. میتوانید تصاویر را به ترتیب دلخواه مرتب کنید و یا آنها را به صورت خودکار بر اساس تاریخ یا دستهبندی نمایش دهید.
مرحله ۳: انتخاب Layout
انتخاب Layout یکی از مهمترین مراحل است:
- Grid: تصاویر در شبکهای منظم نمایش داده میشوند.
- Masonry: تصاویر با ارتفاعهای متفاوت اما مرتب در کنار هم قرار میگیرند.
- Justified: تصاویر به صورت کاملاً متناسب در یک ردیف قرار میگیرند.
- Carousel: تصاویر به شکل اسلایدر چرخان نمایش داده میشوند.
مرحله ۴: افزودن افکتها و Lightbox
میتوانید برای هر تصویر Lightbox فعال کنید تا با کلیک روی آن، تصویر بزرگتر نمایش داده شود. همچنین افکتهای Hover و انیمیشنهای حرکتی به جذابیت گالری کمک میکنند.
مرحله ۵: استایلدهی و شخصیسازی
در تب Style، رنگها، فاصلهها، سایهها، حاشیهها و فونتها را برای گالری تنظیم کنید. همچنین میتوانید اندازه تصاویر، لبهها و فاصله بین آنها را تغییر دهید تا ظاهر سایت کاملاً هماهنگ شود.
نکات سئو سایت و بهینهسازی برای ویجت گالری المنتور
برای اینکه گالری شما هم زیبا باشد و هم برای گوگل بهینه باشد، رعایت نکات زیر ضروری است:
بهینهسازی تصاویر
تصاویر را با سایز مناسب و فرمت فشرده بارگذاری کنید و متن جایگزین (Alt Text) مرتبط اضافه کنید.
استفاده از Lazy Load
برای افزایش سرعت صفحه و تجربه کاربری بهتر، تصاویر را به صورت Lazy Load بارگذاری کنید.
تگهای معنایی و ساختار هدینگ
عنوان بخش گالری را با تگ H2 یا H3 مشخص کنید تا گوگل ساختار صفحه را به خوبی درک کند.
افزودن لینکهای داخلی
در صورت نیاز، تصاویر را به صفحات مرتبط لینک دهید تا سئو داخلی سایت تقویت شود.
افکتها و انیمیشنها بدون فشار روی سرعت سایت
استفاده از افکتهای سبک و بهینه باعث میشود سایت سریع بماند و تجربه کاربری کاهش نیابد.
پیشنهاد ویژه: طراحی سایت اختصاصی
جمعبندی
المان گالری در المنتور (Gallery Widget) یکی از پرکاربردترین ابزارها برای نمایش تصاویر و محتواهای بصری در سایت است. با این المان میتوانید تصاویر را به شکل حرفهای، جذاب و تعاملی نمایش دهید، تجربه کاربری را افزایش دهید و حتی سئو سایت خود را بهبود ببخشید.
چه وبلاگ داشته باشید، چه سایت شرکتی یا فروشگاهی، استفاده درست از المان گالری باعث میشود سایت شما حرفهایتر و مدرنتر دیده شود و بازدیدکنندگان زمان بیشتری در سایت بمانند.
اگر طراحی سایت برای شما اهمیت دارد و میخواهید ظاهر سایتتان متفاوت و جذاب باشد، یادگیری و استفاده از Gallery Widget المنتور یکی از ضروریترین قدمهاست.

مریم گوهرزاد
مدرس و بنیانگذار هلدینگ آرتا رسانه. برنامه نویس و محقق حوزه بلاکچین
نظر خودتون رو با ما در میون بزارید
فیلدهای ستاره دار الزامی هستند . ایمیل شما منتشر نمیشود.




