روکش پس‌زمینه (Background Overlay) یک ویژگی شگفت‌انگیز در المنتور نسخه پرو است. با استفاده از این ویژگی میتوانید یک تصویر یا رنگ را بر روی تصویر یا رنگ دیگر با کنترل شفافیت قرار دهید و همپوشانی زیبا و منحصربه‌فردی ایجاد کنید. در این آموزش همراه ما باشید تا شما را با روکش پس‌زمینه برای طراحی یک سایت جذاب آشنا کنیم.
چرا از روکش پس‌زمینه استفاده کنیم؟
فرض کنید تصویری از مزرعه‌ی گل‌های آفتابگردان را به‌عنوان پس‌زمینه ردیف یکی از صفحه‌های سایت انتخاب کرده‌اید. حالا قصد دارید یک بلاک متنی با رنگ زرد روی تصویر برای معرفی برند یا محصول خود قرار دهید. این دقیقاً جایی است که ویژگی پوشش پس‌زمینه به کمک شما می‌آید تا متن به‌وضوح دیده شود.
Background overlay به شما امکان می‌دهد یک لایه شفاف بین پس‌زمینه و متن ایجاد کنید. علاوه بر این، روکش پس‌زمینه زیبایی وبسایت را به‌طور چشم‌گیری افزایش می‌دهد و تجربه کاربری مناسبی برای اطمینان از خوانایی متن ایجاد می‌کند.
چگونه می‌توانیم روکش پس‌زمینه را به یک بخش اضافه کنیم؟
برای شروع، در پیشخوان وردپرس یک برگه جدید بسازید یا یکی از برگه‌های موجود را در حالت ویرایشگر المنتور باز کنید. از قسمت محتوایی طراحی صفحه، بر روی آیکون (+) کلیک کنید و ساختار موردنظر و مناسبی را انتخاب نمایید. با تنظیم گزینه‌ی “ارتفاع بخش هم‌اندازه با صفحه‌نمایش” از پنل تنظیمات بخش، دید گسترده‌تری نسبت به ردیف خواهید داشت و تغییرات را با جزییات بیشتر مشاهده خواهید کرد.
برای ایجاد روکش پس‌زمینه به یک تصویر در بک‌گراند ردیف احتیاج دارید. سربرگ استایل در تنظیمات بخش قسمتی به نام پس‌زمینه برای افزودن بک‌گراند دارد که به‌طور کامل با انواع آن در آموزش پس‌زمینه و بک‌گراند در المنتور آشنا شدید. ابتدا با انتخاب نوع پس‌زمینه کلاسیک یک تصویر مناسب از کتابخانه پرونده‌های چندرسانه‌ای وردپرس برای ردیف قرار دهید. فیلدهای جایگاه، ضمیمه، تکرار و سایز امکان تنظیمات بیشتری را برای تصویر به وجود می‌آورد. اگر می‌خواهید تصویر به‌طور کامل در پس‌زمینه ردیف به نمایش درآید، فیلد سایز را بر روی مقدار “کاور” تنظیم کنید.
افزودن متن به تصویر
المان‌های سربرگ یا بلوک متنی برای افزودن متن روی تصویر و ایجاد روکش پس‌زمینه گزینه‌های مناسبی هستند. ویجت موردنظرتان را با درگ و دراپ به روی تصویر پس‌زمینه قرار دهید و سپس متن دلخواهی برای آن بنویسید. اندازه، رنگ ، نوع فونت و چیدمان آن را نیز به سلیقه خود از قسمت محتوا و استایل تغییر دهید.
تنظیم Background overlay
حالا میتوانید با کمک ویژگی روکش پس‌زمینه جلوه‌ی بهتری برای متن و تصویر بک‌گراند ایجاد کنید و یک همپوشانی منحصربه‌فرد تشکیل دهید. ممکن است با خود فکر کنید امکان انجام این کار در نرم‌افزار فتوشاپ نیز وجود دارد. باید بگوییم وقتی ویژگی پوشش پس‌زمینه در صفحه‌ساز المنتور فقط با انتخاب رنگ و تنظیم شفافیت آن وجود دارد، چه نیازی به طی کردن مسیر پیچیده در فتوشاپ است!
برای افزودن روکش پس‌زمینه در المنتور، تنظیمات بخش را انتخاب کنید. به سربرگ استایل بروید و پنل آکاردئونی “روکش پس‌زمینه“ را باز کنید. حالت هاور، پوشش پس‌زمینه را با حرکت ماوس بر روی صفحه، نمایش می‌دهد. اگر قصد دارید همپوشانی تصویر، رنگ و متن به‌طور کامل و همیشگی نمایش داده شود حالت “عادی” را انتخاب نمایید.
- نوع پس‌زمینه: این گزینه دارای دو مقدار نمایش کلاسیک و گرادیانت است. برای قرار دادن یک رنگ ثابت برای پوشش پس‌زمینه، ابتدا “نمایش کلاسیک” و سپس رنگ موردنظرتان را از جعبه‌رنگ انتخاب کنید. حالت “گرادیانت” طیفی از رنگ‌های انتخابی شما را بر روی تصویر پس‌زمینه به‌عنوان روکش قرار می‌دهد.
- شفافیت: برای تنظیم شفافیت Background overlay نوار اسکرول را بر روی مقدار دلخواه تنظیم کنید. مقدار شفافیت 1، تصویر پس‌زمینه را کاملاً مات نمایش می‌دهد و مقدار صفر (0) به‌طور کامل بک‌گراند را بدون روکش و شفاف به نمایش می‌گذارد. بهترین حالت عددی بین 0 تا 1 برای سطح شفافیت است تا پس‌زمینه، روکش و متن به‌خوبی نشان داده شوند.
روکش پس‌زمینه یک تکنیک رایج در طراحی وب است. پوشش رنگی با شفافیت تعیین‌شده که اغلب بر روی تصویر قرار می‌گیرد، باعث ایجاد پس‌زمینه‌ی ویژه‌ای میشود تا متن با خوانایی بیشتری نمایش داده شود. به همین دلیل از لحاظ بصری نسبت به پس‌زمینه با رنگ ثابت جلوه‌ی بیشتری دارد و توجه کاربران را به خود جلب می‌کند.
اگر در استفاده از Background overlay در المنتور با مشکل مواجه شدید یا سؤالی در این زمینه برایتان به وجود آمد در قسمت دیدگاه‌ها با ما مطرح کنید تا پاسخگوی شما عزیزان باشیم.
در صورت تمایل از آموزش وردپرس نیز دیدن بفرمایید. جلسات جدیدی به این دوره آموزشی اضافه شده است.
37 دیدگاه. Leave new
سلام وقتتون به خیر
تشکر از زخمات شما
من موفق نمیشم که المان سربرگ،متن و دکمه رو روی تصویر پس زمینه بیندازم و این المان ها در زیر ،کنار و یا بالای تصویر قرار میگیرند.لطفا من رو راهنمایی بفرمایید؟ سپاس
سلام وقت شما بخیر،
در این خصوص دقت فرمایید تصویر پس زمینه را در المان تصویر درج نکرده باشید.
با تشکر.
با سلام و وقت بخیر
من در حال آموزش دوره المنتور با تدریس استاد جبین پور بودم منتها امروز متوجه شدم که آموزش های آقای قاسمی تو سایت قرار گرفته
سوالی که دارم اینه که من باید آموزش رو از اول شروع کنم یا از همون ادامه ی آموزش آقای جبین پور ادامه بدم؟
سلام وقت شما بخیر،
از همراهی شما بسیار ممنونیم ، بله جلسات دوره آپدیت شده تا با آخرین نسخه المنتور هماهنگ گردد، ترتیب جلسات تفاوتی نکرده و صرفا ساختار جدید المنتور از ابتدا تدریس شده است.
با تشکر.
سلام بی نهایت سپاسگزارم آموزشها عالی و درجه یک
تمام تنظیماتی رو که استاد فرمودند انجام دادم و تصویر کامل قرار گرفت اما وقتی در حالت پیش نمایش نگاه میکنم از ارتفاع تصویر کم میشه و کامل قرار نمیگیره
سلام وقت شما بخیر،
از همراهی شما بسیار ممنونیم ، در این خصوص بررسی فرمایید که حالت تصویر زمینه روی cover یا پوشش تنظیم شده باشد
با تشکر.
بله روی حالت پوشش تنظیم شده
خواهشمند است از ناحیه کاربری خود اقدام به ارسال تیکت فرمایید تا این مورد در سایت شما بررسی شود.
باتشکر
سلام وقت بخیر
من برای تنظیمات ردیف ، گزینه ارتفاع ردیف و تنظیم روی ارتفاع صفحه نمایش رو ندارم
فقط گزینه کمتریم ارتفاع هست که باید اندازه داد و موردی با عنوان ارتفاع صفحه نمایش برای تنظیم نیست
سلام وقت شما بخیر،
این مورد در نسخه های جدید تغییراتی داشته است که بایستی گزینه کمترین ارتفاع را انتخاب و در قیمت اندازه واحد vh را تعیین و مقدار 100 را درج کنید
با تشکر.
فوق العاده بود ساده و در عین حال شیک
میشه لطفا بگید اینجور عکس های بزرگ و با کیفیت و زیبا رو از کجا دانلود کنیم
ممنونم
سلام وقت شما بخیر،
در این خصوص میتوانید از سایت هایی نظیر فری پیک تصاویر جذابی را دریافت کنید.
با تشکر.
سلام وقتتون بخیر من وقتی تصویریو قرار میدم تصویرکل سایتو پوشش نداده و بغلاش خالیه و من گزینه سایزو ندارم که بذارم روی حالت کاور
و تصویر تمام عرض نیست
سلام وقت شما بخیر،
ممکن است اگر افزونه را از سایت ما تهیه نکردید این موارد بصورت انگلیسی و مانند زیر برایتان نمایش داده شوند که میتوانید آنها را انتخاب و تست کنید
https://prnt.sc/tMd1z6j1zsia
با تشکر.
سلام خسته نباشید. من گزینه کاور رو ندارم. درضمن پس زمینه ای هم که میزارم هر کاریش می کنم به اندازه صفحه نمایش در نمیاد یعنی کل صفحه رو نمیگیره. چیکار باید کنم؟
سلام وقت شما بخیر،
ممکن است ترجمه برای شما تغییر کرده باشد که میتوانید مواردی مانند پوشش را بررسی فرمایید
با تشکر.
سلام خدا قوت
من در تنظیمات سایت قسمت پس زمینه سایت ، بک گراند رو طوسی کردم ولی میخوام پس زمینه بعضی از برگه های سایتم همون سفید باشه
این کار رو چطوری میشه انجام داد ؟؟
سلام وقت شما بخیر،
در این خصوص در برکه خود روی آیکن چرخ دنده (تنظیمات) کلیک کرده و در تب استایل میتوانید به این برگه پس زمینه دلخواهی اعمال کنید
با تشکر.
سلام. اصلن نمیدونم چطوری از شما تشکر کنم. آموزش با کیفیت و رایگان. عجیبه
سلام وقتتون بخیر
من گزینه ادیت ستون رو ندار م چه کنم؟
سلام و احترام خدمت شما کاربر ارجمند ، از شما خواهشمندیم سوالات پس از خرید را ( در رابطه با محصول خریداری شده از سایت ما ) در بخش تیکت پشتیبانی ( ناحیه کاربری ) ارسال فرمایید ، سوالات شما به سرعت توسط همکاران متخصص ما پاسخ داده خواهد شد.
با سلام چرا وقتی تو این فسمت من یه الگو رو درج میکنم عکسهاش نمیاد؟
سلام وقت شما بخیر،
برای این مورد پیشنهاد میشود در ابتدا کش مرورگر خود را خالی نموده و سپس تست نمایید.
با تشکر.
سلام خسته نباشید. ببخشید من اندازه نمایشگر پس زمینه روی حالت کاور گذاشتم ولی هنوز عکس کامل برام نشون نمیده نظر میدید؟
باسلام خدمت شما
این گزینه بایستی کل زمینه را پوشش دهد و اگر برای شما این ویژگی کار نمیکند ممکن است به دلیل آپدیت نبودن قالب یا افزونه های شما باشد که پیشنهاد میشود در ابتدا این موضوع را بررسی فرمایید.
از حضور شما ممنونیم.
سلام من اصلا گزینه روکش پس زمینه رو‌ندارم، المنتور پرو رو هم خریداری کردم، مشکل از کجا میتونه باشه؟
سلام وقت شما بخیر،
این مورد در برخی قسمت ها مانند تنظیمات ردیف ها یا ستون‌ها در دسترس است که می توانید از آن استفاده کنید.
با تشکر.
سلام..وقتبخیر
توضیحاتتون عالیه..فوق العاده این..واقعا خسته نباشین.عالیییییییییییییییییییییییییییییییییییییییییییییی
خواهش می کنم ، در خدمتتان هستیم.
لطفا فیلم طراحی مثلا همین صفحه از سایتتون با المنتور رو بگذارید
سلام تو المنتور قالب نمیخاییم؟؟
همه سایت ها نیاز به قالب دارند ، حتی اگر می خواهید کاملاً با المنتور کار کنید ، باید قالب خام هلو المنتور را نصب نماید.
سلام
خیلی خوب و مفید بود.
ممنون
ممنون بابت اموزش خوب تون دمتون گرم
از حضور شما ممنونیم.
چقدر حرفه ای آموزش میدید سپاس از استاد جبین پور مهربان و دوست داشتنی
از حضور شما ممنونم.