طراحی سایت

بلوک تصویر در ویرایشگر گوتنبرگ

شاید روزهای اول استفاده از این ویرایشگر جدید وردپرس برای شما سخت باشد، اما اگر کمی با آن کار کنید مطمئن هستم که جدا شدن از آن برای شما سخت خواهد بود این ویرایشگر فقط کمی زمان برای این نیاز دارد تا خود را به شما ثابت کند. وردپرس امکانات زیادی را در اختیار کاربران خود میدهد.

به همین دلیل است که به خاطر متن باز بودنش و هزاران امکانات

دیگرش بهترین سیستم مدیریت محتوا انتخاب شده است.

فهرست مطالب:

  1. نوار ابزار مسدود کردن در بلوک تصویر در ویرایشگر گوتنبرگ
  2. نوار ابزار مسدود کردن در بلوک تصویر در ویرایشگر گوتنبرگ
  3. افزودن تصویر
  4. تغییر اندازه تصویر
  5. نحوه تراز کردن تصاویر
  6. تصاویر عریض و عرض کامل
  7. بلوک تصویر در ویرایشگر گوتنبرگ: بخش زیرنویس ها
  8. تنظیمات پیوند
  9. ویرایش تصاویر
  10. بلوک تصویر در ویرایشگر گوتنبرگ: نحوه افزودن همپوشانی متن
  11. نحوه افزودن فیلترهای تصویر
  12. آپلود تصویر خارجی
  13. گزینه های بیشتر
  14. نحوه مسدودسازی تنظیمات
  15. سبک ها
  16. تنظیمات تصویر
  17. پیشرفته

نحوه ایجاد بلوک در ویرایشگر گوتنبرگ

بلوک تصویر را می توان با کلیک بر روی دکمه Add Block به یک صفحه اضافه کرد.

بلوک تصویر در ویرایشگر گوتنبرگ: اضافه کردن تصاویر با دکمه پلاس
بلوک تصویر در ویرایشگر گوتنبرگ: اضافه کردن تصاویر با دکمه پلاس

یا می توانید روی گزینه image کلیک کرده و enter را فشار دهید.

بلوک تصویر در ویرایشگر گوتنبرگ: تصاویر را با دستور اسلش اضافه کنید.
بلوک تصویر در ویرایشگر گوتنبرگ: تصاویر را با دستور اسلش اضافه کنید.

 مدیریت نوشته ها در وردپرس

نوار ابزار مسدود کردن در بلوک تصویر در ویرایشگر گوتنبرگ

نمادهای Wide و Full Width، مخصوص بلوک های تصویر (در همه تم ها موجود نیست).
نمادهای Wide و Full Width، مخصوص بلوک های تصویر (در همه تم ها موجود نیست).

همانطور که در تصویر بالا مشاهده می کنید، هر بلوک کنترل‌های مخصوص بلاک خود را دارد که به شما امکان می‌دهد بلوک را مستقیماً در ویرایشگر دستکاری کنید که شامل گزینه های زیر می باشد:

  • تغییر نوع بلوک
  • تراز کردن
  • ارتباط دادن
  • برش
  • متن را روی تصویر اضافه کنید
  • فیلتر دوتن اضافه کنید
  • گزینه های بیشتر

افزودن تصویر

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

سه راه برای افزودن تصاویر وجود دارد - آپلود، کتابخانه رسانه و درج از URL.
سه راه برای افزودن تصاویر وجود دارد – آپلود، کتابخانه رسانه و درج از URL.

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

به سادگی تصویر را از تب Upload Files اضافه کنید، سپس آن را در تب Media Library انتخاب کنید. سفارشی کردن جزئیات پیوست تصویر، مانند عنوان، عنوان، متن جایگزین، و توضیحات، در پنجره کتابخانه رسانه نیز می تواند برای SEO و ناوبری آینده کتابخانه رسانه شما مفید باشد.

یک تصویر را از کتابخانه رسانه خود آپلود یا انتخاب کنید، اطلاعات تصویر را اضافه کنید، سپس انتخاب را فشار دهید.
یک تصویر را از کتابخانه رسانه خود آپلود یا انتخاب کنید، اطلاعات تصویر را اضافه کنید، سپس انتخاب را فشار دهید.

آموزش کار با رسانه در وردپرس

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

هنگامی که تصویر به ویرایشگر اضافه می شود، می توانید اندازه تصاویر را تغییر دهید و آنها را تراز کنید تا با محتوای اطراف مطابقت بیشتری داشته باشند.

اندازه یک تصویر را با کشیدن دسته های آن تغییر دهید.
اندازه یک تصویر را با کشیدن دسته های آن تغییر دهید.

نحوه تغییر اندازه یک تصویر:

  • روی تصویر کلیک کنید تا دسته های قابل کشیدن تغییر اندازه نمایان شوند.
  • روی دستگیره های تغییر اندازه کلیک کنید و تصویر را به اندازه دلخواه خود بکشید.

همچنین، در سمت راست در تنظیمات بلوک، اندازه تصویر را می توان با تنظیم ابعاد عرض و ارتفاع به خوبی تنظیم کرد. همچنین برخی از گزینه های مناسب در تنظیمات بلوک برای تنظیم تصویر روی 100، 75، 50 و 25 درصد اندازه اصلی آن وجود دارد.

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

یک تصویر را در یک بلوک پاراگراف تراز کنید.
یک تصویر را در یک بلوک پاراگراف تراز کنید.

اگر می‌خواهید یک تصویر را در یک پاراگراف تراز کنید، مانند تصویر بالا ابتدا باید تصویر را درست بالای بلوک پاراگراف هدف قرار دهید.

دکمه‌های تراز با برجسته‌سازی Align Right
دکمه‌های تراز با برجسته‌سازی Align Right

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

در نهایت اندازه تصویر را به عرض و ارتفاع دلخواه خود تغییر دهید.

آموزش بخش تنظیمات وردپرس

تصاویر عریض و عرض کامل

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

بلوک تصویر در ویرایشگر گوتنبرگ: یک تصویر "واید" در ویرایشگر.
بلوک تصویر در ویرایشگر گوتنبرگ: یک تصویر “واید” در ویرایشگر.

بلوک تصویر در ویرایشگر گوتنبرگ: بخش زیرنویس ها

اگر می‌خواهید یک عنوان را به نمونه‌ای از یک تصویر اضافه کنید، کافی است آن را در فضای زیر تصویر در ویرایشگر تایپ کنید.

تنظیمات پیوند به شما امکان می دهد تصاویر خود را هایپرلینک دهید. می‌توانید با کلیک روی تصویر، صفحه پیوست، فایل رسانه اصلی یا URL سفارشی دلخواه خود را باز کنید.

تصویر شما می تواند به یک صفحه پیوست، فایل رسانه یا URL سفارشی پیوند داده شود.
تصویر شما می تواند به یک صفحه پیوست، فایل رسانه یا URL سفارشی پیوند داده شود.

بخش نمایش در وردپرس

ویرایش تصویر

یک ویژگی جدید به شما امکان می‌دهد بدون خروج از ویرایشگر، محصولات را سریع انجام دهید. فقط  دکمه Crop  را در نوار ابزار بزنید بعد با کلیک روی گزینه crop مانند شکل زیر، یک نوار ابزار گسترش یافته ظاهر می شود. این به شما امکان بزرگنمایی تصویر را می دهد.

نوار ابزار تصویر که گزینه بزرگنمایی را نشان می دهد
نوار ابزار تصویر که گزینه بزرگنمایی را نشان می دهد

همچنین گزینه هایی برای تنظیم نسبت تصویر وجود دارد، مانند برش تصویر به صورت مربع که در تصویر زیر نشان داده ایم.

تصویری که ابزارهای برش را برای بلوک تصویر نشان می دهد.
تصویری که ابزارهای برش را برای بلوک تصویر نشان می دهد.

همچنین می‌توانید تصویر را در صورتی که به یک طرف وارد شود بچرخانید.

پس از ایجاد هر گونه تغییر، روی Apply که در تصویر بالا مشاهده میکنید کلیک کنید.

بلوک تصویر در ویرایشگر گوتنبرگ: نحوه افزودن همپوشانی متن

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

تصویری که گزینه اضافه کردن متن روی تصویر را نشان می دهد
تصویری که گزینه اضافه کردن متن روی تصویر را نشان می دهد

با کلیک بر روی دکمه  افزودن متن روی تصویر  ، بلوک بلافاصله به یک بلوک پوششی با پاراگراف نگهدارنده خود تبدیل می شود.

متن را روی مکان‌نمای تصویر اضافه کنید
متن را روی مکان‌نمای تصویر اضافه کنید

دیدگاه ها در وردپرس

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

یک ویژگی جدید به شما امکان می دهد فیلترهایی را به تصویر خود اضافه کنید که به طور کامل جایگزین رنگ های تصویر شما شوند:

تصویر با یک فلش قرمز که به گزینه duotone در نوار ابزار بلوک بلوک تصویر اشاره دارد.
تصویر با یک فلش قرمز که به گزینه duotone در نوار ابزار بلوک بلوک تصویر اشاره دارد.

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

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

آپلود تصویر خارجی

گاهی اوقات از ابزاری مانند Google Docs برای نوشتن یا همکاری در پست ها استفاده می کنید. هنگامی که آماده قرار دادن محتوا در سایت خود هستید، می توانید آنها را کپی کرده و در ویرایشگر قرار دهید.

آپلود تصویر خارجی
آپلود تصویر خارجی

یک مشکل این است که این تصاویر احتمالاً در جای دیگری مانند Google میزبانی می شوند و در صورت ایجاد تغییر به راحتی می توانند خراب شوند.

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

چرا شما باید با ما کار کنید

گزینه های بیشتر

این کنترل ها به شما این امکان را می دهد که بلوک خود را به صورت HTML کپی و ویرایش کنید.

بلوک تصویر در ویرایشگر گوتنبرگ: گزینه های بیشتر برای بلوک تصویر
بلوک تصویر در ویرایشگر گوتنبرگ: گزینه های بیشتر برای بلوک تصویر

تنظیمات را مسدود کنید

هر بلوک علاوه بر گزینه های موجود در نوار ابزار بلوک، گزینه های خاصی در نوار کناری ویرایشگر دارد. اگر نوار کناری را نمی بینید، روی نماد “دنده” در کنار دکمه انتشار کلیک کنید.

تنظیمات را در بلوک تصویز در ویرایشگر گوتنبرگ مسدود کنید
تنظیمات را در بلوک تصویز در ویرایشگر گوتنبرگ مسدود کنید

سبک ها

بسته به موضوع خود، ممکن است چندین سبک برای تصویر خود داشته باشید. در استایل، می توانید انتخاب کنید که تصویر را گرد، با حاشیه یا فریم کنید.

سبک ها در بلوک تصویر در ویرایشگر گوتنبرگ
سبک ها در بلوک تصویر در ویرایشگر گوتنبرگ

تنظیمات تصویر

تنظیمات تصویر یک فیلد متنی را برای اضافه کردن توضیحات متن جایگزین ارائه می‌دهد که برای دسترسی و سئو مهم است.

می توانید اندازه تصویر را بین اندازه کوچک، متوسط، بزرگ و کامل انتخاب کنید. همچنین می توانید ابعاد تصویر، ابعاد عرض و ارتفاع یک تصویر را با افزایش 25 درصدی یا در ابعاد دقیق پیکسل تغییر دهید.

بلوک تصویر در ویرایشگر گوتنبرگ: تنظیمات تصویر
بلوک تصویر در ویرایشگر گوتنبرگ: تنظیمات تصویر

مرز

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

پیشرفته

فیلد ویژگی عنوان برای توصیف نقش تصویر در صفحه شما طراحی شده است . بسیاری از دستگاه ها و مرورگرها این متن را نمایش نمی دهند.

لنگر HTML به شما اجازه می دهد تا ” پرش صفحه ” را به آن تصویر خاص انجام دهید. پرش صفحه، که گاهی به آن پیوندهای لنگر نیز گفته می شود، جایی است که روی یک لینک کلیک می کنید و فوراً به جایی بالاتر یا پایین تر از یک صفحه طولانی منتقل می شوید.

برای فعال کردن این کار، یک Anchor HTML را در عکس خود قرار می دهید و پیوندی ایجاد می کنید که به لنگر می پرد.

تب پیشرفته همچنین به شما امکان می دهد یک کلاس CSS به بلوک خود اضافه کنید و به شما این امکان را می دهد که CSS سفارشی بنویسید و به بلوک به دلخواه استایل دهید.

بلوک تصویر در ویرایشگر گوتنبرگ: تب پیشرفته
بلوک تصویر در ویرایشگر گوتنبرگ: تب پیشرفته

ما در این مقاله شما را با انواع تظیمات بخش بلوک تصویر در ویرایشگر گوتنبرگ آشنا کردیم امیدواریم شما عزیزان را در آموزش این بخش یاری کرده باشیم،

شاید روزهای اول استفاده از این ویرایشگر جدید وردپرس برای شما سخت باشد، اما اگر کمی با آن کار کنید مطمئن هستم که جدا شدن از آن برای شما سخت خواهد بود این ویرایشگر فقط کمی زمان برای این نیاز دارد تا خود را به شما ثابت کند. وردپرس امکانات زیادی را در اختیار کاربران خود میدهد.

اگر علاقمند باشید به آموزش بخش بلوک پاراگراف ها در این ویرایشگر مقاله ما را درمورد

بلوک پاراگراف در ویرایشگر گوتنبرگ

مطالعه کنید.

منبع

بازگشت به لیست

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *