آموزش روکش پس زمینه ( پوشش یا Background Overly ) در المنتور

روکش پس‌زمینه (Background Overlay) یک ویژگی شگفت‌انگیز در المنتور نسخه پرو است. با استفاده از این ویژگی می‌توانید یک تصویر یا رنگ را بر روی تصویر یا رنگ دیگر با کنترل شفافیت قرار دهید و همپوشانی زیبا و منحصربه‌فردی ایجاد کنید. در این آموزش همراه ما باشید تا شما را با روکش پس‌زمینه برای طراحی یک سایت جذاب آشنا کنیم.

چرا از روکش پس‌زمینه استفاده کنیم؟

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

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

چگونه می‌توانیم روکش پس‌زمینه را به یک بخش اضافه کنیم؟

برای شروع، در پیشخوان وردپرس یک برگه جدید بسازید یا یکی از برگه‌های موجود را در حالت ویرایشگر المنتور باز کنید. از قسمت محتوایی طراحی صفحه، بر روی آیکون (+) کلیک کنید و ساختار موردنظر و مناسبی را انتخاب نمایید. با تنظیم گزینه‌ی “ارتفاع بخش هم‌اندازه با صفحه‌نمایش” از پنل تنظیمات بخش، دید گسترده‌تری نسبت به ردیف خواهید داشت و تغییرات را با جزییات بیشتر مشاهده خواهید کرد.

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

افزودن متن به تصویر

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

تنظیم  Background overlay

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

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

• نوع پس‌زمینه: این گزینه دارای دو مقدار نمایش کلاسیک و گرادیانت است. برای قرار دادن یک رنگ ثابت برای پوشش پس‌زمینه، ابتدا “نمایش کلاسیک” و سپس رنگ موردنظرتان را از جعبه‌رنگ انتخاب کنید. حالت “گرادیانت” طیفی از رنگ‌های انتخابی شما را بر روی تصویر پس‌زمینه به‌عنوان روکش قرار می‌دهد.
• شفافیت: برای تنظیم شفافیت Background overlay نوار اسکرول را بر روی مقدار دلخواه تنظیم کنید. مقدار شفافیت 1، تصویر پس‌زمینه را کاملاً مات نمایش می‌دهد و مقدار صفر (0) به‌طور کامل بک‌گراند را بدون روکش و شفاف به نمایش می‌گذارد. بهترین حالت عددی بین 0 تا 1 برای سطح شفافیت است تا پس‌زمینه، روکش و متن به‌خوبی نشان داده شوند.

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

اگر در استفاده از Background overlay در المنتور با مشکل مواجه شدید یا سؤالی در این زمینه برای‌تان به وجود آمد در قسمت دیدگاه‌ها با ما مطرح کنید تا پاسخگوی شما عزیزان باشیم.

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