How to Add Background Color Change Effect in WordPress ?– If you are not a Developer and expert in wordpress and not too much familier with it’s tool then read our this post. It will helps you in change your background color . However most of you guys have used Background Color Effect in day-to-day wordpress life even if you don’t know what How to Add Smooth Background Color Change Effect.
Do you want to add Smooth Background Color Change Effect on Your WordPress Website?
You may have seen some website which background color or specific area is automatically change into another color . This beautiful effect can help you in attract users and improve engagement on your website. In this post we will show you how to add background color change effect in wordpress which is helpul to increase your website traffic.
For more details visit at:- http://bscriptsource.com/
What is Background Color Change Effect and How they can Help ?
In Developers word: The background color change effect allows you automatically transit between different backround color s. The changes going slowly through different color until it rech final color .
This technique is mostly used to capture user attention with effective color that are comfortable for eyes.
Here we discuss some steps of How to Add Background Color Change effect in Below:-
This functionality needs you to add code in your wordpress files. If you don’t done this before, then you can take guide on how to copy and paste code in wordpress.
Step .1 – Firstly, We need to change a CSS class of the area that you want to change. You can do this by the using of tool in your browser. Simply Right click on the area which you want to be change.
Step.2 – We need to write the CSS class you want to target.
Step.3 – Now, Open a plain text editor on computer and create a new file and save it on your desktop.
Step. 4 – Now we need to add the code inside JS file:
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);
});
});
If you understood this code, then you will notice that we have choosed CSS class we want to target in the code. We choose four color and added in CSS file. Our smooth Background Color Effect will start from the first color then transit to the another color automatically. This process to be continued as well as you choose the color in CSS file.
Now need to be save all changes to the file.
Step.5 – Now we need to upload wpb-bg-tutorial.js file to WordPress theme’s /js/ folder using Cpanel or FTP. If you doesn’t have a JS folder inside it, then you should to create one.
After uploading JavaScript file, it’s time to upload it in WordPress.
We have need to add the following code to your theme’s functions.php file.
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’ );
To implement this code properly you need to load the JavaScript file and dependent jQuery code script that you must need to run this code.
Now, visit on your website to see it in action. The smooth background color change effects in your targeted area.
Also there are so many ways to use background colors in WordPress to attract visitors towards your website and make your content engaging. For example:-
Random background colors on each page load
Add parallax effects to any WordPress theme
Style individual posts with different backgrounds
Add full screen background images
Add full screen video backgrounds