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

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

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

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

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

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

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

1. وارد ادمین وردپرس خود شوید page و حرکت کنید به ظاهر → شخصی سازی.

2. در صفحه سفارشی ساز تم، به صفحه بروید تصویر پس زمینه گزینه.

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

4. در صفحه کتابخانه رسانه، یک عکس را انتخاب کنید یا یک تصویر جدید اضافه کنید و کلیک کنید تصویر را انتخاب کنید.

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

6. تغییرات را ذخیره کنید.

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

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

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

1. از داشبورد وردپرس، به مسیر بروید صفحات → تمام صفحات. a را باز کنید page با کلیک کردن روی عنوان.

2. باز کن Block Inserter را فشار دهید و اضافه کنید پوشش مسدود کردن.

3. برای ایجاد یک تصویر پس زمینه با عرض کامل، بلوک پوشش را انتخاب کنید و انتخاب کنید تراز کردن → تمام عرض.

4. عناصری را که می خواهید در خود قرار دهید page. به عنوان مثال، ما چندین الگوی بلوک وردپرس را اضافه کردیم.

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

6. انتخاب کنید بلوک پوششی و کلیک کنید رسانه اضافه کنید. سپس، انتخاب کنید کتابخانه رسانه را باز کنید.

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

8. باز کن پنل تنظیمات بلوک برای سفارشی کردن بلوک پوشش. به عنوان مثال، ما موقعیت را روی یک پس‌زمینه ثابت قرار می‌دهیم و Opacity همپوشانی را روی 50 تنظیم می‌کنیم.

9. تغییرات را ذخیره کنید.

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

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

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

1. هدایت به صفحات → تمام صفحات و a را باز کنید page می خواهید در ویرایشگر بلوک ویرایش کنید.
2. باز کن Block Inserter را فشار دهید و اضافه کنید گروه مسدود کردن.
3. باز کن سبک ها را برگه و پیدا کنید زمینه بخش.

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

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

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

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

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

1. جدید ایجاد کنید page با استفاده از ویرایشگر SeedProd، یا یکی از الگوهای از پیش ساخته شده سازنده را انتخاب کنید و آن را با عناصر پر کنید.
2. به نوار کناری سمت چپ ویرایشگر بروید و آن را انتخاب کنید دنده نماد برای باز کردن تنظیمات جهانی.

3. گسترش دهید زمینه بخش و تصویر پس زمینه خود را آپلود کنید. اگر می‌خواهید به کتابخانه تصویر استوک SeedProd دسترسی پیدا کنید، با شروع به Pro ارتقا دهید 31.60 دلار در سال.

4. موقعیت و سبک تصویر پس زمینه را با استفاده از تنظیمات پیکربندی کنید روی نوار کناری سمت چپ

5. ذخیره یا منتشر کنید page.

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

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

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

1. از داشبورد وردپرس، به ظاهر → شخصی سازی.
2. در صفحه سفارشی ساز تم، کلیک کنید CSS اضافی.

3. کد CSS زیر را در ویرایشگر متن وارد کنید:

body {
  background-image: url(example.com/wordpress-background-image/);
}

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

4. اگر تصویر با تنظیمات برگزیده شما مطابقت ندارد، کد CSS زیر را اضافه کنید:

body {
  background-attachment: fixed;
  background-size: cover;
}

5. خروجی به شکل زیر خواهد بود:

6. تغییرات را ذخیره کنید.

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

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

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

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

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

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

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

از یک تصویر قانونی یا رایگان استفاده کنید

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

نتیجه

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

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

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