مقالات آموزشی

مفهوم پس زمینه یا Background در وردپرس

آموزش پس زمینه یا Background در وردپرس

فهرست مطالب

  • پس زمینه چیست؟
  • انواع پس زمینه
  • روش های گذاشتن تصویر پس زمینه در وردپرس
    •  روش اول: استفاده از تنظیمات وردپرس
    • روش دوم :آپلود تصویر پس زمینه با استفاده از قالب وردپرس
    • روش سوم: استفاده از css در اضافه کردن تصاویر پس زمینه
      • افزونه CSS HERO
        • تعدادی از بهترین امکانات افزونه CSS HERO
  • استفاده از یک ویدیو در پس زمینه یک سایت وردپرسی
  • نکات مهم قرار دادن عکس در پس زمینه سایت

پس زمینه چیست؟

تصویر زمینه از نظر زیبایی بصری و جذابیت تاثیر زیادی در نظرات کاربران سایت شما دارد.

انتخاب یک قالب زیبا و مناسب برای یک سایت، سرعت لود و در کنار این ها، یک محتوای مفید و کاربردی، در جذب کاربران سایت شما بسیار موثر است.

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

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

انواع پس زمینه

  • تصویری

همانطور که از نام آن پیداست، قرار دادن یک عکس برای پس زمینه سایت مد نظر ماست.

  • رنگ ثابت

هر کدام از رنگ های ثابت دارای یک کد رنگی هستند. می توان از این رنگ ها در طراحی صفحات وب استفاده کرد.

  • Gradient (طیف رنگی)

گرادیانت ها طیف های رنگی جذابی هستند که از ترکیب دو یا چند رنگ تشکیل می شوند و ظاهری زیبا را برای سایت می سازند.

  • ویدیویی

برای پس زمینه سایت خود می توانید از ویدیو نیز استفاده کنید.

نکته مورد توجه در استفاده از پس زمینه ویدیویی این است که ویدیو ها باعث کندی سرعت سایت شما می شوند.

روش های گذاشتن تصویر پس زمینه در وردپرس

 روش اول: استفاده از تنظیمات وردپرس

اکثر قالب های وردپرس از پس زمینه سفارشی custom background پشتیبانی می کنند.

نصب وردپرس در هاست سی پنل
>>

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

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

در پیشخوان سایت در قسمت نمایش، بخش سفارشی سازی را باز کنید.

در این قسمت می توانید تنظیمات قالب را تغییر دهید.

روی Background image کلیک کنید. در پنل باز شده تصویر پس زمینه را انتخاب و آپلود کنید.

گزینه هایی در زیر تصویر برای تنظیم آن وجود دارند. در بخش preset می توانید نحوه نمایش تصویر پس زمینه را انتخاب کنید.

Fill screen( نمایش کامل)

Fit screen( نمایش مناسب)

Repeat( تکرار تصویر)

Custom( سفارشی)

در انتها برای ذخیره تنظیمات روی دکمه ذخیره سازی کلیک کنید.

روش دوم :آپلود تصویر پس زمینه با استفاده از قالب وردپرس

برای این روش ابتدا پلاگین “Full Screan Background Pro”را نصب و فعال کنید.

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

لاینسس پلاگین را وارد کنید تا کار فعال کردن آن به اتمام برسد.

در پایین صفحه Add New Image را کلیک کنید.

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

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

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

این پلاگین به صورت اتومات عکس ها را به صورت اسلایدی نشان می دهد.

زمان نشان دادن هر عکس را نیز می توانید انتخاب کنید. در پایان گزینه ذخیره تغییرات را بزنید.

روش سوم: استفاده از css در اضافه کردن تصاویر پس زمینه

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

خطای 404 چیست؟ آموزش رفع خطای 404
>>

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

آدرس  تصویر پس زمینه URL و کلاس دسته بندی (category) را با تنظیمات سایت جایگزین کنید.

می توانید به پست ها و صفحات خود، پس زمینه های خاص هم اضافه کنید.

وردپرس به طور خودکار یک کلاس CSS با ID پست یا صفحه در تگ body اضافه می کند.

از همان کد CSS استفاده کنید و فقط عبارت خود را آن جایگزین کنید.

وردپرس به صورت اتوماتیک موقع بازدید هر کاربر از یک صفحه دسته بندی ، کلاس های CSS را به تگ body اضافه می کند.

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

افزونه CSS HERO

افزونه CSS HERO یک افزونه قدرتمند وردپرس است که به شما امکان ویرایش استایل ها و نحوه نمایش قالب سایت خود را از طریق کاربری گرافیکی و به شکلی ساده مطابق سلیقه خودتان می دهد.

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

تعدادی از بهترین امکانات افزونه CSS HERO
  • رابط کاربری آسان
  • سازگاری با قالب های محبوب و کاربردی
  • سفارشی سازی رنگ ها، فونت ها، تغییر اندازه قالب ها، افکت های ویژه
  • استفاده از استایل های از پیش آماده شده
  • قابلیت ریسپانسیو بودن

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

استفاده از یک ویدیو در پس زمینه یک سایت وردپرسی

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

استفاده از افزونه، برای افزودن ویدیو در پس زمینه یک راه مناسب است.

چگونه سایت بسازیم؟
>>

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

پس از نصب و فعال سازی از پنل مدیریت وردپرس به mb.ideas بروید.

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

نکات مهم قرار دادن عکس در پس زمینه سایت

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

در واقع باید تصویر انتخابی شما مربوط به حوزه کاری تان باشد.

  • بهینه کردن تصاویر

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

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

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

  • تاثیر پس زمینه در ذهن کاربر

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

بهتر است از خلاقانه ترین ایده های خود برای تمرکز بیشتر کاربر روی سایت استفاده کنید تا زمان بیشتری را در سایت شما سپری کند.

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

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

لطفا نظرات خود را با ما در میان بگذارید.

Author

مدیریت سایت

Leave a comment

نشانی ایمیل شما منتشر نخواهد شد.