تصاویر با جذاب کردن پست ها و صفحات WordPress شما را زنده می کنند. با این حال ، بسیاری از مبتدیان با تراز کردن تصاویر دقیقاً همانطور که دوست دارند دست و پنجه نرم می کنند.
جدید ویرایشگر بلوک وردپرس (گوتنبرگ) با سهولت افزودن و ترازبندی تصاویر در وردپرس این مشکل را حل می کند.
در این مقاله ، ما به شما نشان خواهیم داد که چگونه می توانید به راحتی تصاویر را در وردپرس اضافه و تراز کنید تا پوسته های محتوای زیبایی ایجاد کنید.
تراز بندی تصویر در ویرایشگر وردپرس h4>
پیش از این ، وردپرس از یک متن با دکمه های ویرایش به عنوان ویرایشگر پیش فرض خود استفاده می کرد. یک مسئله خاص در ویرایشگر قدیمی ، ترازبندی تصویر بود.
اگرچه گزینه هایی برای تراز کردن تصاویر به سمت چپ ، راست یا مرکز وجود داشت ، اما همیشه خوب به نظر نمی رسند. گاهی اوقات تصاویر هم تراز نبودند ، اندازه دقیق آنها نبود ، یا فقط عجیب به نظر می رسید.
وردپرس 5.0 ویرایشگر جدید پست وردپرس را به نام ویرایشگر بلوک گوتنبرگ معرفی کرد. چندین مشکل با ویرایشگر قدیمی از جمله مشکلات ترازبندی تصویر برطرف شد.
بیایید نگاهی بیندازیم که چگونه می توانید به راحتی تصاویر را در ویرایشگر جدید اضافه و تراز کنید تا طرح های زیبایی برای پست ها و صفحات خود ایجاد کنید.
افزودن و تراز کردن تصاویر در وردپرس h4>
ویرایشگر جدید دارای بلوک های زیر است که می توانید برای افزودن تصاویر به پست ها و صفحات وردپرس خود استفاده کنید.
- تصویر
- تصویر درون خطی
- گالری
- رسانه و متن
- جلد
ابتدا با یک بلوک تصویر ساده شروع می کنیم.
برای درج بلوک تصویر بر روی دکمه “افزودن بلوک جدید” کلیک کنید یا / تصویر را در ویرایشگر پست تایپ کنید.
داخل دکمه خالی تصویر سه دکمه مشاهده خواهید کرد.
با ارائه URL فایل تصویر می توانید یک تصویر را از رایانه خود بارگذاری کنید ، یک تصویر بارگذاری شده از کتابخانه رسانه را انتخاب کنید یا یک تصویر وارد کنید.
بعد ، روی دکمه “بارگذاری” کلیک کنید و سپس تصویری را که می خواهید از رایانه بارگذاری کنید ، انتخاب کنید.
به محض انتخاب تصویر ، وردپرس آن را در کتابخانه رسانه شما بارگذاری کرده و در قسمت تصویر قرار می دهد.
اکنون ، یک نوار ابزار در بالای تصویر خود و برخی از تنظیمات بلوک تصویر در ستون سمت راست مشاهده خواهید کرد. برای تراز کردن تصویر خود ، از نوار ابزاری که در بالای تصویر ظاهر می شود استفاده خواهید کرد.
بلوک تصویر گزینه های تراز بندی تصویر زیر را به عنوان دکمه هایی در نوار ابزار به شما می دهد.
- تراز سمت چپ
- تراز کردن مرکز
- راست چین شوید
- عرض گسترده
- عرض کامل
اگر عرض تصویر شما کوچکتر است ، با تراز کردن آن در سمت چپ یا راست ، متن کنار تصویر ظاهر می شود. تراز کردن آن با مرکز ، تصویر را در ردیف خودش نمایش می دهد و هیچ نوشتاری در دو طرف آن نیست.
با انتخاب گزینه عرض گسترده ، تصویر شما از ناحیه متن گسترده تر می شود و گزینه تمام عرض آن را به لبه های سمت راست و چپ صفحه مرورگر فشار می دهد.
چگونه می توان تصویر را به صورت کامل در کنار متن تراز کرد h4>
در بسیاری از مواقع ممکن است لازم باشد که تصویری را در کنار برخی متن ها کاملاً تراز کنید. ویرایشگر بلوک وردپرس با افزودن بلوک Media & Text این کار را آسان می کند.
این بلوک اساساً یک منطقه دو ستونی اضافه می کند. یک ستون برای تصاویر (رسانه) و ستون دوم برای محتوای متن.
به سادگی تصویر خود را بارگذاری کنید و سپس متنی را که می خواهید در کنار آن نمایش داده شود اضافه کنید.
پس از افزودن تصویر و متن ، گزینه های بیشتری برای بلوک مشاهده خواهید کرد. می توانید کل بلوک را عرض یا تمام عرض قرار دهید ، همچنین می توانید تصویر و متن را در دو طرف تغییر دهید.
تراز بندی تصویر به طور خودکار با ارتفاع متن در ستون بعدی تنظیم می شود.
نحوه تراز کردن تصاویر گالری در وردپرس h4>
ویرایشگر پست وردپرس همچنین دارای یک بلوک برای افزودن گالری تصاویر است. با این کار می توانید تصاویر را به راحتی در شبکه ای از ردیف ها و ستون ها نمایش دهید.
بلوک Gallery با گزینه های هم ترازی مشابه در نوار ابزار همراه است.
می توانید کل بلوک گالری را به سمت چپ ، مرکز یا راست تراز کنید. همچنین می توانید آن را پهن کرده یا به یک ردیف تمام عرض تغییر دهید.
ویژگی پیش فرض گالری در وردپرس بسیار خوب است. با این حال ، اگر به طور مرتب گالری عکس به پست ها و صفحات وردپرس خود اضافه می کنید ، پس استفاده از پلاگین گالری عکس مانند گالری Envira .
این افزونه ها به شما امکان بیشتری می دهند تا تصاویر را در گالری عکس خود تراز کنید ، آنها را در پنجره بازشو نمایش داده و به سبک دیگری آنها را سبک کنید.
نحوه افزودن دو تصویر در کنار هم در وردپرس h4>
ساده ترین راه برای نمایش دو تصویر در کنار هم در یک پست وردپرس ، اضافه کردن هر دو تصویر در یک بخش گالری است.
به سادگی یک طرح 2 ستونی برای بلوک گالری انتخاب کنید تا هر دو تصویر در کنار یکدیگر نمایش داده شوند. همچنین می توانید گزینه ‘crop thumbnail’ را بررسی کنید تا از اندازه یکسان هر دو تصویر اطمینان حاصل کنید.
راههای بیشتر برای افزودن و تراز کردن تصاویر در وردپرس h4>
به غیر از تصویر ، رسانه و متن و بلوک گالری ، می توانید از بلوک Cover برای افزودن تصویر جلد نیز استفاده کنید.
در طراحی وب مدرن ، از تصاویر جلدی برای ایجاد طرح بندی محتوای بسیار جذاب استفاده می شود. این تصاویر برای برجسته کردن بخشهای مختلف یک صفحه استفاده می شود.
بلوک تصویر جلد با همان گزینه های ترازبندی بلوک تصویر همراه است. می توانید متن را روی تصویر اضافه کنید و از تنظیمات بلوک یک رنگ همپوشانی انتخاب کنید. بهترین قسمت این است که می توانید گزینه “زمینه ثابت” را که ایجاد می کند جلوه پس زمینه اختلاف منظر .
برای کسب اطلاعات بیشتر در مورد استفاده از تصاویر روی جلد ، مقاله ما را در مورد تفاوت تصاویر برجسته و تصویر جلد در وردپرس .
تاکنون در مورد افزودن مستقیم تصاویر به پست ها و صفحات شما صحبت کرده ایم. در مورد تصاویر سایت های شخص ثالث چطور؟
ویرایشگر بلوک نیز این کار را آسان می کند. با بلوک های تعبیه شده برای سایت های محبوب اجتماعی به اشتراک گذاری از جمله Instagram ، Flickr ، Imgur ، Photobucket و غیره ارائه می شود.
به عنوان مثال ، اگر می خواهید یک عکس اینستاگرام اضافه کنید ، به سادگی بلوک Instagram را به ویرایشگر پست اضافه کنید و URL پستی را که می خواهید به اشتراک بگذارید وارد کنید.
وردپرس به طور خودکار پست اینستاگرام را واکشی می کند و آن را برای شما تعبیه می کند. پس از آن ، می توانید از گزینه های هم ترازی در نوار ابزار استفاده کنید.
جاسازی بلوک ها همچنین به شما امکان می دهد > فیلم ها را به راحتی در وردپرس جاسازی کنید . پس از آن ، می توانید از همین گزینه ها در نوار ابزار برای تراز کردن فیلم ها در وردپرس استفاده کنید.
امیدواریم این مقاله به شما کمک کند یاد بگیرید که چگونه به راحتی تصاویر را در ویرایشگر بلوک وردپرس اضافه و تراز کنید. همچنین ممکن است بخواهید راهنمای ما را در مورد نحوه بهینه سازی تصاویر برای سرعت بخشیدن به وردپرس .
اگر این مقاله را دوست داشتید ، لطفاً در کانال YouTube برای آموزش های ویدئویی وردپرس. همچنین می توانید ما را در Twitter و فیس بوک .
منبع:
https://www.wpbeginner.com/beginners-guide/how-to-add-and-align-images-in-wordpress-block-editor/.