آموزش ساخت گالری تصاویر در ویژوال کامپوزر

افزونه ویژوال کامپوزر یکی از افزونه های wordpress است که برای ایجاد صفحات جذاب و حرفه ای به کار می رود. این افزونه صفحه ساز گرافیکی شامل المان های متنوعی است که هر کدام یک امکان را نوشته یا برگه شما اضافه می کنند. تعدادی از این المان ها شامل زیر هستند.

• تصویر
• گالری تصویر
• دکمه
• بلاگ متن
• شمارنده
• نقشه
• منو
• جدول قیمت گذاری
• برد کرامپ
• تب ها
• گالری محصول
• سبد خرید
• صفحه محصولات
• نظرات

و غیره.

در این آموزش می خواهیم نحوه قرار دادن تصویر در یک برگه با ویژوال کامپوزر را آموزش دهیم.

پیشنهاد می کنم این افزونه را از مارکت های معتبر بخرید. لینک خرید افزونه را در ادامه گذاشتم:

https://www.rtl-theme.com/wpbakery-page-builder-wordpress-plugin/

ابتدا از پیشخوان وردپرس برگه ای را باز می کنیم که می خواهیم تصویر را در آن اضافه کنیم و سپس المان تصویر را از لیست المان ها انتخاب می کنیم. بلوک تصویر اضافه می شود. با زدن دکمه ویرایش تنظیمات تصویر باز شده که می توانید تصویر اضافه کنید و ویژگی هایی را به آن بیافزایید. در تنظیمات تصویر در ویژوال کامپوزر دو سربرگ وجود دارد که در ادامه تنظیمات هر سربرگ را شرح می دهیم:

کار با سربرگ عمومی المان تصویر

برای ساخت گالری تصاویر با تنظیمات عمومی المان تصویر آشنا شوید.

• افزودن تصویر: در این بخش با زدن علامت + صفحه تنظیم تصویر و کتابخانه پرونده های چند رسانه ای باز می شود و می توانید یک تصویر بارگذاری کرده و یا از تصاویری که قبلا در مدیریت رسانه در پیشخوان وردپرس اضافه کرده اید استفاده کنید.
• چیدمان تصویر: برای ایجاد گالری تصاویر در ویژوال کامپوزر از این بخش محل تصویر را در صفحه مشخص می کنید که سمت راست، چپ یا میانه باشد.
• اندازه تصویر: تصویری که اضافه می کنید را مشخص کنید تصویر کاملی نمایش داده شود یا برای آن سایز برش را تنظیم می کنید.
• سبک تصویر: برای تصویر خو سبک و حالت نمایش انتخاب می کنید مانند دایره، سایه دار و غیره. البته می توانید آن را بدون سبک رها کنید تا با حالت پیش فرض در سایت نمایش داده شود.
• تنظیم نسبت ابعاد: در این بخش می توانید برای تصویر خود ابعاد مشخص کنید برای مثال 1 در 1، 2 در 3، و یا ابعاد سفارشی خودتان را برای آن تنظیم کنید.
• نمایش عنوان و توضیحات تصویر: اگر برای تصویر خود عنوان یا توضیح اضافه کنید در این قسمت مشخص می کنید که این متن در کجای تصویر نمایش داده شود.
• پیوند: در بخش پیوند تعیین می کنید که با کلیک روی تصویر چه چیزی باز شده و یا چه رویدادی انجام شود و تصویر به کجا پیوند داده شود. برای مثال تصویر اصلی در یک پنجره جدید باز شده، زوم شود، یا اینکه با انتخاب سفارشی و قرار دادن لینک دلخواه، تصویر را به URL مورد نظر لینک دهید.

سربرگ طراحی ویژوال کامپوزر برای ویرایش تصویر

در این بخش از تنظیمات المان تصویر در ویژوال کامپوزر تنظیمات نمایش تصویر را انجام دهید.

• متن: در این بخش رنگف چیدمان، اندازه، نوع فونت، سبک آن و فاصله بین حروف را انتخاب می کنیم.
• پس زمینه: برای تصویر خود رنگ و پس زمینه انتخاب می کنید.
• اندازه ها: برای تصویر خود عرض، ارتفاع، حداقل و حداکثر عرض را تعیین می کنید.
• فاصله: برای تصویر اندازه مارجین (فاصله از المان های دیگر)، پدینگ (فاصله از المان های داخلی) را تنظیم کنید.
• حاشیه: اگر بخواهید تصویر شما حاشیه داشته باشد در این بخش تنظیمات آن را انجام می دهید.
• موقعیت: موقعیت تصویر شامل ایستا، نسبی، ثابت و غیره است.
• سایه جعبه: برای تصویر سایه گذاشته و نوع و رنک آن را در این بخش تعیین کنید.
• انیمیشن: اگر نحوه ظاهر شدن تصویر برای تان مهم است از این بخش مشخص کنید که تصویر چگونه ظاهر شود. برای مثال با حالت محو شدن، از سمت راست ، چپ، بالا، پایین و غیره به آن انیمیشن می دهید.
• کلاس css: در این بخش نام کلاسی که برای کد های css تعریف کرده اید را قرار می دهید تا به تصویر اعمال شود.
• مخفی روی: المان تصویر را برای دستگاه های محتلف مخفی می کنید.

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