خانه / آموزش وردپرس / آموزش بلوک تصویر در ویرایشگر گوتنبرگ وردپرس از صفر تا صد

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

آموزش بلوک تصویر

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

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

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

  • تصویر
  • گالری
  • رسانه و متن
  • رویه
  • تصویر درونی

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

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

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

بلوک تصویر

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

آموزش بلوک تصویر

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

آموزش بلوک تصویر

در این بلوک سه دکمه نشان داده شده است. دکمه “بارگذاری” مربوط به آپلود تصویر از کامپیوتر خودتان است. دکمه “کتابخانه پرونده چند رسانه ای” مربوط به اضافه کردن عکس از تصاویر آپلود شده قبلی در کتابخانه رسانه و دکمه “گذاشتن از نشانی” مربوط به وارد کردن تصویر با استفاده از آدرس URL فایل تصویر می باشد.

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

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

آموزش بلوک تصویر

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

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

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

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

آموزش بلوک تصویر

با آپلود کردن تصویر در بلوک، پنجره ای در سمت چپ صفحه نمایش داده می شود که مربوط به تنظیمات تصویر است. در این پنجره می توانید برای تصاویر خود متن جایگزین (alt) وارد کنید، اندازه و ابعاد تصویر را انتخاب کنید و نیز تصویر را لینک دار نمایید یا می توانید کلاس CSS خود را اضافه کنید.

آموزش بلوک تصویر

بلوک رسانه و متن

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

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

آموزش بلوک تصویر

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

آموزش بلوک تصویر

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

بلوک گالری

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

آموزش بلوک تصویر

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

آموزش بلوک تصویر

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

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

بلوک گالری در ویرایشگر پیش فرض وردپرس نسخه 5 کاملاً کاربردی و مناسب است. اما اگر به صورت مرتب گالری عکس به نوشته ها و برگه های سایت وردپرسی خود اضافه می کنید بهتر است از یکی از افزونه های گالری ساز وردپرس مانند افزونه Envira Gallery در سایت وردپرسی خود استفاده نمایید.

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

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

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

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

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

بلوک رویه

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

آموزش بلوک تصویر

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

آموزش بلوک تصویر

بلوک رویه همان گزینه های ترازبندی بلوک تصویر را دارد. شما می توانید متن را روی تصویر اضافه کرده و از قسمت تنظیمات بلوک در سمت چپ صفحه یک رنگ روکش انتخاب کنید. با فعال کردن گزینه “پس زمینه ثابت” می توانید یک افکت پس زمینه پارالاکس ایجاد کنید.

بلوک جاسازی تصویر

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

در حال حاضر ویرایشگر گوتنبرگ دارای بلوک جاسازی ها برای وب سایت های شبکه های مجازی اینستاگرام و Flickr است.

آموزش بلوک تصویر

به عنوان مثال اگر بخواهید یک عکس اینستاگرام به سایت خود اضافه کنید می توانید به راحتی بلوک اینستاگرام را به ویرایشگر پست خود اضافه کرده و URL پستی که می خواهید در سایت منتشر کنید را وارد کنید.

آموزش بلوک تصویر

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

بلوک تصویر درونی

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

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

آموزش بلوک تصویر

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

آموزش بلوک تصویر

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

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

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

امتیاز شما به این نوشته...
پنج ستاره بالاترین رای می باشد

درباره ی مینا قدسی

مطلب پیشنهادی

بهترین افزونه های پاپ آپ وردپرس

بهترین افزونه های پاپ آپ (Popup) وردپرس | ساخت پاپ آپ در وردپرس

در این مقاله بهترین افزونه های پاپ آپ وردپرس برای تبدیل بازدیدکنندگان سایت به مشترکان …

پاسخی بگذارید

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