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

 

¿Desea agregar un efecto de cambio de color de fondo suave a su sitio de WordPress? Es posible que haya visto en algunos sitios web populares que el color de fondo de un área determinada o de toda la página web cambia automáticamente de un color a otro. Este agradable 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 en WordPress.

Agregar un efecto para cambiar el color de fondo en WordPress

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

El efecto de cambiar el color de fondo le permite cambiar entre diferentes colores de fondo automáticamente. El cambio se realiza lentamente a través de diferentes colores hasta alcanzar el color final. Se parece a esto:

Animación del efecto de cambio de color.

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

Echemos un vistazo a cómo agregar este efecto de cambio de color de fondo suave a cualquier tema de WordPress.

Agregar un efecto para cambiar el color de fondo en WordPress

En este tutorial, debe pegar código en sus archivos de WordPress. Si aún no lo ha hecho, consulte nuestra guía sobre cómo copiar y pegar código en WordPress.

Primero, debe determinar la clase CSS del área que desea cambiar. Puede hacer esto usando la herramienta Inspeccionar en su navegador. Simplemente pase el mouse sobre el área que desea cambiar y haga clic derecho para seleccionar la herramienta de inspección.

Encuentra la clase CSS

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

El siguiente paso es 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 a su 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, encontrará que usamos la clase CSS que queremos apuntar en el código. También agregamos cuatro colores. Nuestro efecto de fondo suave comienza con el primer color, luego cambia al siguiente color y continúa pasando por esos 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 a través de FTP. Si su tema no tiene una carpeta js, deberá crear una.

Sube tu archivo javascript

Una vez que haya cargado su archivo JavaScript, es hora de cargarlo en WordPress.

Deberá 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 cargará 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 del cambio de color de fondo suave en el área que apunta.

Hay muchas otras formas de usar colores de fondo en WordPress para captar la atención de los usuarios o hacer que su contenido destaque. 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 en WordPress. Es posible que también desee ver nuestra lista de los mejores complementos de creación de páginas de WordPress para probar.