وردپرس یک سیستم مدیریت محتوای محبوب (CMS) است که به طور مداوم ویژگی های بصری و قدرتمندی را برای طراحی یک وب سایت جذاب ارائه می دهد. یکی از ویژگی های آن اضافه کردن تصاویر پس زمینه سفارشی برای کمک به جذابیت بیشتر وب سایت است.

به خصوص اگر یک وب سایت تجاری وردپرس دارید، این ویژگی می تواند برند شما را بهبود بخشد.

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

تصویر پس‌زمینه وردپرس یک عنصر بصری است که معمولاً کل بخش یا بخش را اشغال می‌کند page از وب سایت شما این به جذب بازدیدکنندگان و جلب توجه آنها به وب کمک می کند page.

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

Customizer Theme WordPress یک ویژگی داخلی است که به شما امکان می دهد یک تصویر پس زمینه سفارشی اضافه کنید، منوها را ایجاد کنید و طرح های رنگی را تغییر دهید. با این حال، این ویژگی فقط برای تم های کلاسیک رایگان وردپرس، مانند Twenty Twenty، Twenty Fifteen و Twenty Seventeen در دسترس است.

بنر میزبانی وردپرس
روش اضافه کردن تصاویر پس زمینه وردپرس: 5 روش آسان و بهترین روش 38

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

  1. وارد ادمین وردپرس خود شوید page و حرکت کنید به ظاهرشخصی سازی.
داشبورد وردپرس با دکمه Customize برجسته شده استداشبورد وردپرس با دکمه Customize برجسته شده است
  1. در صفحه سفارشی ساز تم، به صفحه بروید تصویر پس زمینه گزینه.
Customizer Theme WordPress که گزینه Background Image را برجسته می کندCustomizer Theme WordPress که گزینه Background Image را برجسته می کند
  1. کلیک کنید بر روی تصویر را انتخاب کنید دکمه برای باز کردن کتابخانه رسانه.
دکمه انتخاب تصویر برجسته شده در سفارشی ساز تم وردپرسدکمه انتخاب تصویر برجسته شده در سفارشی ساز تم وردپرس
  1. در صفحه کتابخانه رسانه، یک عکس را انتخاب کنید یا یک تصویر جدید اضافه کنید و کلیک کنید تصویر را انتخاب کنید.
پنجره بازشو Media Library که دکمه Insert Media را برجسته می کندپنجره بازشو Media Library که دکمه Insert Media را برجسته می کند
  1. از گزینه های سفارشی سازی تصویر برای تنظیم موقعیت پس زمینه، از پیش تعیین شده و اندازه استفاده کنید.
پنجره Theme Customizer گزینه های سفارشی سازی تصویر را برجسته می کندپنجره Theme Customizer گزینه های سفارشی سازی تصویر را برجسته می کند
  1. تغییرات را ذخیره کنید.

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

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

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

  1. از داشبورد وردپرس، به مسیر بروید صفحاتتمام صفحات. a را باز کنید page با کلیک کردن روی عنوان.
داشبورد وردپرس با صفحه اصلی page برجسته شده استداشبورد وردپرس با صفحه اصلی page برجسته شده است
  1. باز کن Block Inserter را فشار دهید و اضافه کنید پوشش مسدود کردن.
ویرایشگر بلوک وردپرس که بلوک پوشش را برجسته می کندویرایشگر بلوک وردپرس که بلوک پوشش را برجسته می کند
  1. برای ایجاد یک تصویر پس زمینه با عرض کامل، بلوک پوشش را انتخاب کنید و انتخاب کنید تراز کردنتمام عرض.
ویرایشگر وردپرس با گزینه Full Width برجسته شده استویرایشگر وردپرس با گزینه Full Width برجسته شده است
  1. عناصری را که می خواهید در خود قرار دهید page. به عنوان مثال، ما چندین الگوی بلوک وردپرس را اضافه کردیم.
  1. الگوهای بلوک را با بلوک پوشش گروه بندی کنید. می بایست شبیه به این باشه:
ویرایشگر بلوک وردپرس که نمای لیست را با بلوک جلد برجسته نشان می دهدویرایشگر بلوک وردپرس که نمای لیست را با بلوک جلد برجسته نشان می دهد
  1. انتخاب کنید بلوک پوششی و کلیک کنید رسانه اضافه کنید. سپس، انتخاب کنید کتابخانه رسانه را باز کنید.
ویرایشگر بلوک وردپرس که گزینه Add Media را برجسته می کندویرایشگر بلوک وردپرس که گزینه Add Media را برجسته می کند
  1. در صفحه کتابخانه رسانه وردپرس، تصویر دلخواه خود را انتخاب کنید. علاوه بر این، توصیه می کنیم برای دسترسی بهتر، متن جایگزین را به تصویر خود اضافه کنید. سپس، کلیک کنید انتخاب کنید.
پنجره بازشو Media Library با دکمه Select برجسته شده استپنجره بازشو Media Library با دکمه Select برجسته شده است
  1. باز کن پنل تنظیمات بلوک برای سفارشی کردن بلوک پوشش. به عنوان مثال، ما موقعیت را روی یک پس‌زمینه ثابت قرار می‌دهیم و Opacity همپوشانی را روی 50 تنظیم می‌کنیم.
ویرایشگر بلوک وردپرس که تصویر پس زمینه یک پرنده را نشان می دهدویرایشگر بلوک وردپرس که تصویر پس زمینه یک پرنده را نشان می دهد
  1. تغییرات را ذخیره کنید.
پیشنهاد می‌کنیم بخوانید:  37 بهترین تم WooCommerce برای فروشگاه آنلاین شما

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

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

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

  1. هدایت به صفحاتتمام صفحات و a را باز کنید page می خواهید در ویرایشگر بلوک ویرایش کنید.
  2. باز کن Block Inserter را فشار دهید و اضافه کنید گروه مسدود کردن.
  3. باز کن سبک ها را برگه و پیدا کنید زمینه بخش.
بخش تصویر پس زمینه on پانل تنظیمات بلوک گروهبخش تصویر پس زمینه on پانل تنظیمات بلوک گروه
  1. کلیک روی را تصویر پس زمینه را فشار دهید و یکی را انتخاب کنید کتابخانه رسانه را باز کنید برای انتخاب یک تصویر از کتابخانه رسانه وردپرس خود یا بارگذاری برای آپلود یک تصویر جدید از رایانه خود.
  2. اکنون بلوک گروه باید تصویر پس زمینه ای را که انتخاب کرده اید داشته باشد. با افزودن بلوک‌های بیشتر در داخل بلوک گروه، به ویرایش محتوا ادامه دهید.

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

چگونه با استفاده از صفحه ساز یک تصویر پس زمینه سفارشی اضافه کنیم

راه آسان دیگر برای افزودن پس‌زمینه سفارشی، استفاده از وردپرس است page سازنده. SeedProd یکی از محبوب ترین وردپرس ها است page سازندگانی که ویژگی‌های قدرتمند و در عین حال کاربرپسند، مانند ویرایشگر کشیدن و رها کردن و گزینه‌های سفارشی‌سازی عناصر پیشرفته را ارائه می‌دهند.

در این قسمت به مراحل آن می پردازیم روی روش تنظیم یک تصویر پس زمینه با SeedProd page سازنده:

  1. جدید ایجاد کنید page با استفاده از ویرایشگر SeedProd، یا یکی از الگوهای از پیش ساخته شده سازنده را انتخاب کنید و آن را با عناصر پر کنید.
  2. به نوار کناری سمت چپ ویرایشگر بروید و آن را انتخاب کنید دنده نماد برای باز کردن تنظیمات جهانی.
ویرایشگر SeedProd با نماد تنظیمات جهانی برجسته شده است.ویرایشگر SeedProd با نماد تنظیمات جهانی برجسته شده است.
  1. گسترش دهید زمینه بخش و تصویر پس زمینه خود را آپلود کنید. اگر می‌خواهید به کتابخانه تصویر استوک SeedProd دسترسی پیدا کنید، با شروع به Pro ارتقا دهید 31.60 دلار در سال.
ویرایشگر SeedProd با بخش تصویر پس‌زمینه در تنظیمات جهانی برجسته شده است.ویرایشگر SeedProd با بخش تصویر پس‌زمینه در تنظیمات جهانی برجسته شده است.
  1. موقعیت و سبک تصویر پس زمینه را با استفاده از تنظیمات پیکربندی کنید روی نوار کناری سمت چپ
پیکربندی تصویر پس زمینه on ویرایشگر SeedProd.پیکربندی تصویر پس زمینه on ویرایشگر SeedProd.
  1. ذخیره یا منتشر کنید page.
پیشنهاد می‌کنیم بخوانید:  37 بهترین تم WooCommerce برای فروشگاه آنلاین شما

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

با استفاده از کد سفارشی Cascading Style Sheets (CSS) می توان یک تصویر را به عنوان پس زمینه جاسازی کرد. به این ترتیب، می‌توانید تصاویر پس‌زمینه را به راحتی روی صفحات، پست‌ها و دسته‌ها تنظیم کنید.

بیایید مراحل اضافه کردن یک تصویر پس زمینه را با استفاده از آن مرور کنیم CSS اضافییکی از ویژگی های سفارشی ساز قالب وردپرس:

  1. از داشبورد وردپرس، به ظاهرشخصی سازی.
  2. در صفحه سفارشی ساز تم، کلیک کنید CSS اضافی.
ویرایشگر تم وردپرس با CSS اضافی برجسته شده استویرایشگر تم وردپرس با CSS اضافی برجسته شده است
  1. کد CSS زیر را در ویرایشگر متن وارد کنید:
body {
  background-image: url(example.com/wordpress-background-image/);
}

URL داخل پرانتز را با URL تصویر پس زمینه دلخواه خود تغییر دهید.

  1. اگر تصویر با تنظیمات برگزیده شما مطابقت ندارد، کد CSS زیر را اضافه کنید:
body {
  background-attachment: fixed;
  background-size: cover;
}
  1. خروجی به شکل زیر خواهد بود:
سفارشی ساز قالب وردپرس که کد CSS، یک تصویر پس زمینه و چندین بلوک وردپرس را نشان می دهدسفارشی ساز قالب وردپرس که کد CSS، یک تصویر پس زمینه و چندین بلوک وردپرس را نشان می دهد
  1. تغییرات را ذخیره کنید.

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

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

بهینه سازی تصاویر

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

اندازه تصویر را به درستی تنظیم کنید

هنگام انتخاب تصویر پس زمینه به اندازه تصویر وردپرس توجه کنید. رایج ترین اندازه برای تصاویر پس زمینه است 1024 x 768 پیکسل ها با این حال، می توانید از تصاویر با وضوح بالا تا 1920 x 1080 پیکسل و الف 16:9 نسبت، بنابراین آنها عالی به نظر می رسند روی صفحه نمایش دستگاه های مختلف

همچنین، آن را با استفاده از یک سایت محلی آزمایش کنید روی دستگاه های متعدد

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

نتیجه

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

در این مقاله، راهنمای کاملی برای افزودن تصاویر پس‌زمینه وردپرس با استفاده از Theme Customizer، ویرایشگر بلاک وردپرس، ارائه کرده‌ایم. page سازنده و CSS.

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