

آیا می خواهید یک تغییر رنگ پس زمینه نرم در سایت وردپرس خود اضافه کنید؟ شما ممکن است در برخی از وب سایت های محبوب مشاهده کنید که رنگ پس زمینه یک منطقه خاص یا کل صفحه وب به طور خودکار از یک رنگ به یک دیگر تغییر می کند. این اثر زیبا می تواند به شما کمک کند توجه کاربران را افزایش داده و تعامل را در وب سایت خود افزایش دهید. در این مقاله، ما به شما نشان می دهیم که چگونه یک تغییر رنگ پس زمینه نرم در سایت وردپرس خود اضافه کنید.
اثر تغییر رنگ پس زمینه صاف چیست؟
اثر تغییر رنگ پس زمینه صاف به شما اجازه می دهد به طور خودکار بین رنگ های پس زمینه مختلف انتقال دهید. این تغییر به آرامی با رنگ های مختلف ادامه می یابد تا رنگ نهایی به آن برسد. این به نظر می رسد:
این تکنیک برای جلب توجه کاربر با اثرات ملایم است که برای چشم لذت بخش است.
به این ترتیب، بیایید نگاهی به نحوه اضافه کردن این تغییر رنگ پس زمینه تغییر رنگ در هر تم وردپرس کنیم.
اضافه کردن اثر تغییر رنگ پس زمینه صاف در وردپرس
اول، شما نیاز به پیدا کردن کلاس CSS از منطقه ای که می خواهید تغییر دهید. شما می توانید با استفاده از ابزار Inspect در مرورگر خود این کار را انجام دهید. به سادگی ماوس خود را به منطقه ای که می خواهید تغییر دهید را انتخاب کرده و راست کلیک کنید تا ابزار Inspect را انتخاب کنید.
بعد، شما باید کلاس CSS مورد نظر خود را بنویسید. به عنوان مثال، در تصویر بالا ما می خواهیم منطقه ویجت را در پایین قرار دهیم که دارای کلاس "page-header" است.
در مرحله بعد، شما باید یک ویرایشگر متن ساده را در رایانه خود باز کنید و یک فایل جدید ایجاد کنید. شما باید این فایل را به عنوان wpb-background-tutorial.js بر روی دسکتاپ خود ذخیره کنید.بعد، شما باید کد زیر را در داخل فایل JS خود اضافه کنید:
jQuery(function($){ $('.page-header').each(function(){ var $this = $(this), colors = ['#ec008c', '#00bcc3', '#5fb26a', '#fc7331']; setInterval(function(){ var color = colors.shift(); colors.push(color); $this.animate({backgroundColor: color}, 2000); },4000); }); });
اگر شما این کد را مطالعه میکنید، متوجه خواهید شد که ما از کلاس CSS که میخواهیم در کد استفاده کنیم استفاده کردهایم. ما همچنین چهار رنگ اضافه کرده ایم. اثر پس زمینه صاف از رنگ اول شروع می شود و سپس به رنگ بعدی تبدیل می شود و از طریق این رنگ ها ادامه پیدا می کند.
بعد، شما باید فایل wpb-bg-tutorial.js را به پوشه / js / پوشه وردپرس خود با استفاده از FTP آپلود کنید.
پس از آپلود فایل جاوا اسکریپت، وقت آن است که آن را در WordPress بارگذاری کنید.
شما باید کد زیر را به فایل functions.php تم خود اضافه کنید.
function wpb_bg_color_scripts() { wp_enqueue_script( 'wpb-background-tutorial', get_stylesheet_directory_uri() . '/js/wpb-background-tutorial.js', array( 'jquery-color' ), '1.0.0', true ); } add_action( 'wp_enqueue_scripts', 'wpb_bg_color_scripts' );
این کد به درستی بار فایل جاوا اسکریپت و اسکریپت وابسته به jQuery را که برای کار با این کد نیاز دارید بارگیری می کند.
تمام، شما هم اکنون می توانید وب سایت خود را ببینید تا آن را در عمل ببینید.
محصولات مشابه فروشی
-
طرح لایه باز موکاپ لوگو با فرمت psd با زمینه مشکی
موکاپبیشک حتمای این موکاپ لوگو را در هیچ مارکت ایرانی نخواهید دید! زیباترین موکاپ لایه باز لوگو یک موکاپ خاص و متفاوت به پیش نمایش طرح خود هدیه دهید... موکاپ های حرفه ای Premium خارجی را با قیمت مناسب از ملت وب خریداری کنید. موکاپ لایه باز لوگو کاملا لایه باز بوده و این طرح در مارکت های خارجی بصورت رایگان نیست و بصورت پولی عرضه میشه و ملت وب برای راحتی شما عزیزان این موکاپ های لایه باز را خریداری کرده و در اختیار شما عزیزان با هزینه ای اندک قرار داده ایم و شما از این موکاپ لایه باز میتوانید در طرح های مختلف به عنوان پیش نمایش کار خود استفاده کنید و کار خود را حرفه ای تر به نمایش بگذارید.این طرح موکاپ کاملاً لایه باز با فرمت psd و از مد رنگی RGB که مخصوص دسکتاپ هست استفاده شده.این طرح با طراحی شیک و مدرن با رزولوشن ۳۰۰ DPII می باشد. از این طرح موکاپ لوگو...25000 -
طرح لایه باز موکاپ لوگو با فرمت psd با زمینه مشکی
موکاپبیشک حتمای این موکاپ لوگو را در هیچ مارکت ایرانی نخواهید دید! زیباترین موکاپ لایه باز لوگو یک موکاپ خاص و متفاوت به پیش نمایش طرح خود هدیه دهید... موکاپ های حرفه ای Premium خارجی را با قیمت مناسب از ملت وب خریداری کنید. موکاپ لایه باز لوگو کاملا لایه باز بوده و این طرح در مارکت های خارجی بصورت رایگان نیست و بصورت پولی عرضه میشه و ملت وب برای راحتی شما عزیزان این موکاپ های لایه باز را خریداری کرده و در اختیار شما عزیزان با هزینه ای اندک قرار داده ایم و شما از این موکاپ لایه باز میتوانید در طرح های مختلف به عنوان پیش نمایش کار خود استفاده کنید و کار خود را حرفه ای تر به نمایش بگذارید.این طرح موکاپ کاملاً لایه باز با فرمت psd و از مد رنگی RGB که مخصوص دسکتاپ هست استفاده شده.این طرح با طراحی شیک و مدرن با رزولوشن ۳۰۰ DPII می باشد. از این طرح موکاپ لوگو...25000 -
طرح لایه باز موکاپ لوگو با فرمت psd با زمینه مشکی
موکاپبیشک حتمای این موکاپ لوگو را در هیچ مارکت ایرانی نخواهید دید! زیباترین موکاپ لایه باز لوگو یک موکاپ خاص و متفاوت به پیش نمایش طرح خود هدیه دهید... موکاپ های حرفه ای Premium خارجی را با قیمت مناسب از ملت وب خریداری کنید. موکاپ لایه باز لوگو کاملا لایه باز بوده و این طرح در مارکت های خارجی بصورت رایگان نیست و بصورت پولی عرضه میشه و ملت وب برای راحتی شما عزیزان این موکاپ های لایه باز را خریداری کرده و در اختیار شما عزیزان با هزینه ای اندک قرار داده ایم و شما از این موکاپ لایه باز میتوانید در طرح های مختلف به عنوان پیش نمایش کار خود استفاده کنید و کار خود را حرفه ای تر به نمایش بگذارید.این طرح موکاپ کاملاً لایه باز با فرمت psd و از مد رنگی RGB که مخصوص دسکتاپ هست استفاده شده.این طرح با طراحی شیک و مدرن با رزولوشن ۳۰۰ DPII می باشد. از این طرح موکاپ لوگو...25000 -
موکاپ لوگو لایه باز با فرمت psd زمینه مشکی
موکاپبیشک حتمای این موکاپ لوگو را در هیچ مارکت ایرانی نخواهید دید! زیباترین موکاپ لایه باز لوگو یک موکاپ خاص و متفاوت به پیش نمایش طرح خود هدیه دهید... موکاپ های حرفه ای Premium خارجی را با قیمت مناسب از ملت وب خریداری کنید. موکاپ لایه باز لوگو کاملا لایه باز بوده و این طرح در مارکت های خارجی بصورت رایگان نیست و بصورت پولی عرضه میشه و ملت وب برای راحتی شما عزیزان این موکاپ های لایه باز را خریداری کرده و در اختیار شما عزیزان با هزینه ای اندک قرار داده ایم و شما از این موکاپ لایه باز میتوانید در طرح های مختلف به عنوان پیش نمایش کار خود استفاده کنید و کار خود را حرفه ای تر به نمایش بگذارید.این طرح موکاپ کاملاً لایه باز با فرمت psd و از مد رنگی RGB که مخصوص دسکتاپ هست استفاده شده.این طرح با طراحی شیک و مدرن با رزولوشن ۳۰۰ DPII می باشد. از این طرح موکاپ لوگو...25000 -
موکاپ لایه باز بنر استند با فرمت psd طرح زمینه ساده
موکاپبیشک حتمای این موکاپ را در هیچ مارکت ایرانی نخواهید دید! زیباترین موکاپ لایه باز بنر استند یک موکاپ خاص و متفاوت به پیش نمایش طرح خود هدیه دهید... موکاپ های حرفه ای Premium خارجی را با قیمت مناسب از ملت وب خریداری کنید. موکاپ لایه باز بنر کاملا لایه باز بوده و این طرح در مارکت های خارجی بصورت رایگان نیست و بصورت پولی عرضه میشه و ملت وب برای راحتی شما عزیزان این موکاپ های لایه باز را خریداری کرده و در اختیار شما عزیزان با هزینه ای اندک قرار داده ایم و شما از این موکاپ لایه باز میتوانید در طرح های مختلف به عنوان پیش نمایش کار خود استفاده کنید و کار خود را حرفه ای تر به نمایش بگذارید.این طرح موکاپ کاملاً لایه باز با فرمت psd و از مد رنگی RGB که مخصوص دسکتاپ هست استفاده شده.این طرح با طراحی شیک و مدرن با رزولوشن ۳۰۰ DPII می باشد. از این طرح موکاپ...25000
آخرین های مشابه مشاهده بیشتر
-
تغییر رنگ نرم پس زمینه در وردپرس
آموزش wordpressآیا می خواهید یک تغییر رنگ پس زمینه نرم در سایت وردپرس خود اضافه کنید؟ شما ممکن است در برخی از وب سایت های محبوب مشاهده کنید که رنگ پس زمینه یک منطقه خاص یا کل صفحه وب به طور خودکار از یک رنگ به یک دیگر تغییر می کند. این اثر زیبا می تواند به شما کمک کند توجه کاربران را افزایش داده و تعامل را در وب سایت خود افزایش دهید. در این مقاله، ما به شما نشان می دهیم که چگونه یک تغییر رنگ پس زمینه نرم...رایگان -
تغییر نشانی وردپرس (URL)
آموزش wordpressآدرس های وب سایت اصلی ترین بخش هر سایت برای استفاده کاربران هستند که همانند پل های ارتباطی بخش های مختلف را به هم پیوند می زنند. همیشه باید توجه داشته باشید که در سلامت کامل باشند! تا مشکلی برای سایت و کاربران وبسایت تان پیش نیاد. امروز در این مقاله به بررسی تغییر نشانی وردپرس(URL) می پردازیم. در این بخش اطلاعاتی برای انتقال یک وردپرس از یک سایت به سایت دیگر به شما ارائه...رایگان -
نحوه تغییر آواتار پیش فرض در وردپرس
آموزش wordpressبا سلام خدمت کاربران عزیر؛ آواتار به تصویری گفته میشود که کاربران در اینترنت و به خصوص در تالار گفتگو به عنوان نماد کاربری خود استفاده میکنند. هر کسی که در وردپرس اقدام به ایجاد یک پروفایل کند، در صورت آپلود نکردن عکسی برای خود، آواتار پیش فرضوردپرس به عنوان نمادی از تصویر کاربری او نمایش داده می شود. همچنین در تمام سایت های وردپرس هنگامی که کاربران نظرات و...رایگان -
آموزش تغییر نام کاربری در وردپرس با 3 روش
آموزش wordpressتغییر نام کاربری در وردپرس مشکلی نیست که نتوان حل کرد . در این آموزش ما به شما 3 راه حل برای این مشکل را بیان خواهیم کرد. در اینجا چیزهایی که در این مقاله بحث خواهیم کرد: چگونه نام کاربری وردپرس را با افزونه تغییر دهیم. نام کاربری وردپرس را از طریق پایگاه داده تغییر دهیم. یک کاربر جدید برای جایگزینی یک کاربر موجود ایجاد کنیم. چگونه یک نام کاربری وردپرس را تغییر دهیم (با 3...رایگان -
آموزش تغییر ایمیل مدیریت در وردپرس (2 روش)
آموزش wordpressآیا می خواهید ایمیل مدیریت وردپرس را برای وب سایت خود تغییر دهید؟ به طور پیش فرض، وردپرس از اولین آدرس ایمیل شما به عنوان ایمیل مدیریت وب سایت شما استفاده می کند. همچنین به عنوان آدرس ایمیل اولین حساب کاربری مدیر استفاده می شود. در این مقاله به شما نشان خواهیم داد که چگونه به راحتی آدرس ایمیل مدیریت admin وردپرس را تغییر دهید. چرا و چه زمانی نیاز به تغییر ایمیل ادرس وردپرس...رایگان -
آموزش حذف گزینه تغییر رمز عبور از وردپرس
آموزش wordpressآیا می خواهید گزینه ی بازنشانی رمز عبور را در وردپرس بردارید؟ به طور پیش فرض، وردپرس به کاربران اجازه می دهد با ارسال آدرس ایمیل خود، رمز عبور را تغییر داده را ریستن کنند. گاهی اوقات شما ممکن است بخواهید گزینه تنظیم مجدد رمز عبور را در WordPress غیرفعال کنید. در این مقاله، ما به شما نحوه حذف گزینه تنظیم مجدد / تغییر رمز عبور را از وردپرس نشان می دهیم. روش 1: غیرفعال کردن رمز عبور تنظیم مجدد /...رایگان -
نحوه تغییر اندازه فونت در وردپرس
آموزش wordpressمراحل تغییر اندازه فونت در وردپرس پس از ورود به داشبورد وردپرس، روی برگه ها کلیک کنید. شما می توانید همین کار را برای پست انجام دهید. روی پیوند ویرایش زیر یک صفحه کلیک کنید. ویرایشگر را به نمای ویژوال تغییر دهید. بر روی یک پاراگراف کلیک کنید که می خواهید اندازه متن آن را تغییر دهید. از فهرست سبک ها را از لیست کشویی انتخاب کنید. روی دکمه Update کلیک کنید تا زمانی که به پایان...رایگان -
آموزش تغییر قالب وردپرس از طریق phpMyAdmin
آموزش wordpressاگر شما قادر به دسترسی به منطقه مدیریت مدیر وردپرس خود نیستید، باید راه های دیگری برای تغییر تم وردپرس خود پیدا کنید. در این مقاله، ما به شما نشان خواهیم داد که چگونه به راحتی تم وردپرس خود را از طریق phpMyAdmin تغییر دهید. چرا شما نیاز به استفاده از phpMyAdmin دارید؟ به طور معمول، ساده ترین راه برای تغییر تم وردپرس از نمایش » پوسته ها در منطقه مدیریت وردپرس است. با این حال، گاهی اوقات...رایگان -
آموزش تغییر نامک آدرس نویسنده در وردپرس
آموزش wordpressسلام و درود در این مقاله، ما به شما نشان می دهیم که چگونه می توانید اسلاگ (نامک) URL نویسنده و پایگاه را در وردپرس تغییر دهید. یک URL Slug و URL Base چیست؟ در اصطلاحات وردپرس ، یک Slug عنوان یک صفحه قابل مشاهده عمومی در وردپرس است که در URL ها استفاده می شود. مثال این: https://example.com/author/syed-balkhi/ در مثال بالا، syed-balkhiنامک است و author پایه است. در حالی که کاربران می توانند لایه ها و...رایگان -
تغییر آدرس ورود به سایت در وردپرس WPS Hide Login
آموزش wordpressوردپرس در عین حال که قدرتمند ترین سیستم مدیریت محتوا دنیا محسوب می شود، گاهی نفوذ پذیر می شود و این امر موجب پایین آمدن امنیت سایت می باشد و خسارت آن نیز ممکن است جبران ناپذیر شود. بیشتر نفوذ ها از طریق صفحه ورود سایت ها می باشد و ما با کمک افزونه ای که امروز قصد معرفی و آموزش آن را داریم شما را قادر میکند که امکان تغییر آدرس ورود به پنل وردپرس که wp-login.php یاwp-admin می باشد را به نام...رایگان -
آموزش تغییر نام کاربری و رمز عبور پیشخوان وردپرس از دیتابیس
با سلام خدمت شما عزیزان در بخش از آموزش وردپرس می خواهیم نحوه ی تغییر رمز عبور وردپرس از طریق دیتابیس رو براتون توضیح بدیم. پس با ما همراه باشید. اگر شما دسترسی به پیشخوان وردپرس داشته باشین برای تغییر رمز نیاز نیست از طریق هاست اقدام کنید ولی در مواقعی که دسترسی شما به پیشخوان به دلایلی مثلا فراموشی رمز , نصب قالب جدید از طریق بسته نصبی بدون تغییر رمز پیشخوان و .... شما نیاز...رایگان -
تغییر رنگ بندی نوار آدرس در گوگل کروم برای وردپرس
آموزش wordpressاگر دقت کرده باشید سایت هایی مانند instagram در گوشی موبایل قسمت آدرس بار رنگی دارند. حتما با خودتان سوال کردید که چطور این سایت ها نوار آدرس رنگی دارند و شما هم تصمیم گرفتید که دنبال راهکاری باشید که رنگ بندی نوار آدرس برای وردپرس را انجام دهید و آن را خاص کنید! پس با این مقاله همراه باشید. یکی از مزیت های رنگی کردن آدرس بار، ایجاد فضای دلپذیر و جذاب برای بازدید کننده...رایگان -
آموزش تغییر متون وردپرس در تمامی نوشته نظرات دسته بندی ها
آموزش wordpressآیا تا به حال متوجه شده اید که در هنگام نوشتن یک پست وردپرس اشتباه کرده اید یا متوجه شوید که هیچ راهی آسان برای جستجو و جایگزینی این کلمه در کل پست وجود ندارد؟ اگر چند ماه پیش چندین کلمه یا عبارت یا عبارت نادرست نوشتید چی؟متاسفانه، وردپرس به شما اجازه نمی دهد که متن را به راحتی جستجو کنید و جایگزین کنید ، اما ما قصد داریم پلاگین های رایگان را به شما نشان دهیم که می...رایگان -
وکتور رایگان پس زمینه معماری پس زمینه ساخت و ساز
وکتوردانلود وکتور توسط طراحان ملت که منبع طراح های رایگان گرافیکی می باشد را تقدیم کاربران عزیز خود میکند، همچنین می توانید از خدمات قالب وردپرس ملت وب نیز بهرمند گردید. چگونه میتوانم این طرح را ویرایش کنم ؟ این طرح قابل تبدیل به فایل پی اس دی لایه باز می باشد که میتوانید از طریق آموزش تبدیل eps به psd این کار را به راحتی انجام...رایگان -
دانلود طرح پس زمینه پس زمینه رایگان
وکتوردانلود وکتور توسط طراحان ملت که منبع طراح های رایگان گرافیکی می باشد را تقدیم کاربران عزیز خود میکند، همچنین می توانید از خدمات قالب وردپرس ملت وب نیز بهرمند گردید. چگونه میتوانم این طرح را ویرایش کنم ؟ این طرح قابل تبدیل به فایل پی اس دی لایه باز می باشد که میتوانید از طریق آموزش تبدیل eps به psd این کار را به راحتی انجام...رایگان -
پس زمینه گل طلایی 3D
وکتوردانلود وکتور توسط طراحان ملت که منبع طراح های رایگان گرافیکی می باشد را تقدیم کاربران عزیز خود میکند، همچنین می توانید از خدمات قالب وردپرس ملت وب نیز بهرمند گردید. چگونه میتوانم این طرح را ویرایش کنم ؟ این طرح قابل تبدیل به فایل پی اس دی لایه باز می باشد که میتوانید از طریق آموزش تبدیل eps به psd این کار را به راحتی انجام...رایگان -
دانلود پس زمینه خطوط
وکتوردانلود وکتور توسط طراحان ملت که منبع طراح های رایگان گرافیکی می باشد را تقدیم کاربران عزیز خود میکند، همچنین می توانید از خدمات قالب وردپرس ملت وب نیز بهرمند گردید. چگونه میتوانم این طرح را ویرایش کنم ؟ این طرح قابل تبدیل به فایل پی اس دی لایه باز می باشد که میتوانید از طریق آموزش تبدیل eps به psd این کار را به راحتی انجام...رایگان -
پس زمینه رایگان فوتبال
وکتوردانلود وکتور توسط طراحان ملت که منبع طراح های رایگان گرافیکی می باشد را تقدیم کاربران عزیز خود میکند، همچنین می توانید از خدمات قالب وردپرس ملت وب نیز بهرمند گردید. چگونه میتوانم این طرح را ویرایش کنم ؟ این طرح قابل تبدیل به فایل پی اس دی لایه باز می باشد که میتوانید از طریق آموزش تبدیل eps به psd این کار را به راحتی انجام...رایگان -
دانلود پس زمینه با گل آبرنگ
وکتوردانلود وکتور توسط طراحان ملت که منبع طراح های رایگان گرافیکی می باشد را تقدیم کاربران عزیز خود میکند، همچنین می توانید از خدمات قالب وردپرس ملت وب نیز بهرمند گردید. چگونه میتوانم این طرح را ویرایش کنم ؟ این طرح قابل تبدیل به فایل پی اس دی لایه باز می باشد که میتوانید از طریق آموزش تبدیل eps به psd این کار را به راحتی انجام...رایگان -
دانلود پس زمینه گل سبک نقاشی
وکتوردانلود وکتور توسط طراحان ملت که منبع طراح های رایگان گرافیکی می باشد را تقدیم کاربران عزیز خود میکند، همچنین می توانید از خدمات قالب وردپرس ملت وب نیز بهرمند گردید. چگونه میتوانم این طرح را ویرایش کنم ؟ این طرح قابل تبدیل به فایل پی اس دی لایه باز می باشد که میتوانید از طریق آموزش تبدیل eps به psd این کار را به راحتی انجام...رایگان -
پس زمینه گل آبرنگ گرادیانت
وکتوردانلود وکتور توسط طراحان ملت که منبع طراح های رایگان گرافیکی می باشد را تقدیم کاربران عزیز خود میکند، همچنین می توانید از خدمات قالب وردپرس ملت وب نیز بهرمند گردید. چگونه میتوانم این طرح را ویرایش کنم ؟ این طرح قابل تبدیل به فایل پی اس دی لایه باز می باشد که میتوانید از طریق آموزش تبدیل eps به psd این کار را به راحتی انجام...رایگان
هشتگ ها :
این محصول بدون نظر می باشد شما میتوانید اولین نظر را ثبت کنید