آموزش المان تصویر تکی در ویژوال کامپوزر

المان تصویر تکی در ویژوال کامپوزر (Visual Composer) یکی از پر استفاده ترین المان ها در این افزونه می باشد. هر موقع بخواهیم در صفحه خود از عکس یا تصویری استفاده کنیم. باید از المان تصویر تکی(Single Image) استفاده کنیم. در این جلسه از سری آموزش ویژوال کامپوزر، در خدمت شا هستیم تا به صورت کامل این المان مفید را برای شما توضیح دهیم. تا به صورت 100% با نحوه کار این المان در ویژوال کامپوزر آشنا شوید. با ما همراه باشید.

المان تصویر تکی در ویژوال کامپوزر

المان تصویر تکی یا Single Image  می تواند هر نوع عکسی که مایل باشید را با افکت های متنوع در صفحه قرار دهد. همچنین می توانید عکس خود را در چند سایز یا اندازه متفاوت با استفاده از این المان برش دهید. می توانید عکس هایی با فرمت jpeg , bmp , png , gif و بسیاری از فرمت های عکس دیگر را با اسفاده از المان تصویر تکی در ویژوال کامپوزر در صفحه طراحی خود قرار دهید.

اضافه نمودن المان تصویر تکی در ویژوال کامپوزر

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

• عنوان ابزارک
• آدرس تصویر
• تصویر یا لینک خارجی
• سایز تصویر
• اضافه کردن عنوان
• جای تصویر
• استایل تصویر
• عملکرد کلیک کردن
• css متحرک
• آی دی و کلاس اضافی

در تب تنظیمات طراحی نیز می توانید سایر خصوصیات دلخواه حاشیه و مارجین و پس زمینه را تنظیم نمایید.

آموزش تنظیمات تب عمومی المان تصویر تکی در ویژوال کامپوزر

عنوان ابزارک

می توانید اسم یا عنوانی برای المان تصویر تی در این قسمت وارد کنید. این عنوان در بالای تصویر نمایش داده می شود.

آدرس تصویر

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

• کتابخانه رسانه ها
• لینک خارجی
• ویژگی تصویر

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

لینک خارجی: منظور از لینک خارجی این می باشد که شما عکس موردنطر خود را در هاست خود آپلود نمی کنید. و با گذاشتن لینک خارجی عکس در سایت خود، باعث می شود پهنا باند شما کمتر استفاده گردد. البته توجه کنید که استفاده از لینک خارجی یک ریسک می باشد. چون اگر عکس در هاست اصلی پاک شود، شما هم به مشکل بر خواهید خورد. در نتیجه هترین راه استفاده از کتابخانه رسانه ها می باشد.

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

---

تصویر یا لینک خارجی

اگر گزینه کتابخانه رسانه ها را انتخاب نماید در پایین با کلیک بر روی علامت + سبز رنگ می توانید عکس مورد نظر خود را انتخاب نماید. گر گزینه لینک خارجی را انتخاب کنید، یک جعبه متنی با عنوان لینک خارجی ظاهر می شود که باید آدرس کامل و مستقیم عکس را در آن وارد نمایید.

سایز تصویر یا اندازه تصویر

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

• Thumbnail
• Medium
• Large
• Full
• Width x Height

Thumbnail: عکس را در سایز یا اندازه تامبنیل یا بند انگشتی قرار می دهد. قالب وب سایت شما این مورد را تنظیم می نماید.

Medium: عکس را در سایز متوسط قرار می دهد.

Large: عکس را کمی بزرگتر از حالت متوسط یا Medium قرار می دهد.

Full: عکس را به صورت تمام عرض و به همان سایزی که شما تنظیم کرده اید در صفحه قرار می دهد.(توصیه می شود)

Width x Height: به صورت دلخواه نیز می توانید طول و عرض را برای عکس مورد نظر خود سفارشی تنظیم نمایید.

---

اضافه کردن عنوان

اگر تیک این گزینه را فعال کنید، می توانید نامی که برای این عکس در نظر می گیرد را در پایین عکس نمایش دهید.

جای تصویر یا مکان تصویر

عکس را می توانید در سه حالت چپ،راست،وسط تنظیم نمود. البته در بیشتر مواقع وسط تنظیم می شود.

استایل تصویر

با استفاده از استایل تصویر می توانید افکت هایی بسیار زیبایی به عکس خود اضافه نماید. برای مشاهده هر کدام از استایل ها می توانید تک به تک آنها را تست و بررسی نمایید. این استایل ها در زیبایی صفحه شما می توانند بسیار تاثیر بگذارند.

عملکرد کلیک کردن

با استفاده از این قسمت می توانید برای زمانی که بر روی عکس کلیک می شود رویداد متفاوت در نظر بگیرید. موقع کلیک کاربر بر روی عکس می توانید یکی از حالت های زیر را تنظیم نمایید:

• هیچکدام
• لینک به تصویر بزرگ
• باز کردن Pretty Photo
• باز کردن لینک سفارشی
• زوم

هیچکدام: موقع کلیلک کردن کاربر بر روی عکس هیچگونه عملی یا Action انجام نمی شود.

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

باز کردن Pretty Photo: این یک افکت جاوا اسکریپت می باشد که می تواند همه عکس های صفحه را در یک اسلایدر جذاب به صورت خیلی زیبا نمایش دهد.

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

زوم: با حرکت موس بر روی عکس، به صورت خیلی زیبا عکس زوم(Zoom) می گردد.

---

css متحرک

برای اضافه نمودن افکت css از این قسمت استفاده کنید. افکت css می تواند زیبایی جذابی بر روی عکس قرار دهد.

---

سخن پایانی

به پایان یکی دیگر از آموزش های جذب افزونه پرقدرت ویژوال کامپوزر [wpbakery page builder]رسیدیم. امیدوارم از این آموزش نهایت لذت را برده باشید. ما آماده دریافت سوالات و انتقادادت و پیشنهادات شما سروران گرامی هستیم.