Cómo agregar un efecto de cambio de color de fondo suave en WordPress

¿Quiere agregar un efecto de cambio de color de fondo suave en su sitio de WordPress? Es posible que haya visto en algunos sitios web populares donde el color de fondo de un área específica o toda la página web cambia automáticamente de un color a otro. Este hermoso efecto puede ayudarlo a captar la atención de los usuarios y mejorar la participación en su sitio web. En este artículo, le mostraremos cómo agregar fácilmente un efecto de cambio de color de fondo suave en WordPress.

¿Qué es el efecto de cambio de color de fondo suave?

El efecto de cambio de color de fondo suave le permite cambiar automáticamente entre diferentes colores de fondo. El cambio se produce lentamente pasando por distintos colores hasta llegar al color final. Se parece a esto:

Esta técnica se utiliza para captar la atención del usuario con efectos delicados y agradables a la vista.

Dicho esto, echemos un vistazo a cómo agregar este efecto de cambio de color de fondo suave en cualquier tema de WordPress.

Agregar un efecto de cambio de color de fondo suave en WordPress

Este tutorial requiere que agregue código en sus archivos de WordPress. Si nunca ha hecho esto antes, consulte nuestra guía sobre cómo copiar y pegar código en WordPress.

Primero, necesita averiguar la clase CSS del área que desea cambiar. Puede hacer esto usando la herramienta Inspeccionar en su navegador. Simplemente coloque el mouse sobre el área que desea editar y haga clic con el botón derecho para seleccionar la herramienta Inspeccionar.

A continuación, debe anotar la clase CSS a la que desea dirigirse. Por ejemplo, en la captura de pantalla anterior queremos apuntar al área del widget inferior que tiene la clase CSS ‘encabezado de página’.

En el siguiente paso, debe abrir un editor de texto sin formato en su computadora y crear un nuevo archivo. Necesita guardar este archivo como wpb-background-tutorial.js en su escritorio.

A continuación, debe agregar el siguiente código dentro del archivo 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);
        });
        }); 

Si estudia este código, notará que hemos utilizado la clase CSS que queremos apuntar en el código. También hemos agregado cuatro colores. Nuestro efecto de fondo suave comenzará desde el primer color, luego pasará al siguiente color y continuará fluyendo a través de estos colores.

No olvide guardar sus cambios en el archivo.

A continuación, debe cargar el archivo wpb-bg-tutorial.js en la carpeta / js / de su tema de WordPress mediante FTP. Si su tema no tiene una carpeta js, debe crear una.

Una vez que haya subido su archivo JavaScript, es hora de subirlo a WordPress.

Debe agregar el siguiente código al archivo functions.php de su tema.

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' ); 

Este código carga correctamente el archivo JavaScript y el script jQuery dependiente que necesita para que este código funcione.

Eso es todo, ahora puede visitar su sitio web para verlo en acción. Notará el efecto de cambio de color de fondo suave en el área que ha elegido como su objetivo.

Hay muchas otras formas de usar colores de fondo en WordPress para captar la atención del usuario o hacer que aparezca el contenido. Por ejemplo, puedes probar:

Esperamos que este artículo le haya ayudado a aprender cómo agregar fácilmente un efecto de cambio de color de fondo suave en WordPress. Es posible que también desee ver nuestra lista de los mejores plugins de creación de páginas de WordPress que puede probar.