این نوشته قسمت 7 از مجموع 8 در سری آموزش کامل ویژوال کامپوزر می باشد

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

 

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

المان تصویر تکی یا Single Image از دیگر المان های پر استفاده در افزونه ویژوال کامپوزر است.

برای قرار دادن هر عکس و یا تصویری در صفحه از این المان استفاده می شود. با استفاده از المان تصویر تکی یا Single Image قادر خواهید بود هر نوع عکسی را با هر اندازه و افکتی به صفحه خود اضافه کنید.

همچنین این المان امکان برش و طراحی تصاویری با فرمت های bmp، jpeg، gif، png و… را به شما می دهد.

 

برای افزودن المان تصویر تکی یا Single Image به صورت زیر عمل کنید:

  1. با توجه به مقاله ایجاد صفحه سفارشی یک صفحه جدید ایجاد کنید.
  2. جهت باز شدن صفحه حاوی المان های ویژوال کامپوزر بر روی علامت + کلیک کنید.
  3. در صفحه باز شده بر روی المان تصویر تکی کلیک کنید.

 

انتخاب المان تصویر تکی

 

  1. با افزودن المان تصویر تکی به صفحه، پنل تنظیمات مربوط به آن نیز ظاهر می گردد که دارای دو زبانه “عمومی” و “تنظیمات طراحی” است.

پنل تنظیمات تصویر تکی

 

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

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

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

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

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

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

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

تصویر: اگر در قسمت آدرس تصویر گزینه “کتابخانه رسانه ها” را انتخاب کنید، در این قسمت محلی برای درج تصویر به نمایش در می آید که می توان با کلیک بر روی + تصویر مورد نظر را به صفحه اضافه کرد.

 

افزودن تصویر در صفحه

 

در صورت استفاده از لینک خارجی، جعبه ای متنی با عنوان لینک خارجی به نمایش در می آید. این جعبه محل درج آدرس کامل و مستقیم عکس مورد نظر است.

سایز تصویر: شما می توانید پنج حالت سایز تصویر را برای تصویر مورد نظر خود انتخاب کنید که این پنج حالت عبارتند از: Thumbnail – Medium – Large – Full- Width x Height

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

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

استایل تصویر: این گزینه امکان افزودن افکت های بسیار زیبا و جذاب را فراهم می آورد. استفاده از استایل ها در زیبایی صفحه تاثیر بسزایی دارند.

عملکرد کلیک کردن: با استفاده از این قسمت می توانید مشخص کنید که با کلیک بر روی تصویر چه رویدادی رخ دهد. عملکرد کلیک کردن شامل سه حالت هیچکدام، لینک به تصویر بزرگ، باز کردن pretty photo، بازکردن لینک سفارشی و زوم می باشد. در زیر به توضیح کارایی هر کدام از گزینه های ذکر شده می پردازیم:

هیچکدام: وقتی که بر روی تصویر کلیک شود هیچ رویدادی رخ نمی دهد.

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

باز کردن pretty photo: این گزینه افکتی از جاوا اسکریپت است که تمامی عکس های صفحه را در یک اسلایدر جذاب به نمایش در می آورد.

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

زوم: با حرکت اشاره گر ماوس روی عکس، عکس به صورت زوم به نمایش در می آید.

CSS متحرک: با استفاده از این قسمت می توانید افکت های CSS را بر روی تصویر اعمال کنید. افکت های CSS بر جذابیت تصویر می افزایند.

 

بررسی تب تنظیمات طراحی

این تب به شما امکان تنظیم خصوصیاتی مانند Border، Margin، Padding، Background را می دهد.

پیشنهاد می کنیم قسمت تنظیمات طراحی استفاده کنید چرا که سبب جذابیت تصویر می شود.

افزونه صفحه ساز ویژوال کامپوزر WPBakery Page Builder – قسمت ششم – المان سوالات متداولافزونه صفحه ساز ویژوال کامپوزر WPBakery Page Builder – قسمت هشتم – المان گالری تصاویر
پیشنهاد می کنیم برای دریافت آخرین مطالب کانال تلگرام کانی تمزرا دنبال کنید .